wip

components/Footer.tsx

@@ -7,70 +7,91 @@ export default function Footer() {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-neutral text-text-secondary py-12 border-t border-neutral-dark">
+    <footer className="bg-white text-neutral-dark py-16 border-t border-neutral-light">
       <div className="container mx-auto px-4">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
-          <div>
-            <Link href="/" className="block mb-4">
-              <Image 
-                src="/uploads/2023/11/KLZ-Logo-blau.svg" 
-                alt="KLZ Cables" 
-                width={100} 
-                height={48} 
-                className="h-12 w-auto"
-              />
-            </Link>
-            <p className="mb-4">
-              Raiffeisenstraße 22<br />
-              73630 Remshalden<br />
-              Germany
-            </p>
-            <p>
-              <a href="tel:+4988192537298" className="hover:text-primary">+49 881 92537298</a><br />
-              <a href="mailto:info@klz-vertriebs-gmbh.com" className="hover:text-primary">info@klz-vertriebs-gmbh.com</a>
-            </p>
-          </div>
-          
-          <div>
-            <h4 className="text-lg font-bold text-text-primary mb-4">{t('legal')}</h4>
-            <ul className="space-y-2">
-              <li><Link href="/legal-notice" className="hover:text-primary">{t('legalNotice')}</Link></li>
-              <li><Link href="/privacy-policy" className="hover:text-primary">{t('privacyPolicy')}</Link></li>
-              <li><Link href="/terms" className="hover:text-primary">{t('terms')}</Link></li>
-            </ul>
-          </div>
-
-          <div>
-            <h4 className="text-lg font-bold text-text-primary mb-4">{t('products')}</h4>
-            <ul className="space-y-2">
-              <li><Link href="/products/low-voltage-cables" className="hover:text-primary">{t('lowVoltage')}</Link></li>
-              <li><Link href="/products/medium-voltage-cables" className="hover:text-primary">{t('mediumVoltage')}</Link></li>
-              <li><Link href="/products/high-voltage-cables" className="hover:text-primary">{t('highVoltage')}</Link></li>
-              <li><Link href="/products/solar-cables" className="hover:text-primary">{t('solar')}</Link></li>
-            </ul>
-          </div>
-
-          <div>
-            <h4 className="text-lg font-bold text-text-primary mb-4">{t('followUs')}</h4>
-            <div className="flex space-x-4">
-              {/* Social Icons */}
-              <a href="https://www.linkedin.com/company/klz-cables" target="_blank" rel="noopener noreferrer" className="hover:text-primary">
-                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fillRule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clipRule="evenodd" />
-                </svg>
-              </a>
-              <a href="https://www.instagram.com/klz_cables/" target="_blank" rel="noopener noreferrer" className="hover:text-primary">
-                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fillRule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.468 2.53c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clipRule="evenodd" />
-                </svg>
-              </a>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
+          {/* Column 1: Legal & Languages */}
+          <div className="space-y-8">
+            <div>
+              <h4 className="text-lg font-bold mb-4">Legal</h4>
+              <ul className="space-y-2 text-sm text-text-secondary">
+                <li><Link href="/legal-notice" className="hover:text-primary">Legal Notice</Link></li>
+                <li><Link href="/privacy-policy" className="hover:text-primary">Privacy Policy</Link></li>
+                <li><Link href="/terms" className="hover:text-primary">Terms</Link></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="text-lg font-bold mb-4">Languages</h4>
+              <ul className="space-y-2 text-sm text-text-secondary">
+                <li><Link href="/en" className="hover:text-primary">English</Link></li>
+                <li><Link href="/de" className="hover:text-primary">Deutsch</Link></li>
+              </ul>
+            </div>
+            <div>
+              <p className="text-sm text-text-secondary">
+                Copyright © {currentYear} KLZ Cables.<br />
+                All rights reserved.
+              </p>
+            </div>
+            <div>
+               <Image 
+                  src="/logo-white.svg" 
+                  alt="KLZ Cables" 
+                  width={100} 
+                  height={25} 
+                  className="h-6 w-auto invert"
+                  unoptimized
+                />
             </div>
           </div>
+
+          {/* Column 2: Archives */}
+          <div>
+            <h4 className="text-lg font-bold mb-4">Archives</h4>
+            <ul className="space-y-2 text-sm text-text-secondary">
+              <li><Link href="#" className="hover:text-primary">November 2025</Link></li>
+              <li><Link href="#" className="hover:text-primary">September 2025</Link></li>
+              <li><Link href="#" className="hover:text-primary">August 2025</Link></li>
+              <li><Link href="#" className="hover:text-primary">June 2025</Link></li>
+              <li><Link href="#" className="hover:text-primary">May 2025</Link></li>
+            </ul>
+          </div>
+
+          {/* Column 3: Categories */}
+          <div>
+            <h4 className="text-lg font-bold mb-4">Categories</h4>
+            <ul className="space-y-2 text-sm text-text-secondary">
+              <li><Link href="#" className="hover:text-primary">Cable Logistics</Link></li>
+              <li><Link href="#" className="hover:text-primary">Cable Technology</Link></li>
+              <li><Link href="#" className="hover:text-primary">KLZ News</Link></li>
+              <li><Link href="#" className="hover:text-primary">Renewable Energy</Link></li>
+            </ul>
+          </div>
+
+          {/* Column 4: Recent Posts */}
+          <div className="lg:col-span-2">
+            <h4 className="text-lg font-bold mb-4">Recent Posts</h4>
+            <ul className="space-y-4 text-sm text-text-secondary">
+              <li>
+                <Link href="#" className="hover:text-primary block font-medium">Focus on wind farm construction: three typical cable challenges</Link>
+              </li>
+              <li>
+                <Link href="#" className="hover:text-primary block font-medium">Why the N2XS(F)2Y is the ideal cable for your energy project</Link>
+              </li>
+              <li>
+                <Link href="#" className="hover:text-primary block font-medium">Shortage of NA2XSF2Y? We have the three-core medium-voltage cable</Link>
+              </li>
+              <li>
+                <Link href="#" className="hover:text-primary block font-medium">Which cables for wind power? Differences from low to extra-high voltage explained</Link>
+              </li>
+            </ul>
+          </div>
         </div>
-        
-        <div className="border-t border-neutral-dark pt-8 text-center text-sm">
-          <p>&copy; {currentYear} KLZ Cables. All rights reserved.</p>
-        </div>
+      </div>
+      
+      {/* Slide out widget area (hidden for now, but referenced in HTML) */}
+      <div className="fixed top-0 right-0 h-full w-80 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50">
+         {/* Content would go here */}
       </div>
     </footer>
   );

