wip

components/Footer.tsx

@@ -1,9 +1,10 @@
 import Link from 'next/link';
 import Image from 'next/image';
-import { useTranslations } from 'next-intl';
+import { useTranslations, useLocale } from 'next-intl';
 
 export default function Footer() {
   const t = useTranslations('Footer');
+  const locale = useLocale();
   const currentYear = new Date().getFullYear();
 
   return (
@@ -13,15 +14,15 @@ export default function Footer() {
           {/* Column 1: Legal & Languages */}
           <div className="space-y-8">
             <div>
-              <h4 className="text-lg font-bold mb-4">Legal</h4>
+              <h4 className="text-lg font-bold mb-4">{t('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>
+                <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="hover:text-primary">{t('legalNotice')}</Link></li>
+                <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="hover:text-primary">{t('privacyPolicy')}</Link></li>
+                <li><Link href={`/${locale}/${t('termsSlug')}`} className="hover:text-primary">{t('terms')}</Link></li>
               </ul>
             </div>
             <div>
-              <h4 className="text-lg font-bold mb-4">Languages</h4>
+              <h4 className="text-lg font-bold mb-4">{t('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>
@@ -47,7 +48,7 @@ export default function Footer() {
 
           {/* Column 2: Archives */}
           <div>
-            <h4 className="text-lg font-bold mb-4">Archives</h4>
+            <h4 className="text-lg font-bold mb-4">{t('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>
@@ -59,7 +60,7 @@ export default function Footer() {
 
           {/* Column 3: Categories */}
           <div>
-            <h4 className="text-lg font-bold mb-4">Categories</h4>
+            <h4 className="text-lg font-bold mb-4">{t('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>
@@ -70,7 +71,7 @@ export default function Footer() {
 
           {/* Column 4: Recent Posts */}
           <div className="lg:col-span-2">
-            <h4 className="text-lg font-bold mb-4">Recent Posts</h4>
+            <h4 className="text-lg font-bold mb-4">{t('recentPosts')}</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>

components/Header.tsx

@@ -103,7 +103,7 @@ export default function Header() {
               </div>
               
               <Button 
-                href="/contact" 
+                href={`/${currentLocale}/contact`}
                 variant="outline" 
                 className={cn(
                   "rounded-full px-6 transition-colors",
@@ -112,7 +112,7 @@ export default function Header() {
                     : "border-primary text-primary hover:bg-primary hover:text-white"
                 )}
               >
-                Get in touch
+                {t('contact')}
               </Button>
             </div>
 

components/home/CTA.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
 import Link from 'next/link';
+import { useTranslations, useLocale } from 'next-intl';
 import { Section, Container } from '../../components/ui';
 
 export default function CTA() {
+  const t = useTranslations('Home.cta');
+  const locale = useLocale();
+
   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!
+            {t('title')}
           </h2>
-          <Link href="/contact" className="group flex items-center gap-4 text-xl font-bold text-[#82ed20]">
-            Reach out now
+          <Link href={`/${locale}/contact`} className="group flex items-center gap-4 text-xl font-bold text-[#82ed20]">
+            {t('button')}
             <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>

components/home/GallerySection.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import Image from 'next/image';
+import { useTranslations } from 'next-intl';
 import { Section, Container } from '../../components/ui';
 
 export default function GallerySection() {
+  const t = useTranslations('Home.gallery');
   const images = [
     '/uploads/2024/12/DSC07433-Large-600x400.webp',
     '/uploads/2024/12/DSC07460-Large-600x400.webp',
@@ -16,7 +18,7 @@ export default function GallerySection() {
     <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>
+          <h2 className="text-4xl md:text-5xl font-bold">{t('title')}</h2>
         </div>
         
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -24,7 +26,7 @@ export default function GallerySection() {
             <div key={idx} className="relative aspect-[4/3] overflow-hidden rounded-lg group">
               <Image 
                 src={src} 
-                alt={`Gallery image ${idx + 1}`}
+                alt={`${t('alt')} ${idx + 1}`}
                 fill
                 className="object-cover transition-transform duration-500 group-hover:scale-110"
                 unoptimized

components/home/Hero.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import Link from 'next/link';
+import { useTranslations } from 'next-intl';
 import { Container } from '@/components/ui';
 import Scribble from '@/components/Scribble';
 
 export default function Hero() {
+  const t = useTranslations('Home.hero');
+
   return (
     <section className="relative h-[80vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
       <div className="absolute inset-0 z-0">
@@ -24,16 +27,18 @@ export default function Hero() {
       <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
+            {t.rich('title', {
+              green: (chunks) => (
+                <span className="relative inline-block ml-4 mr-2">
+                  <span className="relative z-10 text-white italic">{chunks}</span>
+                  <Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%]" />
+                </span>
+              )
+            })}
           </h1>
           <div className="mt-8">
             <Link href="/contact" className="inline-flex items-center text-white text-xl font-medium group">
-              Let's talk
+              {t('cta')}
               <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>

components/home/MeetTheTeam.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
+import { useTranslations, useLocale } from 'next-intl';
 import { Section, Container, Button } from '../../components/ui';
 
 export default function MeetTheTeam() {
+  const t = useTranslations('Home.meetTheTeam');
+  const locale = useLocale();
+
   return (
     <Section className="relative py-24 md:py-32 overflow-hidden">
       <div className="absolute inset-0 z-0">
@@ -26,17 +30,17 @@ export default function MeetTheTeam() {
                  <span className="font-bold">KLZ</span>
                </div>
             </div>
-            <h2 className="text-3xl font-bold">Meet the team behind KLZ</h2>
+            <h2 className="text-3xl font-bold">{t('title')}</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.
+              {t('description')}
             </p>
           </div>
           
-          <Button href="/team" variant="primary" size="lg">
-            Checkout our team
+          <Button href={`/${locale}/team`} variant="primary" size="lg">
+            {t('cta')}
           </Button>
         </div>
       </Container>

components/home/ProductCategories.tsx

@@ -1,42 +1,48 @@
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
+import { useTranslations, useLocale } from 'next-intl';
 import { Section } from '../../components/ui';
 
 export default function ProductCategories() {
+  const t = useTranslations('Products');
+  const locale = useLocale();
+
+  const categories = [
+    { 
+      title: t('categories.lowVoltage.title'), 
+      desc: t('categories.lowVoltage.description'),
+      img: '/uploads/2024/12/low-voltage-scaled.webp',
+      icon: '/uploads/2024/11/Low-Voltage.svg',
+      href: `/${locale}/products/low-voltage-cables`
+    },
+    { 
+      title: t('categories.mediumVoltage.title'), 
+      desc: t('categories.mediumVoltage.description'),
+      img: '/uploads/2024/12/medium-voltage-scaled.webp',
+      icon: '/uploads/2024/11/Medium-Voltage.svg',
+      href: `/${locale}/products/medium-voltage-cables`
+    },
+    { 
+      title: t('categories.highVoltage.title'), 
+      desc: t('categories.highVoltage.description'),
+      img: '/uploads/2025/06/na2xsfl2y-rendered.webp',
+      icon: '/uploads/2024/11/High-Voltage.svg',
+      href: `/${locale}/products/high-voltage-cables`
+    },
+    { 
+      title: t('categories.solar.title'), 
+      desc: t('categories.solar.description'),
+      img: '/uploads/2025/04/3.webp',
+      icon: '/uploads/2024/11/Solar.svg',
+      href: `/${locale}/products/solar-cables`
+    }
+  ];
+
   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) => (
+        {categories.map((category, idx) => (
           <Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] overflow-hidden">
             <Image 
               src={category.img} 

components/home/VideoSection.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import Scribble from '@/components/Scribble';
 
 export default function VideoSection() {
+  const t = useTranslations('Home.video');
+
   return (
     <section className="relative h-[60vh] overflow-hidden">
       <video 
@@ -15,12 +18,14 @@ export default function VideoSection() {
       </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.
+          {t.rich('title', {
+            future: (chunks) => (
+              <span className="relative inline-block mx-2">
+                <span className="relative z-10 italic">{chunks}</span>
+                <Scribble variant="underline" className="w-full h-full top-full left-0" />
+              </span>
+            )
+          })}
         </h2>
       </div>
     </section>

components/home/WhatWeDo.tsx

@@ -1,46 +1,28 @@
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import { Section, Container } from '../../components/ui';
 
 export default function WhatWeDo() {
+  const t = useTranslations('Home.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>
+              <h2 className="text-5xl font-bold text-primary mb-6">{t('title')}</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.
+                {t('subtitle')}
               </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) => (
+            {[0, 1, 2, 3].map((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>
+                <span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">0{idx + 1}</span>
+                <h3 className="text-2xl font-bold">{t(`items.${idx}.title`)}</h3>
+                <p className="text-text-secondary leading-relaxed">{t(`items.${idx}.description`)}</p>
               </div>
             ))}
           </div>

components/home/WhyChooseUs.tsx

@@ -1,46 +1,28 @@
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import { Section, Container } from '../../components/ui';
 
 export default function WhyChooseUs() {
+  const t = useTranslations('Home.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>
+              <h2 className="text-5xl font-bold text-primary mb-6">{t('title')}</h2>
               <p className="text-xl text-text-secondary">
-                Experience prevents many mistakes, but we learn something new every day
+                {t('subtitle')}
               </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) => (
+            {[0, 1, 2, 3].map((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>
+                <span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">0{idx + 1}</span>
+                <h3 className="text-2xl font-bold">{t(`items.${idx}.title`)}</h3>
+                <p className="text-text-secondary leading-relaxed">{t(`items.${idx}.description`)}</p>
               </div>
             ))}
           </div>