wip

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

@@ -1,6 +1,7 @@
 import { notFound } from 'next/navigation';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import { Section, Container, Heading, Badge } from '@/components/ui';
+import { getTranslations } from 'next-intl/server';
 
 interface PageProps {
   params: {
@@ -12,6 +13,7 @@ interface PageProps {
 export default async function StandardPage({ params: { locale, slug } }: PageProps) {
   const { getPageBySlug } = await import('@/lib/pages');
   const pageData = await getPageBySlug(slug, locale);
+  const t = await getTranslations('StandardPage');
 
   if (!pageData) {
     notFound();
@@ -26,7 +28,7 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
         </div>
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
-            <Badge variant="accent" className="mb-4 md:mb-6">Information</Badge>
+            <Badge variant="accent" className="mb-4 md:mb-6">{t('badge')}</Badge>
             <Heading level={1} className="text-3xl md:text-6xl lg:text-7xl xl:text-8xl text-white mb-0">
               <span className="text-white">{pageData.frontmatter.title}</span>
             </Heading>
@@ -37,23 +39,36 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
       <Section className="bg-white -mt-8 md:-mt-12 relative z-20 rounded-t-[32px] md:rounded-t-[60px] shadow-2xl py-12 md:py-28">
         <Container>
           <div className="sticky-narrative-container">
-            {/* Sticky Narrative Sidebar */}
+            {/* Sticky Narrative Sidebar - Mobile Optimized */}
             <div className="sticky-narrative-sidebar mb-8 lg:mb-0">
               <div className="lg:sticky lg:top-32 space-y-4 md:space-y-8">
-                <div className="p-6 md:p-8 bg-neutral-light rounded-2xl md:rounded-3xl border border-neutral-medium">
-                  <h3 className="text-lg md:text-xl font-bold text-primary mb-3 md:mb-4">Quick Navigation</h3>
+                {/* Mobile-only chip/stepper feel */}
+                <div className="flex lg:hidden overflow-x-auto pb-4 gap-3 no-scrollbar -mx-4 px-4">
+                  <Badge variant="primary" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm">{t('overview')}</Badge>
+                  <Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">{t('details')}</Badge>
+                  <Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">{t('support')}</Badge>
+                </div>
+
+                <div className="p-6 md:p-8 bg-neutral-light rounded-2xl md:rounded-3xl border border-neutral-medium shadow-sm">
+                  <h3 className="text-lg md:text-xl font-bold text-primary mb-3 md:mb-4 flex items-center gap-2">
+                    <span className="w-1.5 h-6 bg-accent rounded-full" />
+                    {t('quickNavigation')}
+                  </h3>
                   <nav className="space-y-3 md:space-y-4">
-                    <div className="h-1 w-10 md:w-12 bg-accent rounded-full" />
                     <p className="text-sm md:text-base text-text-secondary leading-relaxed">
-                      Explore the details of {pageData.frontmatter.title}. KLZ provides comprehensive information on all our services and corporate policies.
+                      {t('exploreDetails', { title: pageData.frontmatter.title })}
                     </p>
                   </nav>
                 </div>
                 
-                <div className="p-6 md:p-8 bg-primary-dark rounded-2xl md:rounded-3xl text-white">
-                  <h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4">Need Help?</h3>
-                  <p className="text-sm md:text-base text-white/70 mb-4 md:mb-6">Our support team is available for any questions regarding this topic.</p>
-                  <a href={`/${locale}/contact`} className="text-accent font-bold hover:underline touch-target">Contact Us &rarr;</a>
+                <div className="p-6 md:p-8 bg-primary-dark rounded-2xl md:rounded-3xl text-white shadow-xl relative overflow-hidden group">
+                  <div className="absolute top-0 right-0 w-24 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
+                  <h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 relative z-10">{t('needHelp')}</h3>
+                  <p className="text-sm md:text-base text-white/70 mb-4 md:mb-6 relative z-10">{t('supportTeamAvailable')}</p>
+                  <a href={`/${locale}/contact`} className="inline-flex items-center text-accent font-bold hover:underline touch-target relative z-10 group/link">
+                    {t('contactUs')} 
+                    <span className="ml-2 transition-transform group-hover/link:translate-x-1">&rarr;</span>
+                  </a>
                 </div>
               </div>
             </div>

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

@@ -10,7 +10,6 @@ interface BlogPostProps {
 }
 
 import Link from 'next/link';
-import Image from 'next/image';
 import VisualLinkPreview from '@/components/blog/VisualLinkPreview';
 import Callout from '@/components/blog/Callout';
 import HighlightBox from '@/components/blog/HighlightBox';
@@ -20,6 +19,7 @@ import ChatBubble from '@/components/blog/ChatBubble';
 import SplitHeading from '@/components/blog/SplitHeading';
 import PostNavigation from '@/components/blog/PostNavigation';
 import PowerCTA from '@/components/blog/PowerCTA';
+import ShareButton from '@/components/blog/ShareButton';
 
 const components = {
   VisualLinkPreview,
@@ -187,6 +187,14 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
                 </time>
                 <span className="w-1.5 h-1.5 bg-primary rounded-full" />
                 <span>KLZ Cables</span>
+                <div className="ml-auto hidden md:block">
+                  <ShareButton 
+                    title={post.frontmatter.title} 
+                    text={post.frontmatter.excerpt || ''} 
+                    url={`https://klz-cables.com/${locale}/blog/${slug}`} 
+                    locale={locale} 
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -195,6 +203,15 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro
 
       {/* Content */}
       <div className="container mx-auto px-4 py-16 md:py-24 max-w-3xl">
+        {/* Mobile Share Button */}
+        <div className="md:hidden mb-8 flex justify-end">
+          <ShareButton 
+            title={post.frontmatter.title} 
+            text={post.frontmatter.excerpt || ''} 
+            url={`https://klz-cables.com/${locale}/blog/${slug}`} 
+            locale={locale} 
+          />
+        </div>
         {/* If no featured image, show header here */}
         {!post.frontmatter.featuredImage && (
           <header className="mb-16 text-center">

app/[locale]/blog/page.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 import { getAllPosts } from '@/lib/blog';
 import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
 import Reveal from '@/components/Reveal';
+import { getTranslations } from 'next-intl/server';
 
 interface BlogIndexProps {
   params: {
@@ -10,15 +11,15 @@ interface BlogIndexProps {
 }
 
 export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
+  const t = await getTranslations({ locale, namespace: 'Blog.meta' });
   return {
-    title: locale === 'de' ? 'Neuigkeiten zu Kabeln und Energielösungen' : 'News on Cables and Energy Solutions',
-    description: locale === 'de'
-      ? 'Bleiben Sie auf dem Laufenden! Lesen Sie aktuelle Themen und Insights zu Kabeltechnologie, Energielösungen und branchenspezifischen Innovationen.'
-      : 'Stay up to date! Read current topics and insights on cable technology, energy solutions and industry-specific innovations.',
+    title: t('title'),
+    description: t('description'),
   };
 }
 
 export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
+  const t = await getTranslations('Blog');
   const posts = await getAllPosts(locale);
   
   // Sort posts by date descending
@@ -46,7 +47,7 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
         
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
-            <Badge variant="accent" className="mb-4 md:mb-6">Featured Post</Badge>
+            <Badge variant="accent" className="mb-4 md:mb-6">{t('featuredPost')}</Badge>
             {featuredPost && (
               <>
                 <h1 className="text-3xl md:text-7xl font-extrabold text-white mb-4 md:mb-8 leading-[1.1] line-clamp-3 md:line-clamp-none">
@@ -56,7 +57,7 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
                   {featuredPost.frontmatter.excerpt}
                 </p>
                 <Button href={`/${locale}/blog/${featuredPost.slug}`} variant="accent" size="lg" className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl">
-                  {locale === 'de' ? 'Vollständigen Artikel lesen' : 'Read Full Article'}
+                  {t('readFullArticle')}
                   <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
                 </Button>
               </>
@@ -69,15 +70,15 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
         <Container>
           <Reveal>
             <div className="flex flex-col md:flex-row items-start md:items-end justify-between mb-8 md:mb-16 gap-4 md:gap-6">
-              <Heading level={2} subtitle="Latest News" className="mb-0">
-                {locale === 'de' ? 'Alle Beiträge' : 'All Articles'}
+              <Heading level={2} subtitle={t('latestNews')} className="mb-0">
+                {t('allArticles')}
               </Heading>
               <div className="flex flex-wrap gap-2 md:gap-4">
                 {/* Category filters could go here */}
-                <Badge variant="primary" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">All</Badge>
-                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">Industry</Badge>
-                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">Technical</Badge>
-                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">Sustainability</Badge>
+                <Badge variant="primary" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.all')}</Badge>
+                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.industry')}</Badge>
+                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.technical')}</Badge>
+                <Badge variant="neutral" className="cursor-pointer hover:bg-primary hover:text-white transition-colors touch-target px-3 md:px-4">{t('categories.sustainability')}</Badge>
               </div>
             </div>
           </Reveal>
@@ -119,7 +120,7 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
                       </p>
                       <div className="mt-auto pt-4 md:pt-8 border-t border-neutral-medium flex items-center justify-between">
                         <span className="text-primary text-sm md:text-base font-extrabold group-hover:text-accent-dark transition-colors">
-                          {locale === 'de' ? 'Weiterlesen' : 'Read more'}
+                          {t('readMore')}
                         </span>
                         <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300">
                           <svg className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -136,10 +137,10 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
           
           {/* Pagination Placeholder */}
           <div className="mt-12 md:mt-24 flex justify-center gap-2 md:gap-4">
-            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base" disabled>Prev</Button>
+            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base" disabled>{t('prev')}</Button>
             <Button variant="primary" size="sm" className="md:h-11 md:px-6 md:text-base">1</Button>
             <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">2</Button>
-            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">Next</Button>
+            <Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">{t('next')}</Button>
           </div>
         </Container>
       </Section>

app/[locale]/contact/page.tsx

@@ -13,7 +13,7 @@ export default function ContactPage() {
         </div>
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
-            <Heading level={1} subtitle="Get in Touch" className="text-white mb-4 md:mb-6">
+            <Heading level={1} subtitle={t('heroSubtitle')} className="text-white mb-4 md:mb-6">
               <span className="text-white">{t('title')}</span>
             </Heading>
             <p className="text-lg md:text-2xl text-white/70 leading-relaxed max-w-2xl">
@@ -29,8 +29,8 @@ export default function ContactPage() {
             {/* Contact Info */}
             <div className="lg:col-span-5 space-y-6 md:space-y-12">
               <div className="animate-fade-in">
-                <Heading level={3} subtitle="Contact Details" className="mb-6 md:mb-8">
-                  How to Reach Us
+                <Heading level={3} subtitle={t('info.subtitle')} className="mb-6 md:mb-8">
+                  {t('info.howToReachUs')}
                 </Heading>
                 <div className="space-y-4 md:space-y-8">
                   <div className="flex items-start gap-4 md:gap-6 group">
@@ -41,7 +41,7 @@ export default function ContactPage() {
                       </svg>
                     </div>
                     <div>
-                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">Our Office</h4>
+                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.office')}</h4>
                       <p className="text-sm md:text-lg text-text-secondary leading-relaxed whitespace-pre-line">
                         {t('info.address')}
                       </p>
@@ -55,7 +55,7 @@ export default function ContactPage() {
                       </svg>
                     </div>
                     <div>
-                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">Phone</h4>
+                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.phone')}</h4>
                       <a href="tel:+4988192537298" className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target">+49 881 92537298</a>
                     </div>
                   </div>
@@ -67,7 +67,7 @@ export default function ContactPage() {
                       </svg>
                     </div>
                     <div>
-                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">Email</h4>
+                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.email')}</h4>
                       <a href="mailto:info@klz-vertriebs-gmbh.com" className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target">info@klz-vertriebs-gmbh.com</a>
                     </div>
                   </div>
@@ -92,7 +92,7 @@ export default function ContactPage() {
             {/* Contact Form */}
             <div className="lg:col-span-7">
               <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl animate-slide-up">
-                <Heading level={3} subtitle="Send a Message" className="mb-6 md:mb-10">
+                <Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10">
                   {t('form.title')}
                 </Heading>
                 <form className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
@@ -101,8 +101,12 @@ export default function ContactPage() {
                     <input 
                       type="text" 
                       id="name" 
+                      name="name"
+                      autoComplete="name"
+                      enterKeyHint="next"
                       className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg" 
-                      placeholder="Your Name"
+                      placeholder={t('form.namePlaceholder')}
+                      required
                     />
                   </div>
                   <div className="space-y-1 md:space-y-2">
@@ -110,21 +114,29 @@ export default function ContactPage() {
                     <input 
                       type="email" 
                       id="email" 
+                      name="email"
+                      autoComplete="email"
+                      inputMode="email"
+                      enterKeyHint="next"
                       className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg" 
-                      placeholder="your@email.com"
+                      placeholder={t('form.emailPlaceholder')}
+                      required
                     />
                   </div>
                   <div className="md:col-span-2 space-y-1 md:space-y-2">
                     <label htmlFor="message" className="text-[10px] md:text-xs font-extrabold text-primary uppercase tracking-widest">{t('form.message')}</label>
                     <textarea 
                       id="message" 
+                      name="message"
                       rows={4} 
+                      enterKeyHint="send"
                       className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg resize-none" 
-                      placeholder="How can we help you?"
+                      placeholder={t('form.messagePlaceholder')}
+                      required
                     ></textarea>
                   </div>
                   <div className="md:col-span-2 pt-2 md:pt-4">
-                    <Button type="submit" size="lg" className="w-full shadow-xl shadow-primary/20 md:h-16 md:px-10 md:text-xl">
+                    <Button type="submit" size="lg" className="w-full shadow-xl shadow-primary/20 md:h-16 md:px-10 md:text-xl active:scale-[0.98] transition-transform">
                       {t('form.submit')}
                     </Button>
                   </div>
@@ -144,7 +156,7 @@ export default function ContactPage() {
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
               </svg>
             </div>
-            <p className="font-bold text-primary text-xl">Interactive Map Coming Soon</p>
+            <p className="font-bold text-primary text-xl">{t('map.comingSoon')}</p>
           </div>
         </div>
       </section>

app/[locale]/layout.tsx

@@ -1,14 +1,18 @@
 import {NextIntlClientProvider} from 'next-intl';
-import {getMessages} from 'next-intl/server';
+import {getMessages, getTranslations} from 'next-intl/server';
 import '../../styles/globals.css';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import { Metadata, Viewport } from 'next';
 
-export const metadata: Metadata = {
-  title: 'KLZ Cables',
-  description: 'Premium Cable Solutions',
-};
+export async function generateMetadata({params: {locale}}: {params: {locale: string}}): Promise<Metadata> {
+  const t = await getTranslations({locale, namespace: 'Index.meta'});
+ 
+  return {
+    title: t('title'),
+    description: t('description')
+  };
+}
 
 export const viewport: Viewport = {
   width: 'device-width',

app/[locale]/page.tsx

@@ -12,8 +12,6 @@ import CTA from '@/components/home/CTA';
 import Reveal from '@/components/Reveal';
 
 export default function HomePage({ params: { locale } }: { params: { locale: string } }) {
-  const t = useTranslations('Index');
-  
   return (
     <div className="flex flex-col min-h-screen">
       <Hero />

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

@@ -9,7 +9,6 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { getTranslations } from 'next-intl/server';
 import { Section, Container, Heading, Badge, Button } from '@/components/ui';
-import ProductsIllustration from '@/components/products/ProductsIllustration';
 import Scribble from '@/components/Scribble';
 
 interface ProductPageProps {
@@ -68,8 +67,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
     return (
       <div className="flex flex-col min-h-screen bg-white">
         <section className="relative min-h-[50vh] flex items-center pt-32 pb-20 overflow-hidden bg-primary-dark">
-          <ProductsIllustration />
-          <Container className="relative z-10">
+                    <Container className="relative z-10">
             <div className="max-w-4xl animate-slide-up">
               <nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
                 <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">{t('title')}</Link>
@@ -154,8 +152,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
     <div className="flex flex-col min-h-screen bg-neutral-light">
       {/* Product Hero */}
       <section className="relative pt-40 pb-32 overflow-hidden bg-primary-dark">
-        <ProductsIllustration />
-        <Container className="relative z-10">
+                <Container className="relative z-10">
           <div className="max-w-5xl animate-slide-up">
             <nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
               <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">{t('title')}</Link>

app/[locale]/products/page.tsx

@@ -1,9 +1,9 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
-import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
-import ProductsIllustration from '@/components/products/ProductsIllustration';
+import { Section, Container, Card, Badge, Button } from '@/components/ui';
 import Scribble from '@/components/Scribble';
+import Reveal from '@/components/Reveal';
 
 interface ProductsPageProps {
   params: {
@@ -49,7 +49,6 @@ export default function ProductsPage({ params }: ProductsPageProps) {
     <div className="flex flex-col min-h-screen bg-neutral-light">
       {/* Hero Section */}
       <section className="relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark">
-        <ProductsIllustration />
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
             <Badge variant="accent" className="mb-4 md:mb-8 bg-white/10 text-white border border-white/20 backdrop-blur-md px-3 py-1 md:px-4 md:py-1.5">
@@ -82,48 +81,51 @@ export default function ProductsPage({ params }: ProductsPageProps) {
         <Container>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-12">
             {categories.map((category, idx) => (
-              <Link key={idx} href={category.href} className="group block">
-                <Card className="h-full border-none shadow-sm hover:shadow-2xl transition-all duration-500 rounded-[24px] md:rounded-[48px] overflow-hidden bg-white">
-                  <div className="relative h-[200px] md:h-[400px] overflow-hidden">
-                    <Image 
-                      src={category.img} 
-                      alt={category.title}
-                      fill
-                      className="object-cover transition-transform duration-1000 group-hover:scale-105"
-                      sizes="(max-width: 768px) 100vw, 50vw"
-                    />
-                    <div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
-                    
-                    <div className="absolute top-3 right-3 md:top-8 md:right-8 w-10 h-10 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-xl md:rounded-[24px] flex items-center justify-center border border-white/20 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:bg-white/20">
-                      <img src={category.icon} alt="" className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80" />
-                    </div>
+              <Reveal key={idx} delay={idx * 100}>
+                <Link key={idx} href={category.href} className="group block">
+                  <Card className="h-full border-none shadow-sm hover:shadow-2xl transition-all duration-500 rounded-[24px] md:rounded-[48px] overflow-hidden bg-white active:scale-[0.98]">
+                    <div className="relative h-[200px] md:h-[400px] overflow-hidden">
+                      <Image 
+                        src={category.img} 
+                        alt={category.title}
+                        fill
+                        className="object-cover transition-transform duration-1000 group-hover:scale-105"
+                        sizes="(max-width: 768px) 100vw, 50vw"
+                        unoptimized
+                      />
+                      <div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
+                      
+                      <div className="absolute top-3 right-3 md:top-8 md:right-8 w-10 h-10 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-xl md:rounded-[24px] flex items-center justify-center border border-white/20 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:bg-white/20">
+                        <img src={category.icon} alt="" className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80" />
+                      </div>
 
-                    <div className="absolute bottom-4 left-4 md:bottom-10 md:left-10 right-4 md:right-10">
-                      <Badge variant="accent" className="mb-2 md:mb-4 shadow-lg bg-accent text-primary-dark border-none text-[10px] md:text-xs">
-                        {t('categoryLabel')}
-                      </Badge>
-                      <h2 className="text-xl md:text-4xl font-bold text-white leading-tight transition-transform duration-500 group-hover:translate-x-1">
-                        {category.title}
-                      </h2>
-                    </div>
-                  </div>
-                  <div className="p-5 md:p-10">
-                    <p className="text-text-secondary text-sm md:text-lg leading-relaxed mb-4 md:mb-8 line-clamp-2 md:line-clamp-none">
-                      {category.desc}
-                    </p>
-                    <div className="flex items-center text-primary font-bold text-base md:text-lg group-hover:text-accent-dark transition-colors">
-                      <span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-1">
-                        {t('viewProducts')}
-                      </span>
-                      <div className="ml-3 md:ml-4 w-8 h-8 md:w-10 md:h-10 rounded-full bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
-                        <svg className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
-                        </svg>
+                      <div className="absolute bottom-4 left-4 md:bottom-10 md:left-10 right-4 md:right-10">
+                        <Badge variant="accent" className="mb-2 md:mb-4 shadow-lg bg-accent text-primary-dark border-none text-[10px] md:text-xs">
+                          {t('categoryLabel')}
+                        </Badge>
+                        <h2 className="text-xl md:text-4xl font-bold text-white leading-tight transition-transform duration-500 group-hover:translate-x-1">
+                          {category.title}
+                        </h2>
                       </div>
                     </div>
-                  </div>
-                </Card>
-              </Link>
+                    <div className="p-5 md:p-10">
+                      <p className="text-text-secondary text-sm md:text-lg leading-relaxed mb-4 md:mb-8 line-clamp-2 md:line-clamp-none">
+                        {category.desc}
+                      </p>
+                      <div className="flex items-center text-primary font-bold text-base md:text-lg group-hover:text-accent-dark transition-colors">
+                        <span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-1">
+                          {t('viewProducts')}
+                        </span>
+                        <div className="ml-3 md:ml-4 w-8 h-8 md:w-10 md:h-10 rounded-full bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
+                          <svg className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                </Link>
+              </Reveal>
             ))}
           </div>
         </Container>

app/[locale]/team/page.tsx

@@ -1,6 +1,7 @@
 import { useTranslations } from 'next-intl';
-import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
+import { Section, Container, Heading, Badge, Button } from '@/components/ui';
 import Image from 'next/image';
+import Reveal from '@/components/Reveal';
 
 export default function TeamPage() {
   const t = useTranslations('Team');
@@ -21,7 +22,7 @@ export default function TeamPage() {
         </div>
         
         <Container className="relative z-10 text-center text-white max-w-5xl animate-slide-up">
-          <Badge variant="accent" className="mb-4 md:mb-8 shadow-lg">Our People</Badge>
+          <Badge variant="accent" className="mb-4 md:mb-8 shadow-lg">{t('hero.badge')}</Badge>
           <h1 className="text-3xl md:text-7xl lg:text-8xl font-extrabold tracking-tight leading-[1.1] mb-4 md:mb-8">
             {t('hero.subtitle')}
           </h1>
@@ -34,10 +35,10 @@ export default function TeamPage() {
       {/* Michael Bodemer Section - Sticky Narrative Split Layout */}
       <section className="relative bg-white overflow-hidden">
         <div className="flex flex-col lg:flex-row">
-          <div className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-primary-dark text-white relative">
+          <Reveal className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-primary-dark text-white relative order-2 lg:order-1">
             <div className="absolute top-0 right-0 w-32 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
-            <div className="relative z-10 animate-fade-in">
-              <Badge variant="accent" className="mb-4 md:mb-8">Managing Director</Badge>
+            <div className="relative z-10">
+              <Badge variant="accent" className="mb-4 md:mb-8">{t('michael.role')}</Badge>
               <Heading level={2} className="text-white mb-6 md:mb-10 text-3xl md:text-6xl">
                 <span className="text-white">{t('michael.name')}</span>
               </Heading>
@@ -47,21 +48,21 @@ export default function TeamPage() {
                   "{t('michael.quote')}"
                 </p>
               </div>
-              <p className="text-base md:text-xl leading-relaxed text-white/70 mb-6 md:mb-12 max-w-xl line-clamp-4 md:line-clamp-none">
+              <p className="text-base md:text-xl leading-relaxed text-white/70 mb-6 md:mb-12 max-w-xl">
                 {t('michael.description')}
               </p>
               <Button 
                 href="https://www.linkedin.com/in/michael-bodemer-33b493122/" 
                 variant="accent" 
                 size="lg"
-                className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl"
+                className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl active:scale-95 transition-transform"
               >
                 {t('michael.linkedin')}
                 <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
               </Button>
             </div>
-          </div>
-          <div className="w-full lg:w-1/2 relative min-h-[300px] md:min-h-[600px] lg:min-h-screen overflow-hidden">
+          </Reveal>
+          <div className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1 lg:order-2">
             <Image 
               src="/uploads/2024/12/DSC07768-Large.webp" 
               alt={t('michael.name')} 
@@ -69,7 +70,7 @@ export default function TeamPage() {
               className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
               sizes="(max-width: 1024px) 100vw, 50vw"
             />
-            <div className="absolute inset-0 bg-gradient-to-r from-primary-dark/20 to-transparent" />
+            <div className="absolute inset-0 bg-gradient-to-t from-primary-dark/60 lg:bg-gradient-to-r lg:from-primary-dark/20 to-transparent" />
           </div>
         </div>
       </section>
@@ -79,7 +80,7 @@ export default function TeamPage() {
         <div className="absolute inset-0 z-0">
           <Image 
             src="/uploads/2024/12/1694273920124-copy.webp" 
-            alt="Legacy" 
+            alt={t('legacy.subtitle')} 
             fill
             className="object-cover opacity-20 md:opacity-30 scale-110 animate-slow-zoom"
             sizes="100vw"
@@ -89,7 +90,7 @@ export default function TeamPage() {
         <Container className="relative z-10">
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16 items-center">
             <div className="lg:col-span-6">
-              <Heading level={2} subtitle="Our Heritage" className="text-white mb-6 md:mb-10">
+              <Heading level={2} subtitle={t('legacy.subtitle')} className="text-white mb-6 md:mb-10">
                 <span className="text-white">{t('legacy.title')}</span>
               </Heading>
               <div className="space-y-4 md:space-y-8 text-base md:text-2xl text-white/80 leading-relaxed font-medium">
@@ -103,12 +104,12 @@ export default function TeamPage() {
             </div>
             <div className="lg:col-span-6 grid grid-cols-2 md:grid-cols-2 gap-3 md:gap-6">
               <div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
-                <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">Expertise</div>
-                <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">Decades of Knowledge</div>
+                <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">{t('legacy.expertise')}</div>
+                <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">{t('legacy.expertiseDesc')}</div>
               </div>
               <div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
-                <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">Network</div>
-                <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">Global Partnerships</div>
+                <div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">{t('legacy.network')}</div>
+                <div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">{t('legacy.networkDesc')}</div>
               </div>
             </div>
           </div>
@@ -118,7 +119,7 @@ export default function TeamPage() {
       {/* Klaus Mintel Section - Reversed Split Layout */}
       <section className="relative bg-white overflow-hidden">
         <div className="flex flex-col lg:flex-row">
-          <div className="w-full lg:w-1/2 relative min-h-[300px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-2 lg:order-1">
+          <div className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1">
             <Image 
               src="/uploads/2024/12/DSC07963-Large.webp" 
               alt={t('klaus.name')} 
@@ -126,12 +127,12 @@ export default function TeamPage() {
               className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
               sizes="(max-width: 1024px) 100vw, 50vw"
             />
-            <div className="absolute inset-0 bg-gradient-to-l from-primary-dark/20 to-transparent" />
+            <div className="absolute inset-0 bg-gradient-to-t from-white/60 lg:bg-gradient-to-l lg:from-primary-dark/20 to-transparent" />
           </div>
-          <div className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-neutral-light text-primary relative order-1 lg:order-2">
+          <Reveal className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-neutral-light text-primary relative order-2">
             <div className="absolute top-0 left-0 w-32 h-full bg-primary/5 skew-x-12 -translate-x-1/2" />
-            <div className="relative z-10 animate-fade-in">
-              <Badge variant="primary" className="mb-4 md:mb-8">Founder & Visionary</Badge>
+            <div className="relative z-10">
+              <Badge variant="primary" className="mb-4 md:mb-8">{t('klaus.role')}</Badge>
               <Heading level={2} className="text-primary mb-6 md:mb-10 text-3xl md:text-6xl">
                 {t('klaus.name')}
               </Heading>
@@ -141,20 +142,20 @@ export default function TeamPage() {
                   "{t('klaus.quote')}"
                 </p>
               </div>
-              <p className="text-base md:text-xl leading-relaxed text-text-secondary mb-6 md:mb-12 max-w-xl line-clamp-4 md:line-clamp-none">
+              <p className="text-base md:text-xl leading-relaxed text-text-secondary mb-6 md:mb-12 max-w-xl">
                 {t('klaus.description')}
               </p>
               <Button 
                 href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/" 
                 variant="primary" 
                 size="lg"
-                className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl"
+                className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl active:scale-95 transition-transform"
               >
                 {t('klaus.linkedin')}
                 <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
               </Button>
             </div>
-          </div>
+          </Reveal>
         </div>
       </section>
 
@@ -164,22 +165,31 @@ export default function TeamPage() {
           <div className="sticky-narrative-container">
             <div className="sticky-narrative-sidebar mb-8 lg:mb-0">
               <div className="lg:sticky lg:top-32">
-                <Heading level={2} subtitle="Our Values" className="mb-4 md:mb-8">
+                <Heading level={2} subtitle={t('manifesto.subtitle')} className="mb-4 md:mb-8">
                   {t('manifesto.title')}
                 </Heading>
                 <p className="text-base md:text-xl text-text-secondary leading-relaxed">
-                  Our core principles guide every decision we make and every cable we deliver.
+                  {t('manifesto.tagline')}
                 </p>
+                
+                {/* Mobile-only progress indicator */}
+                <div className="flex lg:hidden mt-8 gap-2">
+                  {[0, 1, 2, 3, 4, 5].map((i) => (
+                    <div key={i} className="h-1.5 flex-1 bg-neutral-medium rounded-full overflow-hidden">
+                      <div className="h-full bg-accent w-0 group-active:w-full transition-all duration-500" />
+                    </div>
+                  ))}
+                </div>
               </div>
             </div>
             <div className="sticky-narrative-content grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-10">
               {[0, 1, 2, 3, 4, 5].map((idx) => (
-                <div key={idx} className="p-6 md:p-10 bg-neutral-light rounded-2xl md:rounded-[40px] border border-transparent hover:border-accent hover:bg-white hover:shadow-2xl transition-all duration-500 group">
+                <div key={idx} className="p-6 md:p-10 bg-neutral-light rounded-2xl md:rounded-[40px] border border-transparent hover:border-accent hover:bg-white hover:shadow-2xl transition-all duration-500 group active:scale-[0.98] touch-target-none">
                   <div className="w-10 h-10 md:w-16 md:h-16 bg-white rounded-xl md:rounded-2xl flex items-center justify-center mb-4 md:mb-8 shadow-sm group-hover:bg-accent transition-colors duration-500">
                     <span className="text-primary font-extrabold text-lg md:text-2xl group-hover:text-primary-dark">0{idx + 1}</span>
                   </div>
                   <h3 className="text-lg md:text-2xl font-bold mb-2 md:mb-4 text-primary">{t(`manifesto.items.${idx}.title`)}</h3>
-                  <p className="text-sm md:text-lg text-text-secondary leading-relaxed line-clamp-3 md:line-clamp-none">{t(`manifesto.items.${idx}.description`)}</p>
+                  <p className="text-sm md:text-lg text-text-secondary leading-relaxed">{t(`manifesto.items.${idx}.description`)}</p>
                 </div>
               ))}
             </div>
@@ -190,8 +200,8 @@ export default function TeamPage() {
       {/* Gallery Section - Premium Treatment */}
       <Section className="bg-primary-dark py-16 md:py-32">
         <Container>
-          <Heading level={2} subtitle="Behind the Scenes" align="center" className="text-white mb-12 md:mb-20">
-            <span className="text-white">Life at KLZ</span>
+          <Heading level={2} subtitle={t('gallery.subtitle')} align="center" className="text-white mb-12 md:mb-20">
+            <span className="text-white">{t('gallery.title')}</span>
           </Heading>
           <div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-6">
             {[
@@ -202,7 +212,7 @@ export default function TeamPage() {
               '/uploads/2024/12/DSC07387-Large-600x400.webp'
             ].map((src, idx) => (
               <div key={idx} className="relative aspect-[3/4] rounded-2xl md:rounded-[32px] overflow-hidden group shadow-2xl">
-                <Image src={src} alt="Team Gallery" fill className="object-cover transition-transform duration-1000 group-hover:scale-110" />
+                <Image src={src} alt={t('gallery.title')} fill className="object-cover transition-transform duration-1000 group-hover:scale-110" />
                 <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-transparent transition-all duration-500" />
                 <div className="absolute inset-0 border-0 group-hover:border-[8px] md:group-hover:border-[12px] border-white/10 transition-all duration-500 pointer-events-none" />
               </div>

components/Footer.tsx

@@ -5,6 +5,7 @@ import { Container, Heading } from './ui';
 
 export default function Footer() {
   const t = useTranslations('Footer');
+  const navT = useTranslations('Navigation');
   const locale = useLocale();
   const currentYear = new Date().getFullYear();
 
@@ -19,7 +20,7 @@ export default function Footer() {
             <Link href={`/${locale}`} className="inline-block group">
               <Image 
                 src="/logo-white.svg" 
-                alt="KLZ Cables" 
+                alt={t('products')} 
                 width={150} 
                 height={40} 
                 className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
@@ -27,7 +28,7 @@ export default function Footer() {
               />
             </Link>
             <p className="text-white/60 text-lg leading-relaxed max-w-sm">
-              Leading the way in cable infrastructure and sustainable energy solutions. Quality, innovation, and reliability since 1998.
+              {t('tagline')}
             </p>
             <div className="flex gap-4">
               <a href="https://www.linkedin.com/company/klz-vertriebs-gmbh/" target="_blank" rel="noopener noreferrer" className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10">
@@ -50,12 +51,12 @@ export default function Footer() {
           </div>
 
           <div className="lg:col-span-2">
-            <h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">Company</h4>
+            <h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">{t('company')}</h4>
             <ul className="space-y-4 text-white/70">
-              <li><Link href={`/${locale}/team`} className="hover:text-white transition-colors">Our Team</Link></li>
-              <li><Link href={`/${locale}/products`} className="hover:text-white transition-colors">Products</Link></li>
-              <li><Link href={`/${locale}/blog`} className="hover:text-white transition-colors">Blog</Link></li>
-              <li><Link href={`/${locale}/contact`} className="hover:text-white transition-colors">Contact</Link></li>
+              <li><Link href={`/${locale}/team`} className="hover:text-white transition-colors">{navT('team')}</Link></li>
+              <li><Link href={`/${locale}/products`} className="hover:text-white transition-colors">{navT('products')}</Link></li>
+              <li><Link href={`/${locale}/blog`} className="hover:text-white transition-colors">{navT('blog')}</Link></li>
+              <li><Link href={`/${locale}/contact`} className="hover:text-white transition-colors">{navT('contact')}</Link></li>
             </ul>
           </div>
 
@@ -72,7 +73,7 @@ export default function Footer() {
                     <p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2">
                       {post}
                     </p>
-                    <span className="text-xs text-white/40 uppercase tracking-widest">Read Article &rarr;</span>
+                    <span className="text-xs text-white/40 uppercase tracking-widest">{t('readArticle')} &rarr;</span>
                   </Link>
                 </li>
               ))}
@@ -81,7 +82,7 @@ export default function Footer() {
         </div>
 
         <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-sm font-medium">
-          <p>Copyright © {currentYear} KLZ Vertriebs GmbH. All rights reserved.</p>
+          <p>{t('copyright', { year: currentYear })}</p>
           <div className="flex gap-8">
             <Link href="/en" className="hover:text-white transition-colors">English</Link>
             <Link href="/de" className="hover:text-white transition-colors">Deutsch</Link>

components/Header.tsx

@@ -12,6 +12,7 @@ export default function Header() {
   const t = useTranslations('Navigation');
   const pathname = usePathname();
   const [isScrolled, setIsScrolled] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   
   // Extract locale from pathname
   const currentLocale = pathname.split('/')[1] || 'en';
@@ -27,6 +28,20 @@ export default function Header() {
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    setIsMobileMenuOpen(false);
+  }, [pathname]);
+
+  // Prevent scroll when mobile menu is open
+  useEffect(() => {
+    if (isMobileMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+  }, [isMobileMenuOpen]);
   
   // Function to get path for a different locale
   const getPathForLocale = (newLocale: string) => {
@@ -45,8 +60,8 @@ export default function Header() {
   const headerClass = cn(
     "fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p",
     {
-      "bg-transparent py-4 md:py-8": isHomePage && !isScrolled,
-      "bg-primary py-3 md:py-4 shadow-2xl": !isHomePage || isScrolled,
+      "bg-transparent py-4 md:py-8": isHomePage && !isScrolled && !isMobileMenuOpen,
+      "bg-primary py-3 md:py-4 shadow-2xl": !isHomePage || isScrolled || isMobileMenuOpen,
     }
   );
 
@@ -60,7 +75,7 @@ export default function Header() {
           <Link href={`/${currentLocale}`} className="flex-shrink-0 group touch-target">
             <Image 
               src={logoSrc} 
-              alt="KLZ Cables" 
+              alt={t('home')} 
               width={120} 
               height={120} 
               className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
@@ -114,15 +129,79 @@ export default function Header() {
             </div>
 
             {/* Mobile Menu Button */}
-            <button className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20", textColorClass)}>
+            <button 
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 z-50", textColorClass)}
+              aria-label={t('toggleMenu')}
+            >
               <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                {isMobileMenuOpen ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                )}
               </svg>
             </button>
           </div>
         </div>
+
+        {/* Mobile Menu Overlay */}
+        <div className={cn(
+          "fixed inset-0 bg-primary-dark z-40 lg:hidden transition-all duration-500 ease-in-out flex flex-col",
+          isMobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
+        )}>
+          <div className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
+            {menuItems.map((item, idx) => (
+              <Link 
+                key={item.href} 
+                href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                className={cn(
+                  "text-3xl font-extrabold text-white hover:text-accent transition-all transform",
+                  isMobileMenuOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
+                )}
+                style={{ transitionDelay: `${idx * 100}ms` }}
+              >
+                {item.label}
+              </Link>
+            ))}
+            
+            <div className={cn(
+              "pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500 delay-500",
+              isMobileMenuOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
+            )}>
+              <div className="flex items-center space-x-8 text-xl font-extrabold tracking-widest uppercase text-white">
+                <Link 
+                  href={getPathForLocale('en')} 
+                  className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
+                >
+                  EN
+                </Link>
+                <div className="w-px h-6 bg-white/20" />
+                <Link 
+                  href={getPathForLocale('de')} 
+                  className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
+                >
+                  DE
+                </Link>
+              </div>
+              
+              <Button 
+                href={`/${currentLocale}/contact`}
+                variant="accent" 
+                size="lg"
+                className="w-full max-w-xs py-6 text-xl shadow-2xl"
+              >
+                {t('contact')}
+              </Button>
+            </div>
+          </div>
+          
+          {/* Bottom Branding */}
+          <div className="p-12 flex justify-center opacity-20">
+            <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
+          </div>
+        </div>
       </header>
-      {/* Removed spacer div that caused white gap */}
     </>
   );
 }

components/blog/ShareButton.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/components/ui';
+
+interface ShareButtonProps {
+  title: string;
+  text: string;
+  url: string;
+  locale: string;
+}
+
+export default function ShareButton({ title, text, url, locale }: ShareButtonProps) {
+  const handleShare = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title,
+          text,
+          url,
+        });
+      } catch (error) {
+        console.error('Error sharing:', error);
+      }
+    } else {
+      // Fallback to copy link
+      try {
+        await navigator.clipboard.writeText(url);
+        alert(locale === 'de' ? 'Link kopiert!' : 'Link copied!');
+      } catch (error) {
+        console.error('Error copying link:', error);
+      }
+    }
+  };
+
+  return (
+    <Button 
+      onClick={handleShare}
+      variant="outline" 
+      size="sm" 
+      className="flex items-center gap-2 rounded-full px-6"
+    >
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 100 5.368 3 3 0 000-5.368z" />
+      </svg>
+      {locale === 'de' ? 'Teilen' : 'Share'}
+    </Button>
+  );
+}

components/home/CTA.tsx

@@ -14,11 +14,11 @@ export default function CTA() {
       <Container className="relative z-10">
         <div className="flex flex-col lg:flex-row items-center justify-between gap-16">
           <div className="max-w-3xl text-center lg:text-left">
-            <Heading level={2} subtitle="Get Started" className="text-white mb-6">
+            <Heading level={2} subtitle={t('subtitle')} className="text-white mb-6">
               <span className="text-white">{t('title')}</span>
             </Heading>
             <p className="text-xl text-white/70 leading-relaxed">
-              Partner with KLZ for reliable, high-performance cable solutions tailored to your project's unique requirements.
+              {t('description')}
             </p>
           </div>
           <div className="flex-shrink-0">

components/home/Experience.tsx

@@ -11,7 +11,7 @@ export default function Experience() {
       <div className="absolute inset-0 z-0">
         <Image 
           src="/uploads/2024/12/1694273920124-copy-2.webp" 
-          alt="Experience Background" 
+          alt={t('subtitle')} 
           fill
           className="object-cover object-center scale-105 animate-slow-zoom"
           unoptimized
@@ -22,7 +22,7 @@ export default function Experience() {
       
       <Container className="relative z-10">
         <div className="max-w-3xl">
-          <Heading level={2} subtitle="Our Legacy" className="text-white">
+          <Heading level={2} subtitle={t('subtitle')} className="text-white">
             <span className="text-white">{t('title')}</span>
           </Heading>
           <div className="space-y-8 text-xl text-white/90 leading-relaxed font-medium">
@@ -36,12 +36,12 @@ export default function Experience() {
           
           <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
             <div className="animate-fade-in">
-              <div className="text-4xl font-extrabold text-accent mb-4">Certified Quality</div>
-              <div className="text-lg font-bold uppercase tracking-widest text-white/60">VDE Approved & Trusted by Major Energy Suppliers</div>
+              <div className="text-4xl font-extrabold text-accent mb-4">{t('certifiedQuality')}</div>
+              <div className="text-lg font-bold uppercase tracking-widest text-white/60">{t('vdeApproved')}</div>
             </div>
             <div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
-              <div className="text-4xl font-extrabold text-accent mb-4">Full Spectrum</div>
-              <div className="text-lg font-bold uppercase tracking-widest text-white/60">From 1kV to 220kV Solutions</div>
+              <div className="text-4xl font-extrabold text-accent mb-4">{t('fullSpectrum')}</div>
+              <div className="text-lg font-bold uppercase tracking-widest text-white/60">{t('solutionsRange')}</div>
             </div>
           </div>
         </div>

components/home/GallerySection.tsx

@@ -17,7 +17,7 @@ export default function GallerySection() {
   return (
     <Section className="bg-white text-neutral-dark py-32">
       <Container>
-        <Heading level={2} subtitle="Visual Journey" align="center">
+        <Heading level={2} subtitle={t('subtitle')} align="center">
           {t('title')}
         </Heading>
         

components/home/MeetTheTeam.tsx

@@ -5,6 +5,7 @@ import { Section, Container, Button, Heading } from '../../components/ui';
 
 export default function MeetTheTeam() {
   const t = useTranslations('Home.meetTheTeam');
+  const teamT = useTranslations('Team');
   const locale = useLocale();
 
   return (
@@ -12,7 +13,7 @@ export default function MeetTheTeam() {
       <div className="absolute inset-0 z-0">
         <Image 
           src="/uploads/2024/12/DSC08036-Large.webp" 
-          alt="KLZ Team" 
+          alt={t('subtitle')} 
           fill
           className="object-cover scale-105 animate-slow-zoom"
           unoptimized
@@ -23,7 +24,7 @@ export default function MeetTheTeam() {
       
       <Container className="relative z-10">
         <div className="max-w-3xl text-white animate-slide-up">
-          <Heading level={2} subtitle="The People Behind KLZ" className="text-white mb-8">
+          <Heading level={2} subtitle={t('subtitle')} className="text-white mb-8">
             <span className="text-white">{t('title')}</span>
           </Heading>
           
@@ -43,10 +44,10 @@ export default function MeetTheTeam() {
             <div className="flex items-center gap-4">
               <div className="flex -space-x-4">
                 <div className="w-14 h-14 rounded-full border-4 border-primary-dark overflow-hidden relative">
-                  <Image src="/uploads/2024/12/DSC07768-Large.webp" alt="Michael Bodemer" fill className="object-cover" />
+                  <Image src="/uploads/2024/12/DSC07768-Large.webp" alt={teamT('michael.name')} fill className="object-cover" />
                 </div>
                 <div className="w-14 h-14 rounded-full border-4 border-primary-dark overflow-hidden relative">
-                  <Image src="/uploads/2024/12/DSC07963-Large.webp" alt="Klaus Mintel" fill className="object-cover" />
+                  <Image src="/uploads/2024/12/DSC07963-Large.webp" alt={teamT('klaus.name')} fill className="object-cover" />
                 </div>
               </div>
               <span className="text-white/60 font-bold text-sm uppercase tracking-widest">

components/home/RecentPosts.tsx

@@ -9,6 +9,7 @@ interface RecentPostsProps {
 }
 
 export default async function RecentPosts({ locale }: RecentPostsProps) {
+  const t = await getTranslations('Blog');
   const posts = await getAllPosts(locale);
   const recentPosts = posts.slice(0, 3);
 
@@ -18,11 +19,11 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
     <Section className="bg-neutral py-16 md:py-24">
       <Container>
         <div className="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 md:mb-16 gap-6">
-          <Heading level={2} subtitle="Insights" className="mb-0">
-            {locale === 'de' ? 'Aktuelle Blogbeiträge' : 'Recent Blog Posts'}
+          <Heading level={2} subtitle={t('latestNews')} className="mb-0">
+            {t('allArticles')}
           </Heading>
           <Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-lg touch-target">
-            {locale === 'de' ? 'Alle Beiträge ansehen' : 'View all posts'} 
+            {t('allArticles')} 
             <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
           </Link>
         </div>
@@ -59,7 +60,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                     {post.frontmatter.title}
                   </h3>
                   <div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
-                    {locale === 'de' ? 'Weiterlesen' : 'Read more'}
+                    {t('readMore')}
                     <svg className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                     </svg>

components/home/VideoSection.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-import { useTranslations } from 'next-intl';
 import Scribble from '@/components/Scribble';
-import { Section } from '../../components/ui';
+import { useTranslations } from 'next-intl';
 
 export default function VideoSection() {
   const t = useTranslations('Home.video');
@@ -29,11 +27,6 @@ export default function VideoSection() {
               )
             })}
           </h2>
-          <div className="mt-12 flex justify-center">
-            <div className="w-24 h-24 rounded-full border-2 border-white/30 flex items-center justify-center group cursor-pointer hover:bg-white transition-all duration-500">
-              <div className="w-0 h-0 border-t-[12px] border-t-transparent border-l-[20px] border-l-white border-b-[12px] border-b-transparent ml-2 group-hover:border-l-primary-dark transition-colors" />
-            </div>
-          </div>
         </div>
       </div>
     </section>

components/home/WhatWeDo.tsx

@@ -11,7 +11,7 @@ export default function WhatWeDo() {
         <div className="sticky-narrative-container">
           <div className="sticky-narrative-sidebar">
             <div className="lg:sticky lg:top-32">
-              <Heading level={2} subtitle="Our Expertise">
+              <Heading level={2} subtitle={t('expertise')}>
                 {t('title')}
               </Heading>
               <p className="text-lg md:text-xl text-text-secondary leading-relaxed">

components/home/WhyChooseUs.tsx

@@ -11,7 +11,7 @@ export default function WhyChooseUs() {
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
           <div className="lg:col-span-4 order-1 lg:order-2">
             <div className="sticky top-32">
-              <Heading level={2} subtitle="Why KLZ">
+              <Heading level={2} subtitle={t('whyKlz')}>
                 {t('title')}
               </Heading>
               <p className="text-xl text-text-secondary leading-relaxed">
@@ -19,19 +19,14 @@ export default function WhyChooseUs() {
               </p>
               
               <div className="mt-12 space-y-6">
-                {[
-                  'Certified Quality Standards',
-                  'Sustainable Supply Chain',
-                  'Expert Technical Support',
-                  'Fast Global Delivery'
-                ].map((item, i) => (
+                {[0, 1, 2, 3].map((i) => (
                   <div key={i} className="flex items-center gap-4">
                     <div className="flex-shrink-0 w-6 h-6 rounded-full bg-accent flex items-center justify-center">
                       <svg className="w-4 h-4 text-primary-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                       </svg>
                     </div>
-                    <span className="font-bold text-primary">{item}</span>
+                    <span className="font-bold text-primary">{t(`features.${i}`)}</span>
                   </div>
                 ))}
               </div>

components/products/ProductsIllustration.tsx

@@ -1,100 +0,0 @@
-'use client';
-
-import React from 'react';
-
-export default function ProductsIllustration() {
-  return (
-    <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none bg-primary">
-      <svg
-        viewBox="0 0 1000 500"
-        className="w-full h-full"
-        preserveAspectRatio="xMidYMid slice"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <defs>
-          <linearGradient id="scan-beam" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stopColor="#82ed20" stopOpacity="0" />
-            <stop offset="50%" stopColor="#82ed20" stopOpacity="0.5" />
-            <stop offset="100%" stopColor="#82ed20" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-
-        {/* 3D Cable Wireframe Construction */}
-        <g transform="translate(100, 250) rotate(-10)">
-           
-           {/* Inner Core Strands (Twisted) */}
-           {[...Array(5)].map((_, i) => (
-             <path
-               key={`strand-${i}`}
-               d={`M 0 ${i*10 - 20} Q 400 ${i*10 - 60} 800 ${i*10 - 20}`}
-               stroke="white"
-               strokeWidth="2"
-               strokeOpacity="0.8"
-               fill="none"
-             >
-               <animate attributeName="d" 
-                 values={`M 0 ${i*10 - 20} Q 400 ${i*10 - 60} 800 ${i*10 - 20};
-                          M 0 ${i*10 - 20} Q 400 ${i*10 + 20} 800 ${i*10 - 20};
-                          M 0 ${i*10 - 20} Q 400 ${i*10 - 60} 800 ${i*10 - 20}`}
-                 dur="4s"
-                 repeatCount="indefinite"
-               />
-             </path>
-           ))}
-
-           {/* Insulation Layers (Ellipses along the path) */}
-           {[...Array(8)].map((_, i) => (
-             <ellipse 
-               key={`ring-${i}`}
-               cx={100 + i * 100} 
-               cy="0" 
-               rx="40" 
-               ry="80" 
-               stroke="white" 
-               strokeWidth="1" 
-               strokeOpacity="0.2"
-               fill="none"
-             />
-           ))}
-
-           {/* Outer Sheath (Top and Bottom Lines) */}
-           <path d="M 0 -80 L 800 -80" stroke="white" strokeWidth="1" strokeOpacity="0.3" strokeDasharray="10 5" />
-           <path d="M 0 80 L 800 80" stroke="white" strokeWidth="1" strokeOpacity="0.3" strokeDasharray="10 5" />
-
-           {/* Scanning Ring (Animated) */}
-           <g>
-             <ellipse cx="0" cy="0" rx="50" ry="90" stroke="#82ed20" strokeWidth="2" strokeOpacity="0.8" fill="none">
-               <animate attributeName="cx" from="0" to="800" dur="3s" repeatCount="indefinite" />
-               <animate attributeName="rx" values="50;45;50" dur="0.5s" repeatCount="indefinite" />
-             </ellipse>
-             {/* Scan Beam */}
-             <rect x="-50" y="-100" width="100" height="200" fill="url(#scan-beam)" opacity="0.3">
-                <animate attributeName="x" from="-50" to="750" dur="3s" repeatCount="indefinite" />
-             </rect>
-           </g>
-        </g>
-
-        {/* Floating Data/Tech Elements */}
-        <g transform="translate(0, 0)">
-           {[...Array(20)].map((_, i) => (
-             <rect
-               key={`bit-${i}`}
-               x={Math.random() * 1000}
-               y={Math.random() * 500}
-               width={Math.random() * 20 + 5}
-               height="2"
-               fill="white"
-               fillOpacity="0.3"
-             >
-               <animate attributeName="opacity" values="0;0.5;0" dur={`${Math.random() * 2 + 1}s`} repeatCount="indefinite" />
-               <animate attributeName="width" values="5;30;5" dur={`${Math.random() * 2 + 1}s`} repeatCount="indefinite" />
-             </rect>
-           ))}
-        </g>
-
-      </svg>
-      <div className="absolute inset-0 bg-gradient-to-r from-primary/80 via-transparent to-primary/80" />
-    </div>
-  );
-}

messages/de.json

@@ -1,14 +1,19 @@
 {
   "Index": {
     "title": "KLZ Cables - Hochwertige Kabel",
-    "description": "Ihr Partner für hochwertige Kabel."
+    "description": "Ihr Partner für hochwertige Kabel.",
+    "meta": {
+      "title": "KLZ Cables",
+      "description": "Premium-Kabellösungen"
+    }
   },
   "Navigation": {
     "home": "Start",
     "team": "Team",
     "products": "Produkte",
     "blog": "Blog",
-    "contact": "Kontakt"
+    "contact": "Kontakt",
+    "toggleMenu": "Menü umschalten"
   },
   "Footer": {
     "legal": "Rechtliches",
@@ -27,32 +32,46 @@
     "languages": "Sprachen",
     "archives": "Archiv",
     "categories": "Kategorien",
-    "recentPosts": "Neueste Artikel"
+    "recentPosts": "Neueste Artikel",
+    "company": "Unternehmen",
+    "readArticle": "Artikel lesen",
+    "copyright": "Copyright © {year} KLZ Vertriebs GmbH. Alle Rechte vorbehalten.",
+    "tagline": "Wegweisend in der Kabelinfrastruktur und bei nachhaltigen Energielösungen. Qualität, Innovation und Zuverlässigkeit seit 1998."
   },
   "Team": {
     "hero": {
       "title": "Die Köpfe, die Energie zum Laufen bringen",
-      "subtitle": "Wir verbinden Energie, Know-how und Innovation, um eine nachhaltigere Zukunft zu gestalten."
+      "subtitle": "Wir verbinden Energie, Know-how und Innovation, um eine nachhaltigere Zukunft zu gestalten.",
+      "badge": "Unser Team"
     },
     "michael": {
       "name": "Michael Bodemer",
       "quote": "„Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren.“",
       "description": "Michael Bodemer ist unser Mann, wenn es kompliziert wird – und das ist bei Kabelnetzen oft der Fall. Mit seinem scharfen Blick und einem Händchen für praktikable Lösungen ist er eine unserer zentralen Säulen. Michael denkt nicht nur an Details, er treibt Projekte voran – sei es in der Planung, im Kundengespräch oder bei der Auswahl der besten Kabel für jedes Vorhaben.",
-      "linkedin": "Michael's LinkedIn"
+      "linkedin": "Michael's LinkedIn",
+      "role": "Geschäftsführer"
     },
     "legacy": {
       "title": "Verbindungen, die Geschichte schreiben",
+      "subtitle": "Unser Erbe",
       "p1": "Bei KLZ vereinen wir Tradition und Innovation zu zuverlässigen Energielösungen. Unsere Wurzeln reichen tief in die Geschichte der Kabeltechnologie zurück – mit jeder Menge praktischer Erfahrung und einem Blick für zukunftsweisende Entwicklungen.",
-      "p2": "In jedem Projekt steckt nicht nur technisches Know-how, sondern auch das Bewusstsein für das Handwerk, das die Welt seit Generationen verbindet. Historische Illustrationen aus den frühen Tagen der Energiebranche erinnern uns daran, wie weit wir gekommen sind – und dass echte Exzellenz immer mit Sorgfalt beginnt."
+      "p2": "In jedem Projekt steckt nicht nur technisches Know-how, sondern auch das Bewusstsein für das Handwerk, das die Welt seit Generationen verbindet. Historische Illustrationen aus den frühen Tagen der Energiebranche erinnern uns daran, wie weit wir gekommen sind – und dass echte Exzellenz immer mit Sorgfalt beginnt.",
+      "expertise": "Expertise",
+      "expertiseDesc": "Jahrzehntelanges Wissen",
+      "network": "Netzwerk",
+      "networkDesc": "Globale Partnerschaften"
     },
     "klaus": {
       "name": "Klaus Mintel",
       "quote": "„Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen.“",
       "description": "Klaus ist der Fels in der Brandung – selbst wenn das Kabelchaos überhandnimmt. Mit jahrzehntelanger Erfahrung und einem stabilen Netzwerk sorgt er dafür, dass alles glatt läuft. Er denkt nicht nur in Lösungen, sondern bringt auch Humor und den nötigen Weitblick mit, um selbst komplexe Themen locker auf den Punkt zu bringen.",
-      "linkedin": "Klaus' LinkedIn"
+      "linkedin": "Klaus' LinkedIn",
+      "role": "Gründer & Visionär"
     },
     "manifesto": {
       "title": "Unser Manifest",
+      "subtitle": "Unsere Werte",
+      "tagline": "Unsere Grundprinzipien leiten jede Entscheidung, die wir treffen, und jedes Kabel, das wir liefern.",
       "items": [
         {
           "title": "Kompetenz",
@@ -79,14 +98,24 @@
           "description": "Wir halten, was wir versprechen – jedes Mal und ohne Ausnahme."
         }
       ]
+    },
+    "gallery": {
+      "title": "Leben bei KLZ",
+      "subtitle": "Hinter den Kulissen"
     }
   },
   "Contact": {
     "title": "Kontaktieren Sie uns",
     "subtitle": "Haben Sie Fragen zu unseren Produkten oder benötigen Sie eine maßgeschneiderte Lösung? Wir sind für Sie da.",
+    "heroSubtitle": "Kontakt aufnehmen",
     "info": {
       "title": "Kontaktinformationen",
-      "address": "Raiffeisenstraße 22\n73630 Remshalden\nDeutschland"
+      "subtitle": "Kontaktdetails",
+      "howToReachUs": "So erreichen Sie uns",
+      "address": "Raiffeisenstraße 22\n73630 Remshalden\nDeutschland",
+      "office": "Unser Büro",
+      "phone": "Telefon",
+      "email": "E-Mail"
     },
     "hours": {
       "title": "Geschäftszeiten",
@@ -97,10 +126,17 @@
     },
     "form": {
       "title": "Schreiben Sie uns eine Nachricht",
+      "subtitle": "Nachricht senden",
       "name": "Name",
+      "namePlaceholder": "Ihr Name",
       "email": "E-Mail",
+      "emailPlaceholder": "ihre@email.de",
       "message": "Nachricht",
+      "messagePlaceholder": "Wie können wir Ihnen helfen?",
       "submit": "Nachricht senden"
+    },
+    "map": {
+      "comingSoon": "Interaktive Karte demnächst verfügbar"
     }
   },
   "Products": {
@@ -157,11 +193,13 @@
     "hero": {
       "title": "Wir helfen beim Ausbau der Energiekabelnetze für eine <green>grüne</green> Zukunft",
       "cta": "Lassen Sie uns reden",
-      "exploreProducts": "Produkte entdecken"
+      "exploreProducts": "Produkte entdecken",
+      "subtitle": "Wegweisend in der Kabelinfrastruktur"
     },
     "whatWeDo": {
       "title": "Was wir tun",
       "subtitle": "Wir sorgen dafür, dass der Strom fließt – mit qualitätsgeprüften Kabeln. Von der Niederspannung bis zur Hochspannung.",
+      "expertise": "Unsere Expertise",
       "quote": "Wir liefern nicht nur Kabel; wir liefern die Infrastruktur für eine nachhaltige Zukunft.",
       "items": [
         {
@@ -185,6 +223,13 @@
     "whyChooseUs": {
       "title": "Warum wir",
       "subtitle": "Erfahrung verhindert viele Fehler, aber wir lernen jeden Tag dazu",
+      "whyKlz": "Warum KLZ",
+      "features": [
+        "Zertifizierte Qualitätsstandards",
+        "Nachhaltige Lieferkette",
+        "Experten-Support",
+        "Schnelle weltweite Lieferung"
+      ],
       "items": [
         {
           "title": "Expertise mit Tiefgang",
@@ -206,17 +251,24 @@
     },
     "experience": {
       "title": "Jahrzehntelange Erfahrung, verwurzelt in der Kabelgeschichte",
-      "p1": "Bei KLZ fließt Kabel durch unsere Adern. Klaus begann seine Reise bei der renommierten Firma Felten & Guilleaume und trat damit in die Fußstapfen seiner Eltern, die ihr Leben demselben ikonischen Unternehmen widmeten. Für Klaus ist das nicht nur Arbeit – es ist ein Vermächtnis, das auf Handwerkskunst, Innovation und Stolz basiert.",
-      "p2": "Wir ehren diese Geschichte mit Original-Illustrationen aus der Ära von Felten & Guilleaume, die einst als Postkarten verwendet wurden. Diese Bilder erinnern uns an die Generationen, die die Welt miteinander vernetzt haben – eine Tradition, die wir heute stolz fortsetzen."
+      "subtitle": "Unser Erbe",
+      "p1": "At KLZ, cables run in our veins. Klaus began his journey at the renowned Felten & Guilleaume, following in the footsteps of his parents, who dedicated their lives to the same iconic company. For Klaus, this isn’t just work – it’s a legacy built on craftsmanship, innovation, and pride.",
+      "p2": "Wir ehren diese Geschichte mit Original-Illustrationen aus der Ära von Felten & Guilleaume, die einst als Postkarten verwendet wurden. Diese Bilder erinnern uns an die Generationen, die die Welt miteinander vernetzt haben – eine Tradition, die wir heute stolz fortsetzen.",
+      "certifiedQuality": "Zertifizierte Qualität",
+      "vdeApproved": "VDE-geprüft & Vertrauen von großen Energieversorgern",
+      "fullSpectrum": "Volles Spektrum",
+      "solutionsRange": "Lösungen von 1kV bis 220kV"
     },
     "meetTheTeam": {
       "title": "Lernen Sie das Team hinter KLZ kennen",
+      "subtitle": "Die Köpfe hinter KLZ",
       "description": "Bei KLZ ist unser Team die Kraft hinter den Kabeln. Von erfahrenen Experten wie Michael und Klaus bis hin zu einer engagierten Gruppe von Planern, Logistikspezialisten und Kundendienstmitarbeitern spielt jedes Mitglied eine entscheidende Rolle. Gemeinsam verbinden wir jahrzehntelange Erfahrung, innovatives Denken und das gemeinsame Engagement für die Bereitstellung zuverlässiger Energielösungen.",
       "cta": "Unser Team ansehen",
       "andNetwork": "& Unser Experten-Netzwerk"
     },
     "gallery": {
       "title": "Starke Verbindungen für eine nachhaltige Welt.",
+      "subtitle": "Visuelle Reise",
       "alt": "Galeriebild"
     },
     "video": {
@@ -224,7 +276,39 @@
     },
     "cta": {
       "title": "Genug Informationen, lassen Sie uns gemeinsam etwas aufbauen!",
+      "subtitle": "Loslegen",
+      "description": "Partnern Sie mit KLZ für zuverlässige, leistungsstarke Kabellösungen, die auf die einzigartigen Anforderungen Ihres Projekts zugeschnitten sind.",
       "button": "Jetzt Kontakt aufnehmen"
     }
+  },
+  "Blog": {
+    "meta": {
+      "title": "Neuigkeiten zu Kabeln und Energielösungen",
+      "description": "Bleiben Sie auf dem Laufenden! Lesen Sie aktuelle Themen und Insights zu Kabeltechnologie, Energielösungen und branchenspezifischen Innovationen."
+    },
+    "featuredPost": "Hervorgehobener Beitrag",
+    "readFullArticle": "Vollständigen Artikel lesen",
+    "latestNews": "Aktuelle Neuigkeiten",
+    "allArticles": "Alle Artikel",
+    "readMore": "Weiterlesen",
+    "prev": "Zurück",
+    "next": "Weiter",
+    "categories": {
+      "all": "Alle",
+      "industry": "Industrie",
+      "technical": "Technisch",
+      "sustainability": "Nachhaltigkeit"
+    }
+  },
+  "StandardPage": {
+    "badge": "Information",
+    "overview": "Übersicht",
+    "details": "Details",
+    "support": "Support",
+    "quickNavigation": "Schnellnavigation",
+    "exploreDetails": "Entdecken Sie die Details von {title}. KLZ bietet umfassende Informationen zu all unseren Dienstleistungen und Unternehmensrichtlinien.",
+    "needHelp": "Brauchen Sie Hilfe?",
+    "supportTeamAvailable": "Unser Support-Team steht Ihnen bei Fragen zu diesem Thema gerne zur Verfügung.",
+    "contactUs": "Kontaktieren Sie uns"
   }
 }

messages/en.json

@@ -1,14 +1,19 @@
 {
   "Index": {
     "title": "KLZ Cables - High Quality Cables",
-    "description": "Your partner for high quality cables."
+    "description": "Your partner for high quality cables.",
+    "meta": {
+      "title": "KLZ Cables",
+      "description": "Premium Cable Solutions"
+    }
   },
   "Navigation": {
     "home": "Home",
     "team": "Team",
     "products": "Products",
     "blog": "Blog",
-    "contact": "Contact"
+    "contact": "Contact",
+    "toggleMenu": "Toggle Menu"
   },
   "Footer": {
     "legal": "Legal",
@@ -27,32 +32,46 @@
     "languages": "Languages",
     "archives": "Archives",
     "categories": "Categories",
-    "recentPosts": "Recent Posts"
+    "recentPosts": "Recent Posts",
+    "company": "Company",
+    "readArticle": "Read Article",
+    "copyright": "Copyright © {year} KLZ Vertriebs GmbH. All rights reserved.",
+    "tagline": "Leading the way in cable infrastructure and sustainable energy solutions. Quality, innovation, and reliability since 1998."
   },
   "Team": {
     "hero": {
       "title": "The bright sparks behind the power",
-      "subtitle": "We connect energy, expertise, and innovation to power a greener future."
+      "subtitle": "We connect energy, expertise, and innovation to power a greener future.",
+      "badge": "Our People"
     },
     "michael": {
       "name": "Michael Bodemer",
       "quote": "\"Challenges exist to be solved, not to debate how complicated they are.\"",
       "description": "Michael Bodemer is the go-to guy when things get complicated—and let’s face it, that’s often the case with cable networks. With sharp insight and a knack for practical solutions, Michael is one of our key players. He’s not just detail-oriented; he’s a driving force—whether it’s in planning, customer interactions, or securing the best cables for every project.",
-      "linkedin": "Check Michael's LinkedIn"
+      "linkedin": "Check Michael's LinkedIn",
+      "role": "Managing Director"
     },
     "legacy": {
       "title": "A Legacy of Excellence in Every Connection",
+      "subtitle": "Our Heritage",
       "p1": "At KLZ, our expertise is built on generations of dedication to the energy industry. With decades of hands-on experience, we’ve grown alongside the evolution of cable technology, combining traditional craftsmanship with modern innovation. Each project we take on reflects a deep understanding of what it takes to create lasting, reliable energy solutions.",
-      "p2": "Paired with historic illustrations from the industry’s early days, our story is a reminder of how far cables have come – and how much care has always gone into connecting the world."
+      "p2": "Paired with historic illustrations from the industry’s early days, our story is a reminder of how far cables have come – and how much care has always gone into connecting the world.",
+      "expertise": "Expertise",
+      "expertiseDesc": "Decades of Knowledge",
+      "network": "Network",
+      "networkDesc": "Global Partnerships"
     },
     "klaus": {
       "name": "Klaus Mintel",
       "quote": "\"Sometimes all it takes is a clear head and a good cable to make the world a little better.\"",
       "description": "Klaus is the man with the experience, bringing perspective and calm to the table—even when cable chaos threatens to take over. With impressive industry knowledge and a network as solid as our cables, he ensures everything runs smoothly. Klaus isn’t just a problem solver; he’s a strategic thinker who knows how to get to the point with a touch of humor.",
-      "linkedin": "Check Klaus' LinkedIn"
+      "linkedin": "Check Klaus' LinkedIn",
+      "role": "Founder & Visionary"
     },
     "manifesto": {
       "title": "Our manifesto",
+      "subtitle": "Our Values",
+      "tagline": "Our core principles guide every decision we make and every cable we deliver.",
       "items": [
         {
           "title": "Competence",
@@ -79,14 +98,24 @@
           "description": "We deliver what we promise – every time, without fail."
         }
       ]
+    },
+    "gallery": {
+      "title": "Life at KLZ",
+      "subtitle": "Behind the Scenes"
     }
   },
   "Contact": {
     "title": "Get in Touch",
     "subtitle": "Have questions about our products or need a custom solution? We're here to help.",
+    "heroSubtitle": "Get in Touch",
     "info": {
       "title": "Contact Information",
-      "address": "Raiffeisenstraße 22\n73630 Remshalden\nGermany"
+      "subtitle": "Contact Details",
+      "howToReachUs": "How to Reach Us",
+      "address": "Raiffeisenstraße 22\n73630 Remshalden\nGermany",
+      "office": "Our Office",
+      "phone": "Phone",
+      "email": "Email"
     },
     "hours": {
       "title": "Business Hours",
@@ -97,10 +126,17 @@
     },
     "form": {
       "title": "Send us a message",
+      "subtitle": "Send a Message",
       "name": "Name",
+      "namePlaceholder": "Your Name",
       "email": "Email",
+      "emailPlaceholder": "your@email.com",
       "message": "Message",
+      "messagePlaceholder": "How can we help you?",
       "submit": "Send Message"
+    },
+    "map": {
+      "comingSoon": "Interactive Map Coming Soon"
     }
   },
   "Products": {
@@ -157,11 +193,13 @@
     "hero": {
       "title": "We are helping to expand the energy cable networks for a <green>green</green> future",
       "cta": "Let's talk",
-      "exploreProducts": "Explore Products"
+      "exploreProducts": "Explore Products",
+      "subtitle": "Leading the way in cable infrastructure"
     },
     "whatWeDo": {
       "title": "What we do",
       "subtitle": "We ensure that the electricity flows – with quality-tested cables. From low voltage up to high voltage.",
+      "expertise": "Our Expertise",
       "quote": "We don't just deliver cables; we deliver the infrastructure for a sustainable future.",
       "items": [
         {
@@ -185,6 +223,13 @@
     "whyChooseUs": {
       "title": "Why choose us",
       "subtitle": "Experience prevents many mistakes, but we learn something new every day",
+      "whyKlz": "Why KLZ",
+      "features": [
+        "Certified Quality Standards",
+        "Sustainable Supply Chain",
+        "Expert Technical Support",
+        "Fast Global Delivery"
+      ],
       "items": [
         {
           "title": "Expertise with depth",
@@ -206,17 +251,24 @@
     },
     "experience": {
       "title": "Decades of experience rooted in cable history",
+      "subtitle": "Our Legacy",
       "p1": "At KLZ, cables run in our veins. Klaus began his journey at the renowned Felten & Guilleaume, following in the footsteps of his parents, who dedicated their lives to the same iconic company. For Klaus, this isn’t just work – it’s a legacy built on craftsmanship, innovation, and pride.",
-      "p2": "We honor this history with original illustrations from Felten & Guilleaume’s era, once used as postcards. These images remind us of the generations who wired the world together – a tradition we proudly continue today."
+      "p2": "We honor this history with original illustrations from Felten & Guilleaume’s era, once used as postcards. These images remind us of the generations who wired the world together – a tradition we proudly continue today.",
+      "certifiedQuality": "Certified Quality",
+      "vdeApproved": "VDE Approved & Trusted by Major Energy Suppliers",
+      "fullSpectrum": "Full Spectrum",
+      "solutionsRange": "From 1kV to 220kV Solutions"
     },
     "meetTheTeam": {
       "title": "Meet the team behind KLZ",
+      "subtitle": "The People Behind KLZ",
       "description": "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.",
       "cta": "Checkout our team",
       "andNetwork": "& Our Expert Network"
     },
     "gallery": {
       "title": "Strong Connections for a Sustainable World.",
+      "subtitle": "Visual Journey",
       "alt": "Gallery image"
     },
     "video": {
@@ -224,7 +276,39 @@
     },
     "cta": {
       "title": "Enough information, let's build something together!",
+      "subtitle": "Get Started",
+      "description": "Partner with KLZ for reliable, high-performance cable solutions tailored to your project's unique requirements.",
       "button": "Reach out now"
     }
+  },
+  "Blog": {
+    "meta": {
+      "title": "News on Cables and Energy Solutions",
+      "description": "Stay up to date! Read current topics and insights on cable technology, energy solutions and industry-specific innovations."
+    },
+    "featuredPost": "Featured Post",
+    "readFullArticle": "Read Full Article",
+    "latestNews": "Latest News",
+    "allArticles": "All Articles",
+    "readMore": "Read more",
+    "prev": "Prev",
+    "next": "Next",
+    "categories": {
+      "all": "All",
+      "industry": "Industry",
+      "technical": "Technical",
+      "sustainability": "Sustainability"
+    }
+  },
+  "StandardPage": {
+    "badge": "Information",
+    "overview": "Overview",
+    "details": "Details",
+    "support": "Support",
+    "quickNavigation": "Quick Navigation",
+    "exploreDetails": "Explore the details of {title}. KLZ provides comprehensive information on all our services and corporate policies.",
+    "needHelp": "Need Help?",
+    "supportTeamAvailable": "Our support team is available for any questions regarding this topic.",
+    "contactUs": "Contact Us"
   }
 }