components/Header.tsx

@@ -4,14 +4,30 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { usePathname } from 'next/navigation';
+import { Button } from './ui';
+import { useEffect, useState } from 'react';
+import { cn } from './ui';
 
 export default function Header() {
   const t = useTranslations('Navigation');
   const pathname = usePathname();
+  const [isScrolled, setIsScrolled] = useState(false);
   
   // Extract locale from pathname
   const currentLocale = pathname.split('/')[1] || 'en';
   
+  // Check if homepage
+  const isHomePage = pathname === `/${currentLocale}` || pathname === '/';
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 50);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+  
   // Function to get path for a different locale
   const getPathForLocale = (newLocale: string) => {
     const segments = pathname.split('/');
@@ -24,60 +40,92 @@ export default function Header() {
     { label: t('team'), href: '/team' },
     { label: t('products'), href: '/products' },
     { label: t('blog'), href: '/blog' },
-    { label: t('contact'), href: '/contact' },
   ];
 
+  const headerClass = cn(
+    "fixed top-0 left-0 right-0 z-50 transition-all duration-300",
+    {
+      "bg-transparent": isHomePage && !isScrolled,
+      "bg-white shadow-md": !isHomePage || isScrolled,
+      "py-4": !isScrolled,
+      "py-2": isScrolled
+    }
+  );
+
+  const textColorClass = (isHomePage && !isScrolled) ? "text-white" : "text-text-primary";
+  const logoSrc = (isHomePage && !isScrolled) 
+    ? "/logo-white.svg"
+    : "/logo-blue.svg";
+
   return (
-    <header className="bg-white shadow-sm sticky top-0 z-50">
-      <div className="container mx-auto px-4 h-20 flex items-center justify-between">
-        <Link href={`/${currentLocale}`} className="flex-shrink-0">
-          <Image 
-            src="/uploads/2023/11/KLZ-Logo-blau.svg" 
-            alt="KLZ Cables" 
-            width={100} 
-            height={48} 
-            className="h-12 w-auto"
-            priority
-          />
-        </Link>
+    <>
+      <header className={headerClass}>
+        <div className="container mx-auto px-4 flex items-center justify-between">
+          <Link href={`/${currentLocale}`} className="flex-shrink-0">
+            <Image 
+              src={logoSrc} 
+              alt="KLZ Cables" 
+              width={100} 
+              height={100} 
+              className="h-12 w-auto transition-all duration-300"
+              priority
+              unoptimized
+            />
+          </Link>
 
-        <nav className="hidden md:flex items-center space-x-8">
-          {menuItems.map((item) => (
-            <Link 
-              key={item.href} 
-              href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
-              className="text-text-primary hover:text-primary font-medium transition-colors"
-            >
-              {item.label}
-            </Link>
-          ))}
-        </nav>
+          <div className="flex items-center gap-8">
+            <nav className="hidden lg:flex items-center space-x-8">
+              {menuItems.map((item) => (
+                <Link 
+                  key={item.href} 
+                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                  className={cn(textColorClass, "hover:text-primary font-medium transition-colors text-lg")}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </nav>
 
-        <div className="flex items-center space-x-4">
-          <div className="flex items-center space-x-2 text-sm font-medium">
-            <Link 
-              href={getPathForLocale('en')} 
-              className={`hover:text-primary transition-colors ${currentLocale === 'en' ? 'text-primary font-bold' : 'text-text-secondary'}`}
-            >
-              EN
-            </Link>
-            <span className="text-text-light">|</span>
-            <Link 
-              href={getPathForLocale('de')} 
-              className={`hover:text-primary transition-colors ${currentLocale === 'de' ? 'text-primary font-bold' : 'text-text-secondary'}`}
-            >
-              DE
-            </Link>
+            <div className={cn("hidden lg:flex items-center space-x-4", textColorClass)}>
+              <div className="flex items-center space-x-2 text-sm font-medium">
+                <Link 
+                  href={getPathForLocale('en')} 
+                  className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'en' ? 'text-primary font-bold' : 'opacity-80'}`}
+                >
+                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAmVBMVEViZsViZMJiYrf9gnL8eWrlYkjgYkjZYkj8/PujwPybvPz4+PetraBEgfo+fvo3efkydfkqcvj8Y2T8UlL8Q0P8MzP9k4Hz8/Lu7u4DdPj9/VrKysI9fPoDc/EAZ7z7IiLHYkjp6ekCcOTk5OIASbfY/v21takAJrT5Dg6sYkjc3Nn94t2RkYD+y8KeYkjs/v7l5fz0dF22YkjWvcOLAAAAgElEQVR4AR2KNULFQBgGZ5J13KGGKvc/Cw1uPe62eb9+Jr1EUBFHSgxxjP2Eca6AfUSfVlUfBvm1Ui1bqafctqMndNkXpb01h5TLx4b6TIXgwOCHfjv+/Pz+5vPRw7txGWT2h6yO0/GaYltIp5PT1dEpLNPL/SdWjYjAAZtvRPgHJX4Xio+DSrkAAAAASUVORK5CYII=" alt="English" width="16" height="11" />
+                </Link>
+                <Link 
+                  href={getPathForLocale('de')} 
+                  className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'de' ? 'text-primary font-bold' : 'opacity-80'}`}
+                >
+                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAABLElEQVR4AY2QgUZEQRSGz9ydmzbYkBWABBJYABHEFhJ6m0WP0DMEQNIr9AKrN8ne2Tt3Zs7MOdOZmRBEv+v34Tvub9R6fdNlAzU+snSME/wdjbjbbJ6EiEg6BA8102QbjKNpoMzw8v6qD/sOALbbT2MC1NgaAWOKOgxf5czY+4dbAX2G/THzcozLrvPV85IQyqVz0rvg2p9Pei4HjzSsiFbV4JgyhhxCjpGdZ0RhdikLB9/b8Qig7MkpSovR7Cp59q6CazaNFiTt4J82o6uvdMVwTsztKTXZod4jgOJJuqNAjFyGrBR8gM6XwKfIC4KanBSTZ0rClKh08D9DFh3egW7ebH7NcRDQWrz9rM2Ne+mDOXB2mZJ8agL19nwxR2iZXGm1gDbQKhDjd4yHb2oW/KR8xHicAAAAAElFTkSuQmCC" alt="Deutsch" width="16" height="11" />
+                </Link>
+              </div>
+              
+              <Button 
+                href="/contact" 
+                variant="outline" 
+                className={cn(
+                  "rounded-full px-6 transition-colors",
+                  isHomePage && !isScrolled 
+                    ? "border-white text-white hover:bg-white hover:text-black" 
+                    : "border-primary text-primary hover:bg-primary hover:text-white"
+                )}
+              >
+                Get in touch
+              </Button>
+            </div>
+
+            {/* Mobile Menu Button */}
+            <button className={cn("lg:hidden p-2", textColorClass)}>
+              <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
           </div>
-          
-          {/* Mobile Menu Button (Placeholder) */}
-          <button className="md:hidden p-2 text-text-primary">
-            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-            </svg>
-          </button>
         </div>
-      </div>
-    </header>
+      </header>
+      {!isHomePage && <div className="h-24 md:h-32" />}
+    </>
   );
 }

components/Scribble.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { cn } from '@/components/ui';
+
+interface ScribbleProps {
+  variant: 'circle' | 'underline';
+  className?: string;
+  color?: string;
+}
+
+export default function Scribble({ variant, className, color = '#82ed20' }: ScribbleProps) {
+  if (variant === 'circle') {
+    return (
+      <svg 
+        className={cn("absolute pointer-events-none", className)} 
+        role="presentation" 
+        viewBox="0 0 800 350" 
+        preserveAspectRatio="none"
+      >
+        <path 
+          style={{ animationDuration: '1.8s' }} 
+          transform="matrix(0.9791300296783447,0,0,0.9791300296783447,400,179)" 
+          strokeLinejoin="miter" 
+          fillOpacity="0" 
+          pathLength="1" 
+          strokeMiterlimit="4" 
+          stroke={color} 
+          strokeOpacity="1" 
+          strokeWidth="20" 
+          d=" M253,-161 C253,-161 -284.78900146484375,-201.4600067138672 -376,-21 C-469,163 67.62300109863281,174.2100067138672 256,121 C564,34 250.82899475097656,-141.6929931640625 19.10700035095215,-116.93599700927734"
+        />
+      </svg>
+    );
+  }
+
+  if (variant === 'underline') {
+    return (
+      <svg 
+        className={cn("absolute pointer-events-none", className)} 
+        role="presentation" 
+        viewBox="-400 -55 730 60" 
+        preserveAspectRatio="none"
+      >
+        <path 
+          style={{ animationDuration: '1.8s' }} 
+          d="m -383.25 -6 c 55.25 -22 130.75 -33.5 293.25 -38 c 54.5 -0.5 195 -2.5 401 15" 
+          stroke={color} 
+          pathLength="1" 
+          strokeWidth="20" 
+          fill="none"
+        />
+      </svg>
+    );
+  }
+
+  return null;
+}

components/home/CTA.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Link from 'next/link';
+import { Section, Container } from '../../components/ui';
+
+export default function CTA() {
+  return (
+    <Section className="bg-primary text-white py-24">
+      <Container>
+        <div className="flex flex-col md:flex-row items-center justify-between gap-8">
+          <h2 className="text-3xl md:text-4xl font-bold max-w-2xl">
+            Enough information, let's build something together!
+          </h2>
+          <Link href="/contact" className="group flex items-center gap-4 text-xl font-bold text-[#82ed20]">
+            Reach out now
+            <span className="w-10 h-10 border-2 border-[#82ed20] rounded-full flex items-center justify-center group-hover:bg-[#82ed20] group-hover:text-primary transition-all">
+              &rarr;
+            </span>
+          </Link>
+        </div>
+      </Container>
+    </Section>
+  );
+}

components/home/GallerySection.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Image from 'next/image';
+import { Section, Container } from '../../components/ui';
+
+export default function GallerySection() {
+  const images = [
+    '/uploads/2024/12/DSC07433-Large-600x400.webp',
+    '/uploads/2024/12/DSC07460-Large-600x400.webp',
+    '/uploads/2024/12/DSC07469-Large-600x400.webp',
+    '/uploads/2024/12/DSC07539-Large-600x400.webp',
+    '/uploads/2024/12/DSC07655-Large.webp',
+    '/uploads/2024/12/DSC07768-Large.webp',
+  ];
+
+  return (
+    <Section className="bg-white text-neutral-dark py-24">
+      <Container>
+        <div className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold">Strong Connections for a Sustainable World.</h2>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {images.map((src, idx) => (
+            <div key={idx} className="relative aspect-[4/3] overflow-hidden rounded-lg group">
+              <Image 
+                src={src} 
+                alt={`Gallery image ${idx + 1}`}
+                fill
+                className="object-cover transition-transform duration-500 group-hover:scale-110"
+                unoptimized
+              />
+              <div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors" />
+            </div>
+          ))}
+        </div>
+      </Container>
+    </Section>
+  );
+}

