fix(ui): remove dummy certificates from english page

- Hide CorporateBackground on mobile to prevent content overlap
- Increase Header padding on mobile for better logo spacing
- Reduce top spacing in HeroSection on mobile
- Change SubCompanyTiles to horizontally scrollable row on mobile
- Add bottom padding to Footer to clear MobileBottomNav
- Reduce Footer Bento card padding for compact mobile view

.turbo/turbo-lint.log

@@ -2,145 +2,4 @@
 > e-tib-nextjs@2.2.12 lint /Volumes/Alpha SSD/Coding/e-tib.com
 > eslint .
 
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/[slug]/page.tsx
-   1:20  warning  'redirect' is defined but never used                                                                                                                                                                                                                                                     @typescript-eslint/no-unused-vars
-  75:24  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/blog/[slug]/page.tsx
-   1:20  warning  'redirect' is defined but never used                                                                                                                                                                                                                                                     @typescript-eslint/no-unused-vars
-  39:24  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/error.tsx
-  7:30  warning  'AlertTriangle' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/not-found.tsx
-  6:10  warning  'Terminal' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/referenzen/[slug]/page.tsx
-  118:26  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/referenzen/page.tsx
-  1:21  warning  'Heading' is defined but never used  @typescript-eslint/no-unused-vars
-  1:30  warning  'Badge' is defined but never used    @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/app/[locale]/standorte/[slug]/page.tsx
-   9:10  warning  'getButtonClasses' is defined but never used  @typescript-eslint/no-unused-vars
-   9:28  warning  'ButtonOverlay' is defined but never used     @typescript-eslint/no-unused-vars
-  58:9   warning  't' is assigned a value but never used        @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/JsonLd.tsx
-   1:30  warning  'Graph' is defined but never used       @typescript-eslint/no-unused-vars
-  43:31  warning  '_' is assigned a value but never used  @typescript-eslint/no-unused-vars
-  48:29  warning  '_' is assigned a value but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/CertificatesBlock.tsx
-    6:10  warning  'Button' is defined but never used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   @typescript-eslint/no-unused-vars
-    9:10  warning  'FileText' is defined but never used                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 @typescript-eslint/no-unused-vars
-  102:5   warning  Error: Calling setState synchronously within an effect can trigger cascading renders
-
-Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
-* Update external systems with the latest state from React.
-* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
-
-Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/CertificatesBlock.tsx:102:5
-  100 |
-  101 |   useEffect(() => {
-> 102 |     setIsMounted(true);
-      |     ^^^^^^^^^^^^ Avoid calling setState() directly within an effect
-  103 |   }, []);
-  104 |
-  105 |   const badgeText = badge || 'Zertifizierungen & Nachweise';  react-hooks/set-state-in-effect
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/CompetenceBentoGrid.tsx
-  53:5  warning  Error: Calling setState synchronously within an effect can trigger cascading renders
-
-Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
-* Update external systems with the latest state from React.
-* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
-
-Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/CompetenceBentoGrid.tsx:53:5
-  51 |   
-  52 |   useEffect(() => {
-> 53 |     setIsMounted(true);
-     |     ^^^^^^^^^^^^ Avoid calling setState() directly within an effect
-  54 |   }, []);
-  55 |
-  56 |   const badge = props.badge || data?.badge || 'Leistungsspektrum';  react-hooks/set-state-in-effect
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/HeroVideo.tsx
-   5:18  warning  'AnimatePresence' is defined but never used  @typescript-eslint/no-unused-vars
-   6:10  warning  'useState' is defined but never used         @typescript-eslint/no-unused-vars
-   6:20  warning  'useEffect' is defined but never used        @typescript-eslint/no-unused-vars
-  45:12  warning  'e' is defined but never used                @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/InteractiveGermanyMap.tsx
-   5:18  warning  'Factory' is defined but never used              @typescript-eslint/no-unused-vars
-   5:27  warning  'Zap' is defined but never used                  @typescript-eslint/no-unused-vars
-  56:9   warning  'hq' is assigned a value but never used          @typescript-eslint/no-unused-vars
-  57:9   warning  'branch' is assigned a value but never used      @typescript-eslint/no-unused-vars
-  58:9   warning  'projects' is assigned a value but never used    @typescript-eslint/no-unused-vars
-  59:9   warning  'minorNodes' is assigned a value but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/ReferencesSlider.test.tsx
-  20:12  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/SubCompanyTiles.tsx
-  92:19  warning  'CardWrapper' is assigned a value but never used   @typescript-eslint/no-unused-vars
-  93:19  warning  'wrapperProps' is assigned a value but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/blocks/TeamGridBlock.tsx
-  20:39  warning  'title' is defined but never used. Allowed unused args must match /^_/u                 @typescript-eslint/no-unused-vars
-  20:46  warning  'department' is defined but never used. Allowed unused args must match /^_/u            @typescript-eslint/no-unused-vars
-  20:58  warning  'showContact' is assigned a value but never used. Allowed unused args must match /^_/u  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/decorations/CorporateBackground.tsx
-  36:13  warning  'distance' is assigned a value but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/home/Hero.tsx
-   9:39  warning  'useCallback' is defined but never used                                                                                         @typescript-eslint/no-unused-vars
-  77:6   warning  React Hook useEffect has missing dependencies: 'HERO_PLACEHOLDERS' and 't'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/home/MeetTheTeam.tsx
-  8:9  warning  'teamT' is assigned a value but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/layout/Footer.tsx
-  4:35  warning  'Accessibility' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/providers/InitialLoader.tsx
-  5:8  warning  'Image' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/providers/PageTransitionShutter.tsx
-  6:8  warning  'Image' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/search/AIOrb.tsx
-  153:13  warning  'breathe' is assigned a value but never used       @typescript-eslint/no-unused-vars
-  212:15  warning  'targetExcite' is assigned a value but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/search/AISearchResults.tsx
-  100:6  warning  React Hook useEffect has missing dependencies: 'handleSearch' and 'initialQuery'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
-
-/Volumes/Alpha SSD/Coding/e-tib.com/components/ui/AnimatedCounter.tsx
-  3:28  warning  'useState' is defined but never used  @typescript-eslint/no-unused-vars
-
-/Volumes/Alpha SSD/Coding/e-tib.com/lib/blog.ts
-   6:7  warning  'BLOG_DIR' is assigned a value but never used    @typescript-eslint/no-unused-vars
-  94:7  warning  'next' is never reassigned. Use 'const' instead  prefer-const
-  95:7  warning  'prev' is never reassigned. Use 'const' instead  prefer-const
-
-/Volumes/Alpha SSD/Coding/e-tib.com/lib/standorte-data.ts
-  1:10  warning  'LucideIcon' is defined but never used  @typescript-eslint/no-unused-vars
-  1:22  warning  'MapPin' is defined but never used      @typescript-eslint/no-unused-vars
-  1:30  warning  'Building2' is defined but never used   @typescript-eslint/no-unused-vars
-  1:41  warning  'HardHat' is defined but never used     @typescript-eslint/no-unused-vars
-  1:50  warning  'Phone' is defined but never used       @typescript-eslint/no-unused-vars
-  1:57  warning  'Mail' is defined but never used        @typescript-eslint/no-unused-vars
-  1:63  warning  'Navigation' is defined but never used  @typescript-eslint/no-unused-vars
-
-✖ 56 problems (0 errors, 56 warnings)
-  0 errors and 2 warnings potentially fixable with the `--fix` option.
-
+ ELIFECYCLE  Command failed.

