From ccbddf6b0664c07b7646855cb066bd4008a24a70 Mon Sep 17 00:00:00 2001
From: Birte Rohden <birte.rohden@gmail.com>
Date: Tue, 10 Dec 2024 08:12:59 +0100
Subject: [PATCH] feat: :sparkles: set /dein-abo label dynamically

#TECH-1689
---
 .../components/src/IconButton/IconButton.d.ts |   1 +
 .../components/src/IconButton/IconButton.tsx  |   9 +-
 .../src/LegacyFooter/LegacyDesktopFooter.d.ts |   1 +
 .../src/LegacyFooter/LegacyDesktopFooter.tsx  | 288 +++++++++---------
 .../src/LegacyFooter/LegacyFooter.d.ts        |   1 +
 .../src/LegacyFooter/LegacyFooter.tsx         |  16 +-
 .../src/LegacyFooter/LegacyMobileFooter.d.ts  |   1 +
 .../src/LegacyFooter/LegacyMobileFooter.tsx   | 134 ++++----
 .../src/LegacyHeader/LegacyDesktopHeader.tsx  |  33 +-
 .../components/LegacyMainNav.d.ts             |   1 +
 .../LegacyHeader/components/LegacyMainNav.tsx | 256 ++++++++--------
 .../components/LegacyMobileNav.tsx            | 114 +++----
 .../src/LegacyPageLayout/LegacyPageLayout.tsx |   5 +-
 13 files changed, 446 insertions(+), 414 deletions(-)

diff --git a/packages/components/src/IconButton/IconButton.d.ts b/packages/components/src/IconButton/IconButton.d.ts
index 103e3d8a..9fa48f1f 100644
--- a/packages/components/src/IconButton/IconButton.d.ts
+++ b/packages/components/src/IconButton/IconButton.d.ts
@@ -23,5 +23,6 @@ export interface IconButtonATypeProps extends IconButtonBaseProps, Omit<AnchorHT
 }
 export type IconButtonProps = IconButtonATypeProps | IconButtonButtonTypeProps;
 export declare const iconButtonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ThemeProps & IconButtonProps, any>>;
+export declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, IconButtonProps, never>;
 declare const IconButton: React.FC<IconButtonProps>;
 export default IconButton;
diff --git a/packages/components/src/IconButton/IconButton.tsx b/packages/components/src/IconButton/IconButton.tsx
index ffc468c6..b71413cc 100644
--- a/packages/components/src/IconButton/IconButton.tsx
+++ b/packages/components/src/IconButton/IconButton.tsx
@@ -257,12 +257,7 @@ export const iconButtonStyles = css`
     `}
 `;
 
-const StyledIconButton = styled(
-  ({ expanded, icon, loading, ...rest }: IconButtonProps) => (
-    // eslint-disable-next-line react/button-has-type
-    <button {...rest} />
-  ),
-)<IconButtonProps>`
+export const StyledIconButton = styled.button<IconButtonProps>`
   ${iconButtonStyles}
 `;
 