components/home/Hero.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Link from 'next/link';
+import { Container } from '@/components/ui';
+import Scribble from '@/components/Scribble';
+
+export default function Hero() {
+  return (
+    <section className="relative h-[80vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
+      <div className="absolute inset-0 z-0">
+        <video 
+          className="w-full h-full object-cover"
+          autoPlay 
+          muted 
+          loop 
+          playsInline
+          poster="/uploads/2025/02/Still-2025-02-10-104337_1.1.1.webp"
+        >
+          <source src="/uploads/2025/02/header.webm" type="video/webm" />
+          <source src="/uploads/2025/02/header.mp4" type="video/mp4" />
+        </video>
+        <div className="absolute inset-0 bg-gradient-to-b from-black/10 to-black/40" />
+      </div>
+      
+      <Container className="relative z-10 text-left text-white w-full">
+        <div className="max-w-4xl">
+          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 tracking-tight leading-tight">
+            We are helping to expand the energy cable networks for a 
+            <span className="relative inline-block ml-4 mr-2">
+              <span className="relative z-10 text-white italic">green</span>
+              <Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%]" />
+            </span> 
+            future
+          </h1>
+          <div className="mt-8">
+            <Link href="/contact" className="inline-flex items-center text-white text-xl font-medium group">
+              Let's talk
+              <span className="ml-2 w-8 h-8 border-2 border-white rounded-full flex items-center justify-center group-hover:bg-white group-hover:text-black transition-all">
+                &rarr;
+              </span>
+            </Link>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}