.turbo/turbo-test.log

@@ -5,33 +5,51 @@
 
  RUN  v4.1.2 /Volumes/Alpha SSD/Coding/e-tib.com
 
-(node:74132) [DEP0205] DeprecationWarning: `module.register()` is deprecated. Use `module.registerHooks()` instead.
+(node:64961) [DEP0205] DeprecationWarning: `module.register()` is deprecated. Use `module.registerHooks()` instead.
 (Use `node --trace-deprecation ...` to show where the warning was created)
- ✓ tests/homepage-and-competence-content.test.ts (4 tests) 10ms
- ✓ tests/task-12-links.test.ts (2 tests) 5ms
- ✓ tests/mdx-links.test.ts (1 test) 11ms
- ✓ tests/legal-pages.test.ts (2 tests) 15ms
- ✓ tests/messen-content.test.ts (2 tests) 30ms
- ✓ lib/mail/mailer.test.ts (1 test) 4ms
- ✓ components/search/AISearchResults.test.tsx (1 test) 25ms
+ ✓ tests/mdx-links.test.ts (1 test) 29ms
+ ✓ tests/homepage-and-competence-content.test.ts (4 tests) 14ms
+ ❯ tests/legal-pages.test.ts (2 tests | 1 failed) 9ms
+     ✓ should contain highly professional B2B sections in German AGB 5ms
+     × should contain professional corresponding B2B sections in English Terms 2ms
+ ✓ tests/task-12-links.test.ts (2 tests) 8ms
+ ✓ tests/messen-content.test.ts (2 tests) 8ms
+ ✓ lib/mail/mailer.test.ts (1 test) 7ms
 stderr | components/layout/LanguageSwitcher.test.tsx > LanguageSwitcher TDD > translates /en/trade-fairs to /de/messen when switching to German
 React does not recognize the `transitionMessage` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `transitionmessage` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
 