@@ -314,7 +309,7 @@ const IconButton: React.FC<IconButtonProps> = (props) => {
   return (
     <StyledIconButton
       href={href}
-      as={href ? 'a' : as}
+      as={as}
       size={size}
       icon={icon}
       expanded={expanded}
diff --git a/packages/components/src/LegacyFooter/LegacyDesktopFooter.d.ts b/packages/components/src/LegacyFooter/LegacyDesktopFooter.d.ts
index 6277654b..650d3811 100644
--- a/packages/components/src/LegacyFooter/LegacyDesktopFooter.d.ts
+++ b/packages/components/src/LegacyFooter/LegacyDesktopFooter.d.ts
@@ -13,6 +13,7 @@ export type DesktopLinkGroupsType = {
 }[];
 export interface LegacyDesktopFooterProps {
     privacyManagerId: string;
+    isProMember?: boolean;
 }
 declare const LegacyDesktopFooter: React.FC<LegacyDesktopFooterProps>;
 export default LegacyDesktopFooter;
diff --git a/packages/components/src/LegacyFooter/LegacyDesktopFooter.tsx b/packages/components/src/LegacyFooter/LegacyDesktopFooter.tsx
index 1974d0a7..72b5a1bc 100644
--- a/packages/components/src/LegacyFooter/LegacyDesktopFooter.tsx
+++ b/packages/components/src/LegacyFooter/LegacyDesktopFooter.tsx
@@ -23,6 +23,7 @@ export type DesktopLinkGroupsType = {
 
 export interface LegacyDesktopFooterProps {
   privacyManagerId: string;
+  isProMember?: boolean;
 }
 
 const LegacyDesktopFooterWrapper = styled(Box)`
@@ -105,149 +106,150 @@ const LegacyExtraSmallText = styled(Text)`
   line-height: 1.5em !important;
 `;
 
-const legacyDesktopLinkGroups: DesktopLinkGroupsType = [
-  {
-    label: 'yeebase media',
-    links: [
-      {
-        label: 'Über t3n',
-        url: '/ueber-t3n/',
-      },
-      {
-        label: 'Team',
-        url: '/team',
-      },
-      {
-        label: 'Jobs bei t3n',
-        url: '/jobs-bei-t3n/',
-      },
-      {
-        label: 't3n Backstage Blog',
-        title: 'Die externe Seite im neuen Tab/Fenster öffnen',
-        url: 'https://medium.com/@t3nbackstageblog',
-        target: '_blank',
-        rel: 'noreferrer noopener',
-      },
-      {
-        label: 'Mediadaten',
-        url: '/mediadaten/de/',
-      },
-      {
-        label: 'Datenschutz',
-        url: '/datenschutz/',
-      },
-      {
-        label: 'Cookies & Tracking',
-        url: '#',
-        onClick: (e, id) => {
-          e.preventDefault();
-          // eslint-disable-next-line no-underscore-dangle
-          (window as any)._sp_.loadPrivacyManagerModal(id);
-        },
-      },
-      {
-        label: 'FAQ',
-        title: 'Die externe Seite im neuen Tab/Fenster öffnen',
-        url: 'https://faq.t3n.de/',
-        target: '_blank',
-        rel: 'noreferrer noopener',
-      },
-      {
-        label: 'Abo kündigen',
-        url: '/abo-kuendigen/',
-      },
-      {
-        label: 'Kontakt',
-        url: '/kontakt/',
-      },
-      {
-        label: 'AGB',
-        url: '/agb/',
-      },
-      {
-        label: 'Widerrufsbelehrung',
-        url: '/agb/#widerrufsbelehrung',
-      },
-      {
-        label: 'Impressum',
-        url: '/impressum/',
-      },
-    ],
-  },
-  {
-    label: 't3n',
-    links: [
-      {
-        label: 'Plus',
-        url: '/plus-artikel',
-      },
-      {
-        label: 'Digitale Abos',
-        url: 'https://l.t3n.de/abos',
-      },
-      {
-        label: 'News',
-        url: '/news/',
-      },
-      {
-        label: 'Magazin',
-        url: '/magazin/',
-      },
-      {
-        label: 'Podcasts',
-        url: '/podcast/',
-      },
-      {
-        label: 'Themen',
-        url: '/tag/',
-      },
-      {
-        label: 'Jobs',
-        url: 'https://jobs.t3n.de',
-      },
-      {
-        label: 'Events',
-        url: '/events/',
-      },
-      {
-        label: 'Shop',
-        url: '/store/',
-      },
-      {
-        label: 'Newsletter',
-        url: '/info/t3n-newsletter/',
-      },
-      {
-        label: 'Newsarchiv',
-        url: '/archive/',
-      },
-      {
-        label: 'BrandHubs',
-        url: '/brandhub/',
-      },
-    ],
-  },
-  {
-    label: 'RSS-Feeds',
-    links: [
-      {
-        label: 'Aktuelle News',
-        url: '/rss.xml',
-      },
-      {
-        label: 'Die neuesten Artikel',
-        title: 'Die externe Seite im neuen Tab/Fenster öffnen',
-        url: 'http://feeds2.feedburner.com/t3n-magazin/',
-        target: '_blank',
-        rel: 'noreferrer noopener',
-      },
-    ],
-  },
-];
-
 const LegacyDesktopLinks: React.FC<LegacyDesktopFooterProps> = ({
   privacyManagerId,
+  isProMember,
 }) => {
+  const legacyDesktopLinkGroups: DesktopLinkGroupsType = [
+    {
+      label: 'yeebase media',
+      links: [
+        {
+          label: 'Über t3n',
+          url: '/ueber-t3n/',
+        },
+        {
+          label: 'Team',
+          url: '/team',
+        },
+        {
+          label: 'Jobs bei t3n',
+          url: '/jobs-bei-t3n/',
+        },
+        {
+          label: 't3n Backstage Blog',
+          title: 'Die externe Seite im neuen Tab/Fenster öffnen',
+          url: 'https://medium.com/@t3nbackstageblog',
+          target: '_blank',
+          rel: 'noreferrer noopener',
+        },
+        {
+          label: 'Mediadaten',
+          url: '/mediadaten/de/',
+        },
+        {
+          label: 'Datenschutz',
+          url: '/datenschutz/',
+        },
+        {
+          label: 'Cookies & Tracking',
+          url: '#',
+          onClick: (e, id) => {
+            e.preventDefault();
+            // eslint-disable-next-line no-underscore-dangle
+            (window as any)._sp_.loadPrivacyManagerModal(id);
+          },
+        },
+        {
+          label: 'FAQ',
+          title: 'Die externe Seite im neuen Tab/Fenster öffnen',
+          url: 'https://faq.t3n.de/',
+          target: '_blank',
+          rel: 'noreferrer noopener',
+        },
+        {
+          label: 'Abo kündigen',
+          url: '/abo-kuendigen/',
+        },
+        {
+          label: 'Kontakt',
+          url: '/kontakt/',
+        },
+        {
+          label: 'AGB',
+          url: '/agb/',
+        },
+        {
+          label: 'Widerrufsbelehrung',
+          url: '/agb/#widerrufsbelehrung',
+        },
+        {
+          label: 'Impressum',
+          url: '/impressum/',
+        },
+      ],
+    },
+    {
+      label: 't3n',
+      links: [
+        {
+          label: isProMember ? 'Pro' : 'Plus',
+          url: '/dein-abo',
+        },
+        {
+          label: 'Digitale Abos',
+          url: 'https://l.t3n.de/abos',
+        },
+        {
+          label: 'News',
+          url: '/news/',
+        },
+        {
+          label: 'Magazin',
+          url: '/magazin/',
+        },
+        {
+          label: 'Podcasts',
+          url: '/podcast/',
+        },
+        {
+          label: 'Themen',
+          url: '/tag/',
+        },
+        {
+          label: 'Jobs',
+          url: 'https://jobs.t3n.de',
+        },
+        {
+          label: 'Events',
+          url: '/events/',
+        },
+        {
+          label: 'Shop',
+          url: '/store/',
+        },
+        {
+          label: 'Newsletter',
+          url: '/info/t3n-newsletter/',
+        },
+        {
+          label: 'Newsarchiv',
+          url: '/archive/',
+        },
+        {
+          label: 'BrandHubs',
+          url: '/brandhub/',
+        },
+      ],
+    },
+    {
+      label: 'RSS-Feeds',
+      links: [
+        {
+          label: 'Aktuelle News',
+          url: '/rss.xml',
+        },
+        {
+          label: 'Die neuesten Artikel',
+          title: 'Die externe Seite im neuen Tab/Fenster öffnen',
+          url: 'http://feeds2.feedburner.com/t3n-magazin/',
+          target: '_blank',
+          rel: 'noreferrer noopener',
+        },
+      ],
+    },
+  ];
+
   return (
     <DesktopLinkWrapper>
       {legacyDesktopLinkGroups.map((group) => (
@@ -388,6 +390,7 @@ const LegacyDesktopBottom = () => {
 
 const LegacyDesktopFooter: React.FC<LegacyDesktopFooterProps> = ({
   privacyManagerId,
+  isProMember,
 }) => {
   return (
     <LegacyDesktopFooterWrapper>
@@ -397,7 +400,10 @@ const LegacyDesktopFooter: React.FC<LegacyDesktopFooterProps> = ({
             Spreading knowledge &amp; future optimism.
           </MissonStatement>
         </GridItem>
-        <LegacyDesktopLinks privacyManagerId={privacyManagerId} />
+        <LegacyDesktopLinks
+          privacyManagerId={privacyManagerId}
+          isProMember={isProMember}
+        />
       </Box>
       <LegacyDesktopBottom />
     </LegacyDesktopFooterWrapper>
diff --git a/packages/components/src/LegacyFooter/LegacyFooter.d.ts b/packages/components/src/LegacyFooter/LegacyFooter.d.ts
index e7a1a589..29e723e2 100644
--- a/packages/components/src/LegacyFooter/LegacyFooter.d.ts
+++ b/packages/components/src/LegacyFooter/LegacyFooter.d.ts
@@ -1,6 +1,7 @@
 import React from 'react';
 export interface LegacyFooterProps {
     privacyManagerId: string;
+    isProMember?: boolean;
 }
 declare const LegacyFooter: React.FC<LegacyFooterProps>;
 export default LegacyFooter;
diff --git a/packages/components/src/LegacyFooter/LegacyFooter.tsx b/packages/components/src/LegacyFooter/LegacyFooter.tsx
index 2992f544..0e32d0a0 100644
--- a/packages/components/src/LegacyFooter/LegacyFooter.tsx
+++ b/packages/components/src/LegacyFooter/LegacyFooter.tsx
@@ -8,6 +8,7 @@ import LegacyMobileFooter from './LegacyMobileFooter';
 
 export interface LegacyFooterProps {
   privacyManagerId: string;
+  isProMember?: boolean;
 }
 
 const Footer = styled(Box)`
@@ -15,7 +16,10 @@ const Footer = styled(Box)`
     color({ theme, bg: 'shades.grey232', color: 'text.secondary' })};
 `;
 
-const LegacyFooter: React.FC<LegacyFooterProps> = ({ privacyManagerId }) => {
+const LegacyFooter: React.FC<LegacyFooterProps> = ({
+  privacyManagerId,
+  isProMember,
+}) => {
   return (
     <Footer
       className="tg-footer"
@@ -24,10 +28,16 @@ const LegacyFooter: React.FC<LegacyFooterProps> = ({ privacyManagerId }) => {
       pb={['5rem', '5rem', '1.5625rem']}
     >
       <Box display={['block', 'block', 'none']}>
-        <LegacyMobileFooter privacyManagerId={privacyManagerId} />
+        <LegacyMobileFooter
+          privacyManagerId={privacyManagerId}
+          isProMember={isProMember}
+        />
       </Box>
       <Box display={['none', 'none', 'block']}>
-        <LegacyDesktopFooter privacyManagerId={privacyManagerId} />
+        <LegacyDesktopFooter
+          privacyManagerId={privacyManagerId}
+          isProMember={isProMember}
+        />
       </Box>
     </Footer>
   );
diff --git a/packages/components/src/LegacyFooter/LegacyMobileFooter.d.ts b/packages/components/src/LegacyFooter/LegacyMobileFooter.d.ts
index 4e00f346..80e535c3 100644
--- a/packages/components/src/LegacyFooter/LegacyMobileFooter.d.ts
+++ b/packages/components/src/LegacyFooter/LegacyMobileFooter.d.ts
@@ -10,6 +10,7 @@ export type MobileLinkType = {
 }[];
 export interface LegacyMobileFooterProps {
     privacyManagerId: string;
+    isProMember?: boolean;
 }
 declare const LegacyMobileFooter: React.FC<LegacyMobileFooterProps>;
 export default LegacyMobileFooter;
diff --git a/packages/components/src/LegacyFooter/LegacyMobileFooter.tsx b/packages/components/src/LegacyFooter/LegacyMobileFooter.tsx
index 5edb505e..0fb862a7 100644
--- a/packages/components/src/LegacyFooter/LegacyMobileFooter.tsx
+++ b/packages/components/src/LegacyFooter/LegacyMobileFooter.tsx
@@ -18,6 +18,7 @@ export type MobileLinkType = {
 
 export interface LegacyMobileFooterProps {
   privacyManagerId: string;
+  isProMember?: boolean;
 }
 
 const FooterLink = styled.a`
@@ -58,72 +59,73 @@ const SmallerText = styled(Text)`
     })};
 `;
 
-const legacyMobileLinks: MobileLinkType = [
-  {
-    label: 'Plus',
-    url: '/plus-artikel',
-  },
-  {
-    label: 'Digitale Abos',
-    url: 'https://l.t3n.de/abos',
-  },
-  {
-    label: 'Team',
-    url: '/team',
-  },
-  {
-    label: 'Jobs bei t3n',
-    url: '/jobs-bei-t3n/',
-  },
-  {
-    label: 'Mediadaten',
-    url: '/mediadaten/de/',
-  },
-  {
-    label: 'Datenschutz',
-    url: '/datenschutz/',
-  },
-  {
-    label: 'Cookies & Tracking',
-    url: '#',
-    onClick: (e, id) => {
-      e.preventDefault();
-      // eslint-disable-next-line no-underscore-dangle
-      (window as any)._sp_.loadPrivacyManagerModal(id);
-    },
-  },
-  {
-    label: 'FAQ',
-    title: 'Die externe Seite im neuen Tab/Fenster öffnen',
-    url: 'https://faq.t3n.de/',
-    target: '_blank',
-    rel: 'noreferrer noopener',
-  },
-  {
-    label: 'Abo kündigen',
-    url: '/abo-kuendigen/',
-  },
-  {
-    label: 'Kontakt',
-    url: '/kontakt/',
-  },
-  {
-    label: 'AGB',
-    url: '/agb/',
-  },
-  {
-    label: 'Widerrufsbelehrung',
-    url: '/agb/#widerrufsbelehrung',
-  },
-  {
-    label: 'Impressum',
-    url: '/impressum/',
-  },
-];
-
 const LegacyMobileLinks: React.FC<LegacyMobileFooterProps> = ({
   privacyManagerId,
+  isProMember,
 }) => {
+  const legacyMobileLinks: MobileLinkType = [
+    {
+      label: isProMember ? 'Pro' : 'Plus',
+      url: '/dein-abo',
+    },
+    {
+      label: 'Digitale Abos',
+      url: 'https://l.t3n.de/abos',
+    },
+    {
+      label: 'Team',
+      url: '/team',
+    },
+    {
+      label: 'Jobs bei t3n',
+      url: '/jobs-bei-t3n/',
+    },
+    {
+      label: 'Mediadaten',
+      url: '/mediadaten/de/',
+    },
+    {
+      label: 'Datenschutz',
+      url: '/datenschutz/',
+    },
+    {
+      label: 'Cookies & Tracking',
+      url: '#',
+      onClick: (e, id) => {
+        e.preventDefault();
+        // eslint-disable-next-line no-underscore-dangle
+        (window as any)._sp_.loadPrivacyManagerModal(id);
+      },
+    },
+    {
+      label: 'FAQ',
+      title: 'Die externe Seite im neuen Tab/Fenster öffnen',
+      url: 'https://faq.t3n.de/',
+      target: '_blank',
+      rel: 'noreferrer noopener',
+    },
+    {
+      label: 'Abo kündigen',
+      url: '/abo-kuendigen/',
+    },
+    {
+      label: 'Kontakt',
+      url: '/kontakt/',
+    },
+    {
+      label: 'AGB',
+      url: '/agb/',
+    },
+    {
+      label: 'Widerrufsbelehrung',
+      url: '/agb/#widerrufsbelehrung',
+    },
+    {
+      label: 'Impressum',
+      url: '/impressum/',
+    },
+  ];
+
   return (
     <MobileLinksWrapper display="grid" flexDirection="column">
       {legacyMobileLinks.map((link) => (
@@ -151,10 +153,14 @@ const LegacyMobileLinks: React.FC<LegacyMobileFooterProps> = ({
 
 const LegacyMobileFooter: React.FC<LegacyMobileFooterProps> = ({
   privacyManagerId,
+  isProMember,
 }) => {
   return (
     <>
-      <LegacyMobileLinks privacyManagerId={privacyManagerId} />
+      <LegacyMobileLinks
+        privacyManagerId={privacyManagerId}
+        isProMember={isProMember}
+      />
       <LegacySocialBar isInFooter />
       <SmallerText align="center">
         ©{' '}
diff --git a/packages/components/src/LegacyHeader/LegacyDesktopHeader.tsx b/packages/components/src/LegacyHeader/LegacyDesktopHeader.tsx
index aea5189d..5e3be3d7 100644
--- a/packages/components/src/LegacyHeader/LegacyDesktopHeader.tsx
+++ b/packages/components/src/LegacyHeader/LegacyDesktopHeader.tsx
@@ -6,7 +6,7 @@ import { MaterialAutorenew } from '@t3n/icons';
 import { ThemeProps } from '@t3n/theme';
 
 import Box from '../Box';
-import IconButton from '../IconButton';
+import IconButton, { StyledIconButton } from '../IconButton';
 import Image from '../Image';
 import LegacyAd from '../LegacyAd';
 import Logo from '../Logo';
@@ -172,18 +172,20 @@ const HeaderWrapper = styled(Header)`
   }
 `;
 
-const HeaderIconButton = styled(IconButton)`
-  ${({ theme }) => color({ theme, color: 'text.secondary' })};
-  ${({ theme }) => border({ theme, borderColor: 'text.secondary' })}
+const StyledHeaderIconBox = styled(Box)`
+  ${StyledIconButton} {
+    ${({ theme }) => color({ theme, color: 'text.secondary' })};
+    ${({ theme }) => border({ theme, borderColor: 'text.secondary' })}
 
-  path {
-    fill: ${({ theme }: ThemeProps) => theme.colors.text.secondary};
-  }
-
-  &:hover,
-  &:focus {
     path {
-      fill: ${({ theme }: ThemeProps) => theme.colors.text.inverse};
+      fill: ${({ theme }: ThemeProps) => theme.colors.text.secondary};
+    }
+
+    &:hover,
+    &:focus {
+      path {
+        fill: ${({ theme }: ThemeProps) => theme.colors.text.inverse};
+      }
     }
   }
 `;
@@ -260,8 +262,9 @@ const LegacyDesktopHeader: React.FC<LegacyDesktopHeaderProps> = ({
               userEmail={userEmail}
               userMenuItems={userMenuItems}
             />
-            <Box display="flex" justifyContent="flex-end">
-              <HeaderIconButton
+            <StyledHeaderIconBox display="flex" justifyContent="flex-end">
+              <IconButton
+                as="a"
                 icon={MaterialAutorenew}
                 href="/abos"
                 variant="secondary"
@@ -269,12 +272,12 @@ const LegacyDesktopHeader: React.FC<LegacyDesktopHeaderProps> = ({
                 expanded
                 label="Digitale Abos"
               />
-            </Box>
+            </StyledHeaderIconBox>
           </Box>
         </VisualHeader>
 
         <Box display="flex" flexDirection="column">
-          <LegacyMainNav />
+          <LegacyMainNav isProMember={isProMember} />
           <LegacyTagNav tags={tags} loading={tagsLoading} />
         </Box>
       </HeaderWrapper>
diff --git a/packages/components/src/LegacyHeader/components/LegacyMainNav.d.ts b/packages/components/src/LegacyHeader/components/LegacyMainNav.d.ts
index 9be18238..742b7c73 100644
--- a/packages/components/src/LegacyHeader/components/LegacyMainNav.d.ts
+++ b/packages/components/src/LegacyHeader/components/LegacyMainNav.d.ts
@@ -1,5 +1,6 @@
 import React from 'react';
 export interface LegacyMainNavProps {
+    isProMember?: boolean;
     isSticky?: boolean;
 }
 export type MainNavLinkGroupsType = {
diff --git a/packages/components/src/LegacyHeader/components/LegacyMainNav.tsx b/packages/components/src/LegacyHeader/components/LegacyMainNav.tsx
index df36582f..5eaa7ed6 100644
--- a/packages/components/src/LegacyHeader/components/LegacyMainNav.tsx
+++ b/packages/components/src/LegacyHeader/components/LegacyMainNav.tsx
@@ -17,6 +17,7 @@ import Text from '../../Text';
 import HeaderLink from './LegacyHeaderLink';
 
 export interface LegacyMainNavProps {
+  isProMember?: boolean;
   isSticky?: boolean;
 }
 
@@ -157,133 +158,136 @@ export const Indicator = styled.span`
     color({ theme, color: 'shades.white', bg: 'background.highlight' })};
 `;
 
-const mainNavLinkGroups: MainNavLinkGroupsType[] = [
-  {
-    label: 'Plus',
-    url: '/plus-artikel',
-    indicator: true,
-  },
-  {
-    label: 'News',
-    url: '/news/',
-    indicator: true,
-  },
-  {
-    label: 'Magazin',
-    url: '/magazin/',
-  },
-  {
-    label: 'Wissen',
-    dropdownLinks: [
-      {
-        label: 'Guides',
-        url: '/guides/',
-      },
-      {
-        label: 'Onlinekurse',
-        url: '/online-kurse/',
-      },
-      {
-        label: 'Ratgeber',
-        url: '/ratgeber/',
-      },
-      {
-        label: 'Tests & Tools',
-        url: '/tests-tools/',
-      },
-      {
-        label: 'Podcasts',
-        url: '/podcast/',
-      },
-      {
-        label: 'Newsletter',
-        url: '/info/t3n-newsletter/',
-      },
-      {
-        label: 'Quiz',
-        url: '/quiz/',
-      },
-    ],
-  },
-  {
-    label: 'Themen',
-    url: '/tag/',
-    dropdownLinks: [
-      {
-        label: 'Software & Entwicklung',
-        url: '/tag/software-entwicklung/',
-      },
-      {
-        label: 'UX & Design',
-        url: '/tag/ux-and-design/',
-      },
-      {
-        label: 'Marketing',
-        url: '/tag/marketing/',
-      },
-      {
-        label: 'Hardware & Gadgets',
-        url: '/tag/hardware-gadgets/',
-      },
-      {
-        label: 'Startups & Economy',
-        url: '/tag/startups-economy/',
-      },
-      {
-        label: 'Arbeitswelt',
-        url: '/tag/arbeitswelt/',
-      },
-      {
-        label: 'E-Commerce',
-        url: '/tag/e-commerce/',
-      },
-      {
-        label: 'New Finance',
-        url: '/tag/finance/',
-      },
-      {
-        label: 'Gaming',
-        url: '/tag/gaming/',
-      },
-      {
-        label: 'Mobilität',
-        url: '/tag/mobilitaet/',
-      },
-      {
-        label: 'Future & Science',
-        url: '/tag/future-science/',
-      },
-      {
-        label: 'Buzz & Memes',
-        url: '/tag/buzz-memes/',
-      },
-    ],
-  },
-  {
-    label: 'Jobs',
-    url: 'https://jobs.t3n.de',
-  },
-  {
-    label: 'Events',
-    url: '/events/',
-    dropdownLinks: [
-      {
-        label: 'Eventkalender',
-        url: '/events/',
-      },
-      {
-        label: 'Medienkooperationen',
-        url: '/events/pakete/',
-      },
-    ],
-  },
-  {
-    label: 'Shop',
-    url: '/store/',
-  },
-];
+const LegacyMainNav: React.FC<LegacyMainNavProps> = ({
+  isProMember,
+  isSticky,
+}) => {
+  const mainNavLinkGroups: MainNavLinkGroupsType[] = [
+    {
+      label: isProMember ? 'Pro' : 'Plus',
+      url: '/dein-abo',
+      indicator: true,
+    },
+    {
+      label: 'News',
+      url: '/news/',
+      indicator: true,
+    },
+    {
+      label: 'Magazin',
+      url: '/magazin/',
+    },
+    {
+      label: 'Wissen',
+      dropdownLinks: [
+        {
+          label: 'Guides',
+          url: '/guides/',
+        },
+        {
+          label: 'Onlinekurse',
+          url: '/online-kurse/',
+        },
+        {
+          label: 'Ratgeber',
+          url: '/ratgeber/',
+        },
+        {
+          label: 'Tests & Tools',
+          url: '/tests-tools/',
+        },
+        {
+          label: 'Podcasts',
+          url: '/podcast/',
+        },
+        {
+          label: 'Newsletter',
+          url: '/info/t3n-newsletter/',
+        },
+        {
+          label: 'Quiz',
+          url: '/quiz/',
+        },
+      ],
+    },
+    {
+      label: 'Themen',
+      url: '/tag/',
+      dropdownLinks: [
+        {
+          label: 'Software & Entwicklung',
+          url: '/tag/software-entwicklung/',
+        },
+        {
+          label: 'UX & Design',
+          url: '/tag/ux-and-design/',
+        },
+        {
+          label: 'Marketing',
+          url: '/tag/marketing/',
+        },
+        {
+          label: 'Hardware & Gadgets',
+          url: '/tag/hardware-gadgets/',
+        },
+        {
+          label: 'Startups & Economy',
+          url: '/tag/startups-economy/',
+        },
+        {
+          label: 'Arbeitswelt',
+          url: '/tag/arbeitswelt/',
+        },
+        {
+          label: 'E-Commerce',
+          url: '/tag/e-commerce/',
+        },
+        {
+          label: 'New Finance',
+          url: '/tag/finance/',
+        },
+        {
+          label: 'Gaming',
+          url: '/tag/gaming/',
+        },
+        {
+          label: 'Mobilität',
+          url: '/tag/mobilitaet/',
+        },
+        {
+          label: 'Future & Science',
+          url: '/tag/future-science/',
+        },
+        {
+          label: 'Buzz & Memes',
+          url: '/tag/buzz-memes/',
+        },
+      ],
+    },
+    {
+      label: 'Jobs',
+      url: 'https://jobs.t3n.de',
+    },
+    {
+      label: 'Events',
+      url: '/events/',
+      dropdownLinks: [
+        {
+          label: 'Eventkalender',
+          url: '/events/',
+        },
+        {
+          label: 'Medienkooperationen',
+          url: '/events/pakete/',
+        },
+      ],
+    },
+    {
+      label: 'Shop',
+      url: '/store/',
+    },
+  ];
 
-const LegacyMainNav: React.FC<LegacyMainNavProps> = ({ isSticky }) => {
   return (
     <MainNavWrapper className="tg-menu" isSticky={isSticky}>
       <MainNavInnerWrapper isSticky={isSticky}>
diff --git a/packages/components/src/LegacyHeader/components/LegacyMobileNav.tsx b/packages/components/src/LegacyHeader/components/LegacyMobileNav.tsx
index 642c31a0..e9d0e406 100644
--- a/packages/components/src/LegacyHeader/components/LegacyMobileNav.tsx
+++ b/packages/components/src/LegacyHeader/components/LegacyMobileNav.tsx
@@ -158,63 +158,6 @@ const SearchForm = styled.form`
   ${({ theme }) => space({ theme, p: 3, mt: -1 })};
 `;
 
-const mobileNavLinks: MobileNavLinksType[] = [
-  {
-    label: 'Plus',
-    url: '/plus-artikel',
-    indicator: false,
-  },
-  {
-    label: 'News',
-    url: '/news/',
-    indicator: false,
-  },
-  {
-    label: 'Magazin',
-    url: '/magazin/',
-  },
-  {
-    label: 'Guides',
-    url: '/guides/',
-  },
-  {
-    label: 'Onlinekurse',
-    url: '/online-kurse/',
-  },
-  {
-    label: 'Ratgeber',
-    url: '/ratgeber/',
-  },
-  {
-    label: 'Tests & Tools',
-    url: '/tests-tools/',
-  },
-  {
-    label: 'Podcasts',
-    url: '/podcast/',
-  },
-  {
-    label: 'Quiz',
-    url: '/quiz/',
-  },
-  {
-    label: 'Themen',
-    url: '/tag/',
-  },
-  {
-    label: 'Jobs',
-    url: 'https://jobs.t3n.de',
-  },
-  {
-    label: 'Events',
-    url: '/events/',
-  },
-  {
-    label: 'Shop',
-    url: '/store/',
-  },
-];
-
 const LegacyMobileNav: React.FC<LegacyMobileNavProps> = ({
   headerCampaignUrl,
   headerCampaignImageMobile,
@@ -224,6 +167,63 @@ const LegacyMobileNav: React.FC<LegacyMobileNavProps> = ({
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
+  const mobileNavLinks: MobileNavLinksType[] = [
+    {
+      label: isProMember ? 'Pro' : 'Plus',
+      url: '/dein-abo',
+      indicator: false,
+    },
+    {
+      label: 'News',
+      url: '/news/',
+      indicator: false,
+    },
+    {
+      label: 'Magazin',
+      url: '/magazin/',
+    },
+    {
+      label: 'Guides',
+      url: '/guides/',
+    },
+    {
+      label: 'Onlinekurse',
+      url: '/online-kurse/',
+    },
+    {
+      label: 'Ratgeber',
+      url: '/ratgeber/',
+    },
+    {
+      label: 'Tests & Tools',
+      url: '/tests-tools/',
+    },
+    {
+      label: 'Podcasts',
+      url: '/podcast/',
+    },
+    {
+      label: 'Quiz',
+      url: '/quiz/',
+    },
+    {
+      label: 'Themen',
+      url: '/tag/',
+    },
+    {
+      label: 'Jobs',
+      url: 'https://jobs.t3n.de',
+    },
+    {
+      label: 'Events',
+      url: '/events/',
+    },
+    {
+      label: 'Shop',
+      url: '/store/',
+    },
+  ];
+
   return (
     <Box>
       {menuOpen && <Overlay onClick={() => setMenuOpen(!menuOpen)} />}
diff --git a/packages/components/src/LegacyPageLayout/LegacyPageLayout.tsx b/packages/components/src/LegacyPageLayout/LegacyPageLayout.tsx
index 6816b1e4..2743d897 100644
--- a/packages/components/src/LegacyPageLayout/LegacyPageLayout.tsx
+++ b/packages/components/src/LegacyPageLayout/LegacyPageLayout.tsx
@@ -78,7 +78,10 @@ const LegacyPageLayout: React.FC<LegacyPageLayoutProps> = ({
         >
           {children}
         </Box>
-        <LegacyFooter privacyManagerId={privacyManagerId} />
+        <LegacyFooter
+          privacyManagerId={privacyManagerId}
+          isProMember={isProMember}
+        />
       </Wrapper>
     </>
   );