components/home/MeetTheTeam.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Section, Container, Button } from '../../components/ui';
+
+export default function MeetTheTeam() {
+  return (
+    <Section className="relative py-24 md:py-32 overflow-hidden">
+      <div className="absolute inset-0 z-0">
+        <Image 
+          src="/uploads/2024/12/DSC07655-Large.webp" 
+          alt="KLZ Team" 
+          fill
+          className="object-cover"
+          unoptimized
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-neutral-dark/90 to-neutral-dark/40" />
+      </div>
+      
+      <Container className="relative z-10">
+        <div className="max-w-2xl text-white">
+          <div className="flex items-center gap-4 mb-6">
+            <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-white/20">
+               {/* Placeholder for avatar if needed, or just icon */}
+               <div className="w-full h-full bg-primary flex items-center justify-center">
+                 <span className="font-bold">KLZ</span>
+               </div>
+            </div>
+            <h2 className="text-3xl font-bold">Meet the team behind KLZ</h2>
+          </div>
+          
+          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 mb-8 border border-white/10">
+            <p className="text-lg leading-relaxed">
+              At KLZ, our team is the power behind the cables. From seasoned experts like Michael and Klaus to a dedicated group of planners, logistics specialists, and customer support professionals, every member plays a vital role. Together, we combine decades of experience, innovative thinking, and a shared commitment to delivering reliable energy solutions.
+            </p>
+          </div>
+          
+          <Button href="/team" variant="primary" size="lg">
+            Checkout our team
+          </Button>
+        </div>
+      </Container>
+    </Section>
+  );
+}

