feat(ui): finalize E-TIB modernization with footer redesign, video optimization, and TS fixes

Former-commit-id: 67ac02c8404cc66893fdf97308574701cca6000c

app/[locale]/[slug]/page.tsx

@@ -7,18 +7,25 @@ import { mapSlugToFileSlug, mapFileSlugToTranslated } from '@/lib/slugs';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import { SITE_URL } from '@/lib/schema';
 import TrackedLink from '@/components/analytics/TrackedLink';
+import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
 
 // Import components used in MDX
 import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
 import { SubCompanyTiles as HomeSubCompanyTiles } from '@/components/blocks/SubCompanyTiles';
 import { CompetenceBentoGrid as HomeCompetenceBentoGrid } from '@/components/blocks/CompetenceBentoGrid';
 import { ReferencesSlider as HomeReferencesSlider } from '@/components/blocks/ReferencesSlider';
+import { CompanyTimeline } from '@/components/blocks/CompanyTimeline';
+import { JobListingBlock } from '@/components/blocks/JobListingBlock';
+import { CallToAction } from '@/components/blocks/CallToAction';
 
 const mdxComponents = {
   HomeHero,
   HomeSubCompanyTiles,
   HomeCompetenceBentoGrid,
   HomeReferencesSlider,
+  CompanyTimeline,
+  JobListingBlock,
+  CallToAction,
 };
 
 interface PageProps {
@@ -148,16 +155,19 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
               <p className="text-lg text-white/70 mb-8">{t('supportTeamAvailable')}</p>
               <TrackedLink
                 href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`}
-                className="inline-flex items-center px-8 py-4 bg-accent text-primary-dark font-bold rounded-full hover:bg-white transition-all duration-300 group/link"
+                className={getButtonClasses('accent', 'lg')}
                 eventProperties={{
                   location: 'generic_page_support_cta',
                   page_slug: slug,
                 }}
               >
-                {t('contactUs')}
-                <span className="ml-2 transition-transform group-hover/link:translate-x-1">
-                  &rarr;
+                <span className="relative z-10 flex items-center justify-center gap-2 transition-colors duration-500 group-hover/btn:text-primary-dark">
+                  {t('contactUs')}
+                  <span className="ml-2 transition-transform group-hover/btn:translate-x-1">
+                    &rarr;
+                  </span>
                 </span>
+                <ButtonOverlay variant="accent" />
               </TrackedLink>
             </div>
           </div>

app/[locale]/error.tsx

@@ -29,10 +29,17 @@ export default function Error({
       stack: error?.stack,
       digest: error?.digest,
     });
+    
+    // Force solid header
+    document.body.setAttribute('data-force-solid-header', 'true');
+    return () => {
+      document.body.removeAttribute('data-force-solid-header');
+    };
   }, [error]);
 
   return (
-    <Container className="relative py-24 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
+    <>
+      <Container className="relative py-32 mt-16 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
       {/* Industrial Background Element */}
       <div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center">
         <span className="text-[20rem] font-bold select-none">500</span>
@@ -45,13 +52,13 @@ export default function Error({
         <Scribble variant="underline" className="w-full h-6 -bottom-2 left-0 text-saturated/40" />
       </div>
 
-      <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4">
+      <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-primary">
         {t('title')}
       </Heading>
 
-      <p className="text-white/60 mb-10 max-w-md text-lg">{t('description')}</p>
+      <p className="text-text-secondary mb-10 max-w-md text-lg mx-auto">{t('description')}</p>
 
-      <div className="flex flex-col sm:flex-row gap-4">
+      <div className="flex flex-col sm:flex-row gap-4 justify-center">
         <Button onClick={() => reset()} variant="saturated" size="lg">
           {t('tryAgain')}
         </Button>
@@ -63,5 +70,6 @@ export default function Error({
       {/* Decorative Industrial Line */}
       <div className="absolute top-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-b from-saturated/50 to-transparent" />
     </Container>
+    </>
   );
 }

app/[locale]/layout.tsx

@@ -60,7 +60,6 @@ export const viewport: Viewport = {
   themeColor: '#117c61',
 };
 
-import AutoBrochureModal from '@/components/AutoBrochureModal';
 
 export default async function Layout(props: {
   children: React.ReactNode;
@@ -93,8 +92,12 @@ export default async function Layout(props: {
       url: `/${safeLocale}/${await mapFileSlugToTranslated('ueber-uns', safeLocale)}` 
     },
     { 
-      label: safeLocale === 'de' ? 'Karriere & Messen' : 'Careers & Events', 
+      label: safeLocale === 'de' ? 'Karriere' : 'Careers', 
       url: `/${safeLocale}/${await mapFileSlugToTranslated('karriere', safeLocale)}` 
+    },
+    { 
+      label: safeLocale === 'de' ? 'Messen' : 'Events', 
+      url: `/${safeLocale}/${await mapFileSlugToTranslated('messen', safeLocale)}` 
     }
   ];
  
@@ -166,7 +169,7 @@ export default async function Layout(props: {
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link rel="preconnect" href="https://img.infra.mintel.me" />
       </head>
-      <body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark antialiased overflow-x-hidden">
+      <body className="flex flex-col min-h-screen font-sans antialiased overflow-x-hidden">
         <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
           <SkipLink />
           <Header navLinks={navLinks} />

app/[locale]/not-found.tsx

@@ -13,8 +13,9 @@ export default async function NotFound() {
 
   return (
     <>
+      <script dangerouslySetInnerHTML={{ __html: `document.body.setAttribute('data-force-solid-header', 'true');` }} />
       <ClientNotFoundTracker path="" />
-      <Container className="relative py-24 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
+      <Container className="relative py-32 mt-16 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
         {/* Industrial Background Element */}
         <div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center">
           <span className="text-[20rem] font-bold select-none">404</span>
@@ -34,7 +35,7 @@ export default async function NotFound() {
           {t('title')}
         </Heading>
 
-        <p className="text-text-secondary mb-10 max-w-md text-lg">{t('description')}</p>
+        <p className="text-text-secondary mb-10 max-w-md text-lg mx-auto">{t('description')}</p>
 
         {suggestedUrl && (
           <div className="mb-12 p-6 bg-accent/10 border border-accent/20 rounded-2xl animate-fade-in shadow-lg relative overflow-hidden group">
@@ -53,7 +54,7 @@ export default async function NotFound() {
           </div>
         )}
 
-        <div className="flex flex-col sm:flex-row gap-4">
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
           <Button href="/" variant={suggestedUrl ? 'outline' : 'accent'} size="lg">
             {t('cta')}
           </Button>
@@ -62,7 +63,6 @@ export default async function NotFound() {
           </Button>
         </div>
 
-        {/* Decorative Industrial Line */}
         <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-t from-accent/50 to-transparent" />
       </Container>
     </>

app/[locale]/page.tsx

@@ -4,6 +4,8 @@ import { notFound } from 'next/navigation';
 import { getMdxContent } from '@/lib/mdx';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 
+export const dynamic = 'force-dynamic';
+
 // Import components used in MDX
 import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
 import { SubCompanyTiles as HomeSubCompanyTiles } from '@/components/blocks/SubCompanyTiles';