- ✓ components/layout/LanguageSwitcher.test.tsx (5 tests) 26ms
- ✓ lib/env.test.ts (6 tests) 3ms
+ ✓ components/layout/LanguageSwitcher.test.tsx (5 tests) 25ms
+ ✓ components/search/AISearchResults.test.tsx (1 test) 52ms
 stderr | components/blocks/ReferencesSlider.test.tsx > ReferencesSlider TDD > renders reference tiles correctly
 Received `true` for a non-boolean attribute `fill`.
 
 If you want to write it to the DOM, pass a string instead: fill="true" or fill={value.toString()}.
 
  ✓ components/blocks/ReferencesSlider.test.tsx (2 tests) 43ms
+ ✓ lib/env.test.ts (6 tests) 4ms
 stdout | app/[locale]/referenzen/[slug]/page.test.tsx
 [Config] Initializing Toggles: { feedbackEnabled: false }
 
- ✓ app/[locale]/referenzen/[slug]/page.test.tsx (1 test) 7ms
+ ✓ app/[locale]/referenzen/[slug]/page.test.tsx (1 test) 26ms
 
- Test Files  11 passed (11)
-      Tests  27 passed (27)
-   Start at  22:40:02
-   Duration  2.69s (transform 2.09s, setup 0ms, import 4.45s, tests 179ms, environment 8.10s)
+⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯
 