components/home/ProductCategories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Section } from '../../components/ui';
+
+export default function ProductCategories() {
+  return (
+    <Section className="bg-white py-0">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+        {[
+          { 
+            title: 'Low Voltage Cables', 
+            desc: 'Powering everyday essentials with reliability and safety.',
+            img: '/uploads/2024/12/low-voltage-scaled.webp',
+            icon: '/uploads/2024/11/Low-Voltage.svg',
+            href: '/products/low-voltage-cables'
+          },
+          { 
+            title: 'Medium Voltage Cables', 
+            desc: 'The perfect balance between power and performance for industrial and urban grids.',
+            img: '/uploads/2024/12/medium-voltage-scaled.webp',
+            icon: '/uploads/2024/11/Medium-Voltage.svg',
+            href: '/products/medium-voltage-cables'
+          },
+          { 
+            title: 'High Voltage Cables', 
+            desc: 'Delivering maximum power over long distances—without compromise.',
+            img: '/uploads/2025/06/na2xsfl2y-rendered.webp',
+            icon: '/uploads/2024/11/High-Voltage.svg',
+            href: '/products/high-voltage-cables'
+          },
+          { 
+            title: 'Solar Cables', 
+            desc: 'Connecting the sun’s energy to your sustainable future.',
+            img: '/uploads/2025/04/3.webp',
+            icon: '/uploads/2024/11/Solar.svg',
+            href: '/products/solar-cables'
+          }
+        ].map((category, idx) => (
+          <Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] overflow-hidden">
+            <Image 
+              src={category.img} 
+              alt={category.title}
+              fill
+              className="object-cover transition-transform duration-700 group-hover:scale-110"
+              unoptimized
+            />
+            <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors" />
+            <div className="absolute inset-0 p-8 flex flex-col justify-center items-center text-center text-white">
+              <div className="mb-4 transform transition-transform group-hover:-translate-y-2">
+                <img src={category.icon} alt="" className="w-16 h-16 mx-auto" />
+              </div>
+              <h3 className="text-2xl font-bold mb-2 transform transition-transform group-hover:-translate-y-2">{category.title}</h3>
+              <p className="text-white/90 opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
+                {category.desc}
+              </p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </Section>
+  );
+}

components/home/VideoSection.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Scribble from '@/components/Scribble';
+
+export default function VideoSection() {
+  return (
+    <section className="relative h-[60vh] overflow-hidden">
+      <video 
+        className="w-full h-full object-cover"
+        autoPlay 
+        muted 
+        loop 
+        playsInline
+      >
+        <source src="/uploads/2024/12/making-of-metal-cable-on-factory-2023-11-27-04-55-16-utc-2.webm" type="video/mp4" />
+      </video>
+      <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+        <h2 className="text-3xl md:text-5xl font-bold text-white text-center max-w-4xl px-4 leading-tight">
+          From a single strand to infinite power – the 
+          <span className="relative inline-block mx-2">
+            <span className="relative z-10 italic">future</span>
+            <Scribble variant="underline" className="w-full h-full top-full left-0" />
+          </span>
+          starts here.
+        </h2>
+      </div>
+    </section>
+  );
+}

components/home/WhatWeDo.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Section, Container } from '../../components/ui';
+
+export default function WhatWeDo() {
+  return (
+    <Section className="bg-white text-neutral-dark">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
+          <div className="lg:col-span-4">
+            <div className="sticky top-24">
+              <h2 className="text-5xl font-bold text-primary mb-6">What we do</h2>
+              <p className="text-xl text-text-secondary">
+                We ensure that the electricity flows – with quality-tested cables. From low voltage up to high voltage.
+              </p>
+            </div>
+          </div>
+          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
+            {[
+              {
+                num: '01',
+                title: 'Supply to energy suppliers, wind and solar parks, industry and trade',
+                desc: 'We support your projects from 1 to 220 kV, from simple NYY to high-voltage cables with segment conductors and aluminum sheaths, with a particular focus on medium-voltage cables.'
+              },
+              {
+                num: '02',
+                title: 'Supply of cables whose quality is certified',
+                desc: 'Cables are products that have to function 100%. For decades, often 80 to 100 years. Our cables are not only approved by VDE. The most well-known energy suppliers trust us.'
+              },
+              {
+                num: '03',
+                title: 'We deliver on time because we know the consequences for you',
+                desc: 'Wind farm North Germany, coordinates XYZ, delivery Wednesday 2-4 p.m., no unloading option. Yes, we know that. We organize the logistics with a back office team that has up to 20 years of cable experience.'
+              },
+              {
+                num: '04',
+                title: 'The cable alone is not the solution',
+                desc: 'Stony ground? Perhaps a thicker outer sheath would be better? Damp ground? Can there be transverse watertight protection? We think for you and ask questions.'
+              }
+            ].map((item, idx) => (
+              <div key={idx} className="space-y-4">
+                <span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">{item.num}</span>
+                <h3 className="text-2xl font-bold">{item.title}</h3>
+                <p className="text-text-secondary leading-relaxed">{item.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </Section>
+  );
+}

components/home/WhyChooseUs.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Section, Container } from '../../components/ui';
+
+export default function WhyChooseUs() {
+  return (
+    <Section className="bg-white text-neutral-dark">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
+          <div className="lg:col-span-4">
+            <div className="sticky top-24">
+              <h2 className="text-5xl font-bold text-primary mb-6">Why choose us</h2>
+              <p className="text-xl text-text-secondary">
+                Experience prevents many mistakes, but we learn something new every day
+              </p>
+            </div>
+          </div>
+          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
+            {[
+              {
+                num: '01',
+                title: 'Expertise with depth',
+                desc: 'Our team has decades of experience – far beyond the founding of KLZ in 2009. The entire team has over 100 years of cable experience, gained in a wide variety of plants, from low voltage to medium voltage to high voltage. We know what cables smell like, what the colleague at the shielding machine is responsible for how testing is carried out.'
+              },
+              {
+                num: '02',
+                title: 'Tailor-made solutions for your project',
+                desc: 'When things get more complex, we involve our technical consultants. That’s where you need experts who haven’t just started their careers. You need people who read and understand standards and have sometimes been involved. We have them, and with their and our experience we differentiate ourselves from simple cable trading'
+              },
+              {
+                num: '03',
+                title: 'Reliability that keeps your projects on track',
+                desc: 'Accessibility, quick response in a fast-moving world. Do you still have questions after 5 p.m.? Or at the weekend? We are always there. And that is how we have developed our partners so that as a team we can realize what you have paid for. And if something does not go well, no one hides.'
+              },
+              {
+                num: '04',
+                title: 'Sustainability without compromise',
+                desc: 'We are convinced that we will leave the world better than we found it. With initiatives such as our drum return service and a clear focus on recycling, we ensure that every connection is as environmentally friendly as possible. Each of our partners has the appropriate certificates, which are increasingly expected by all customers.'
+              }
+            ].map((item, idx) => (
+              <div key={idx} className="space-y-4">
+                <span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">{item.num}</span>
+                <h3 className="text-2xl font-bold">{item.title}</h3>
+                <p className="text-text-secondary leading-relaxed">{item.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </Section>
+  );
+}