+ FAIL  tests/legal-pages.test.ts > Legal Pages Content Validation > should contain professional corresponding B2B sections in English Terms
+Error: ENOENT: no such file or directory, open '/Volumes/Alpha SSD/Coding/e-tib.com/content/en/terms.mdx'
+ ❯ tests/legal-pages.test.ts:25:24
+     23|
+     24|   it('should contain professional corresponding B2B sections in Englis…
+     25|     const content = fs.readFileSync(enTermsPath, 'utf8');
+       |                        ^
+     26|
+     27|     expect(content).toContain('title: "Terms and Conditions"');
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
+
+
+ Test Files  1 failed | 10 passed (11)
+      Tests  1 failed | 26 passed (27)
+   Start at  14:54:33
+   Duration  5.94s (transform 5.27s, setup 0ms, import 9.43s, tests 222ms, environment 13.80s)
+
+ ELIFECYCLE  Test failed. See above for more details.

.turbo/turbo-typecheck.log

@@ -2,3 +2,4 @@
 > e-tib-nextjs@2.2.12 typecheck /Volumes/Alpha SSD/Coding/e-tib.com
 > tsc --noEmit
 
+ ELIFECYCLE  Command failed.

app/[locale]/layout.tsx

@@ -19,6 +19,7 @@ import { TransitionProvider } from '@/components/providers/TransitionProvider';
 import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter';
 import { InitialLoader } from '@/components/providers/InitialLoader';
 import { CorporateBackground } from '@/components/decorations/CorporateBackground';
+import { EUFundingBadge } from '@/components/decorations/EUFundingBadge';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -202,6 +203,7 @@ export default async function Layout(props: {
             <PageTransitionShutter />
             <SkipLink />
             <Header navLinks={navLinks} />
+            <EUFundingBadge />
             <MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
             
             <main

components/blocks/CertificatesBlock.tsx

@@ -68,31 +68,7 @@ const defaultCertificates: Certificate[] = [
     type: 'tax',
     date: '13.02.2025',
   },
-  {
-    title: 'Unbedenklichkeit IHK',
-    description: 'Industrie- und Handelskammer',
-    type: 'general',
-  },
-  {
-    title: 'Unbedenklichkeit HWK',
-    description: 'Handwerkskammer',
-    type: 'general',
-  },
-  {
-    title: 'Handelsregisterauszug',
-    description: 'Amtsgericht Cottbus',
-    type: 'general',
-  },
-  {
-    title: 'Gewerbe-Anmeldung',
-    description: 'Stadt Guben',
-    type: 'general',
-  },
-  {
-    title: 'Gewerbezentralregister',
-    description: 'Auskunft aus dem Register',
-    type: 'general',
-  },
+
 ];
 
 export function CertificatesBlock({ badge, title, description, certificates = defaultCertificates, hideHeader = false }: CertificatesBlockProps) {

components/blocks/HeroSection.tsx

@@ -42,7 +42,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
 
   return (
     <section
-      className={`relative min-h-[45vh] md:min-h-[55vh] flex items-center pt-32 pb-20 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
+      className={`relative min-h-[45vh] md:min-h-[55vh] flex items-center pt-24 pb-16 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
     >
       {bgSrc && (
         <motion.div 

components/blocks/ReferencesSlider.tsx

@@ -133,14 +133,16 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
                 <Link
                   href={`/${locale}/referenzen/${ref.slug}`}
                   data-testid="reference-tile"
+                  draggable={false}
                   onClick={(e) => {
                     if (dragDistanceRef.current > 15) {
                       e.preventDefault();
                     }
                   }}
-                  className="block relative aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl"
+                  className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl"
                 >
                   <Image
+                    draggable={false}
                     src={imgSrc}
                     alt={ref.title}
                     fill

components/blocks/SubCompanyTiles.tsx

@@ -79,7 +79,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
         )}
         
         <motion.div 
-          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+          className="flex overflow-x-auto snap-x snap-mandatory pb-6 md:pb-0 md:grid md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 hide-scrollbar -mx-4 px-4 md:mx-0 md:px-0"
           variants={containerVariants}
           initial="hidden"
           whileInView="visible"
@@ -236,7 +236,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
               <motion.div 
                 key={index}
                 variants={itemVariants}
-                className="h-full"
+                className="h-full flex-shrink-0 snap-center w-[85%] sm:w-[70%] md:w-full"
               >
                 {hasUrl ? (
                   isExternal ? (

components/decorations/CorporateBackground.tsx

@@ -78,7 +78,7 @@ export function CorporateBackground() {
   const y5 = useTransform(scrollYProgress, [0, 1], [0, -500]);
 
   return (
-    <div className="absolute inset-0 z-[50] overflow-hidden pointer-events-none" aria-hidden="true">
+    <div className="absolute inset-0 z-[50] overflow-hidden pointer-events-none hidden md:block" aria-hidden="true">
       {/* 1. Top Right - Medium, rotating moderately */}
       <motion.div 
         style={{ 

components/decorations/EUFundingBadge.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+
+export function EUFundingBadge() {
+  return (
+    <motion.div 
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 2, ease: [0.16, 1, 0.3, 1] }}
+      className="absolute top-0 right-0 w-[350px] md:w-[550px] h-[350px] md:h-[550px] z-0 pointer-events-none select-none"
+      style={{
+        maskImage: 'radial-gradient(ellipse at top right, black 10%, transparent 70%)',
+        WebkitMaskImage: 'radial-gradient(ellipse at top right, black 10%, transparent 70%)',
+      }}
+    >
+      <Image
+        src="/assets/eu-flag-perspective.png"
+        alt="European Union Background"
+        fill
+        className="object-cover object-top opacity-50 mix-blend-screen"
+        priority
+      />
+    </motion.div>
+  );
+}

components/layout/Footer.tsx

@@ -18,7 +18,7 @@ export function Footer({ companyInfo }: FooterProps) {
   const locale = useLocale();
 
   return (
-    <footer className="bg-[#050B14] text-neutral-light py-10 md:py-16 relative overflow-hidden border-t border-white/5">
+    <footer className="bg-[#050B14] text-neutral-light pt-10 pb-28 md:py-16 relative overflow-hidden border-t border-white/5">
       {/* Subtle background tech grid */}
       <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
 
@@ -28,7 +28,7 @@ export function Footer({ companyInfo }: FooterProps) {
 
       <div className="container relative z-10 grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-4 md:gap-6 lg:gap-8 mb-8 md:mb-12">
         {/* Brand Column Bento */}
-        <div className="col-span-1 md:col-span-4 lg:col-span-5 flex flex-col justify-between bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden">
+        <div className="col-span-1 md:col-span-4 lg:col-span-5 flex flex-col justify-between bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden">
           <div className="absolute inset-0 bg-gradient-to-br from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
 
           <div className="space-y-4 md:space-y-6 relative z-10">
@@ -96,7 +96,7 @@ export function Footer({ companyInfo }: FooterProps) {
         <div className="col-span-1 md:col-span-4 lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6 lg:gap-8">
 
           {/* Company Column */}
-          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
+          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
             <div className="absolute inset-0 bg-gradient-to-bl from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
             <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 md:mb-8 text-white">
               {locale === 'de' ? 'Unternehmen' : 'Company'}
@@ -124,7 +124,7 @@ export function Footer({ companyInfo }: FooterProps) {
           </div>
 
           {/* Legal Column */}
-          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
+          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
             <div className="absolute inset-0 bg-gradient-to-tr from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
             <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 md:mb-8 text-white">
               {locale === 'de' ? 'Rechtliches' : 'Legal'}

components/layout/Header.tsx

@@ -72,7 +72,7 @@ export function Header({ navLinks }: HeaderProps) {
         className={`fixed top-0 left-0 right-0 z-50 flex justify-center transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] ${
           isStandard 
             ? 'bg-[#050B14]/95 backdrop-blur-xl border-b border-white/10' 
-            : (isSolidMode ? 'pt-4 px-4' : 'pt-0 px-0')
+            : (isSolidMode ? 'pt-4 px-4 sm:px-6' : 'pt-0 px-0')
         }`}
       >
         <div
@@ -80,7 +80,7 @@ export function Header({ navLinks }: HeaderProps) {
             isStandard
               ? 'py-4 px-6 md:px-8'
               : isSolidMode
-                ? 'rounded-full bg-white/50 backdrop-blur-xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-white/40 py-2.5 px-6 md:px-8'
+                ? 'rounded-full bg-white/50 backdrop-blur-xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-white/40 py-2.5 px-8 md:px-10'
                 : 'rounded-none bg-transparent py-6 px-4 md:px-8 border border-transparent'
           }`}
         >
@@ -165,6 +165,20 @@ export function Header({ navLinks }: HeaderProps) {
 function NavItem({ link, currentLocale, pathname, isSolidMode }: { link: NavLink, currentLocale: string, pathname: string, isSolidMode: boolean }) {
   const [isHovered, setIsHovered] = React.useState(false);
 
+  // Close dropdown on navigation
+  React.useEffect(() => {
+    setIsHovered(false);
+  }, [pathname]);
+
+  // Close dropdown on scroll
+  React.useEffect(() => {
+    const handleScroll = () => {
+      if (isHovered) setIsHovered(false);
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [isHovered]);
+
   const mappedUrl = link.url.startsWith('/') && !link.url.match(/^\/(en|de)/) 
     ? `/${currentLocale}${link.url}` 
     : link.url;
@@ -237,6 +251,7 @@ function NavItem({ link, currentLocale, pathname, isSolidMode }: { link: NavLink
                   <TransitionLink
                     key={child.url}
                     href={childUrl}
+                    onClick={() => setIsHovered(false)}
                     className={`group/dropitem relative block px-4 py-3.5 rounded-2xl text-sm font-medium transition-all duration-300 overflow-hidden ${
                       isSolidMode
                         ? isChildActive ? 'bg-primary/10 text-primary' : 'text-neutral-600 hover:text-primary hover:bg-neutral-50/80'

content/de/karriere.mdx

@@ -5,13 +5,14 @@ excerpt: "Werden Sie Teil eines dynamischen Teams und bauen Sie mit uns die Infr
 layout: "fullBleed"
 ---
 
-<HomeHero 
+<HeroSection 
   badge="Karriere"
   title="Zukunft bauen"
-  description="Suchen Sie eine neue Herausforderung in einem zukunftssicheren Markt? Bei E-TIB arbeiten wir täglich daran, Deutschland zu vernetzen und die Energiewende voranzutreiben."
-  videoUrl="/assets/videos/web/hero-kabelpflug.mp4"
-  linkText="Offene Stellen"
-  linkHref="#stellen"
+  subtitle="Suchen Sie eine neue Herausforderung in einem zukunftssicheren Markt? Bei E-TIB arbeiten wir täglich daran, Deutschland zu vernetzen und die Energiewende voranzutreiben."
+  backgroundImage={{ url: '/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-28.jpg' }}
+  alignment="center"
+  ctaLabel="Offene Stellen"
+  ctaHref="#stellen"
 />
 
 <JobListingBlock showFairs={false} showJobs={true} />

content/de/ueber-uns.mdx

@@ -93,32 +93,6 @@ layout: "fullBleed"
   />
 </div>
 
-<div className="bg-white py-24 border-b border-neutral-100">
-  <div className="container max-w-6xl mx-auto px-4">
-    <div className="text-center mb-16">
-      <div className="text-primary font-bold tracking-wider uppercase text-sm mb-4">Unser Team</div>
-      <h2 className="font-heading text-4xl md:text-5xl font-extrabold text-neutral-dark mb-6">Über 100 Experten für Ihr Projekt</h2>
-      <div className="w-20 h-2 bg-primary mx-auto"></div>
-    </div>
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
-      <div className="text-center">
-        <div className="text-5xl font-extrabold text-primary mb-2">72</div>
-        <div className="text-neutral-dark font-bold text-lg">E-TIB GmbH</div>
-      </div>
-      <div className="text-center">
-        <div className="text-5xl font-extrabold text-primary mb-2">10</div>
-        <div className="text-neutral-dark font-bold text-lg">E-TIB Bohrtechnik</div>
-      </div>
-      <div className="text-center">
-        <div className="text-5xl font-extrabold text-primary mb-2">8</div>
-        <div className="text-neutral-dark font-bold text-lg">E-TIB ING</div>
-      </div>
-      <div className="text-center">
-        <div className="text-5xl font-extrabold text-primary mb-2">10</div>
-        <div className="text-neutral-dark font-bold text-lg">Niedersachsen</div>
-      </div>
-    </div>
-  </div>
-</div>
+
 
 <CallToAction />

content/en/karriere.mdx

@@ -5,13 +5,14 @@ excerpt: "Become part of a dynamic team and help us build the infrastructure of
 layout: "fullBleed"
 ---
 
-<HomeHero 
+<HeroSection 
   badge="Careers"
   title="Build the Future"
-  description="Are you looking for a new challenge in a future-proof market? At E-TIB, we work daily to network Germany and drive the energy transition forward."
-  videoUrl="/assets/videos/web/hero-kabelpflug.mp4"
-  linkText="Open Positions"
-  linkHref="#stellen"
+  subtitle="Are you looking for a new challenge in a future-proof market? At E-TIB, we work daily to network Germany and drive the energy transition forward."
+  backgroundImage={{ url: '/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-28.jpg' }}
+  alignment="center"
+  ctaLabel="Open Positions"
+  ctaHref="#stellen"
 />
 
 <JobListingBlock showFairs={false} showJobs={true} />

content/en/ueber-uns.mdx

@@ -93,32 +93,6 @@ layout: "fullBleed"
   />
 </div>
 
-<div className="bg-white py-24 border-b border-neutral-100">
-  <div className="container max-w-6xl mx-auto px-4">
-    <div className="text-center mb-16">
-      <div className="text-primary font-bold tracking-wider uppercase text-sm mb-4">Our Team</div>
-      <h2 className="font-heading text-4xl md:text-5xl font-extrabold text-neutral-dark mb-6">Over 100 Experts for Your Project</h2>
-      <div className="w-20 h-2 bg-primary mx-auto"></div>
-    </div>
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
-      <div className="text-center">
-        <div className="text-5xl font-extrabold text-primary mb-2">72</div>
-        <div className="text-neutral-dark font-bold text-lg">E-TIB GmbH</div>
-      </div>
-      <div className="text-center">
-        <div className="text-5xl font-extrabold text-primary mb-2">10</div>
-        <div className="text-neutral-dark font-bold text-lg">E-TIB Bohrtechnik</div>
-      </div>
-      <div className="text-center">
-        <div className="text-5xl font-extrabold text-primary mb-2">8</div>
-        <div className="text-neutral-dark font-bold text-lg">E-TIB ING</div>
-      </div>
-      <div className="text-center">
-        <div className="text-5xl font-extrabold text-primary mb-2">10</div>
-        <div className="text-neutral-dark font-bold text-lg">Lower Saxony</div>
-      </div>
-    </div>
-  </div>
-</div>
+
 
 <CallToAction />

content/en/zertifikate.mdx

@@ -60,30 +60,6 @@ layout: "fullBleed"
       type: 'tax',
       date: '13.02.2025',
     },
-    {
-      title: 'IHK Clearance Certificate',
-      description: 'Chamber of Industry and Commerce',
-      type: 'general',
-    },
-    {
-      title: 'HWK Clearance Certificate',
-      description: 'Chamber of Crafts',
-      type: 'general',
-    },
-    {
-      title: 'Commercial Register Extract',
-      description: 'District Court Cottbus',
-      type: 'general',
-    },
-    {
-      title: 'Trade Registration',
-      description: 'City of Guben',
-      type: 'general',
-    },
-    {
-      title: 'Central Trade Register',
-      description: 'Information from the Register',
-      type: 'general',
-    }
+
   ]}
 />

tests/legal-pages.test.ts

@@ -4,7 +4,7 @@ import path from 'path';
 
 describe('Legal Pages Content Validation', () => {
   const deAgbPath = path.join(process.cwd(), 'content', 'de', 'agb.mdx');
-  const enTermsPath = path.join(process.cwd(), 'content', 'en', 'terms.mdx');
+  const enTermsPath = path.join(process.cwd(), 'content', 'en', 'agb.mdx');
 
   it('should contain highly professional B2B sections in German AGB', () => {
     const content = fs.readFileSync(deAgbPath, 'utf8');