wip

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+.next
+.git
+.DS_Store
+.env
+*.md
+docs
+reference
+scripts
+public/datasheets/*.pdf

.gitea/workflows/deploy.yml

@@ -0,0 +1,74 @@
+name: Build & Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: docker
+
+    steps:
+      # --- Tools ---
+      - name: Install tools
+        run: |
+          apt-get update
+          apt-get install -y \
+            git \
+            docker.io \
+            openssh-client \
+            rsync
+
+      # --- Checkout ---
+      - name: Checkout repo
+        run: |
+          git clone https://git.infra.mintel.me/mintel/klz-cables.git .
+          git checkout main
+
+      # --- Docker registry login ---
+      - name: Login to registry
+        env:
+          REGISTRY_USER: ${{ secrets.REGISTRY_USER }}
+          REGISTRY_PASS: ${{ secrets.REGISTRY_PASS }}
+        run: |
+          echo "$REGISTRY_PASS" | docker login registry.infra.mintel.me \
+            -u "$REGISTRY_USER" \
+            --password-stdin
+
+      # --- Build image ---
+      - name: Build image
+        run: |
+          docker build \
+            -t registry.infra.mintel.me/mintel/klz-cables:latest .
+
+      # --- Push image ---
+      - name: Push image
+        run: |
+          docker push registry.infra.mintel.me/mintel/klz-cables:latest
+
+      # --- SSH setup ---
+      - name: Setup SSH
+        env:
+          ALPHA_SSH_KEY: ${{ secrets.ALPHA_SSH_KEY }}
+        run: |
+          mkdir -p ~/.ssh
+          echo "$ALPHA_SSH_KEY" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -H alpha.mintel.me >> ~/.ssh/known_hosts
+
+      # --- Sync compose (yml OR yaml) ---
+      - name: Sync compose file
+        run: |
+          rsync -av ./docker-compose.y*ml \
+            deploy@alpha.mintel.me:/home/deploy/sites/klz-cables/
+
+      # --- Deploy ---
+      - name: Deploy on server
+        run: |
+          ssh deploy@alpha.mintel.me '
+            cd /home/deploy/sites/klz-cables &&
+            docker compose -f docker-compose.yml pull 2>/dev/null ||
+            docker compose -f docker-compose.yaml pull &&
+            docker compose up -d
+          '

Dockerfile

@@ -0,0 +1,59 @@
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD ["node", "server.js"]

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

@@ -1,6 +1,6 @@
 import { notFound } from 'next/navigation';
 import { MDXRemote } from 'next-mdx-remote/rsc';
-import { getPostBySlug } from '@/lib/blog';
+import { Section, Container, Heading, Badge } from '@/components/ui';
 
 interface PageProps {
   params: {
@@ -10,14 +10,6 @@ interface PageProps {
 }
 
 export default async function StandardPage({ params: { locale, slug } }: PageProps) {
-  const page = await getPostBySlug(slug, locale); // Reusing blog logic for now as structure is same
-
-  // If not found in blog, try pages directory (we need to implement getPageBySlug)
-  // Actually, let's implement getPageBySlug in lib/mdx.ts or similar
-  
-  // For now, let's assume we use a unified loader or separate.
-  // Let's use a separate loader for pages.
-  
   const { getPageBySlug } = await import('@/lib/pages');
   const pageData = await getPageBySlug(slug, locale);
 
@@ -26,11 +18,63 @@ export default async function StandardPage({ params: { locale, slug } }: PagePro
   }
 
   return (
-    <div className="container mx-auto px-4 py-12 max-w-4xl">
-      <h1 className="text-4xl font-bold text-primary mb-8">{pageData.frontmatter.title}</h1>
-      <div className="prose prose-lg max-w-none">
-        <MDXRemote source={pageData.content} />
-      </div>
+    <div className="flex flex-col min-h-screen bg-neutral-light">
+      {/* Hero Section */}
+      <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
+        <div className="absolute inset-0 opacity-20">
+          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
+        </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>
+            <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>
+          </div>
+        </Container>
+      </section>
+
+      <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 */}
+            <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>
+                  <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.
+                    </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>
+              </div>
+            </div>
+
+            {/* Main Content */}
+            <div className="sticky-narrative-content">
+              <article className="prose prose-sm md:prose-lg lg:prose-xl prose-primary max-w-none 
+                prose-headings:text-primary prose-headings:font-bold prose-headings:tracking-tight
+                prose-p:text-text-secondary prose-p:leading-relaxed
+                prose-strong:text-primary prose-strong:font-extrabold
+                prose-a:text-primary prose-a:font-bold prose-a:no-underline hover:prose-a:underline
+                prose-img:rounded-2xl md:prose-img:rounded-3xl prose-img:shadow-2xl
+                prose-ul:list-disc prose-ul:pl-5 md:prose-ul:pl-6
+                prose-li:text-text-secondary
+              ">
+                <MDXRemote source={pageData.content} />
+              </article>
+            </div>
+          </div>
+        </Container>
+      </Section>
     </div>
   );
 }

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

@@ -1,6 +1,6 @@
 import { notFound } from 'next/navigation';
 import { MDXRemote } from 'next-mdx-remote/rsc';
-import { getPostBySlug } from '@/lib/blog';
+import { getPostBySlug, getAdjacentPosts } from '@/lib/blog';
 
 interface BlogPostProps {
   params: {
@@ -15,12 +15,21 @@ import VisualLinkPreview from '@/components/blog/VisualLinkPreview';
 import Callout from '@/components/blog/Callout';
 import HighlightBox from '@/components/blog/HighlightBox';
 import Stats from '@/components/blog/Stats';
+import AnimatedImage from '@/components/blog/AnimatedImage';
+import ChatBubble from '@/components/blog/ChatBubble';
+import SplitHeading from '@/components/blog/SplitHeading';
+import PostNavigation from '@/components/blog/PostNavigation';
+import PowerCTA from '@/components/blog/PowerCTA';
 
 const components = {
   VisualLinkPreview,
   Callout,
   HighlightBox,
   Stats,
+  AnimatedImage,
+  ChatBubble,
+  PowerCTA,
+  SplitHeading,
   a: ({ href, children, ...props }: any) => {
     if (href?.startsWith('/')) {
       return (
@@ -45,17 +54,12 @@ const components = {
     );
   },
   img: (props: any) => (
-    <div className="my-12">
-      <img {...props} className="rounded-xl shadow-lg max-w-full h-auto mx-auto" />
-      {props.alt && (
-        <p className="text-sm text-text-secondary text-center mt-3 italic">{props.alt}</p>
-      )}
-    </div>
+    <AnimatedImage src={props.src} alt={props.alt} />
   ),
   h2: ({ children, ...props }: any) => (
-    <h2 {...props} className="text-3xl font-bold text-text-primary mt-16 mb-6 pb-3 border-b-2 border-primary/20">
+    <SplitHeading {...props} className="mt-16 mb-6 pb-3 border-b-2 border-primary/20">
       {children}
-    </h2>
+    </SplitHeading>
   ),
   h3: ({ children, ...props }: any) => (
     <h3 {...props} className="text-2xl font-bold text-text-primary mt-12 mb-4">
@@ -109,122 +113,147 @@ const components = {
       {children}
     </pre>
   ),
+  table: ({ children, ...props }: any) => (
+    <div className="my-8 overflow-x-auto rounded-lg border border-neutral-200 shadow-sm">
+      <table {...props} className="w-full text-left text-sm text-text-secondary">
+        {children}
+      </table>
+    </div>
+  ),
+  thead: ({ children, ...props }: any) => (
+    <thead {...props} className="bg-neutral-50 text-text-primary font-semibold border-b border-neutral-200">
+      {children}
+    </thead>
+  ),
+  tbody: ({ children, ...props }: any) => (
+    <tbody {...props} className="divide-y divide-neutral-200 bg-white">
+      {children}
+    </tbody>
+  ),
+  tr: ({ children, ...props }: any) => (
+    <tr {...props} className="hover:bg-neutral-50/50 transition-colors">
+      {children}
+    </tr>
+  ),
+  th: ({ children, ...props }: any) => (
+    <th {...props} className="px-6 py-4 whitespace-nowrap">
+      {children}
+    </th>
+  ),
+  td: ({ children, ...props }: any) => (
+    <td {...props} className="px-6 py-4">
+      {children}
+    </td>
+  ),
 };
 
 export default async function BlogPost({ params: { locale, slug } }: BlogPostProps) {
   const post = await getPostBySlug(slug, locale);
+  const { prev, next } = await getAdjacentPosts(slug, locale);
 
   if (!post) {
     notFound();
   }
 
   return (
-    <article className="bg-gradient-to-b from-neutral-light/30 to-white min-h-screen">
+    <article className="bg-white min-h-screen font-sans">
       {/* Featured Image Header */}
       {post.frontmatter.featuredImage && (
-        <div className="relative w-full h-[300px] md:h-[500px] overflow-hidden">
-          <img
-            src={post.frontmatter.featuredImage}
-            alt={post.frontmatter.title}
-            className="w-full h-full object-cover"
+        <div className="relative w-full h-[60vh] min-h-[400px] overflow-hidden group">
+          <div 
+            className="absolute inset-0 bg-cover bg-center transition-transform duration-[2s] ease-out scale-105 group-hover:scale-100"
+            style={{ backgroundImage: `url(${post.frontmatter.featuredImage})` }}
           />
-          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
           
           {/* Title overlay on image */}
-          <div className="absolute bottom-0 left-0 right-0 p-8 md:p-12">
-            <div className="container mx-auto max-w-4xl">
+          <div className="absolute inset-0 flex flex-col justify-end p-8 md:p-16 lg:p-24">
+            <div className="container mx-auto max-w-3xl">
               {post.frontmatter.category && (
-                <span className="inline-block px-4 py-2 bg-primary text-white text-sm font-medium rounded-full mb-4">
+                <span className="inline-block px-4 py-1.5 bg-primary/90 backdrop-blur-sm text-white text-sm font-bold uppercase tracking-wider rounded-full mb-6 shadow-lg transform transition-transform hover:scale-105">
                   {post.frontmatter.category}
                 </span>
               )}
-              <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold text-white mb-4 leading-tight drop-shadow-lg">
+              <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 leading-tight drop-shadow-xl">
                 {post.frontmatter.title}
               </h1>
-              <time dateTime={post.frontmatter.date} className="text-white/90 text-sm md:text-base">
-                {new Date(post.frontmatter.date).toLocaleDateString(locale, {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric'
-                })}
-              </time>
+              <div className="flex items-center gap-4 text-white/90 text-sm md:text-base font-medium">
+                <time dateTime={post.frontmatter.date}>
+                  {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric'
+                  })}
+                </time>
+                <span className="w-1.5 h-1.5 bg-primary rounded-full" />
+                <span>KLZ Cables</span>
+              </div>
             </div>
           </div>
         </div>
       )}
 
       {/* Content */}
-      <div className="container mx-auto px-4 py-12 md:py-16 max-w-4xl">
+      <div className="container mx-auto px-4 py-16 md:py-24 max-w-3xl">
         {/* If no featured image, show header here */}
         {!post.frontmatter.featuredImage && (
-          <header className="mb-12">
+          <header className="mb-16 text-center">
             {post.frontmatter.category && (
-              <div className="mb-4">
-                <span className="inline-block px-4 py-2 bg-primary text-white text-sm font-medium rounded-full">
+              <div className="mb-6">
+                <span className="inline-block px-4 py-1.5 bg-primary/10 text-primary text-sm font-bold uppercase tracking-wider rounded-full">
                   {post.frontmatter.category}
                 </span>
               </div>
             )}
-            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-text-primary mb-6 leading-tight">
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-text-primary mb-8 leading-tight">
               {post.frontmatter.title}
             </h1>
-            <time dateTime={post.frontmatter.date} className="text-text-secondary">
-              {new Date(post.frontmatter.date).toLocaleDateString(locale, {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric'
-              })}
-            </time>
+            <div className="flex items-center justify-center gap-4 text-text-secondary font-medium">
+              <time dateTime={post.frontmatter.date}>
+                {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric'
+                })}
+              </time>
+              <span className="w-1.5 h-1.5 bg-primary rounded-full" />
+              <span>KLZ Cables</span>
+            </div>
           </header>
         )}
 
         {/* Excerpt/Lead paragraph if available */}
         {post.frontmatter.excerpt && (
-          <div className="mb-12 p-6 md:p-8 bg-white rounded-xl shadow-sm border-l-4 border-primary">
-            <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-light">
+          <div className="mb-16">
+            <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-6 py-2">
               {post.frontmatter.excerpt}
             </p>
           </div>
         )}
 
         {/* Main content with enhanced styling */}
-        <div className="bg-white rounded-xl shadow-sm p-6 md:p-10">
-          <div className="prose prose-lg max-w-none">
-            <MDXRemote source={post.content} components={components} />
-          </div>
+        <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-xl prose-img:shadow-lg">
+          <MDXRemote source={post.content} components={components} />
         </div>
 
-        {/* Call to action section */}
-        <div className="mt-12 p-8 bg-gradient-to-r from-primary/10 to-primary/5 rounded-xl border border-primary/20">
-          <h3 className="text-2xl font-bold text-text-primary mb-4">
-            {locale === 'de' ? 'Haben Sie Fragen?' : 'Have questions?'}
-          </h3>
-          <p className="text-text-secondary mb-6">
-            {locale === 'de'
-              ? 'Unser Team steht Ihnen gerne zur Verfügung. Kontaktieren Sie uns für weitere Informationen zu unseren Kabellösungen.'
-              : 'Our team is happy to help. Contact us for more information about our cable solutions.'}
-          </p>
-          <Link
-            href={`/${locale}/contact`}
-            className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors"
-          >
-            {locale === 'de' ? 'Kontakt aufnehmen' : 'Get in touch'}
-            <svg className="w-5 h-5" 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>
-          </Link>
+        {/* Power CTA */}
+        <div className="mt-20">
+          <PowerCTA locale={locale} />
         </div>
 
+        {/* Post Navigation */}
+        <PostNavigation prev={prev} next={next} locale={locale} />
+
         {/* Back to blog link */}
-        <div className="mt-12 pt-8 border-t border-neutral-dark/20">
+        <div className="mt-16 pt-10 border-t border-neutral-200 text-center">
           <Link
             href={`/${locale}/blog`}
-            className="inline-flex items-center gap-2 text-primary hover:underline font-medium text-lg group"
+            className="inline-flex items-center gap-2 text-text-secondary hover:text-primary font-medium text-lg transition-colors group"
           >
             <svg className="w-5 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="M15 19l-7-7 7-7" />
             </svg>
-            {locale === 'de' ? 'Zurück zum Blog' : 'Back to Blog'}
+            {locale === 'de' ? 'Zurück zur Übersicht' : 'Back to Overview'}
           </Link>
         </div>
       </div>

app/[locale]/blog/page.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { getAllPosts } from '@/lib/blog';
-import { getTranslations } from 'next-intl/server';
+import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
+import Reveal from '@/components/Reveal';
 
 interface BlogIndexProps {
   params: {
@@ -9,8 +10,6 @@ interface BlogIndexProps {
 }
 
 export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
-  const t = await getTranslations({ locale, namespace: 'blog' });
-  
   return {
     title: locale === 'de' ? 'Neuigkeiten zu Kabeln und Energielösungen' : 'News on Cables and Energy Solutions',
     description: locale === 'de'
@@ -21,85 +20,129 @@ export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
 
 export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
   const posts = await getAllPosts(locale);
-  const t = await getTranslations({ locale, namespace: 'blog' });
+  
+  // Sort posts by date descending
+  const sortedPosts = [...posts].sort((a, b) => 
+    new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime()
+  );
 
-  // Get unique categories
-  const categories = Array.from(new Set(posts.map(post => post.frontmatter.category).filter(Boolean)));
+  const featuredPost = sortedPosts[0];
+  const remainingPosts = sortedPosts.slice(1);
 
   return (
-    <div className="container mx-auto px-4 py-12">
-      <div className="text-center mb-12">
-        <h1 className="text-4xl md:text-5xl font-bold text-primary mb-4">
-          {locale === 'de' ? 'Neuigkeiten zu Kabeln und Energielösungen' : 'News on Cables and Energy Solutions'}
-        </h1>
-        <p className="text-lg text-text-secondary max-w-3xl mx-auto">
-          {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.'}
-        </p>
-      </div>
+    <div className="bg-neutral-light min-h-screen">
+      {/* Hero Section - Immersive Magazine Feel */}
+      <section className="relative h-[50vh] md:h-[70vh] min-h-[400px] md:min-h-[600px] flex items-center overflow-hidden bg-primary-dark">
+        {featuredPost && featuredPost.frontmatter.featuredImage && (
+          <>
+            <img
+              src={featuredPost.frontmatter.featuredImage}
+              alt={featuredPost.frontmatter.title}
+              className="absolute inset-0 w-full h-full object-cover scale-105 animate-slow-zoom opacity-40 md:opacity-60"
+            />
+            <div className="absolute inset-0 image-overlay-gradient" />
+          </>
+        )}
+        
+        <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>
+            {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">
+                  {featuredPost.frontmatter.title}
+                </h1>
+                <p className="text-base md:text-2xl text-white/80 mb-6 md:mb-10 line-clamp-2 md:line-clamp-2 max-w-2xl">
+                  {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'}
+                  <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
+                </Button>
+              </>
+            )}
+          </div>
+        </Container>
+      </section>
 
-      {/* Category filter - could be made interactive with client component */}
-      {categories.length > 0 && (
-        <div className="mb-8 flex flex-wrap gap-2 justify-center">
-          {categories.map((category) => (
-            <span
-              key={category}
-              className="px-4 py-2 bg-neutral-light text-text-primary rounded-full text-sm font-medium"
-            >
-              {category}
-            </span>
-          ))}
-        </div>
-      )}
-      
-      {/* Masonry-style grid */}
-      <div className="columns-1 md:columns-2 gap-8 space-y-8">
-        {posts.map((post) => (
-          <Link
-            key={post.slug}
-            href={`/${locale}/blog/${post.slug}`}
-            className="group block break-inside-avoid mb-8"
-          >
-            <article className="bg-white rounded-lg shadow-sm overflow-hidden border border-neutral-dark transition-all hover:shadow-md hover:-translate-y-1">
-              {post.frontmatter.featuredImage && (
-                <div className="relative overflow-hidden">
-                  <img
-                    src={post.frontmatter.featuredImage}
-                    alt={post.frontmatter.title}
-                    className="w-full h-auto object-cover transition-transform group-hover:scale-105"
-                  />
-                  {post.frontmatter.category && (
-                    <span className="absolute top-4 left-4 px-3 py-1 bg-primary text-white text-xs font-medium rounded-full">
-                      {post.frontmatter.category}
-                    </span>
-                  )}
-                </div>
-              )}
-              <div className="p-6">
-                <div className="text-sm text-text-secondary mb-2">
-                  {new Date(post.frontmatter.date).toLocaleDateString(locale, {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric'
-                  })}
-                </div>
-                <h2 className="text-xl font-bold text-text-primary mb-3 group-hover:text-primary transition-colors line-clamp-2">
-                  {post.frontmatter.title}
-                </h2>
-                {post.frontmatter.excerpt && (
-                  <p className="text-text-secondary line-clamp-3 mb-4">
-                    {post.frontmatter.excerpt}
-                  </p>
-                )}
-                <span className="text-primary font-medium group-hover:underline inline-flex items-center">
-                  {locale === 'de' ? 'Weiterlesen' : 'Read more'} →
-                </span>
+      <Section className="bg-neutral-light py-12 md:py-28">
+        <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>
+              <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>
               </div>
-            </article>
-          </Link>
-        ))}
-      </div>
+            </div>
+          </Reveal>
+
+          {/* Grid for remaining posts */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-12">
+            {remainingPosts.map((post, idx) => (
+              <Reveal key={post.slug} delay={idx * 100}>
+                <Link href={`/${locale}/blog/${post.slug}`} className="group block">
+                  <Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-2xl md:rounded-3xl overflow-hidden">
+                    {post.frontmatter.featuredImage && (
+                      <div className="relative h-48 md:h-72 overflow-hidden">
+                        <img
+                          src={post.frontmatter.featuredImage}
+                          alt={post.frontmatter.title}
+                          className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
+                        />
+                        <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                        {post.frontmatter.category && (
+                          <Badge variant="accent" className="absolute top-3 left-3 md:top-6 md:left-6 shadow-lg">
+                            {post.frontmatter.category}
+                          </Badge>
+                        )}
+                      </div>
+                    )}
+                    <div className="p-5 md:p-10 flex flex-col flex-1">
+                      <div className="text-[10px] md:text-sm font-bold text-accent-dark mb-2 md:mb-4 tracking-widest uppercase">
+                        {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                          year: 'numeric',
+                          month: 'long',
+                          day: 'numeric'
+                        })}
+                      </div>
+                      <h3 className="text-lg md:text-2xl font-bold text-primary mb-3 md:mb-6 group-hover:text-accent-dark transition-colors line-clamp-2 leading-tight">
+                        {post.frontmatter.title}
+                      </h3>
+                      <p className="text-text-secondary text-sm md:text-lg line-clamp-2 md:line-clamp-3 mb-4 md:mb-8 leading-relaxed">
+                        {post.frontmatter.excerpt}
+                      </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'}
+                        </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">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                </Link>
+              </Reveal>
+            ))}
+          </div>
+          
+          {/* 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="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>
+          </div>
+        </Container>
+      </Section>
     </div>
   );
 }

app/[locale]/contact/page.tsx

@@ -1,89 +1,153 @@
 import { useTranslations } from 'next-intl';
-import { Section, Container, Button } from '@/components/ui';
+import { Section, Container, Button, Heading, Card } from '@/components/ui';
 
 export default function ContactPage() {
-  const t = useTranslations('Navigation'); // Reusing navigation translations for now
+  const t = useTranslations('Contact');
 
   return (
-    <div className="flex flex-col min-h-screen">
-      <Section className="bg-neutral">
-        <Container>
-          <div className="max-w-3xl mx-auto text-center mb-12">
-            <h1 className="text-4xl font-bold mb-4">Get in Touch</h1>
-            <p className="text-xl text-text-secondary">
-              Have questions about our products or need a custom solution? We're here to help.
+    <div className="flex flex-col min-h-screen bg-neutral-light">
+      {/* Hero Section */}
+      <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
+        <div className="absolute inset-0 opacity-20">
+          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
+        </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">
+              <span className="text-white">{t('title')}</span>
+            </Heading>
+            <p className="text-lg md:text-2xl text-white/70 leading-relaxed max-w-2xl">
+              {t('subtitle')}
             </p>
           </div>
+        </Container>
+      </section>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
+      <Section className="bg-neutral-light -mt-8 md:-mt-20 relative z-20 py-12 md:py-28">
+        <Container>
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
             {/* Contact Info */}
-            <div className="space-y-8">
-              <div>
-                <h3 className="text-xl font-bold mb-4">Contact Information</h3>
-                <div className="space-y-4 text-text-secondary">
-                  <p className="flex items-start">
-                    <svg className="w-6 h-6 text-primary mr-3 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <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" />
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
-                    <span>
-                      Raiffeisenstraße 22<br />
-                      73630 Remshalden<br />
-                      Germany
-                    </span>
-                  </p>
-                  <p className="flex items-center">
-                    <svg className="w-6 h-6 text-primary mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-                    </svg>
-                    <a href="tel:+4988192537298" className="hover:text-primary transition-colors">+49 881 92537298</a>
-                  </p>
-                  <p className="flex items-center">
-                    <svg className="w-6 h-6 text-primary mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                    </svg>
-                    <a href="mailto:info@klz-vertriebs-gmbh.com" className="hover:text-primary transition-colors">info@klz-vertriebs-gmbh.com</a>
-                  </p>
+            <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>
+                <div className="space-y-4 md:space-y-8">
+                  <div className="flex items-start gap-4 md:gap-6 group">
+                    <div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl 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 flex-shrink-0">
+                      <svg className="w-5 h-5 md:w-7 md:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <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" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">Our Office</h4>
+                      <p className="text-sm md:text-lg text-text-secondary leading-relaxed whitespace-pre-line">
+                        {t('info.address')}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-4 md:gap-6 group">
+                    <div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl 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 flex-shrink-0">
+                      <svg className="w-5 h-5 md:w-7 md:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">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>
+
+                  <div className="flex items-start gap-4 md:gap-6 group">
+                    <div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl 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 flex-shrink-0">
+                      <svg className="w-5 h-5 md:w-7 md:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">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>
                 </div>
               </div>
 
-              <div>
-                <h3 className="text-xl font-bold mb-4">Business Hours</h3>
-                <ul className="space-y-2 text-text-secondary">
-                  <li className="flex justify-between">
-                    <span>Monday - Friday</span>
-                    <span>8:00 AM - 5:00 PM</span>
+              <div className="p-6 md:p-10 bg-white rounded-2xl md:rounded-3xl border border-neutral-medium shadow-sm animate-fade-in">
+                <Heading level={4} className="mb-4 md:mb-6">{t('hours.title')}</Heading>
+                <ul className="space-y-2 md:space-y-4">
+                  <li className="flex justify-between items-center pb-2 md:pb-4 border-b border-neutral-medium text-sm md:text-base">
+                    <span className="font-bold text-primary">{t('hours.weekdays')}</span>
+                    <span className="text-text-secondary">{t('hours.weekdaysTime')}</span>
                   </li>
-                  <li className="flex justify-between">
-                    <span>Saturday - Sunday</span>
-                    <span>Closed</span>
+                  <li className="flex justify-between items-center text-sm md:text-base">
+                    <span className="font-bold text-primary">{t('hours.weekend')}</span>
+                    <span className="text-accent-dark font-bold">{t('hours.closed')}</span>
                   </li>
                 </ul>
               </div>
             </div>
 
-            {/* Contact Form Placeholder */}
-            <div className="bg-white p-8 rounded-lg shadow-sm border border-neutral-dark">
-              <h3 className="text-xl font-bold mb-6">Send us a message</h3>
-              <form className="space-y-4">
-                <div>
-                  <label htmlFor="name" className="block text-sm font-medium text-text-primary mb-1">Name</label>
-                  <input type="text" id="name" className="w-full px-4 py-2 border border-neutral-dark rounded-md focus:ring-primary focus:border-primary" />
-                </div>
-                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-text-primary mb-1">Email</label>
-                  <input type="email" id="email" className="w-full px-4 py-2 border border-neutral-dark rounded-md focus:ring-primary focus:border-primary" />
-                </div>
-                <div>
-                  <label htmlFor="message" className="block text-sm font-medium text-text-primary mb-1">Message</label>
-                  <textarea id="message" rows={4} className="w-full px-4 py-2 border border-neutral-dark rounded-md focus:ring-primary focus:border-primary"></textarea>
-                </div>
-                <Button type="submit" className="w-full">Send Message</Button>
-              </form>
+            {/* 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">
+                  {t('form.title')}
+                </Heading>
+                <form className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
+                  <div className="space-y-1 md:space-y-2">
+                    <label htmlFor="name" className="text-[10px] md:text-xs font-extrabold text-primary uppercase tracking-widest">{t('form.name')}</label>
+                    <input 
+                      type="text" 
+                      id="name" 
+                      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"
+                    />
+                  </div>
+                  <div className="space-y-1 md:space-y-2">
+                    <label htmlFor="email" className="text-[10px] md:text-xs font-extrabold text-primary uppercase tracking-widest">{t('form.email')}</label>
+                    <input 
+                      type="email" 
+                      id="email" 
+                      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"
+                    />
+                  </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" 
+                      rows={4} 
+                      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?"
+                    ></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">
+                      {t('form.submit')}
+                    </Button>
+                  </div>
+                </form>
+              </Card>
             </div>
           </div>
         </Container>
       </Section>
+      
+      {/* Map Placeholder */}
+      <section className="h-[300px] md:h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="text-center">
+            <div className="w-20 h-20 bg-primary rounded-full flex items-center justify-center text-white mb-4 mx-auto shadow-2xl animate-bounce">
+              <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <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>
+          </div>
+        </div>
+      </section>
     </div>
   );
 }

app/[locale]/layout.tsx

@@ -3,6 +3,21 @@ import {getMessages} 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 const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: 'cover',
+  themeColor: '#001a4d',
+};
  
 export default async function LocaleLayout({
   children,
@@ -16,11 +31,11 @@ export default async function LocaleLayout({
   const messages = await getMessages();
  
   return (
-    <html lang={locale}>
-      <body className="flex flex-col min-h-screen">
-        <NextIntlClientProvider messages={messages}>
+    <html lang={locale} className="scroll-smooth overflow-x-hidden">
+      <body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark antialiased overflow-x-hidden">
+        <NextIntlClientProvider messages={messages} locale={locale}>
           <Header />
-          <main className="flex-grow">
+          <main className="flex-grow animate-fade-in overflow-visible">
             {children}
           </main>
           <Footer />

app/[locale]/page.tsx

@@ -2,25 +2,30 @@ import { useTranslations } from 'next-intl';
 import Hero from '@/components/home/Hero';
 import ProductCategories from '@/components/home/ProductCategories';
 import WhatWeDo from '@/components/home/WhatWeDo';
+import RecentPosts from '@/components/home/RecentPosts';
+import Experience from '@/components/home/Experience';
 import WhyChooseUs from '@/components/home/WhyChooseUs';
 import MeetTheTeam from '@/components/home/MeetTheTeam';
 import GallerySection from '@/components/home/GallerySection';
 import VideoSection from '@/components/home/VideoSection';
 import CTA from '@/components/home/CTA';
+import Reveal from '@/components/Reveal';
 
-export default function HomePage() {
+export default function HomePage({ params: { locale } }: { params: { locale: string } }) {
   const t = useTranslations('Index');
   
   return (
     <div className="flex flex-col min-h-screen">
       <Hero />
-      <ProductCategories />
-      <WhatWeDo />
-      <WhyChooseUs />
-      <MeetTheTeam />
-      <GallerySection />
-      <VideoSection />
-      <CTA />
+      <Reveal><ProductCategories /></Reveal>
+      <Reveal><WhatWeDo /></Reveal>
+      <Reveal><RecentPosts locale={locale} /></Reveal>
+      <Reveal><Experience /></Reveal>
+      <Reveal><WhyChooseUs /></Reveal>
+      <Reveal><MeetTheTeam /></Reveal>
+      <Reveal><GallerySection /></Reveal>
+      <Reveal><VideoSection /></Reveal>
+      <Reveal><CTA /></Reveal>
     </div>
   );
 }

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

@@ -1,8 +1,16 @@
 import { notFound } from 'next/navigation';
 import { MDXRemote } from 'next-mdx-remote/rsc';
-import { getProductBySlug } from '@/lib/mdx';
+import { getProductBySlug, getAllProducts } from '@/lib/mdx';
 import ProductTechnicalData from '@/components/ProductTechnicalData';
+import ProductTabs from '@/components/ProductTabs';
+import RequestQuoteForm from '@/components/RequestQuoteForm';
+import RelatedProducts from '@/components/RelatedProducts';
+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 {
   params: {
@@ -13,12 +21,123 @@ interface ProductPageProps {
 
 const components = {
   ProductTechnicalData,
-  p: (props: any) => <div {...props} className="mb-4" />,
+  ProductTabs,
+  p: (props: any) => <p {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed mb-8" />,
+  h2: (props: any) => (
+    <div className="relative mt-20 mb-10">
+      <h2 {...props} className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-primary tracking-tight" />
+      <div className="absolute -bottom-4 left-0 w-24 h-1.5 bg-accent rounded-full" />
+    </div>
+  ),
+  h3: (props: any) => <h3 {...props} className="text-2xl md:text-3xl lg:text-4xl font-bold text-primary mt-16 mb-6 tracking-tight" />,
+  ul: (props: any) => <ul {...props} className="list-disc pl-8 mb-10 space-y-4 text-text-secondary text-lg md:text-xl" />,
+  li: (props: any) => <li {...props} className="pl-2 marker:text-accent marker:font-bold" />,
+  table: (props: any) => (
+    <div className="overflow-x-auto my-16 rounded-3xl border border-neutral-dark/10 shadow-xl bg-white p-1">
+      <table {...props} className="min-w-full divide-y divide-neutral-dark/10" />
+    </div>
+  ),
+  th: (props: any) => <th {...props} className="px-8 py-6 bg-neutral-light/50 text-left text-xs font-black uppercase tracking-[0.25em] text-primary/60" />,
+  td: (props: any) => <td {...props} className="px-8 py-6 text-text-secondary border-t border-neutral-dark/5 text-lg md:text-xl" />,
+  hr: () => <hr className="my-20 border-t-2 border-neutral-dark/5" />,
+  blockquote: (props: any) => (
+    <div className="my-12 p-8 md:p-12 bg-primary-dark rounded-3xl relative overflow-hidden group">
+      <div className="absolute top-0 right-0 w-48 h-48 bg-accent/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl group-hover:bg-accent/20 transition-colors duration-700" />
+      <div className="relative z-10 italic text-2xl md:text-3xl text-white/90 leading-relaxed font-medium" {...props} />
+    </div>
+  ),
 };
 
 export default async function ProductPage({ params }: ProductPageProps) {
   const { locale, slug } = params;
-  const productSlug = slug[slug.length - 1]; // Use the last segment as the slug
+  const productSlug = slug[slug.length - 1];
+  const t = await getTranslations('Products');
+
+  // Check if it's a category page
+  const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
+  if (categories.includes(productSlug)) {
+    const allProducts = await getAllProducts(locale);
+    const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    const categoryTitle = t(`categories.${categoryKey}.title`);
+    
+    // Filter products for this category
+    const filteredProducts = allProducts.filter(p => 
+      p.frontmatter.categories.some(cat => cat.toLowerCase().replace(/\s+/g, '-') === productSlug)
+    );
+
+    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">
+            <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>
+                <span className="mx-3 opacity-30">/</span>
+                <span className="text-white/90">{categoryTitle}</span>
+              </nav>
+              <h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white mb-8 tracking-tight leading-[1.05]">
+                {categoryTitle}
+              </h1>
+              <div className="h-1.5 w-24 bg-accent rounded-full" />
+            </div>
+          </Container>
+        </section>
+
+        <Section className="bg-neutral-light relative z-20 -mt-12 rounded-t-[48px] md:rounded-t-[64px]">
+          <Container>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {filteredProducts.map((product) => (
+                <Link 
+                  key={product.slug} 
+                  href={`/${locale}/products/${productSlug}/${product.slug}`}
+                  className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
+                >
+                  <div className="aspect-[4/3] relative bg-neutral-light/30 p-12 overflow-hidden">
+                    {product.frontmatter.images?.[0] && (
+                      <>
+                        <Image
+                          src={product.frontmatter.images[0]}
+                          alt={product.frontmatter.title}
+                          fill
+                          className="object-contain p-8 transition-transform duration-700 group-hover:scale-110 z-10"
+                        />
+                        {/* Subtle reflection/shadow effect */}
+                        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 w-2/3 h-4 bg-black/5 blur-xl rounded-full" />
+                      </>
+                    )}
+                  </div>
+                  <div className="p-8 md:p-10">
+                    <div className="flex flex-wrap gap-2 mb-4">
+                      {product.frontmatter.categories.map((cat, i) => (
+                        <span key={i} className="text-[10px] font-bold uppercase tracking-widest text-primary/40">
+                          {cat}
+                        </span>
+                      ))}
+                    </div>
+                    <h2 className="text-2xl md:text-3xl font-bold text-text-primary group-hover:text-primary transition-colors mb-4 leading-tight">
+                      {product.frontmatter.title}
+                    </h2>
+                    <p className="text-text-secondary line-clamp-2 text-base leading-relaxed mb-8">
+                      {product.frontmatter.description}
+                    </p>
+                    <div className="flex items-center text-primary font-bold 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('details')}
+                      </span>
+                      <svg className="w-5 h-5 ml-3 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>
+                </Link>
+              ))}
+            </div>
+          </Container>
+        </Section>
+      </div>
+    );
+  }
 
   const product = await getProductBySlug(productSlug, locale);
 
@@ -26,59 +145,127 @@ export default async function ProductPage({ params }: ProductPageProps) {
     notFound();
   }
 
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="mb-8">
-        <h1 className="text-4xl font-bold text-primary mb-4">{product.frontmatter.title}</h1>
-        <div className="flex flex-wrap gap-2 mb-4">
-          {product.frontmatter.categories.map((cat, idx) => (
-            <span key={idx} className="bg-neutral-dark text-text-secondary px-2 py-1 rounded text-sm">
-              {cat}
-            </span>
-          ))}
-        </div>
-      </div>
+  const isFallback = (product.frontmatter as any).isFallback;
+  const categorySlug = slug[0];
+  const categoryKey = categorySlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  const categoryTitle = t(`categories.${categoryKey}.title`);
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <div className="lg:col-span-2">
-          <div className="prose max-w-none mb-8">
-            <MDXRemote source={product.content} components={components} />
-          </div>
-        </div>
-        
-        <div className="lg:col-span-1">
-          {product.frontmatter.images && product.frontmatter.images.length > 0 && (
-            <div className="sticky top-4">
-              <div className="bg-white p-4 rounded-lg shadow-sm border border-neutral-dark">
-                <div className="relative aspect-square mb-4">
-                  {/* Note: Images from WC might be external URLs. Next/Image requires configuration for external domains. */}
-                  {/* For now using standard img tag if domain not configured, or configure domains. */}
-                  <img 
-                    src={product.frontmatter.images[0]} 
-                    alt={product.frontmatter.title}
-                    className="w-full h-full object-contain"
-                  />
-                </div>
-                <div className="grid grid-cols-4 gap-2">
-                  {product.frontmatter.images.slice(1, 5).map((img, idx) => (
-                    <div key={idx} className="relative aspect-square border border-neutral-dark rounded overflow-hidden">
-                      <img src={img} alt="" className="w-full h-full object-cover" />
-                    </div>
+  return (
+    <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">
+          <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>
+              <span className="mx-3 opacity-30">/</span>
+              <Link href={`/${locale}/products/${categorySlug}`} className="hover:text-accent transition-colors">{categoryTitle}</Link>
+              <span className="mx-3 opacity-30">/</span>
+              <span className="text-white/90">{product.frontmatter.title}</span>
+            </nav>
+            
+            <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-12">
+              <div className="flex-1">
+                {isFallback && (
+                  <div className="mb-6 inline-flex items-center px-3 py-1 rounded-md bg-accent/10 border border-accent/20 text-accent text-[10px] font-bold uppercase tracking-widest">
+                    <span className="w-1.5 h-1.5 rounded-full bg-accent mr-2 animate-pulse" />
+                    {t('englishVersion')}
+                  </div>
+                )}
+                <div className="flex flex-wrap gap-3 mb-8">
+                  {product.frontmatter.categories.map((cat, idx) => (
+                    <Badge key={idx} variant="accent" className="bg-white/10 text-white/90 border-white/10 backdrop-blur-md px-4 py-1.5">
+                      {cat}
+                    </Badge>
                   ))}
                 </div>
+                <h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white mb-0 tracking-tight leading-[1.05]">
+                  {product.frontmatter.title}
+                </h1>
               </div>
-              
-              <div className="mt-6 bg-primary-light p-6 rounded-lg">
-                <h3 className="text-lg font-semibold text-primary-dark mb-2">Contact Us</h3>
-                <p className="text-text-secondary mb-4">Need more information about {product.frontmatter.title}?</p>
-                <button className="w-full bg-primary text-white py-2 px-4 rounded hover:bg-primary-dark transition-colors">
-                  Request Quote
-                </button>
+            </div>
+          </div>
+        </Container>
+      </section>
+
+      <Section className="bg-neutral-light relative z-20 -mt-16 pt-0">
+        <Container>
+          {/* Large Product Image Section */}
+          {product.frontmatter.images && product.frontmatter.images.length > 0 && (
+            <div className="relative -mt-24 mb-24 animate-slide-up" style={{ animationDelay: '200ms' }}>
+              <div className="bg-white shadow-2xl border border-neutral-dark/5 overflow-hidden p-10 md:p-16 lg:p-20">
+                <div className="relative w-full aspect-[21/9]">
+                  <Image 
+                    src={product.frontmatter.images[0]} 
+                    alt={product.frontmatter.title}
+                    fill
+                    className="object-contain transition-transform duration-1000 hover:scale-105"
+                    priority
+                  />
+                  {/* Subtle reflection/shadow effect */}
+                  <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-3/4 h-12 bg-black/5 blur-3xl rounded-[100%]" />
+                </div>
+                
+                {product.frontmatter.images.length > 1 && (
+                  <div className="flex justify-center gap-6 mt-16">
+                    {product.frontmatter.images.slice(0, 5).map((img, idx) => (
+                      <div key={idx} className="relative w-24 h-24 md:w-32 md:h-32 border-2 border-neutral-dark/10 rounded-xl overflow-hidden bg-neutral-light/20 hover:border-accent transition-all duration-300 cursor-pointer group">
+                        <Image src={img} alt="" fill className="object-cover transition-transform duration-500 group-hover:scale-110" />
+                      </div>
+                    ))}
+                  </div>
+                )}
               </div>
             </div>
           )}
-        </div>
-      </div>
+
+          <div className="flex flex-col lg:flex-row gap-16 lg:gap-24 relative items-start overflow-visible">
+            <div className="flex-1 w-full">
+              {/* Main Content Area */}
+              <div className="prose prose-lg md:prose-xl prose-slate max-w-none prose-headings:text-primary prose-headings:font-extrabold prose-a:text-primary prose-strong:text-primary prose-img:rounded-3xl prose-img:shadow-2xl">
+                 <MDXRemote source={product.content} components={components} />
+              </div>
+              
+              {/* Related Products */}
+              <RelatedProducts 
+                currentSlug={productSlug} 
+                categories={product.frontmatter.categories} 
+                locale={locale} 
+              />
+            </div>
+            
+            <div className="w-full lg:w-[450px] xl:w-[500px] lg:sticky lg:top-32">
+              <div className="lg:translate-x-12 xl:translate-x-20">
+                {/* Request Quote Form */}
+                <div className="bg-white rounded-3xl shadow-2xl border border-neutral-dark/5 overflow-hidden">
+                  <div className="bg-primary-dark p-6 md:p-8 text-white relative overflow-hidden">
+                    <div className="absolute top-0 right-0 w-40 h-40 bg-accent/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl" />
+                    
+                    {/* Product Thumbnail for Sticky State */}
+                    {product.frontmatter.images?.[0] && (
+                      <div className="relative w-full aspect-[16/9] mb-6 rounded-xl overflow-hidden bg-white/10 backdrop-blur-md p-3 border border-white/10 z-10">
+                        <Image 
+                          src={product.frontmatter.images[0]} 
+                          alt="" 
+                          fill 
+                          className="object-contain p-1"
+                        />
+                      </div>
+                    )}
+
+                    <h3 className="text-xl md:text-2xl font-extrabold mb-2 relative z-10 tracking-tight">{t('requestQuote')}</h3>
+                    <p className="text-white/60 text-sm relative z-10 leading-relaxed">{t('requestQuoteDesc')}</p>
+                  </div>
+                  <div className="p-6 md:p-8">
+                    <RequestQuoteForm productName={product.frontmatter.title} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </Section>
     </div>
   );
 }

app/[locale]/products/page.tsx

@@ -1,84 +1,154 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
-import { Section, Container } from '@/components/ui';
+import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
+import ProductsIllustration from '@/components/products/ProductsIllustration';
+import Scribble from '@/components/Scribble';
 
-export default function ProductsPage() {
-  const t = useTranslations('Navigation');
+interface ProductsPageProps {
+  params: {
+    locale: string;
+  };
+}
+
+export default function ProductsPage({ params }: ProductsPageProps) {
+  const t = useTranslations('Products');
 
   const categories = [
     { 
-      title: 'Low Voltage Cables', 
-      desc: 'Powering everyday essentials with reliability and safety.',
-      img: '/uploads/2024/12/low-voltage-scaled.webp',
+      title: t('categories.lowVoltage.title'), 
+      desc: t('categories.lowVoltage.description'),
+      img: '/uploads/2024/11/low-voltage-category.webp',
       icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: '/products/low-voltage-cables'
+      href: `/${params.locale}/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',
+      title: t('categories.mediumVoltage.title'), 
+      desc: t('categories.mediumVoltage.description'),
+      img: '/uploads/2024/11/medium-voltage-category.webp',
       icon: '/uploads/2024/11/Medium-Voltage.svg',
-      href: '/products/medium-voltage-cables'
+      href: `/${params.locale}/products/medium-voltage-cables`
     },
     { 
-      title: 'High Voltage Cables', 
-      desc: 'Delivering maximum power over long distances—without compromise.',
-      img: '/uploads/2025/06/na2xsfl2y-rendered.webp',
+      title: t('categories.highVoltage.title'), 
+      desc: t('categories.highVoltage.description'),
+      img: '/uploads/2024/11/high-voltage-category.webp',
       icon: '/uploads/2024/11/High-Voltage.svg',
-      href: '/products/high-voltage-cables'
+      href: `/${params.locale}/products/high-voltage-cables`
     },
     { 
-      title: 'Solar Cables', 
-      desc: 'Connecting the sun’s energy to your sustainable future.',
-      img: '/uploads/2025/04/3.webp',
+      title: t('categories.solar.title'), 
+      desc: t('categories.solar.description'),
+      img: '/uploads/2024/11/solar-category.webp',
       icon: '/uploads/2024/11/Solar.svg',
-      href: '/products/solar-cables'
+      href: `/${params.locale}/products/solar-cables`
     }
   ];
 
   return (
-    <div className="flex flex-col min-h-screen">
-      <Section className="bg-neutral-light">
-        <Container>
-          <div className="max-w-3xl mx-auto text-center mb-16">
-            <h1 className="text-4xl font-bold mb-6">Our Products</h1>
-            <p className="text-xl text-text-secondary">
-              Explore our comprehensive range of high-quality cables designed for every application.
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            {categories.map((category, idx) => (
-              <Link key={idx} href={category.href} className="group block bg-white rounded-lg overflow-hidden shadow-sm border border-neutral-dark hover:shadow-md transition-all">
-                <div className="relative h-64 overflow-hidden">
-                  <Image 
-                    src={category.img} 
-                    alt={category.title}
-                    fill
-                    className="object-cover transition-transform duration-700 group-hover:scale-110"
-                  />
-                  <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors" />
-                </div>
-                <div className="p-8">
-                  <div className="flex items-center mb-4">
-                    <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
-                      <img src={category.icon} alt="" className="w-8 h-8" />
-                    </div>
-                    <h2 className="text-2xl font-bold text-text-primary group-hover:text-primary transition-colors">{category.title}</h2>
-                  </div>
-                  <p className="text-text-secondary text-lg mb-6">
-                    {category.desc}
-                  </p>
-                  <span className="text-primary font-medium group-hover:translate-x-1 transition-transform inline-flex items-center">
-                    View Products &rarr;
+    <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">
+              {t('heroSubtitle')}
+            </Badge>
+            <h1 className="text-4xl md:text-7xl lg:text-8xl font-extrabold text-white mb-4 md:mb-8 tracking-tight leading-[1.05]">
+              {t.rich('title', {
+                green: (chunks) => (
+                  <span className="relative inline-block">
+                    <span className="relative z-10 text-accent italic">{chunks}</span>
+                    <Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block" />
                   </span>
-                </div>
+                )
+              })}
+            </h1>
+            <p className="text-lg md:text-2xl text-white/70 leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
+              {t('subtitle')}
+            </p>
+            <div className="flex flex-wrap gap-4 md:gap-6">
+              <Button href="#categories" variant="accent" size="lg" className="group w-full md:w-auto">
+                {t('viewProducts')}
+                <span className="ml-3 transition-transform group-hover:translate-y-1">↓</span>
+              </Button>
+            </div>
+          </div>
+        </Container>
+      </section>
+
+      <Section id="categories" className="bg-neutral-light relative z-20 -mt-8 md:-mt-16 rounded-t-[32px] md:rounded-t-[64px] pt-12 md:pt-24">
+        <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>
+
+                    <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>
+                    </div>
+                  </div>
+                </Card>
               </Link>
             ))}
           </div>
         </Container>
       </Section>
+      
+      {/* Technical Support CTA */}
+      <Section className="bg-white py-12 md:py-28">
+        <Container>
+          <div className="bg-primary-dark rounded-[32px] md:rounded-[64px] p-6 md:p-20 lg:p-24 relative overflow-hidden">
+            <div className="absolute top-0 right-0 w-1/2 h-full bg-accent/5 -skew-x-12 translate-x-1/4" />
+            <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-6 md:gap-12">
+              <div className="max-w-2xl text-center lg:text-left">
+                <h2 className="text-2xl md:text-5xl lg:text-6xl font-bold text-white mb-4 md:mb-8 tracking-tight">{t('cta.title')}</h2>
+                <p className="text-base md:text-xl text-white/70 leading-relaxed">
+                  {t('cta.description')}
+                </p>
+              </div>
+              <Button href={`/${params.locale}/contact`} variant="accent" size="lg" className="group whitespace-nowrap w-full md:w-auto md:h-16 md:px-10 md:text-xl">
+                {t('cta.button')}
+                <span className="ml-4 transition-transform group-hover:translate-x-2">&rarr;</span>
+              </Button>
+            </div>
+          </div>
+        </Container>
+      </Section>
     </div>
   );
 }

app/[locale]/team/page.tsx

@@ -1,151 +1,185 @@
 import { useTranslations } from 'next-intl';
-import { Section, Container } from '@/components/ui';
+import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
 import Image from 'next/image';
 
 export default function TeamPage() {
-  const t = useTranslations('Navigation');
+  const t = useTranslations('Team');
 
   return (
-    <div className="flex flex-col min-h-screen">
+    <div className="flex flex-col min-h-screen bg-neutral-light">
       {/* Hero Section */}
-      <section className="relative flex items-center justify-center overflow-hidden bg-neutral-dark pt-[14%] pb-[12%]">
+      <section className="relative flex items-center justify-center overflow-hidden bg-primary-dark pt-32 pb-24 md:pt-[14%] md:pb-[12%]">
         <div className="absolute inset-0 z-0">
           <Image 
             src="/uploads/2024/12/DSC07655-Large.webp" 
             alt="KLZ Team" 
             fill
-            className="object-cover"
+            className="object-cover scale-105 animate-slow-zoom opacity-30 md:opacity-40"
             priority
           />
-          <div className="absolute inset-0 bg-gradient-to-r from-[#0a0000] to-[rgba(10,10,10,0.5)] opacity-80" />
+          <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
         </div>
         
-        <Container className="relative z-10 text-center text-white max-w-4xl">
-          <h5 className="text-xl md:text-2xl font-medium mb-4 text-primary">
-            The bright sparks behind the power
-          </h5>
-          <h2 className="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
-            We connect energy, expertise, and innovation to power a greener future.
-          </h2>
+        <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>
+          <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>
+          <p className="text-lg md:text-3xl text-white/70 font-medium italic">
+            {t('hero.title')}
+          </p>
         </Container>
       </section>
 
-      {/* Michael Bodemer Section */}
-      <section className="relative bg-[#011fff] text-white overflow-hidden">
-        <div className="flex flex-col md:flex-row">
-          <div className="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center">
-            <h1 className="text-4xl md:text-5xl font-bold mb-8">Michael Bodemer</h1>
-            <div className="w-12 h-1 bg-white mb-8" />
-            <h2 className="text-2xl md:text-3xl font-medium italic mb-8 leading-relaxed">
-              "Challenges exist to be solved, not to debate how complicated they are."
-            </h2>
-            <div className="w-12 h-1 bg-white mb-8" />
-            <p className="text-lg leading-relaxed opacity-90 mb-8">
-              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.
-            </p>
-            <a 
-              href="https://www.linkedin.com/in/michael-bodemer-33b493122/" 
-              target="_blank" 
-              rel="noopener noreferrer"
-              className="inline-flex items-center text-white font-bold border-2 border-white px-6 py-3 rounded-full hover:bg-white hover:text-[#011fff] transition-colors w-fit group"
-            >
-              Check Michael's LinkedIn
-              <span className="ml-2 group-hover:translate-x-1 transition-transform">&rarr;</span>
-            </a>
+      {/* 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">
+            <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>
+              <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>
+              <div className="relative mb-6 md:mb-12">
+                <div className="absolute -left-4 md:-left-8 top-0 bottom-0 w-1 md:w-1.5 bg-accent rounded-full" />
+                <p className="text-lg md:text-3xl font-bold italic leading-relaxed pl-5 md:pl-8 text-white/90">
+                  "{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">
+                {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"
+              >
+                {t('michael.linkedin')}
+                <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
+              </Button>
+            </div>
           </div>
-          <div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full">
+          <div className="w-full lg:w-1/2 relative min-h-[300px] md:min-h-[600px] lg:min-h-screen overflow-hidden">
             <Image 
               src="/uploads/2024/12/DSC07768-Large.webp" 
-              alt="Michael Bodemer" 
+              alt={t('michael.name')} 
               fill 
-              className="object-cover"
+              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>
         </div>
       </section>
 
-      {/* Legacy Section */}
-      <section className="relative py-[10%] bg-neutral-dark text-white overflow-hidden">
+      {/* Legacy Section - Immersive Background */}
+      <section className="relative py-16 md:py-48 bg-primary-dark text-white overflow-hidden">
         <div className="absolute inset-0 z-0">
           <Image 
-            src="/uploads/2024/12/medium-voltage-1920x400.webp" 
+            src="/uploads/2024/12/1694273920124-copy.webp" 
             alt="Legacy" 
             fill
-            className="object-cover"
+            className="object-cover opacity-20 md:opacity-30 scale-110 animate-slow-zoom"
+            sizes="100vw"
           />
-          <div className="absolute inset-0 bg-[#263336] opacity-90" />
+          <div className="absolute inset-0 bg-primary-dark/60 mix-blend-multiply" />
         </div>
         <Container className="relative z-10">
-          <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
-            <div className="md:col-span-5">
-              <h3 className="text-3xl font-bold mb-6">A Legacy of Excellence in Every Connection</h3>
-              <div className="space-y-6 text-lg opacity-90">
-                <p>
-                  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.
+          <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">
+                <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">
+                <p className="border-l-4 border-accent pl-5 md:pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl md:rounded-r-2xl">
+                  {t('legacy.p1')}
                 </p>
-                <p>
-                  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.
+                <p className="pl-6 md:pl-9 line-clamp-3 md:line-clamp-none">
+                  {t('legacy.p2')}
                 </p>
               </div>
             </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>
+              <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>
+            </div>
           </div>
         </Container>
       </section>
 
-      {/* Klaus Mintel Section */}
-      <section className="relative bg-[#011fff] text-white overflow-hidden">
-        <div className="flex flex-col md:flex-row">
-          <div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full order-2 md:order-1">
+      {/* 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">
             <Image 
               src="/uploads/2024/12/DSC07963-Large.webp" 
-              alt="Klaus Mintel" 
+              alt={t('klaus.name')} 
               fill 
-              className="object-cover"
+              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>
-          <div className="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center order-1 md:order-2">
-            <h1 className="text-4xl md:text-5xl font-bold mb-8">Klaus Mintel</h1>
-            <div className="w-12 h-1 bg-white mb-8" />
-            <h2 className="text-2xl md:text-3xl font-medium italic mb-8 leading-relaxed">
-              "Sometimes all it takes is a clear head and a good cable to make the world a little better."
-            </h2>
-            <div className="w-12 h-1 bg-white mb-8" />
-            <p className="text-lg leading-relaxed opacity-90 mb-8">
-              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.
-            </p>
-            <a 
-              href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/" 
-              target="_blank" 
-              rel="noopener noreferrer"
-              className="inline-flex items-center text-white font-bold border-2 border-white px-6 py-3 rounded-full hover:bg-white hover:text-[#011fff] transition-colors w-fit group"
-            >
-              Check Klaus' LinkedIn
-              <span className="ml-2 group-hover:translate-x-1 transition-transform">&rarr;</span>
-            </a>
+          <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">
+            <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>
+              <Heading level={2} className="text-primary mb-6 md:mb-10 text-3xl md:text-6xl">
+                {t('klaus.name')}
+              </Heading>
+              <div className="relative mb-6 md:mb-12">
+                <div className="absolute -left-4 md:-left-8 top-0 bottom-0 w-1 md:w-1.5 bg-primary rounded-full" />
+                <p className="text-lg md:text-3xl font-bold italic leading-relaxed pl-5 md:pl-8 text-text-secondary">
+                  "{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">
+                {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"
+              >
+                {t('klaus.linkedin')}
+                <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
+              </Button>
+            </div>
           </div>
         </div>
       </section>
 
-      {/* Manifesto Section */}
-      <Section className="bg-white text-neutral-dark">
+      {/* Manifesto Section - Modern Grid */}
+      <Section className="bg-white text-primary py-16 md:py-28">
         <Container>
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
-            <div className="lg:col-span-4">
-              <h2 className="text-4xl font-bold text-primary mb-6 sticky top-24">Our manifesto</h2>
+          <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">
+                  {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.
+                </p>
+              </div>
             </div>
-            <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
-              {[
-                { title: 'Competence', desc: 'Decades of experience and Europe-wide know-how combined with commitment and new ideas. Production partners up to 525 kV and the most modern systems, test laboratories and ready to invest in the future.' },
-                { title: 'Availability', desc: 'Always there for you - no waiting, no delays, just fast and reliable support. Maybe it\'s because we love what we do.' },
-                { title: 'Solutions', desc: 'Solutions require a lot of questions. We ask them. You, the manufacturer and ourselves. If you don\'t ask questions, you\'ll pay for it later. We need to prevent that.' },
-                { title: 'Logistics', desc: 'Monitoring production, regular exchanges, freight tracking, customs clearance, reloading, paying attention to the delivery time tunnel, invoices, delivery notes - our everyday life. We have the right team for it.' },
-                { title: 'Open to new things', desc: 'We listen. From the inquiry, through the offer, to delivery. What can be done better needs to be discussed. If you don\'t adapt your processes, you\'ll no longer be on the highway at some point. Instead, you\'ll end up in a dead end.' },
-                { title: 'Reliability', desc: 'We deliver what we promise – every time, without fail.' }
-              ].map((item, idx) => (
-                <div key={idx} className="bg-neutral-light p-6 rounded-lg border border-neutral hover:border-primary transition-colors">
-                  <div className="text-primary font-mono text-xl mb-4">0{idx + 1}</div>
-                  <h3 className="text-xl font-bold mb-3">{item.title}</h3>
-                  <p className="text-text-secondary">{item.desc}</p>
+            <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 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>
                 </div>
               ))}
             </div>
@@ -153,18 +187,24 @@ export default function TeamPage() {
         </Container>
       </Section>
 
-      {/* Gallery Section */}
-      <Section className="bg-neutral-dark py-0 pb-24 pt-24">
+      {/* Gallery Section - Premium Treatment */}
+      <Section className="bg-primary-dark py-16 md:py-32">
         <Container>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <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>
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-6">
             {[
               '/uploads/2024/12/DSC07539-Large-600x400.webp',
               '/uploads/2024/12/DSC07460-Large-600x400.webp',
               '/uploads/2024/12/DSC07469-Large-600x400.webp',
-              '/uploads/2024/12/DSC07433-Large-600x400.webp'
+              '/uploads/2024/12/DSC07433-Large-600x400.webp',
+              '/uploads/2024/12/DSC07387-Large-600x400.webp'
             ].map((src, idx) => (
-              <div key={idx} className="relative aspect-video rounded-lg overflow-hidden opacity-80 hover:opacity-100 transition-opacity">
-                <Image src={src} alt="Team Gallery" fill className="object-cover" />
+              <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" />
+                <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>
             ))}
           </div>

app/health/route.ts

@@ -0,0 +1,5 @@
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  return new Response('OK', { status: 200 });
+}

components/Footer.tsx

@@ -1,98 +1,93 @@
 import Link from 'next/link';
 import Image from 'next/image';
-import { useTranslations } from 'next-intl';
+import { useTranslations, useLocale } from 'next-intl';
+import { Container, Heading } from './ui';
 
 export default function Footer() {
   const t = useTranslations('Footer');
+  const locale = useLocale();
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-white text-neutral-dark py-16 border-t border-neutral-light">
-      <div className="container mx-auto px-4">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
-          {/* Column 1: Legal & Languages */}
-          <div className="space-y-8">
-            <div>
-              <h4 className="text-lg font-bold mb-4">Legal</h4>
-              <ul className="space-y-2 text-sm text-text-secondary">
-                <li><Link href="/legal-notice" className="hover:text-primary">Legal Notice</Link></li>
-                <li><Link href="/privacy-policy" className="hover:text-primary">Privacy Policy</Link></li>
-                <li><Link href="/terms" className="hover:text-primary">Terms</Link></li>
-              </ul>
-            </div>
-            <div>
-              <h4 className="text-lg font-bold mb-4">Languages</h4>
-              <ul className="space-y-2 text-sm text-text-secondary">
-                <li><Link href="/en" className="hover:text-primary">English</Link></li>
-                <li><Link href="/de" className="hover:text-primary">Deutsch</Link></li>
-              </ul>
-            </div>
-            <div>
-              <p className="text-sm text-text-secondary">
-                Copyright © {currentYear} KLZ Cables.<br />
-                All rights reserved.
-              </p>
-            </div>
-            <div>
-               <Image 
-                  src="/logo-white.svg" 
-                  alt="KLZ Cables" 
-                  width={100} 
-                  height={25} 
-                  className="h-6 w-auto invert"
-                  unoptimized
-                />
+    <footer className="bg-primary-dark text-white py-24 relative overflow-hidden">
+      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
+      
+      <Container>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 mb-20">
+          {/* Brand Column */}
+          <div className="lg:col-span-4 space-y-8">
+            <Link href={`/${locale}`} className="inline-block group">
+              <Image 
+                src="/logo-white.svg" 
+                alt="KLZ Cables" 
+                width={150} 
+                height={40} 
+                className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
+                unoptimized
+              />
+            </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.
+            </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">
+                <span className="sr-only">LinkedIn</span>
+                <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
+                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                </svg>
+              </a>
             </div>
           </div>
 
-          {/* Column 2: Archives */}
-          <div>
-            <h4 className="text-lg font-bold mb-4">Archives</h4>
-            <ul className="space-y-2 text-sm text-text-secondary">
-              <li><Link href="#" className="hover:text-primary">November 2025</Link></li>
-              <li><Link href="#" className="hover:text-primary">September 2025</Link></li>
-              <li><Link href="#" className="hover:text-primary">August 2025</Link></li>
-              <li><Link href="#" className="hover:text-primary">June 2025</Link></li>
-              <li><Link href="#" className="hover:text-primary">May 2025</Link></li>
-            </ul>
-          </div>
-
-          {/* Column 3: Categories */}
-          <div>
-            <h4 className="text-lg font-bold mb-4">Categories</h4>
-            <ul className="space-y-2 text-sm text-text-secondary">
-              <li><Link href="#" className="hover:text-primary">Cable Logistics</Link></li>
-              <li><Link href="#" className="hover:text-primary">Cable Technology</Link></li>
-              <li><Link href="#" className="hover:text-primary">KLZ News</Link></li>
-              <li><Link href="#" className="hover:text-primary">Renewable Energy</Link></li>
-            </ul>
-          </div>
-
-          {/* Column 4: Recent Posts */}
+          {/* Links Columns */}
           <div className="lg:col-span-2">
-            <h4 className="text-lg font-bold mb-4">Recent Posts</h4>
-            <ul className="space-y-4 text-sm text-text-secondary">
-              <li>
-                <Link href="#" className="hover:text-primary block font-medium">Focus on wind farm construction: three typical cable challenges</Link>
-              </li>
-              <li>
-                <Link href="#" className="hover:text-primary block font-medium">Why the N2XS(F)2Y is the ideal cable for your energy project</Link>
-              </li>
-              <li>
-                <Link href="#" className="hover:text-primary block font-medium">Shortage of NA2XSF2Y? We have the three-core medium-voltage cable</Link>
-              </li>
-              <li>
-                <Link href="#" className="hover:text-primary block font-medium">Which cables for wind power? Differences from low to extra-high voltage explained</Link>
-              </li>
+            <h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">{t('legal')}</h4>
+            <ul className="space-y-4 text-white/70">
+              <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="hover:text-white transition-colors">{t('legalNotice')}</Link></li>
+              <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="hover:text-white transition-colors">{t('privacyPolicy')}</Link></li>
+              <li><Link href={`/${locale}/${t('termsSlug')}`} className="hover:text-white transition-colors">{t('terms')}</Link></li>
+            </ul>
+          </div>
+
+          <div className="lg:col-span-2">
+            <h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">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>
+            </ul>
+          </div>
+
+          {/* Recent Posts Column */}
+          <div className="lg:col-span-4">
+            <h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">{t('recentPosts')}</h4>
+            <ul className="space-y-6">
+              {[
+                "Focus on wind farm construction: three typical cable challenges",
+                "Why the N2XS(F)2Y is the ideal cable for your energy project"
+              ].map((post, i) => (
+                <li key={i}>
+                  <Link href="#" className="group block">
+                    <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>
+                  </Link>
+                </li>
+              ))}
             </ul>
           </div>
         </div>
-      </div>
-      
-      {/* Slide out widget area (hidden for now, but referenced in HTML) */}
-      <div className="fixed top-0 right-0 h-full w-80 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50">
-         {/* Content would go here */}
-      </div>
+
+        <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>
+          <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>
+          </div>
+        </div>
+      </Container>
     </footer>
   );
 }

components/Header.tsx

@@ -43,89 +43,86 @@ export default function Header() {
   ];
 
   const headerClass = cn(
-    "fixed top-0 left-0 right-0 z-50 transition-all duration-300",
+    "fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p",
     {
-      "bg-transparent": isHomePage && !isScrolled,
-      "bg-white shadow-md": !isHomePage || isScrolled,
-      "py-4": !isScrolled,
-      "py-2": isScrolled
+      "bg-transparent py-4 md:py-8": isHomePage && !isScrolled,
+      "bg-primary py-3 md:py-4 shadow-2xl": !isHomePage || isScrolled,
     }
   );
 
-  const textColorClass = (isHomePage && !isScrolled) ? "text-white" : "text-text-primary";
-  const logoSrc = (isHomePage && !isScrolled) 
-    ? "/logo-white.svg"
-    : "/logo-blue.svg";
+  const textColorClass = "text-white";
+  const logoSrc = "/logo-white.svg";
 
   return (
     <>
       <header className={headerClass}>
-        <div className="container mx-auto px-4 flex items-center justify-between">
-          <Link href={`/${currentLocale}`} className="flex-shrink-0">
+        <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
+          <Link href={`/${currentLocale}`} className="flex-shrink-0 group touch-target">
             <Image 
               src={logoSrc} 
               alt="KLZ Cables" 
-              width={100} 
-              height={100} 
-              className="h-12 w-auto transition-all duration-300"
+              width={120} 
+              height={120} 
+              className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
               priority
               unoptimized
             />
           </Link>
 
-          <div className="flex items-center gap-8">
-            <nav className="hidden lg:flex items-center space-x-8">
+          <div className="flex items-center gap-4 md:gap-12">
+            <nav className="hidden lg:flex items-center space-x-10">
               {menuItems.map((item) => (
                 <Link 
                   key={item.href} 
                   href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
-                  className={cn(textColorClass, "hover:text-primary font-medium transition-colors text-lg")}
+                  className={cn(
+                    textColorClass, 
+                    "hover:text-accent font-bold transition-all text-lg tracking-tight relative group"
+                  )}
                 >
                   {item.label}
+                  <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-300 group-hover:w-full rounded-full" />
                 </Link>
               ))}
             </nav>
 
-            <div className={cn("hidden lg:flex items-center space-x-4", textColorClass)}>
-              <div className="flex items-center space-x-2 text-sm font-medium">
+            <div className={cn("hidden lg:flex items-center space-x-8", textColorClass)}>
+              <div className="flex items-center space-x-4 text-sm font-extrabold tracking-widest uppercase">
                 <Link 
                   href={getPathForLocale('en')} 
-                  className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'en' ? 'text-primary font-bold' : 'opacity-80'}`}
+                  className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
                 >
-                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAmVBMVEViZsViZMJiYrf9gnL8eWrlYkjgYkjZYkj8/PujwPybvPz4+PetraBEgfo+fvo3efkydfkqcvj8Y2T8UlL8Q0P8MzP9k4Hz8/Lu7u4DdPj9/VrKysI9fPoDc/EAZ7z7IiLHYkjp6ekCcOTk5OIASbfY/v21takAJrT5Dg6sYkjc3Nn94t2RkYD+y8KeYkjs/v7l5fz0dF22YkjWvcOLAAAAgElEQVR4AR2KNULFQBgGZ5J13KGGKvc/Cw1uPe62eb9+Jr1EUBFHSgxxjP2Eca6AfUSfVlUfBvm1Ui1bqafctqMndNkXpb01h5TLx4b6TIXgwOCHfjv+/Pz+5vPRw7txGWT2h6yO0/GaYltIp5PT1dEpLNPL/SdWjYjAAZtvRPgHJX4Xio+DSrkAAAAASUVORK5CYII=" alt="English" width="16" height="11" />
+                  EN
                 </Link>
+                <div className="w-px h-4 bg-current opacity-20" />
                 <Link 
                   href={getPathForLocale('de')} 
-                  className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'de' ? 'text-primary font-bold' : 'opacity-80'}`}
+                  className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
                 >
-                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAABLElEQVR4AY2QgUZEQRSGz9ydmzbYkBWABBJYABHEFhJ6m0WP0DMEQNIr9AKrN8ne2Tt3Zs7MOdOZmRBEv+v34Tvub9R6fdNlAzU+snSME/wdjbjbbJ6EiEg6BA8102QbjKNpoMzw8v6qD/sOALbbT2MC1NgaAWOKOgxf5czY+4dbAX2G/THzcozLrvPV85IQyqVz0rvg2p9Pei4HjzSsiFbV4JgyhhxCjpGdZ0RhdikLB9/b8Qig7MkpSovR7Cp59q6CazaNFiTt4J82o6uvdMVwTsztKTXZod4jgOJJuqNAjFyGrBR8gM6XwKfIC4KanBSTZ0rClKh08D9DFh3egW7ebH7NcRDQWrz9rM2Ne+mDOXB2mZJ8agL19nwxR2iZXGm1gDbQKhDjd4yHb2oW/KR8xHicAAAAAElFTkSuQmCC" alt="Deutsch" width="16" height="11" />
+                  DE
                 </Link>
               </div>
               
               <Button 
-                href="/contact" 
-                variant="outline" 
-                className={cn(
-                  "rounded-full px-6 transition-colors",
-                  isHomePage && !isScrolled 
-                    ? "border-white text-white hover:bg-white hover:text-black" 
-                    : "border-primary text-primary hover:bg-primary hover:text-white"
-                )}
+                href={`/${currentLocale}/contact`}
+                variant="white" 
+                size="md"
+                className="px-8 shadow-xl"
               >
-                Get in touch
+                {t('contact')}
               </Button>
             </div>
 
             {/* Mobile Menu Button */}
-            <button className={cn("lg:hidden p-2", textColorClass)}>
-              <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <button className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20", textColorClass)}>
+              <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" />
               </svg>
             </button>
           </div>
         </div>
       </header>
-      {!isHomePage && <div className="h-24 md:h-32" />}
+      {/* Removed spacer div that caused white gap */}
     </>
   );
 }

components/ProductTabs.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface ProductTabsProps {
+  children: React.ReactNode;
+  technicalData?: React.ReactNode;
+}
+
+export default function ProductTabs({ children, technicalData }: ProductTabsProps) {
+  return (
+    <div className="space-y-12">
+      <div className="prose max-w-none">
+        {children}
+      </div>
+
+      {technicalData && (
+        <div className="pt-8 border-t border-neutral-dark">
+          <h2 className="text-2xl font-bold text-primary-dark mb-6">Technical Specifications</h2>
+          <div className="not-prose">
+            {technicalData}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/ProductTechnicalData.tsx

@@ -21,7 +21,8 @@ interface ProductTechnicalDataProps {
 }
 
 export default function ProductTechnicalData({ data }: ProductTechnicalDataProps) {
-  const { technicalItems, voltageTables } = data;
+  if (!data) return null;
+  const { technicalItems = [], voltageTables = [] } = data;
 
   return (
     <div className="space-y-8">

components/RelatedProducts.tsx

@@ -0,0 +1,91 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { getAllProducts } from '@/lib/mdx';
+import { getTranslations } from 'next-intl/server';
+
+interface RelatedProductsProps {
+  currentSlug: string;
+  categories: string[];
+  locale: string;
+}
+
+export default async function RelatedProducts({ currentSlug, categories, locale }: RelatedProductsProps) {
+  const allProducts = await getAllProducts(locale);
+  const t = await getTranslations('Products');
+  
+  // Filter products: same category, not current product
+  const related = allProducts
+    .filter(p => 
+      p.slug !== currentSlug && 
+      p.frontmatter.categories.some(cat => categories.includes(cat))
+    )
+    .slice(0, 3); // Limit to 3 for better spacing
+
+  if (related.length === 0) return null;
+
+  return (
+    <div className="mt-32 pt-32 border-t border-neutral-dark/10">
+      <div className="flex items-end justify-between mb-12">
+        <div>
+          <h2 className="text-3xl md:text-4xl font-extrabold text-primary tracking-tight mb-4">
+            {t('relatedProductsTitle') || 'Related Products'}
+          </h2>
+          <div className="h-1.5 w-20 bg-accent rounded-full" />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        {related.map((product) => {
+          // Find the category slug for the link
+          const catSlug = product.frontmatter.categories[0].toLowerCase().replace(/\s+/g, '-');
+          
+          return (
+            <Link 
+              key={product.slug} 
+              href={`/${locale}/products/${catSlug}/${product.slug}`}
+              className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
+            >
+              <div className="aspect-[16/10] relative bg-neutral-light/30 p-8 overflow-hidden">
+                {product.frontmatter.images?.[0] ? (
+                  <>
+                    <Image
+                      src={product.frontmatter.images[0]}
+                      alt={product.frontmatter.title}
+                      fill
+                      className="object-contain p-4 transition-transform duration-700 group-hover:scale-110 z-10"
+                    />
+                    <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-2/3 h-3 bg-black/5 blur-lg rounded-full" />
+                  </>
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center text-text-secondary/30 font-bold uppercase tracking-widest text-xs">
+                    No Image
+                  </div>
+                )}
+              </div>
+              <div className="p-8">
+                <div className="flex flex-wrap gap-2 mb-3">
+                  {product.frontmatter.categories.slice(0, 1).map((cat, idx) => (
+                    <span key={idx} className="text-[10px] font-bold uppercase tracking-widest text-primary/40">
+                      {cat}
+                    </span>
+                  ))}
+                </div>
+                <h3 className="text-xl font-bold text-text-primary group-hover:text-primary transition-colors leading-tight">
+                  {product.frontmatter.title}
+                </h3>
+                <div className="mt-6 flex items-center text-primary text-sm font-bold group-hover:text-accent-dark transition-colors">
+                  <span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-0.5">
+                    {t('details')}
+                  </span>
+                  <svg className="w-4 h-4 ml-2 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>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/RequestQuoteForm.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useTranslations } from 'next-intl';
+
+interface RequestQuoteFormProps {
+  productName: string;
+}
+
+export default function RequestQuoteForm({ productName }: RequestQuoteFormProps) {
+  const t = useTranslations('Products.form');
+  const [email, setEmail] = useState('');
+  const [request, setRequest] = useState('');
+  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus('submitting');
+
+    // Simulate API call
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    // Here you would typically send the data to your backend
+    console.log('Form submitted:', { productName, email, request });
+
+    setStatus('success');
+    setEmail('');
+    setRequest('');
+  };
+
+  if (status === 'success') {
+    return (
+      <div className="bg-accent/5 border border-accent/20 text-primary-dark p-6 rounded-[32px] text-center animate-fade-in">
+        <div className="w-12 h-12 bg-accent rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-accent/20">
+          <svg className="w-6 h-6 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>
+        <h3 className="text-xl font-extrabold mb-2 tracking-tight">{t('successTitle')}</h3>
+        <p className="text-text-secondary text-sm leading-relaxed mb-6">
+          {t('successDesc', { productName })}
+        </p>
+        <button 
+          onClick={() => setStatus('idle')}
+          className="inline-flex items-center text-[10px] font-bold uppercase tracking-[0.2em] text-primary hover:text-accent transition-colors group"
+        >
+          <span className="border-b-2 border-primary/10 group-hover:border-accent transition-colors pb-1">
+            {t('sendAnother')}
+          </span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="space-y-4">
+        <div className="space-y-1.5">
+          <input
+            type="email"
+            id="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full px-4 py-3 bg-neutral-light/50 border border-neutral-dark/10 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent focus:bg-white transition-all duration-300 placeholder:text-neutral-dark/40 text-sm"
+            placeholder={t('email')}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <textarea
+            id="request"
+            required
+            rows={4}
+            value={request}
+            onChange={(e) => setRequest(e.target.value)}
+            className="w-full px-4 py-3 bg-neutral-light/50 border border-neutral-dark/10 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent focus:bg-white transition-all duration-300 placeholder:text-neutral-dark/40 text-sm resize-none"
+            placeholder={t('message')}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <button
+          type="submit"
+          disabled={status === 'submitting'}
+          className="w-full bg-primary text-white font-bold py-3.5 px-6 rounded-xl hover:bg-primary-dark hover:shadow-lg active:scale-[0.98] transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 group"
+        >
+          {status === 'submitting' ? (
+            <>
+              <svg className="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              <span className="text-sm">{t('submitting')}</span>
+            </>
+          ) : (
+            <>
+              <span className="text-sm">{t('submit')}</span>
+              <svg className="w-4 h-4 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>
+            </>
+          )}
+        </button>
+        
+        <p className="text-[8px] text-center text-text-secondary/40 uppercase tracking-[0.15em] font-medium px-2">
+          {t('privacyNote')}
+        </p>
+      </div>
+    </form>
+  );
+}

components/Reveal.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { cn } from '@/components/ui';
+
+interface RevealProps {
+  children: React.ReactNode;
+  className?: string;
+  threshold?: number;
+  delay?: number;
+}
+
+export default function Reveal({ children, className, threshold = 0.1, delay = 0 }: RevealProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(entry.target);
+        }
+      },
+      { threshold }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [threshold]);
+
+  return (
+    <div
+      ref={ref}
+      className={cn('reveal-on-scroll', isVisible && 'is-visible', className)}
+      style={{ transitionDelay: `${delay}ms` }}
+    >
+      {children}
+    </div>
+  );
+}

components/blog/AnimatedImage.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+
+interface AnimatedImageProps {
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+  className?: string;
+  priority?: boolean;
+}
+
+export default function AnimatedImage({
+  src,
+  alt,
+  width = 800,
+  height = 600,
+  className = '',
+  priority = false,
+}: AnimatedImageProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isInView, setIsInView] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsInView(true);
+            observer.disconnect();
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`relative overflow-hidden rounded-xl shadow-lg my-12 ${className}`}
+    >
+      <Image
+        src={src}
+        alt={alt}
+        width={width}
+        height={height}
+        className={`
+          duration-1000 ease-out w-full h-auto
+          ${isLoaded && isInView ? 'scale-100 blur-0 opacity-100' : 'scale-110 blur-xl opacity-0'}
+        `}
+        onLoad={() => setIsLoaded(true)}
+        priority={priority}
+      />
+      {alt && (
+        <p className="text-sm text-text-secondary text-center mt-3 italic px-4 pb-4">
+          {alt}
+        </p>
+      )}
+    </div>
+  );
+}

components/blog/ChatBubble.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface ChatBubbleProps {
+  author?: string;
+  avatar?: string;
+  role?: string;
+  children: React.ReactNode;
+  align?: 'left' | 'right';
+}
+
+export default function ChatBubble({
+  author = 'KLZ Team',
+  avatar = '/uploads/2024/11/cropped-favicon-3-192x192.png', // Default fallback
+  role = 'Assistant',
+  children,
+  align = 'left',
+}: ChatBubbleProps) {
+  const isRight = align === 'right';
+
+  return (
+    <div className={`flex w-full gap-4 my-10 ${isRight ? 'flex-row-reverse' : 'flex-row'}`}>
+      {/* Avatar */}
+      <div className="flex-shrink-0 flex flex-col items-center gap-1">
+        <div className="w-10 h-10 rounded-full overflow-hidden border border-neutral-200 shadow-sm relative">
+           {/* Use a simple div placeholder if image fails or isn't provided, but here we assume a path */}
+           <div className="w-full h-full bg-neutral-100 flex items-center justify-center text-xs font-bold text-neutral-400">
+             {author.charAt(0)}
+           </div>
+           {avatar && (
+             <Image 
+               src={avatar} 
+               alt={author} 
+               fill 
+               className="object-cover"
+             />
+           )}
+        </div>
+      </div>
+
+      {/* Message Bubble */}
+      <div className={`flex flex-col max-w-[85%] ${isRight ? 'items-end' : 'items-start'}`}>
+        <div className="flex items-baseline gap-2 mb-1">
+          <span className="text-sm font-bold text-text-primary">{author}</span>
+          {role && <span className="text-xs text-text-secondary">{role}</span>}
+        </div>
+        
+        <div className={`
+          relative px-6 py-4 rounded-2xl shadow-sm border
+          ${isRight 
+            ? 'bg-primary text-white rounded-tr-none border-primary' 
+            : 'bg-white text-text-primary rounded-tl-none border-neutral-200'
+          }
+        `}>
+          <div className={`prose prose-sm max-w-none ${isRight ? 'prose-invert' : ''}`}>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/blog/PostNavigation.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import Link from 'next/link';
+import { PostMdx } from '@/lib/blog';
+
+interface PostNavigationProps {
+  prev: PostMdx | null;
+  next: PostMdx | null;
+  locale: string;
+}
+
+export default function PostNavigation({ prev, next, locale }: PostNavigationProps) {
+  if (!prev && !next) return null;
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 w-full mt-16">
+      {/* Previous Post (Older) */}
+      {prev ? (
+        <Link 
+          href={`/${locale}/blog/${prev.slug}`}
+          className="group relative h-64 md:h-80 overflow-hidden block"
+        >
+          {/* Background Image */}
+          {prev.frontmatter.featuredImage ? (
+            <div 
+              className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
+              style={{ backgroundImage: `url(${prev.frontmatter.featuredImage})` }}
+            />
+          ) : (
+            <div className="absolute inset-0 bg-neutral-100" />
+          )}
+          
+          {/* Overlay */}
+          <div className="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-300" />
+          
+          {/* Content */}
+          <div className="absolute inset-0 flex flex-col justify-center p-8 md:p-12 text-white z-10">
+            <span className="text-sm font-bold uppercase tracking-wider mb-2 opacity-70">
+              {locale === 'de' ? 'Vorheriger Beitrag' : 'Previous Post'}
+            </span>
+            <h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
+              {prev.frontmatter.title}
+            </h3>
+          </div>
+          
+          {/* Arrow Icon */}
+          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-white/30 group-hover:text-white group-hover:-translate-x-2 transition-all duration-300">
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+          </div>
+        </Link>
+      ) : (
+        <div className="hidden md:block bg-neutral-50" />
+      )}
+
+      {/* Next Post (Newer) */}
+      {next ? (
+        <Link 
+          href={`/${locale}/blog/${next.slug}`}
+          className="group relative h-64 md:h-80 overflow-hidden block"
+        >
+          {/* Background Image */}
+          {next.frontmatter.featuredImage ? (
+            <div 
+              className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
+              style={{ backgroundImage: `url(${next.frontmatter.featuredImage})` }}
+            />
+          ) : (
+            <div className="absolute inset-0 bg-neutral-100" />
+          )}
+          
+          {/* Overlay */}
+          <div className="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-300" />
+          
+          {/* Content */}
+          <div className="absolute inset-0 flex flex-col justify-center items-end text-right p-8 md:p-12 text-white z-10">
+            <span className="text-sm font-bold uppercase tracking-wider mb-2 opacity-70">
+              {locale === 'de' ? 'Nächster Beitrag' : 'Next Post'}
+            </span>
+            <h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
+              {next.frontmatter.title}
+            </h3>
+          </div>
+          
+          {/* Arrow Icon */}
+          <div className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 group-hover:text-white group-hover:translate-x-2 transition-all duration-300">
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </div>
+        </Link>
+      ) : (
+        <div className="hidden md:block bg-neutral-50" />
+      )}
+    </div>
+  );
+}

components/blog/PowerCTA.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Link from 'next/link';
+
+interface PowerCTAProps {
+  locale: string;
+}
+
+export default function PowerCTA({ locale }: PowerCTAProps) {
+  const isDe = locale === 'de';
+
+  return (
+    <div className="my-12 p-8 md:p-10 bg-white rounded-xl shadow-lg border border-neutral-100 relative overflow-hidden">
+      {/* Decorative background element */}
+      <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-bl-full -mr-10 -mt-10" />
+      
+      <div className="relative z-10">
+        <h3 className="text-2xl font-bold text-text-primary mb-4 flex items-center gap-3">
+          <span className="text-3xl">💡</span>
+          {isDe ? 'Benötigen Sie Strom?' : 'Need power?'} 
+          <span className="text-primary">{isDe ? 'Wir sind für Sie da!' : "We've got you covered!"}</span>
+        </h3>
+        
+        <p className="text-lg text-text-secondary mb-6 leading-relaxed">
+          {isDe 
+            ? 'Von der Planung von Wind- und Solarparks bis zur Lieferung hochwertiger Energiekabel wie NA2XS(F)2Y, NAYY und NA2XY erwecken wir Energienetze zum Leben.'
+            : 'From wind and solar park planning to delivering high-quality energy cables like NA2XS(F)2Y, NAYY, and NA2XY, we bring energy networks to life.'
+          }
+        </p>
+        
+        <ul className="space-y-2 mb-8">
+          {[
+            isDe ? 'Schnelle Lieferung dank unseres strategischen Hubs.' : 'Fast delivery thanks to our strategic hub.',
+            isDe ? 'Nachhaltige Lösungen für eine grünere Zukunft.' : 'Sustainable solutions for a greener tomorrow.',
+            isDe ? 'Vertraut von Branchenführern in Deutschland, Österreich und den Niederlanden.' : 'Trusted by industry leaders in Germany, Austria and the Netherlands.'
+          ].map((item, i) => (
+            <li key={i} className="flex items-start gap-2 text-text-secondary">
+              <span className="text-green-500 mt-1">✅</span>
+              <span>{item}</span>
+            </li>
+          ))}
+        </ul>
+        
+        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
+          <p className="font-medium text-text-primary">
+            {isDe ? 'Lassen Sie uns gemeinsam eine grünere Zukunft gestalten.' : "Let's power a greener future together."}
+          </p>
+          <Link
+            href={`/${locale}/contact`}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-all shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
+          >
+            {isDe ? '👉 Kontakt aufnehmen' : '👉 Get in touch'}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

components/blog/SplitHeading.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+interface SplitHeadingProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function SplitHeading({ children, className = '' }: SplitHeadingProps) {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            observer.disconnect();
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div 
+      ref={elementRef}
+      className={`transform transition-all duration-1000 ease-out ${
+        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
+      } ${className}`}
+    >
+      <h3 className="text-2xl md:text-3xl font-bold leading-tight text-text-primary">
+        {children}
+      </h3>
+    </div>
+  );
+}

components/blog/VisualLinkPreview.tsx

@@ -32,7 +32,13 @@ export default function VisualLinkPreview({ url, title, summary, image }: Visual
             {summary}
           </p>
           <span className="text-xs text-text-secondary mt-2 opacity-70">
-            {new URL(url).hostname}
+            {(() => {
+              try {
+                return new URL(url).hostname;
+              } catch (e) {
+                return url;
+              }
+            })()}
           </span>
         </div>
       </div>

components/home/CTA.tsx

@@ -1,21 +1,32 @@
 import React from 'react';
-import Link from 'next/link';
-import { Section, Container } from '../../components/ui';
+import { useTranslations, useLocale } from 'next-intl';
+import { Section, Container, Button, Heading } 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!
-          </h2>
-          <Link href="/contact" className="group flex items-center gap-4 text-xl font-bold text-[#82ed20]">
-            Reach out now
-            <span className="w-10 h-10 border-2 border-[#82ed20] rounded-full flex items-center justify-center group-hover:bg-[#82ed20] group-hover:text-primary transition-all">
-              &rarr;
-            </span>
-          </Link>
+    <Section className="bg-primary-dark text-white py-32 relative overflow-hidden">
+      <div className="absolute top-0 right-0 w-1/3 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
+      <div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-primary/10 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
+      
+      <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">
+              <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.
+            </p>
+          </div>
+          <div className="flex-shrink-0">
+            <Button href={`/${locale}/contact`} variant="accent" size="xl" className="group px-12">
+              {t('button')}
+              <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
+            </Button>
+          </div>
         </div>
       </Container>
     </Section>

components/home/Experience.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import { Section, Container, Heading } from '../../components/ui';
+
+export default function Experience() {
+  const t = useTranslations('Home.experience');
+
+  return (
+    <Section className="relative py-32 md:py-48 overflow-hidden text-white">
+      <div className="absolute inset-0 z-0">
+        <Image 
+          src="/uploads/2024/12/1694273920124-copy-2.webp" 
+          alt="Experience Background" 
+          fill
+          className="object-cover object-center scale-105 animate-slow-zoom"
+          unoptimized
+        />
+        <div className="absolute inset-0 bg-primary-dark/80 mix-blend-multiply" />
+        <div className="absolute inset-0 bg-gradient-to-r from-primary-dark via-primary-dark/40 to-transparent" />
+      </div>
+      
+      <Container className="relative z-10">
+        <div className="max-w-3xl">
+          <Heading level={2} subtitle="Our Legacy" 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">
+            <p className="border-l-4 border-accent pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl">
+              {t('p1')}
+            </p>
+            <p className="pl-9">
+              {t('p2')}
+            </p>
+          </div>
+          
+          <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>
+            <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>
+          </div>
+        </div>
+      </Container>
+    </Section>
+  );
+}

components/home/GallerySection.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import Image from 'next/image';
-import { Section, Container } from '../../components/ui';
+import { useTranslations } from 'next-intl';
+import { Section, Container, Heading } 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',
@@ -13,23 +15,24 @@ export default function GallerySection() {
   ];
 
   return (
-    <Section className="bg-white text-neutral-dark py-24">
+    <Section className="bg-white text-neutral-dark py-32">
       <Container>
-        <div className="text-center mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold">Strong Connections for a Sustainable World.</h2>
-        </div>
+        <Heading level={2} subtitle="Visual Journey" align="center">
+          {t('title')}
+        </Heading>
         
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           {images.map((src, idx) => (
-            <div key={idx} className="relative aspect-[4/3] overflow-hidden rounded-lg group">
+            <div key={idx} className="relative aspect-[4/3] overflow-hidden rounded-3xl group shadow-lg hover:shadow-2xl transition-all duration-700">
               <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"
+                className="object-cover transition-transform duration-1000 group-hover:scale-110"
                 unoptimized
               />
-              <div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors" />
+              <div className="absolute inset-0 bg-primary-dark/20 group-hover:bg-transparent transition-all duration-500" />
+              <div className="absolute inset-0 border-0 group-hover:border-[16px] border-white/10 transition-all duration-500 pointer-events-none" />
             </div>
           ))}
         </div>

components/home/Hero.tsx

@@ -1,46 +1,48 @@
 import React from 'react';
-import Link from 'next/link';
-import { Container } from '@/components/ui';
+import { useTranslations } from 'next-intl';
+import { Container, Button } from '@/components/ui';
 import Scribble from '@/components/Scribble';
+import HeroIllustration from './HeroIllustration';
 
 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">
-        <video 
-          className="w-full h-full object-cover"
-          autoPlay 
-          muted 
-          loop 
-          playsInline
-          poster="/uploads/2025/02/Still-2025-02-10-104337_1.1.1.webp"
-        >
-          <source src="/uploads/2025/02/header.webm" type="video/webm" />
-          <source src="/uploads/2025/02/header.mp4" type="video/mp4" />
-        </video>
-        <div className="absolute inset-0 bg-gradient-to-b from-black/10 to-black/40" />
-      </div>
+    <section className="relative h-[70vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary-dark">
+      <HeroIllustration />
       
       <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
+        <div className="max-w-5xl animate-slide-up">
+          <h1 className="text-4xl md:text-7xl lg:text-8xl font-extrabold mb-4 md:mb-8 tracking-tight leading-[1.05] max-w-[15ch] md:max-w-none">
+            {t.rich('title', {
+              green: (chunks) => (
+                <span className="relative inline-block">
+                  <span className="relative z-10 text-accent italic">{chunks}</span>
+                  <Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block" />
+                </span>
+              )
+            })}
           </h1>
-          <div className="mt-8">
-            <Link href="/contact" className="inline-flex items-center text-white text-xl font-medium group">
-              Let's talk
-              <span className="ml-2 w-8 h-8 border-2 border-white rounded-full flex items-center justify-center group-hover:bg-white group-hover:text-black transition-all">
-                &rarr;
-              </span>
-            </Link>
+          <p className="text-lg md:text-2xl text-white/70 leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
+            {t('subtitle')}
+          </p>
+          <div className="flex flex-col md:flex-row gap-3 md:gap-6">
+            <Button href="/contact" variant="accent" size="lg" className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl">
+              {t('cta')}
+              <span className="ml-3 transition-transform group-hover:translate-x-1">&rarr;</span>
+            </Button>
+            <Button href="/products" variant="ghost" size="lg" className="group w-full md:w-auto text-white hover:bg-white/10 md:bg-white md:text-primary md:hover:bg-neutral-light md:h-16 md:px-10 md:text-xl">
+              {t('exploreProducts')}
+            </Button>
           </div>
         </div>
       </Container>
+      
+      <div className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 animate-bounce hidden sm:block">
+        <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
+          <div className="w-1 h-2 bg-white rounded-full" />
+        </div>
+      </div>
     </section>
   );
 }

components/home/HeroIllustration.tsx

@@ -0,0 +1,747 @@
+'use client';
+
+import React from 'react';
+
+// Isometric grid configuration - true 2:1 isometric projection
+const CELL_WIDTH = 120;
+const CELL_HEIGHT = 60; // Half of width for 2:1 isometric
+
+// Convert grid coordinates to isometric screen coordinates
+// Using standard isometric projection where x goes right-down, y goes right-up
+function gridToScreen(col: number, row: number): { x: number; y: number } {
+  return {
+    x: (col - row) * (CELL_WIDTH / 2),
+    y: (col + row) * (CELL_HEIGHT / 2),
+  };
+}
+
+// Grid layout (10 columns x 8 rows)
+// Energy flow: Solar/Wind (left) → Substations (center) → Transmission → City (right)
+const GRID = {
+  cols: 10,
+  rows: 8,
+};
+
+// Infrastructure positions - precisely on grid intersections
+const INFRASTRUCTURE = {
+  // Solar panels (two groups)
+  solar: [
+    // Group 1 - bottom-left
+    { col: 0, row: 5 },
+    { col: 1, row: 5 },
+    { col: 0, row: 6 },
+    { col: 1, row: 6 },
+    // Group 2 - middle-bottom
+    { col: 2, row: 7 },
+    { col: 3, row: 7 },
+    { col: 2, row: 8 },
+    { col: 3, row: 8 },
+  ],
+  // Wind turbines (two groups)
+  wind: [
+    // Group 1 - top-left
+    { col: 0, row: 1 },
+    { col: 1, row: 2 },
+    { col: 2, row: 1 },
+    // Group 2 - top-center
+    { col: 3, row: 0 },
+    { col: 4, row: 1 },
+    { col: 5, row: 0 },
+  ],
+  // Substations
+  substations: [
+    { col: 3, row: 3, type: 'collection' }, // Main collection substation
+    { col: 6, row: 4, type: 'distribution' }, // Distribution substation (right)
+    { col: 5, row: 7, type: 'distribution' }, // Distribution substation (bottom-left)
+  ],
+  // Transmission towers (along the routes)
+  towers: [
+    { col: 4, row: 3 },
+    { col: 5, row: 4 },
+    { col: 4, row: 5 },
+    { col: 5, row: 6 },
+  ],
+  // City/Buildings (right side)
+  city: [
+    { col: 8, row: 3, type: 'tall' },
+    { col: 9, row: 4, type: 'medium' },
+    { col: 8, row: 5, type: 'small' },
+    { col: 9, row: 5, type: 'medium' },
+  ],
+  // City 2 (bottom-left area)
+  city2: [
+    { col: 6, row: 8, type: 'medium' },
+    { col: 7, row: 7, type: 'tall' },
+    { col: 7, row: 8, type: 'small' },
+  ],
+  // Trees (decorative, scattered around)
+  trees: [
+    { col: 0, row: 3 },
+    { col: 2, row: 6 },
+    { col: 3, row: 1 },
+    { col: 6, row: 2 },
+    { col: 6, row: 6 },
+  ],
+};
+
+// Power line connections - grid-aligned paths only (no diagonals)
+// Each group meets at a collection point, then flows to main substation
+const POWER_LINES = [
+  // === WIND GROUP 1 (top-left) - meet at (1,1) then to substation ===
+  // Turbine at (0,1) → collection point (1,1)
+  { from: { col: 0, row: 1 }, to: { col: 1, row: 1 } },
+  // Turbine at (1,2) → up to (1,1)
+  { from: { col: 1, row: 2 }, to: { col: 1, row: 1 } },
+  // Turbine at (2,1) → left to (1,1)
+  { from: { col: 2, row: 1 }, to: { col: 1, row: 1 } },
+  // Collection point (1,1) → down to (1,3) → right to substation (3,3)
+  { from: { col: 1, row: 1 }, to: { col: 1, row: 3 } },
+  { from: { col: 1, row: 3 }, to: { col: 3, row: 3 } },
+
+  // === WIND GROUP 2 (top-center) - meet at (4,1) then to substation ===
+  // Turbine at (3,0) → right to (4,0) → down to (4,1)
+  { from: { col: 3, row: 0 }, to: { col: 4, row: 0 } },
+  { from: { col: 4, row: 0 }, to: { col: 4, row: 1 } },
+  // Turbine at (4,1) is the collection point
+  // Turbine at (5,0) → down to (5,1) → left to (4,1)
+  { from: { col: 5, row: 0 }, to: { col: 5, row: 1 } },
+  { from: { col: 5, row: 1 }, to: { col: 4, row: 1 } },
+  // Collection point (4,1) → down to (4,3) → left to substation (3,3)
+  { from: { col: 4, row: 1 }, to: { col: 4, row: 3 } },
+  { from: { col: 4, row: 3 }, to: { col: 3, row: 3 } },
+
+  // === SOLAR GROUP 1 (bottom-left) - meet at (1,5) then to substation ===
+  // Panels at (0,5), (1,5), (0,6), (1,6) → collection at (1,5)
+  { from: { col: 0, row: 5 }, to: { col: 1, row: 5 } },
+  { from: { col: 0, row: 6 }, to: { col: 0, row: 5 } },
+  { from: { col: 1, row: 6 }, to: { col: 1, row: 5 } },
+  // Collection point (1,5) → up to (1,3) → right to substation (3,3)
+  { from: { col: 1, row: 5 }, to: { col: 1, row: 3 } },
+
+  // === SOLAR GROUP 2 (middle-bottom) - meet at (3,7) then to substation ===
+  // Panels at (2,7), (3,7), (2,8), (3,8) → collection at (3,7)
+  { from: { col: 2, row: 7 }, to: { col: 3, row: 7 } },
+  { from: { col: 2, row: 8 }, to: { col: 2, row: 7 } },
+  { from: { col: 3, row: 8 }, to: { col: 3, row: 7 } },
+  // Collection point (3,7) → up to (3,3) substation
+  { from: { col: 3, row: 7 }, to: { col: 3, row: 5 } },
+  { from: { col: 3, row: 5 }, to: { col: 3, row: 3 } },
+
+  // === MAIN TRANSMISSION: Substation (3,3) → Towers → Distribution → City ===
+  // Substation to first tower
+  { from: { col: 3, row: 3 }, to: { col: 4, row: 3 } },
+  // First tower to second tower (grid-aligned)
+  { from: { col: 4, row: 3 }, to: { col: 5, row: 3 } },
+  { from: { col: 5, row: 3 }, to: { col: 5, row: 4 } },
+  // Second tower to distribution substation (right)
+  { from: { col: 5, row: 4 }, to: { col: 6, row: 4 } },
+  // Distribution to city 1 (grid-aligned)
+  { from: { col: 6, row: 4 }, to: { col: 7, row: 4 } },
+  { from: { col: 7, row: 4 }, to: { col: 8, row: 4 } },
+  // Branch to buildings (city 1)
+  { from: { col: 8, row: 4 }, to: { col: 8, row: 3 } },
+  { from: { col: 8, row: 4 }, to: { col: 8, row: 5 } },
+  { from: { col: 8, row: 3 }, to: { col: 9, row: 3 } },
+  { from: { col: 9, row: 3 }, to: { col: 9, row: 4 } },
+  { from: { col: 8, row: 5 }, to: { col: 9, row: 5 } },
+
+  // === SECOND ROUTE: Substation (3,3) → Towers → Distribution (5,7) → City 2 ===
+  // Branch from main substation down
+  { from: { col: 3, row: 3 }, to: { col: 3, row: 5 } },
+  { from: { col: 3, row: 5 }, to: { col: 4, row: 5 } },
+  // Tower at (4,5) to tower at (5,6)
+  { from: { col: 4, row: 5 }, to: { col: 5, row: 5 } },
+  { from: { col: 5, row: 5 }, to: { col: 5, row: 6 } },
+  // Tower to distribution substation (bottom-left)
+  { from: { col: 5, row: 6 }, to: { col: 5, row: 7 } },
+  // Distribution to city 2
+  { from: { col: 5, row: 7 }, to: { col: 6, row: 7 } },
+  { from: { col: 6, row: 7 }, to: { col: 6, row: 8 } },
+  { from: { col: 6, row: 7 }, to: { col: 7, row: 7 } },
+  { from: { col: 7, row: 7 }, to: { col: 7, row: 8 } },
+];
+
+export default function HeroIllustration() {
+  return (
+    <div className="absolute inset-0 z-0 overflow-hidden bg-primary">
+      <svg
+        viewBox="-400 -200 1800 1100"
+        className="w-full h-full opacity-40 md:opacity-100 scale-150 md:scale-100 translate-x-1/4 md:translate-x-0"
+        preserveAspectRatio="xMidYMid slice"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          {/* Electric energy flow gradient */}
+          <linearGradient id="energy-pulse" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#82ed20" stopOpacity="0" />
+            <stop offset="30%" stopColor="#82ed20" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#9bf14d" stopOpacity="1" />
+            <stop offset="70%" stopColor="#82ed20" stopOpacity="0.6" />
+            <stop offset="100%" stopColor="#82ed20" stopOpacity="0" />
+          </linearGradient>
+
+          {/* Wind flow gradient */}
+          <linearGradient id="wind-flow" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="white" stopOpacity="0" />
+            <stop offset="30%" stopColor="white" stopOpacity="0.4" />
+            <stop offset="50%" stopColor="white" stopOpacity="0.6" />
+            <stop offset="70%" stopColor="white" stopOpacity="0.4" />
+            <stop offset="100%" stopColor="white" stopOpacity="0" />
+          </linearGradient>
+
+          {/* Sun ray gradient */}
+          <linearGradient id="sun-ray" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#FFD700" stopOpacity="0.6" />
+            <stop offset="50%" stopColor="#FFD700" stopOpacity="0.3" />
+            <stop offset="100%" stopColor="#82ed20" stopOpacity="0.1" />
+          </linearGradient>
+
+          {/* Glow filter */}
+          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="3" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+
+          {/* Soft glow for nodes */}
+          <filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
+            <feGaussianBlur stdDeviation="2" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+
+          {/* Sun glow filter */}
+          <filter id="sun-glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="4" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+
+        {/* Main scene container - positioned to the right */}
+        <g transform="translate(900, 100)">
+          
+          {/* === ISOMETRIC GRID === */}
+          <g opacity="0.15">
+            {/* Horizontal grid lines (going from top-left to bottom-right) */}
+            {[...Array(GRID.rows + 1)].map((_, row) => {
+              const start = gridToScreen(0, row);
+              const end = gridToScreen(GRID.cols, row);
+              return (
+                <line
+                  key={`h-${row}`}
+                  x1={start.x}
+                  y1={start.y}
+                  x2={end.x}
+                  y2={end.y}
+                  stroke="white"
+                  strokeWidth="1"
+                />
+              );
+            })}
+            {/* Vertical grid lines (going from top-right to bottom-left) */}
+            {[...Array(GRID.cols + 1)].map((_, col) => {
+              const start = gridToScreen(col, 0);
+              const end = gridToScreen(col, GRID.rows);
+              return (
+                <line
+                  key={`v-${col}`}
+                  x1={start.x}
+                  y1={start.y}
+                  x2={end.x}
+                  y2={end.y}
+                  stroke="white"
+                  strokeWidth="1"
+                />
+              );
+            })}
+          </g>
+
+          {/* Grid intersection nodes */}
+          <g opacity="0.2">
+            {[...Array(GRID.cols + 1)].map((_, col) =>
+              [...Array(GRID.rows + 1)].map((_, row) => {
+                const pos = gridToScreen(col, row);
+                return (
+                  <circle
+                    key={`node-${col}-${row}`}
+                    cx={pos.x}
+                    cy={pos.y}
+                    r="2"
+                    fill="white"
+                  />
+                );
+              })
+            )}
+          </g>
+
+          {/* === POWER LINES (Base cables) === */}
+          <g stroke="white" strokeWidth="2" strokeOpacity="0.25">
+            {POWER_LINES.map((line, i) => {
+              const from = gridToScreen(line.from.col, line.from.row);
+              const to = gridToScreen(line.to.col, line.to.row);
+              return (
+                <line
+                  key={`cable-${i}`}
+                  x1={from.x}
+                  y1={from.y}
+                  x2={to.x}
+                  y2={to.y}
+                />
+              );
+            })}
+          </g>
+
+          {/* === ANIMATED ENERGY FLOW === */}
+          <g filter="url(#glow)">
+            {POWER_LINES.map((line, i) => {
+              const from = gridToScreen(line.from.col, line.from.row);
+              const to = gridToScreen(line.to.col, line.to.row);
+              const length = Math.sqrt(
+                Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2)
+              );
+              return (
+                <line
+                  key={`flow-${i}`}
+                  x1={from.x}
+                  y1={from.y}
+                  x2={to.x}
+                  y2={to.y}
+                  stroke="url(#energy-pulse)"
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                  strokeDasharray={`${length * 0.2} ${length * 0.8}`}
+                >
+                  <animate
+                    attributeName="stroke-dashoffset"
+                    from={length}
+                    to={0}
+                    dur={`${1.5 + (i % 3) * 0.5}s`}
+                    repeatCount="indefinite"
+                  />
+                </line>
+              );
+            })}
+          </g>
+
+          {/* === SOLAR PANELS === */}
+          {INFRASTRUCTURE.solar.map((panel, i) => {
+            const pos = gridToScreen(panel.col, panel.row);
+            return (
+              <g key={`solar-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Panel base */}
+                <path
+                  d="M -20 0 L 0 -10 L 20 0 L 0 10 Z"
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.4"
+                />
+                {/* Panel surface (tilted) */}
+                <path
+                  d="M -15 -5 L 0 -15 L 15 -5 L 0 5 Z"
+                  fill="white"
+                  fillOpacity="0.15"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.5"
+                />
+                {/* Panel grid lines */}
+                <line x1="-7" y1="-10" x2="7" y2="0" stroke="white" strokeWidth="0.5" strokeOpacity="0.3" />
+                <line x1="0" y1="-15" x2="0" y2="5" stroke="white" strokeWidth="0.5" strokeOpacity="0.3" />
+                {/* Connection glow */}
+                <circle r="4" fill="#82ed20" fillOpacity="0.4" filter="url(#soft-glow)">
+                  <animate attributeName="fillOpacity" values="0.3;0.6;0.3" dur="2s" repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === WIND TURBINES === */}
+          {INFRASTRUCTURE.wind.map((turbine, i) => {
+            const pos = gridToScreen(turbine.col, turbine.row);
+            return (
+              <g key={`wind-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Base */}
+                <ellipse cx="0" cy="0" rx="10" ry="5" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
+                {/* Tower */}
+                <line x1="0" y1="0" x2="0" y2="-60" stroke="white" strokeWidth="2" strokeOpacity="0.5" />
+                {/* Nacelle */}
+                <ellipse cx="0" cy="-60" rx="6" ry="3" fill="white" fillOpacity="0.3" stroke="white" strokeWidth="1" />
+                {/* Blades */}
+                <g transform="translate(0, -60)">
+                  {[0, 120, 240].map((angle, j) => (
+                    <line
+                      key={`blade-${i}-${j}`}
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="-30"
+                      stroke="white"
+                      strokeWidth="1.5"
+                      strokeOpacity="0.6"
+                      transform={`rotate(${angle})`}
+                    >
+                      <animateTransform
+                        attributeName="transform"
+                        type="rotate"
+                        from={`${angle} 0 0`}
+                        to={`${angle + 360} 0 0`}
+                        dur={`${3 + i}s`}
+                        repeatCount="indefinite"
+                      />
+                    </line>
+                  ))}
+                  <circle r="3" fill="white" fillOpacity="0.4" />
+                </g>
+                {/* Connection glow */}
+                <circle r="5" fill="#82ed20" fillOpacity="0.4" filter="url(#soft-glow)">
+                  <animate attributeName="fillOpacity" values="0.3;0.6;0.3" dur="2.5s" repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === SUBSTATIONS === */}
+          {INFRASTRUCTURE.substations.map((sub, i) => {
+            const pos = gridToScreen(sub.col, sub.row);
+            const isCollection = sub.type === 'collection';
+            return (
+              <g key={`substation-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Base platform */}
+                <path
+                  d="M -25 0 L 0 -12 L 25 0 L 0 12 Z"
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.4"
+                />
+                {/* Building */}
+                <path
+                  d={isCollection 
+                    ? "M -18 0 L -18 -20 L 0 -32 L 18 -20 L 18 0"
+                    : "M -22 0 L -22 -25 L 0 -37 L 22 -25 L 22 0"
+                  }
+                  fill="white"
+                  fillOpacity="0.08"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.5"
+                />
+                {/* Equipment */}
+                <rect x="-10" y="-12" width="6" height="8" fill="white" fillOpacity="0.2" stroke="white" strokeWidth="0.5" />
+                <rect x="4" y="-12" width="6" height="8" fill="white" fillOpacity="0.2" stroke="white" strokeWidth="0.5" />
+                {/* Insulators */}
+                <line x1="-7" y1="-12" x2="-7" y2="-22" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
+                <line x1="7" y1="-12" x2="7" y2="-22" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
+                <circle cx="-7" cy="-22" r="2" fill="white" fillOpacity="0.4" />
+                <circle cx="7" cy="-22" r="2" fill="white" fillOpacity="0.4" />
+                {/* Connection glow */}
+                <circle r="8" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
+                  <animate attributeName="r" values="6;10;6" dur="3s" repeatCount="indefinite" />
+                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === TRANSMISSION TOWERS === */}
+          {INFRASTRUCTURE.towers.map((tower, i) => {
+            const pos = gridToScreen(tower.col, tower.row);
+            return (
+              <g key={`tower-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Base */}
+                <ellipse cx="0" cy="0" rx="8" ry="4" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
+                {/* Tower legs */}
+                <path d="M -6 0 L -3 -45 M 6 0 L 3 -45" stroke="white" strokeWidth="1.5" strokeOpacity="0.5" />
+                {/* Cross braces */}
+                <path d="M -5 -10 L 5 -10 M -4 -20 L 4 -20 M -3 -30 L 3 -30 M -3 -45 L 3 -45" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
+                {/* Cross arms */}
+                <line x1="-12" y1="-40" x2="12" y2="-40" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
+                <line x1="-10" y1="-32" x2="10" y2="-32" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
+                {/* Insulators */}
+                <circle cx="-10" cy="-40" r="1.5" fill="white" fillOpacity="0.4" />
+                <circle cx="10" cy="-40" r="1.5" fill="white" fillOpacity="0.4" />
+                {/* Connection glow */}
+                <circle r="5" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
+                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === CITY BUILDINGS === */}
+          {INFRASTRUCTURE.city.map((building, i) => {
+            const pos = gridToScreen(building.col, building.row);
+            const heights = { tall: 70, medium: 45, small: 30 };
+            const height = heights[building.type as keyof typeof heights];
+            return (
+              <g key={`building-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Base */}
+                <path
+                  d="M -12 0 L 0 -6 L 12 0 L 0 6 Z"
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.3"
+                />
+                {/* Building front */}
+                <path
+                  d={`M -12 0 L -12 -${height} L 0 -${height + 6} L 0 -6 Z`}
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.4"
+                />
+                {/* Building side */}
+                <path
+                  d={`M 0 -6 L 0 -${height + 6} L 12 -${height} L 12 0 Z`}
+                  fill="white"
+                  fillOpacity="0.05"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.3"
+                />
+                {/* Windows */}
+                {[...Array(Math.floor(height / 15))].map((_, w) => (
+                  <g key={`window-${i}-${w}`}>
+                    <rect x="-9" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
+                    <rect x="-4" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
+                    <rect x="3" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
+                    <rect x="7" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
+                  </g>
+                ))}
+                {/* Connection glow */}
+                <circle r="4" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
+                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur={`${2 + i * 0.3}s`} repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === CITY 2 BUILDINGS (bottom-left) === */}
+          {INFRASTRUCTURE.city2.map((building, i) => {
+            const pos = gridToScreen(building.col, building.row);
+            const heights = { tall: 70, medium: 45, small: 30 };
+            const height = heights[building.type as keyof typeof heights];
+            return (
+              <g key={`building2-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Base */}
+                <path
+                  d="M -12 0 L 0 -6 L 12 0 L 0 6 Z"
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.3"
+                />
+                {/* Building front */}
+                <path
+                  d={`M -12 0 L -12 -${height} L 0 -${height + 6} L 0 -6 Z`}
+                  fill="white"
+                  fillOpacity="0.1"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.4"
+                />
+                {/* Building side */}
+                <path
+                  d={`M 0 -6 L 0 -${height + 6} L 12 -${height} L 12 0 Z`}
+                  fill="white"
+                  fillOpacity="0.05"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.3"
+                />
+                {/* Windows */}
+                {[...Array(Math.floor(height / 15))].map((_, w) => (
+                  <g key={`window2-${i}-${w}`}>
+                    <rect x="-9" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
+                    <rect x="-4" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
+                    <rect x="3" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
+                    <rect x="7" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
+                  </g>
+                ))}
+                {/* Connection glow */}
+                <circle r="4" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
+                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur={`${2.5 + i * 0.3}s`} repeatCount="indefinite" />
+                </circle>
+              </g>
+            );
+          })}
+
+          {/* === TREES === */}
+          {INFRASTRUCTURE.trees.map((tree, i) => {
+            const pos = gridToScreen(tree.col, tree.row);
+            return (
+              <g key={`tree-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Trunk */}
+                <line x1="0" y1="0" x2="0" y2="-15" stroke="white" strokeWidth="2" strokeOpacity="0.3" />
+                {/* Foliage - layered circles for tree crown */}
+                <ellipse cx="0" cy="-22" rx="10" ry="8" fill="white" fillOpacity="0.12" stroke="white" strokeWidth="0.5" strokeOpacity="0.2" />
+                <ellipse cx="-5" cy="-26" rx="7" ry="6" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="0.5" strokeOpacity="0.15" />
+                <ellipse cx="5" cy="-26" rx="7" ry="6" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="0.5" strokeOpacity="0.15" />
+                <ellipse cx="0" cy="-30" rx="6" ry="5" fill="white" fillOpacity="0.08" stroke="white" strokeWidth="0.5" strokeOpacity="0.1" />
+              </g>
+            );
+          })}
+
+          {/* === ABSTRACT WIND EFFECTS === */}
+          {INFRASTRUCTURE.wind.map((turbine, i) => {
+            const pos = gridToScreen(turbine.col, turbine.row);
+            return (
+              <g key={`wind-effect-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Wind swoosh lines - curved paths flowing toward turbine */}
+                {[0, 1, 2].map((j) => (
+                  <path
+                    key={`wind-line-${i}-${j}`}
+                    d={`M ${-80 - j * 15} ${-70 - j * 8} Q ${-50 - j * 10} ${-65 - j * 5} ${-20} ${-60}`}
+                    stroke="url(#wind-flow)"
+                    strokeWidth="2"
+                    fill="none"
+                    strokeLinecap="round"
+                    opacity="0"
+                  >
+                    <animate
+                      attributeName="opacity"
+                      values="0;0.6;0"
+                      dur={`${2 + j * 0.5}s`}
+                      begin={`${j * 0.7 + i * 0.3}s`}
+                      repeatCount="indefinite"
+                    />
+                    <animate
+                      attributeName="stroke-dashoffset"
+                      from="100"
+                      to="0"
+                      dur={`${2 + j * 0.5}s`}
+                      begin={`${j * 0.7 + i * 0.3}s`}
+                      repeatCount="indefinite"
+                    />
+                  </path>
+                ))}
+                {/* Additional wind particles */}
+                {[0, 1, 2, 3].map((j) => (
+                  <circle
+                    key={`wind-particle-${i}-${j}`}
+                    r="1.5"
+                    fill="white"
+                    opacity="0"
+                  >
+                    <animate
+                      attributeName="cx"
+                      values={`${-70 - j * 10};${-10}`}
+                      dur={`${1.5 + j * 0.3}s`}
+                      begin={`${j * 0.4 + i * 0.2}s`}
+                      repeatCount="indefinite"
+                    />
+                    <animate
+                      attributeName="cy"
+                      values={`${-75 - j * 5};${-60}`}
+                      dur={`${1.5 + j * 0.3}s`}
+                      begin={`${j * 0.4 + i * 0.2}s`}
+                      repeatCount="indefinite"
+                    />
+                    <animate
+                      attributeName="opacity"
+                      values="0;0.5;0"
+                      dur={`${1.5 + j * 0.3}s`}
+                      begin={`${j * 0.4 + i * 0.2}s`}
+                      repeatCount="indefinite"
+                    />
+                  </circle>
+                ))}
+              </g>
+            );
+          })}
+
+          {/* === SCHEMATIC SUN RAYS === */}
+          {/* Simple downward rays above each solar panel */}
+          {INFRASTRUCTURE.solar.map((panel, i) => {
+            const pos = gridToScreen(panel.col, panel.row);
+            return (
+              <g key={`sun-ray-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
+                {/* Three short schematic rays coming down to panel */}
+                {[-8, 0, 8].map((offset, j) => (
+                  <line
+                    key={`ray-${i}-${j}`}
+                    x1={offset}
+                    y1={-45}
+                    x2={offset * 0.3}
+                    y2={-18}
+                    stroke="#FFD700"
+                    strokeWidth="1.5"
+                    strokeOpacity="0.4"
+                    strokeLinecap="round"
+                    strokeDasharray="4 6"
+                  >
+                    <animate
+                      attributeName="strokeOpacity"
+                      values="0.2;0.5;0.2"
+                      dur={`${2 + j * 0.3}s`}
+                      begin={`${i * 0.2}s`}
+                      repeatCount="indefinite"
+                    />
+                    <animate
+                      attributeName="stroke-dashoffset"
+                      from="10"
+                      to="0"
+                      dur="1.5s"
+                      repeatCount="indefinite"
+                    />
+                  </line>
+                ))}
+              </g>
+            );
+          })}
+
+          {/* === ENERGY PARTICLES === */}
+          {POWER_LINES.map((line, i) => {
+            const from = gridToScreen(line.from.col, line.from.row);
+            const to = gridToScreen(line.to.col, line.to.row);
+            return (
+              <circle
+                key={`particle-${i}`}
+                r="3"
+                fill="#82ed20"
+                filter="url(#soft-glow)"
+              >
+                <animate
+                  attributeName="cx"
+                  values={`${from.x};${to.x}`}
+                  dur={`${1 + (i % 4) * 0.3}s`}
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="cy"
+                  values={`${from.y};${to.y}`}
+                  dur={`${1 + (i % 4) * 0.3}s`}
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="opacity"
+                  values="0;0.8;0"
+                  dur={`${1 + (i % 4) * 0.3}s`}
+                  repeatCount="indefinite"
+                />
+              </circle>
+            );
+          })}
+
+        </g>
+      </svg>
+      <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-primary/90" />
+    </div>
+  );
+}

components/home/MeetTheTeam.tsx

@@ -1,43 +1,59 @@
 import React from 'react';
-import Link from 'next/link';
 import Image from 'next/image';
-import { Section, Container, Button } from '../../components/ui';
+import { useTranslations, useLocale } from 'next-intl';
+import { Section, Container, Button, Heading } 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">
+    <Section className="relative py-32 md:py-48 overflow-hidden">
       <div className="absolute inset-0 z-0">
         <Image 
-          src="/uploads/2024/12/DSC07655-Large.webp" 
+          src="/uploads/2024/12/DSC08036-Large.webp" 
           alt="KLZ Team" 
           fill
-          className="object-cover"
+          className="object-cover scale-105 animate-slow-zoom"
           unoptimized
         />
-        <div className="absolute inset-0 bg-gradient-to-r from-neutral-dark/90 to-neutral-dark/40" />
+        <div className="absolute inset-0 bg-primary-dark/70 mix-blend-multiply" />
+        <div className="absolute inset-0 bg-gradient-to-t from-primary-dark via-primary-dark/20 to-transparent" />
       </div>
       
       <Container className="relative z-10">
-        <div className="max-w-2xl text-white">
-          <div className="flex items-center gap-4 mb-6">
-            <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-white/20">
-               {/* Placeholder for avatar if needed, or just icon */}
-               <div className="w-full h-full bg-primary flex items-center justify-center">
-                 <span className="font-bold">KLZ</span>
-               </div>
-            </div>
-            <h2 className="text-3xl font-bold">Meet the team behind KLZ</h2>
-          </div>
+        <div className="max-w-3xl text-white animate-slide-up">
+          <Heading level={2} subtitle="The People Behind KLZ" className="text-white mb-8">
+            <span className="text-white">{t('title')}</span>
+          </Heading>
           
-          <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.
+          <div className="relative mb-12">
+            <div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" />
+            <p className="text-2xl md:text-3xl leading-relaxed font-medium italic text-white/90 pl-8">
+              "{t('description')}"
             </p>
           </div>
           
-          <Button href="/team" variant="primary" size="lg">
-            Checkout our team
-          </Button>
+          <div className="flex flex-wrap gap-8 items-center">
+            <Button href={`/${locale}/team`} variant="accent" size="xl" className="group">
+              {t('cta')}
+              <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
+            </Button>
+            
+            <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" />
+                </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" />
+                </div>
+              </div>
+              <span className="text-white/60 font-bold text-sm uppercase tracking-widest">
+                {t('andNetwork')}
+              </span>
+            </div>
+          </div>
         </div>
       </Container>
     </Section>

components/home/ProductCategories.tsx

@@ -1,59 +1,71 @@
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { Section } from '../../components/ui';
+import { useTranslations, useLocale } from 'next-intl';
+import { Section, Heading } 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/11/low-voltage-category.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/11/medium-voltage-category.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/2024/11/high-voltage-category.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/2024/11/solar-category.webp',
+      icon: '/uploads/2024/11/Solar.svg',
+      href: `/${locale}/products/solar-cables`
+    }
+  ];
+
   return (
-    <Section className="bg-white py-0">
+    <Section className="bg-neutral-light py-0 -mt-px">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
-        {[
-          { 
-            title: 'Low Voltage Cables', 
-            desc: 'Powering everyday essentials with reliability and safety.',
-            img: '/uploads/2024/12/low-voltage-scaled.webp',
-            icon: '/uploads/2024/11/Low-Voltage.svg',
-            href: '/products/low-voltage-cables'
-          },
-          { 
-            title: 'Medium Voltage Cables', 
-            desc: 'The perfect balance between power and performance for industrial and urban grids.',
-            img: '/uploads/2024/12/medium-voltage-scaled.webp',
-            icon: '/uploads/2024/11/Medium-Voltage.svg',
-            href: '/products/medium-voltage-cables'
-          },
-          { 
-            title: 'High Voltage Cables', 
-            desc: 'Delivering maximum power over long distances—without compromise.',
-            img: '/uploads/2025/06/na2xsfl2y-rendered.webp',
-            icon: '/uploads/2024/11/High-Voltage.svg',
-            href: '/products/high-voltage-cables'
-          },
-          { 
-            title: 'Solar Cables', 
-            desc: 'Connecting the sun’s energy to your sustainable future.',
-            img: '/uploads/2025/04/3.webp',
-            icon: '/uploads/2024/11/Solar.svg',
-            href: '/products/solar-cables'
-          }
-        ].map((category, idx) => (
-          <Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] overflow-hidden">
+        {categories.map((category, idx) => (
+          <Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0">
             <Image 
               src={category.img} 
               alt={category.title}
               fill
-              className="object-cover transition-transform duration-700 group-hover:scale-110"
+              className="object-cover transition-transform duration-1000 group-hover:scale-110"
+              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
               unoptimized
             />
-            <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors" />
-            <div className="absolute inset-0 p-8 flex flex-col justify-center items-center text-center text-white">
-              <div className="mb-4 transform transition-transform group-hover:-translate-y-2">
-                <img src={category.icon} alt="" className="w-16 h-16 mx-auto" />
+            <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-primary-dark/60 transition-all duration-500" />
+            <div className="absolute inset-0 p-8 md:p-10 flex flex-col justify-end text-white">
+              <div className="mb-4 md:mb-6 transform transition-all duration-500 group-hover:-translate-y-4">
+                <div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center mb-4 md:mb-6 border border-white/20">
+                  <img src={category.icon} alt="" className="w-8 h-8 md:w-10 md:h-10 brightness-0 invert" />
+                </div>
+                <h3 className="text-2xl md:text-3xl font-bold mb-2 md:mb-4 leading-tight">{category.title}</h3>
+                <p className="text-white/80 text-base md:text-lg line-clamp-3 opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 max-h-24 md:max-h-0 group-hover:max-h-32">
+                  {category.desc}
+                </p>
+              </div>
+              <div className="flex items-center text-accent font-bold tracking-wider uppercase text-xs md:text-sm opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
+                {t('exploreCategory')} <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
               </div>
-              <h3 className="text-2xl font-bold mb-2 transform transition-transform group-hover:-translate-y-2">{category.title}</h3>
-              <p className="text-white/90 opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
-                {category.desc}
-              </p>
             </div>
           </Link>
         ))}

components/home/RecentPosts.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import Link from 'next/link';
+import { getAllPosts } from '@/lib/blog';
+import { getTranslations } from 'next-intl/server';
+import { Section, Container, Heading, Card, Badge } from '../../components/ui';
+
+interface RecentPostsProps {
+  locale: string;
+}
+
+export default async function RecentPosts({ locale }: RecentPostsProps) {
+  const posts = await getAllPosts(locale);
+  const recentPosts = posts.slice(0, 3);
+
+  if (recentPosts.length === 0) return null;
+
+  return (
+    <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>
+          <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'} 
+            <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
+          </Link>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10">
+          {recentPosts.map((post) => (
+            <Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block">
+              <Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl">
+                {post.frontmatter.featuredImage && (
+                  <div className="relative h-64 overflow-hidden">
+                    <img 
+                      src={post.frontmatter.featuredImage} 
+                      alt={post.frontmatter.title}
+                      className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                    />
+                    <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                    {post.frontmatter.category && (
+                      <Badge variant="accent" className="absolute top-4 left-4 shadow-md">
+                        {post.frontmatter.category}
+                      </Badge>
+                    )}
+                  </div>
+                )}
+                <div className="p-6 md:p-8 flex flex-col flex-grow">
+                  <div className="text-xs md:text-sm font-medium text-text-light mb-3 md:mb-4 flex items-center gap-2">
+                    <span className="w-6 md:w-8 h-px bg-neutral-medium" />
+                    {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric'
+                    })}
+                  </div>
+                  <h3 className="text-xl md:text-2xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
+                    {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'}
+                    <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>
+                  </div>
+                </div>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      </Container>
+    </Section>
+  );
+}

components/home/VideoSection.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import Scribble from '@/components/Scribble';
+import { Section } from '../../components/ui';
 
 export default function VideoSection() {
+  const t = useTranslations('Home.video');
+
   return (
-    <section className="relative h-[60vh] overflow-hidden">
+    <section className="relative h-[70vh] overflow-hidden bg-primary-dark">
       <video 
-        className="w-full h-full object-cover"
+        className="w-full h-full object-cover opacity-60"
         autoPlay 
         muted 
         loop 
@@ -13,15 +17,24 @@ export default function VideoSection() {
       >
         <source src="/uploads/2024/12/making-of-metal-cable-on-factory-2023-11-27-04-55-16-utc-2.webm" type="video/mp4" />
       </video>
-      <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
-        <h2 className="text-3xl md:text-5xl font-bold text-white text-center max-w-4xl px-4 leading-tight">
-          From a single strand to infinite power – the 
-          <span className="relative inline-block mx-2">
-            <span className="relative z-10 italic">future</span>
-            <Scribble variant="underline" className="w-full h-full top-full left-0" />
-          </span>
-          starts here.
-        </h2>
+      <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/60 via-transparent to-primary-dark/60 flex items-center justify-center">
+        <div className="max-w-5xl px-6 text-center animate-slide-up">
+          <h2 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white leading-[1.1]">
+            {t.rich('title', {
+              future: (chunks) => (
+                <span className="relative inline-block mx-2">
+                  <span className="relative z-10 italic text-accent">{chunks}</span>
+                  <Scribble variant="underline" className="w-full h-4 -bottom-2 left-0 text-accent/40" />
+                </span>
+              )
+            })}
+          </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

@@ -1,46 +1,40 @@
 import React from 'react';
-import { Section, Container } from '../../components/ui';
+import { useTranslations } from 'next-intl';
+import { Section, Container, Heading } 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>
-              <p className="text-xl text-text-secondary">
-                We ensure that the electricity flows – with quality-tested cables. From low voltage up to high voltage.
+        <div className="sticky-narrative-container">
+          <div className="sticky-narrative-sidebar">
+            <div className="lg:sticky lg:top-32">
+              <Heading level={2} subtitle="Our Expertise">
+                {t('title')}
+              </Heading>
+              <p className="text-lg md:text-xl text-text-secondary leading-relaxed">
+                {t('subtitle')}
               </p>
+              <div className="mt-8 md:mt-12 p-6 md:p-8 bg-primary-light rounded-2xl border border-primary/10">
+                <p className="text-primary font-bold text-base md:text-lg italic">
+                  "{t('quote')}"
+                </p>
+              </div>
             </div>
           </div>
-          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
-            {[
-              {
-                num: '01',
-                title: 'Supply to energy suppliers, wind and solar parks, industry and trade',
-                desc: 'We support your projects from 1 to 220 kV, from simple NYY to high-voltage cables with segment conductors and aluminum sheaths, with a particular focus on medium-voltage cables.'
-              },
-              {
-                num: '02',
-                title: 'Supply of cables whose quality is certified',
-                desc: 'Cables are products that have to function 100%. For decades, often 80 to 100 years. Our cables are not only approved by VDE. The most well-known energy suppliers trust us.'
-              },
-              {
-                num: '03',
-                title: 'We deliver on time because we know the consequences for you',
-                desc: 'Wind farm North Germany, coordinates XYZ, delivery Wednesday 2-4 p.m., no unloading option. Yes, we know that. We organize the logistics with a back office team that has up to 20 years of cable experience.'
-              },
-              {
-                num: '04',
-                title: 'The cable alone is not the solution',
-                desc: 'Stony ground? Perhaps a thicker outer sheath would be better? Damp ground? Can there be transverse watertight protection? We think for you and ask questions.'
-              }
-            ].map((item, idx) => (
-              <div key={idx} className="space-y-4">
-                <span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">{item.num}</span>
-                <h3 className="text-2xl font-bold">{item.title}</h3>
-                <p className="text-text-secondary leading-relaxed">{item.desc}</p>
+          <div className="sticky-narrative-content grid grid-cols-1 md:grid-cols-2 gap-x-8 md:gap-x-12 gap-y-12 md:gap-y-20">
+            {[0, 1, 2, 3].map((idx) => (
+              <div key={idx} className="group">
+                <div className="flex items-center gap-4 mb-4 md:mb-6">
+                  <span className="flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full bg-primary text-white font-bold text-base md:text-lg shadow-lg shadow-primary/20 group-hover:scale-110 transition-transform">
+                    {idx + 1}
+                  </span>
+                  <div className="h-px flex-grow bg-neutral-medium" />
+                </div>
+                <h3 className="text-xl md:text-2xl font-bold mb-3 md:mb-4 text-primary group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
+                <p className="text-text-secondary text-base md:text-lg leading-relaxed">{t(`items.${idx}.description`)}</p>
               </div>
             ))}
           </div>

components/home/WhyChooseUs.tsx

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

components/products/ProductsIllustration.tsx

@@ -0,0 +1,100 @@
+'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>
+  );
+}

components/ui.tsx

@@ -8,27 +8,30 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
+  variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'white';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
   href?: string;
   className?: string;
   children?: React.ReactNode;
 }
 
 export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
-  const baseStyles = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
+  const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95';
   
   const variants = {
-    primary: 'bg-primary text-white hover:bg-primary-dark',
-    secondary: 'bg-secondary text-white hover:bg-secondary-light',
-    outline: 'border border-neutral-dark bg-transparent hover:bg-neutral-light text-text-primary',
-    ghost: 'hover:bg-neutral-light text-text-primary',
+    primary: 'bg-primary text-white hover:bg-primary-dark shadow-md hover:shadow-lg',
+    secondary: 'bg-secondary text-white hover:bg-secondary-light shadow-md hover:shadow-lg',
+    accent: 'bg-accent text-primary-dark hover:bg-accent-dark shadow-md hover:shadow-lg',
+    outline: 'border-2 border-primary bg-transparent hover:bg-primary hover:text-white text-primary',
+    ghost: 'hover:bg-primary-light text-primary',
+    white: 'bg-white text-primary hover:bg-neutral-light shadow-md hover:shadow-lg',
   };
 
   const sizes = {
-    sm: 'h-9 px-3 text-sm',
-    md: 'h-10 px-4 py-2',
-    lg: 'h-11 px-8 text-lg',
+    sm: 'h-9 px-4 text-sm',
+    md: 'h-11 px-6 text-base',
+    lg: 'h-14 px-8 text-lg',
+    xl: 'h-16 px-10 text-xl',
   };
 
   const styles = cn(baseStyles, variants[variant], sizes[size], className);
@@ -48,7 +51,7 @@ export function Button({ className, variant = 'primary', size = 'md', href, ...p
 
 export function Section({ className, children, ...props }: React.HTMLAttributes<HTMLElement>) {
   return (
-    <section className={cn('py-12 md:py-16 lg:py-24', className)} {...props}>
+    <section className={cn('py-16 md:py-28 lg:py-36 overflow-hidden content-visibility-auto', className)} {...props}>
       {children}
     </section>
   );
@@ -56,16 +59,72 @@ export function Section({ className, children, ...props }: React.HTMLAttributes<
 
 export function Container({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={cn('container mx-auto px-4 md:px-6', className)} {...props}>
+    <div className={cn('container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl', className)} {...props}>
       {children}
     </div>
   );
 }
 
+export function Heading({ 
+  level = 2, 
+  children, 
+  className, 
+  subtitle,
+  align = 'left'
+}: { 
+  level?: 1 | 2 | 3 | 4; 
+  children: React.ReactNode; 
+  className?: string;
+  subtitle?: string;
+  align?: 'left' | 'center' | 'right';
+}) {
+  const Tag = `h${level}` as any;
+  
+  const sizes = {
+    1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1]',
+    2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-tight',
+    3: 'text-2xl md:text-3xl lg:text-4xl font-bold',
+    4: 'text-xl md:text-2xl font-bold',
+  };
+
+  const alignments = {
+    left: 'text-left',
+    center: 'text-center mx-auto',
+    right: 'text-right',
+  };
+
+  return (
+    <div className={cn('mb-8 md:mb-16', alignments[align], className)}>
+      {subtitle && (
+        <span className="inline-block text-accent font-bold tracking-widest uppercase text-xs md:text-sm mb-3 md:mb-4 animate-fade-in">
+          {subtitle}
+        </span>
+      )}
+      <Tag className={cn(sizes[level as keyof typeof sizes], 'text-primary')}>
+        {children}
+      </Tag>
+    </div>
+  );
+}
+
 export function Card({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={cn('bg-white rounded-lg border border-neutral-dark shadow-sm overflow-hidden', className)} {...props}>
+    <div className={cn('premium-card overflow-hidden', className)} {...props}>
       {children}
     </div>
   );
 }
+
+export function Badge({ children, className, variant = 'primary' }: { children: React.ReactNode, className?: string, variant?: 'primary' | 'accent' | 'neutral' }) {
+  const variants = {
+    primary: 'bg-primary-light text-primary',
+    accent: 'bg-accent-light text-accent-dark',
+    neutral: 'bg-neutral-medium text-text-secondary',
+  };
+  
+  return (
+    <span className={cn('inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider', variants[variant], className)}>
+      {children}
+    </span>
+  );
+}

data/blog/de/100-erneuerbare-energie-nur-mit-der-richtigen-kabelinfrastruktur.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 100 % erneuerbare Energie? Nur mit der richtigen Kabelinfrastruktur!
 date: '2025-03-31T12:00:34'
 featuredImage: /uploads/2025/02/image_fx_-6.webp
@@ -123,4 +122,4 @@ Mit jahrzehntelanger Erfahrung in der Kabelbranche wissen wir, worauf es bei der
 - **Spezialisiert auf erneuerbare Energien** – Unsere Lösungen sind genau auf die Anforderungen von Wind- und Solarparks zugeschnitten.
 
 Ob Netzanschluss, Hochspannungsleitungen oder Kabelinfrastruktur für große Solarparks – wir stehen Ihnen mit unserem Know-how zur Seite.
-Lassen Sie uns gemeinsam die Energiezukunft gestalten. [Kontaktieren Sie uns](/de/kontakt/) für eine Beratung oder ein individuelles Angebot.
+Lassen Sie uns gemeinsam die Energiezukunft gestalten. [Kontaktieren Sie uns](/de/contact/) für eine Beratung oder ein individuelles Angebot.

data/blog/de/das-muessen-sie-ueber-erneuerbare-energien-im-jahr-2025-wissen.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: Das müssen Sie über erneuerbare Energien im Jahr 2025 wissen
 date: '2025-01-15T13:41:10'
-featuredImage: >-
-/uploads/2024/11/aerial-view-of-electricity-station-surrounded-with-2023-11-27-05-33-40-utc-scaled.jpg
+featuredImage: '/uploads/2024/11/aerial-view-of-electricity-station-surrounded-with-2023-11-27-05-33-40-utc-scaled.jpg'
 locale: de
 category: Kabel Technologie
 ---

data/blog/de/die-besten-erdkabel-fuer-windkraft-und-solar-jetzt-bei-uns-bestellen.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: Die besten Erdkabel für Windkraft und Solar – jetzt bei uns bestellen
 date: '2025-05-26T10:17:34'
 featuredImage: /uploads/2025/04/image_fx_-2025-02-20T191245.537.webp

data/blog/de/die-kunst-der-kabellogistik-der-transport-des-fundamentes-moderner-energienetze.mdx

@@ -1,11 +1,7 @@
 ---
-
-title: >-
-Die Kunst der Kabellogistik: Der Transport des Fundamentes moderner
-Energienetze
+title: 'Die Kunst der Kabellogistik: Der Transport des Fundamentes moderner Energienetze'
 date: '2025-01-14T13:43:59'
-featuredImage: >-
-/uploads/2025/01/transportation-and-logistics-trucking-2023-11-27-04-54-40-utc-scaled.webp
+featuredImage: '/uploads/2025/01/transportation-and-logistics-trucking-2023-11-27-04-54-40-utc-scaled.webp'
 locale: de
 category: Kabel Technologie
 ---

data/blog/de/die-perfekte-kabelanfrage-so-sparen-sie-sich-unnoetige-rueckfragen.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 'Die perfekte Kabelanfrage: So sparen Sie sich unnötige Rückfragen'
 date: '2025-02-17T08:15:37'
 featuredImage: /uploads/2025/02/1.webp

data/blog/de/erkenntnisse-ueber-die-gruene-energiewende-herausforderungen-und-chancen.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: 'Erkenntnisse über die grüne Energiewende: Herausforderungen und Chancen'
 date: '2025-01-15T12:05:25'
-featuredImage: >-
-/uploads/2024/12/green-electric-plug-concept-2023-11-27-05-30-00-utc-scaled.webp
+featuredImage: '/uploads/2024/12/green-electric-plug-concept-2023-11-27-05-30-00-utc-scaled.webp'
 locale: de
 category: Kabel Technologie
 ---

data/blog/de/gruene-energie-beginnt-unter-der-erde-und-zwar-mit-plan.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: Grüne Energie beginnt unter der Erde – und zwar mit Plan
 date: '2025-05-22T09:14:46'
 featuredImage: /uploads/2025/02/image_fx_-9.webp

data/blog/de/kabelabkuerzungen-entschluesselt-der-schluessel-zur-richtigen-kabelwahl.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: Kabelabkürzungen entschlüsselt – der Schlüssel zur richtigen Kabelwahl
 date: '2025-03-17T10:00:23'
-featuredImage: >-
-/uploads/2024/12/Medium-Voltage-Cables-–-KLZ-Cables-12-30-2024_05_20_PM-scaled.webp
+featuredImage: '/uploads/2024/12/Medium-Voltage-Cables-–-KLZ-Cables-12-30-2024_05_20_PM-scaled.webp'
 locale: de
 category: Kabel Technologie
 ---
@@ -65,5 +63,5 @@ Wer diese Abkürzungen einmal verstanden hat, kann Kabelbezeichnungen nicht nur
 Nachdem wir nun die Welt der Kabelabkürzungen entschlüsselt haben, dürfte klar sein: Ein Kabel ist weit mehr als nur ein Draht mit Isolierung. Die Kombination aus Leitermaterial, Isolierung, Abschirmung und mechanischem Schutz entscheidet darüber, ob ein Kabel den Anforderungen einer bestimmten Anwendung gewachsen ist. Genau hier wird es oft kompliziert – denn nicht jedes Projekt stellt dieselben Anforderungen an Verlegung, Belastbarkeit oder Umweltbeständigkeit.
 Wenn es also darum geht, das richtige Kabel für eine spezifische Anwendung zu finden, ist es gut, einen Partner an der Seite zu haben, der sich auskennt. **KLZ** steht Ihnen genau dafür zur Verfügung. Ob Sie ein längs- und querwasserdichtes Kabel für eine anspruchsvolle Erdverlegung benötigen, ein Hochspannungskabel mit metallisierter Abschirmung oder ein flexibles Kabel mit PUR-Mantel – wir helfen Ihnen, die richtige Wahl zu treffen.
 Denn am Ende zählt nicht nur, dass das Kabel passt, sondern dass es langfristig zuverlässig arbeitet. Und wer sich einmal durch die Abkürzungen gekämpft hat, weiß: Ein <em>NA2XSEYRGY</em> ist nicht einfach nur ein Kabel – es ist eine maßgeschneiderte Lösung für eine bestimmte Herausforderung. Und genau diese Lösungen liefern wir.
-🔗 Sie suchen das passende Kabel? Schauen Sie sich unsere [Produktübersicht](/de/produkte/) an.<br />🔗 Noch Fragen? Kontaktieren Sie uns direkt über unsere [Kontaktseite](/de/kontakt/).
+🔗 Sie suchen das passende Kabel? Schauen Sie sich unsere [Produktübersicht](/de/produkte/) an.<br />🔗 Noch Fragen? Kontaktieren Sie uns direkt über unsere [Kontaktseite](/de/contact/).
 Lassen Sie uns gemeinsam herausfinden, welches Kabel für Ihr Projekt das richtige ist.

data/blog/de/kabeltrommelqualitaet-die-grundlage-der-kabelzuverlaessigkeit.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 'Kabeltrommelqualität: Die Grundlage der Kabelzuverlässigkeit'
 date: '2025-01-15T13:41:56'
 featuredImage: /uploads/2024/11/1234adws21312-scaled.jpg

data/blog/de/klimaneutral-bis-2050-was-wir-tun-muessen-um-das-ziel-zu-erreichen.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: 'Klimaneutral bis 2050? Was wir tun müssen, um das Ziel zu erreichen'
 date: '2025-01-20T12:30:14'
-featuredImage: >-
-/uploads/2025/01/business-planning-hand-using-laptop-for-working-te-2024-11-01-21-25-44-utc-scaled.webp
+featuredImage: '/uploads/2025/01/business-planning-hand-using-laptop-for-working-te-2024-11-01-21-25-44-utc-scaled.webp'
 locale: de
 category: Kabel Technologie
 ---

data/blog/de/klz-im-adressbuch-der-windenergie-2025.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: KLZ im Adressbuch der Windenergie 2025
 date: '2025-01-15T13:30:43'
 featuredImage: /uploads/2025/01/klz-directory-2-scaled.webp

data/blog/de/klz-waechst-weiter-neue-staerke-im-bereich-financial-sales.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: KLZ wächst weiter – neue Stärke im Bereich Financial & Sales
 date: '2025-10-06T13:26:31'
 featuredImage: /uploads/2025/10/1759325528650.webp

data/blog/de/kostenvergleich-kupfer-vs-aluminiumkabel-in-windparks-was-lohnt-sich-langfristig.mdx

@@ -1,8 +1,5 @@
 ---
-
-title: >-
-Kupfer oder Aluminiumkabel im Windpark? Kostenvergleich für Erdkabel und
-Netzanschluss
+title: 'Kupfer oder Aluminiumkabel im Windpark? Kostenvergleich für Erdkabel und Netzanschluss'
 date: '2025-02-24T08:30:24'
 featuredImage: /uploads/2024/11/medium-voltage-category.webp
 locale: de

data/blog/de/milliarden-paket-fuer-infrastruktur-der-kabel-boom-steht-bevor.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: 'Milliarden-Paket für Infrastruktur: Der Kabel-Boom steht bevor'
 date: '2025-04-06T08:00:07'
-featuredImage: >-
-/uploads/2025/03/closeup-shot-of-a-person-presenting-a-euro-rain-wi-2025-02-02-14-02-05-utc-scaled.webp
+featuredImage: '/uploads/2025/03/closeup-shot-of-a-person-presenting-a-euro-rain-wi-2025-02-02-14-02-05-utc-scaled.webp'
 locale: de
 category: Kabel Technologie
 ---

data/blog/de/n2xsf2y-mittelspannungskabel-energieprojekt.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: Warum das NA2XS(F)2Y das ideale Kabel für Ihr Energieprojekt ist
 date: '2025-09-29T12:33:25'
 featuredImage: /uploads/2025/04/image_fx_-2025-02-22T132138.470.webp
@@ -9,7 +8,7 @@ category: Kabel Technologie
 # Warum das NA2XS(F)2Y das ideale Kabel für Ihr Energieprojekt ist
 ### Warum die Kabelwahl über den Projekterfolg entscheidet
 Ob Windpark, Industrieanlage oder städtisches Verteilnetz – wer Mittelspannung plant, entscheidet nicht nur über Kabelmeter, sondern über **[Systemstabilität](https://www.vde.com/de/fnn/themen/tar/tar-mittelspannung-vde-ar-n-4110), Ausfallsicherheit** und **langfristige Betriebskosten**. Die Kabelwahl hat mehr Einfluss, als oft angenommen wird. Denn während sich viele Komponenten austauschen lassen, wird ein verlegtes Mittelspannungskabel schnell zum dauerhaften Bestandteil der Infrastruktur – und muss daher von Anfang an passen.
-Ein Kabel wie das [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) überzeugt genau dort, wo andere an Grenzen stoßen. Im Folgenden zeigen wir, warum.
+Ein Kabel wie das [**NA2XS(F)2Y**](/de/products/medium-voltage-cables/na2xsf2y/) überzeugt genau dort, wo andere an Grenzen stoßen. Im Folgenden zeigen wir, warum.
 <h4>Typische Herausforderungen in der Mittelspannungsverkabelung</h4>
 Projekte im Bereich von 10 bis 30 kV bringen wiederkehrende Anforderungen mit sich – unabhängig davon, ob es sich um Neubauten, Umbauten oder Erweiterungen handelt. Dazu zählen:
 - **Hohe [Dauerstrombelastungen](https://www.vde-verlag.de/buecher/leseprobe/9783800746910_PROBE_01.pdf)** über viele Jahre hinweg
@@ -20,7 +19,7 @@ Projekte im Bereich von 10 bis 30 kV bringen wiederkehrende Anforderungen mit
 
 Die Realität auf der Baustelle zeigt: Ein Kabel, das nicht flexibel genug ist, zu hohe Biegeradien hat oder thermisch schnell an seine Grenzen kommt, verzögert nicht nur die Umsetzung – es gefährdet auch die Betriebssicherheit.
 <h4>Was das NA2XS(F)2Y für moderne Energieinfrastruktur interessant macht</h4>
-Das [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) begegnet diesen Anforderungen mit einer durchdachten, praxisbewährten Konstruktion. Es ist ausgelegt für den **langfristigen Einsatz unter Last** und zeigt seine Stärken besonders in industriellen und energietechnischen Netzen.
+Das [**NA2XS(F)2Y**](/de/products/medium-voltage-cables/na2xsf2y/) begegnet diesen Anforderungen mit einer durchdachten, praxisbewährten Konstruktion. Es ist ausgelegt für den **langfristigen Einsatz unter Last** und zeigt seine Stärken besonders in industriellen und energietechnischen Netzen.
 **Wichtige Merkmale im Überblick:**
 <table>
 <thead>
@@ -52,7 +51,7 @@ Das [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) b
 </tr>
 </tbody>
 </table>
-Das bedeutet: Mit dem [NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) lassen sich Netze realisieren, die nicht nur auf dem Papier funktionieren, sondern auch im praktischen Betrieb – dauerhaft, wartungsarm und sicher.
+Das bedeutet: Mit dem [NA2XS(F)2Y](/de/products/medium-voltage-cables/na2xsf2y/) lassen sich Netze realisieren, die nicht nur auf dem Papier funktionieren, sondern auch im praktischen Betrieb – dauerhaft, wartungsarm und sicher.
 Warum der Netzausbau wichtig ist, erfahren Sie hier:
 <VisualLinkPreview 
 url="https://www.netze-bw.de/unsernetz/netzausbau"
@@ -62,7 +61,7 @@ image="https://www.netze-bw.de/logo-seo.png"
 />
 ### Technik, auf die Sie sich verlassen können
 Wenn Mittelspannung zur tragenden Infrastruktur wird, braucht es Kabel, auf deren technische Eigenschaften absolut Verlass ist – nicht nur unter Idealbedingungen, sondern gerade dann, wenn Umgebungsbedingungen, Belastung und Systemkomplexität zunehmen.
-Das [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) wurde genau für solche Situationen entwickelt. Aufbau und Materialwahl zielen auf maximale elektrische Sicherheit, lange Lebensdauer und bestmögliche Integration in moderne Energieprojekte ab.
+Das [**NA2XS(F)2Y**](/de/products/medium-voltage-cables/na2xsf2y/) wurde genau für solche Situationen entwickelt. Aufbau und Materialwahl zielen auf maximale elektrische Sicherheit, lange Lebensdauer und bestmögliche Integration in moderne Energieprojekte ab.
 <h4>Aufbau: Aluminiumleiter, XLPE-Isolierung, robuste Konstruktion</h4>
 Das Innenleben des NA2XS(F)2Y folgt einer klaren Logik: **[Leitfähigkeit](https://kupfer.de/anwendungen/elektrotechnik-und-energie/elektrische-leiterwerkstoffe/), Isolation und Schutz** in optimaler Balance.
 **Aufbau im Detail:**
@@ -75,14 +74,14 @@ Das Innenleben des NA2XS(F)2Y folgt einer klaren Logik: **[Leitfähigkeit](https
 
 Diese Kombination ermöglicht einen stabilen Betrieb auch unter hoher thermischer Last und in [EMV-sensiblen Umgebungen](https://heinen-elektronik.de/glossar/emv-elektromagnetische-vertraeglichkeit/) – bei sachgemäßer Verlegung.
 <h4>Ausgelegt für Spannungsklassen bis 30 kV – normgerecht und zukunftssicher</h4>
-Das [NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) ist erhältlich in den [Spannungsklassen](https://www.elandcables.com/de/company/news-and-events/mv-cables-the-lowdown) bis 18/30 kV – für Nennspannungen bis 30 kV laut IEC 60502-2. Das bietet entscheidende Vorteile:
+Das [NA2XS(F)2Y](/de/products/medium-voltage-cables/na2xsf2y/) ist erhältlich in den [Spannungsklassen](https://www.elandcables.com/de/company/news-and-events/mv-cables-the-lowdown) bis 18/30 kV – für Nennspannungen bis 30 kV laut IEC 60502-2. Das bietet entscheidende Vorteile:
 - **Internationale Vergleichbarkeit** in Ausschreibungen
 - **Sichere Abnahme** durch Netzbetreiber oder Behörden
 - **Zukunftssichere Integration** in bestehende oder neu geplante Systeme
 
 Wer auf Planbarkeit, technische Klarheit und reibungslose Dokumentation Wert legt, trifft mit diesem Kabel die richtige Wahl.
 ### Leistungsstark, zuverlässig, langlebig
-Ein gutes Mittelspannungskabel erkennt man nicht nur an Normen, sondern an seiner Fähigkeit, **unter realen Bedingungen dauerhaft stabil zu funktionieren**. Das [NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) wurde für genau solche Anforderungen entwickelt – und bringt technische Vorteile mit, die in der Praxis zählen.
+Ein gutes Mittelspannungskabel erkennt man nicht nur an Normen, sondern an seiner Fähigkeit, **unter realen Bedingungen dauerhaft stabil zu funktionieren**. Das [NA2XS(F)2Y](/de/products/medium-voltage-cables/na2xsf2y/) wurde für genau solche Anforderungen entwickelt – und bringt technische Vorteile mit, die in der Praxis zählen.
 <h4>Hohe Strombelastbarkeit für dauerhafte Betriebsstabilität</h4>
 Das Kabel ist auf **kontinuierlich hohe Strombelastungen** ausgelegt – ohne dass [thermische Probleme](https://calcul-electrique.com/de/artikel/ueberpruefung-der-thermischen-spannungen-in-einem-leiter/), Alterung oder Leistungsverluste zu befürchten sind. Die Kombination aus Aluminiumleiter und XLPE-Isolierung sorgt dafür, dass die maximale [Dauerstromtragfähigkeit](https://www.vde-verlag.de/buecher/leseprobe/9783800746910_PROBE_01.pdf) auch unter erschwerten Bedingungen erhalten bleibt.
 **Vorteile:**
@@ -106,7 +105,7 @@ In Netzen mit vielen parallelen Leitungen oder empfindlichen Steuerkreisen ist *
 Schon überzeugt? Dann bestellen Sie Ihr Mittelspannungskabel direkt bei uns:
 
 <VisualLinkPreview 
-  url="/de/kontakt/"
+  url="/de/contact/"
   title="Kontakt – Lassen Sie uns Ihre Energieprojekte voranbringenSchnell, verlässlich und unkompliziert – nehmen Sie Kontakt auf für individuelle Kabel- und Energielösungen."
   summary="Wir sind für Sie da."
   image="/uploads/2025/02/og-2.webp"

data/blog/de/na2xsf2y-dreileiter-mittelspannungskabel-lieferbar.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: Engpass bei NA2XSF2Y? Wir haben das Dreileiter-Mittelspannungskabel
 date: '2025-08-14T08:46:27'
 featuredImage: /uploads/2025/08/NA2XSF2X_3x1x300_RM-25_12-20kV-3.webp
@@ -9,12 +8,12 @@ category: Kabel Technologie
 # Engpass bei NA2XSF2Y? Wir haben das Dreileiter-Mittelspannungskabel
 ## Warum ist das Dreileiterkabel NA2XS(F)2Y derzeit kaum verfügbar?
 ### Ein Kabel mit Schlüsselrolle
-Das [**NA2XSF2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) gehört zu den wichtigsten Mittelspannungskabeln in der Energieinfrastruktur – insbesondere in der dreileitrigen Ausführung NA2XSF2Y 3x1x. Es ist mechanisch belastbar, längswasserdicht, direkt erdverlegbar und damit ideal für moderne Netzanwendungen in Onshore-Windparks und Solaranlagen.
-Vor allem Mittelspannungskabel wie das **[NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) 3x1x300 RM/25 12/20kV** werden aktuell besonders stark nachgefragt – nicht nur wegen ihrer technischen Leistungsfähigkeit, sondern auch wegen ihrer universellen Einsetzbarkeit in anspruchsvollen Umgebungen.
+Das [**NA2XSF2Y**](/de/products/medium-voltage-cables/na2xsf2y/) gehört zu den wichtigsten Mittelspannungskabeln in der Energieinfrastruktur – insbesondere in der dreileitrigen Ausführung NA2XSF2Y 3x1x. Es ist mechanisch belastbar, längswasserdicht, direkt erdverlegbar und damit ideal für moderne Netzanwendungen in Onshore-Windparks und Solaranlagen.
+Vor allem Mittelspannungskabel wie das **[NA2XS(F)2Y](/de/products/medium-voltage-cables/na2xsf2y/) 3x1x300 RM/25 12/20kV** werden aktuell besonders stark nachgefragt – nicht nur wegen ihrer technischen Leistungsfähigkeit, sondern auch wegen ihrer universellen Einsetzbarkeit in anspruchsvollen Umgebungen.
 ### Engpass mit Folgen
 Was früher problemlos verfügbar war, ist heute schwer zu beschaffen. Die Ursache liegt in einem Mix aus Lieferkettenproblemen, knappen Rohstoffen und einem überlasteten Produktionsmarkt. Viele Anbieter sind schlichtweg ausverkauft oder können nur mit monatelanger Verzögerung liefern – mit drastischen Auswirkungen auf Bauzeiten und Projektkosten.
 ### Wo noch Reserven existieren
-Trotz der angespannten Lage gibt es vereinzelt noch Bezugsquellen mit sofortiger Verfügbarkeit – dank strategischer Bevorratung und schlanker Logistik. Wir von [KLZ](/) gehören zu den Lieferanten, die das gefragte dreileitrige [Mittelspannungskabel](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) liefern können. Wer heute noch auf das **[NA2XSF2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) 3x1x** oder das **NA2XS(F)2Y 3x1x300 RM/25 12/20kV** zugreifen kann, verschafft sich einen entscheidenden Zeitvorteil – und verhindert Verzögerungen, bevor sie entstehen.
+Trotz der angespannten Lage gibt es vereinzelt noch Bezugsquellen mit sofortiger Verfügbarkeit – dank strategischer Bevorratung und schlanker Logistik. Wir von [KLZ](/) gehören zu den Lieferanten, die das gefragte dreileitrige [Mittelspannungskabel](/de/products/medium-voltage-cables/na2xsf2y/) liefern können. Wer heute noch auf das **[NA2XSF2Y](/de/products/medium-voltage-cables/na2xsf2y/) 3x1x** oder das **NA2XS(F)2Y 3x1x300 RM/25 12/20kV** zugreifen kann, verschafft sich einen entscheidenden Zeitvorteil – und verhindert Verzögerungen, bevor sie entstehen.
 ## Was ist das NA2XSF2Y überhaupt?
 ### Aufbau und Material
 Das **NA2XSF2Y** ist ein einadriges Mittelspannungskabel mit folgenden Eigenschaften:
@@ -27,7 +26,7 @@ Das **NA2XSF2Y** ist ein einadriges Mittelspannungskabel mit folgenden Eigenscha
 
 Die derzeit so gefragte dreileitrige Ausführung **NA2XSF2Y 3x1x** besteht aus drei separat verlegten Einleitern – ideal für flexible Trassenführung und leistungsstarke Installationen.
 ### Technische Eigenschaften
-Die Dreileiter-Variante **[NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) 3x1x300 RM/25 12/20kV** erfüllt alle Anforderungen für den Einsatz in anspruchsvollen Umgebungen:
+Die Dreileiter-Variante **[NA2XS(F)2Y](/de/products/medium-voltage-cables/na2xsf2y/) 3x1x300 RM/25 12/20kV** erfüllt alle Anforderungen für den Einsatz in anspruchsvollen Umgebungen:
 - **Nennspannung:** 12/20 kV
 - **Leiterquerschnitt:** 300 mm² Aluminium
 - **Leiterschirm:** extrudiert leitfähig
@@ -50,13 +49,13 @@ image="https://www.hochspannungsblog.at/201210-netzbau-110kv-wegscheid-mast-kabe
 />
 ## Typische Einsatzbereiche für das NA2XSF2Y
 ### Netzanschluss in Windkraftanlagen
-In Onshore-Windparks übernimmt das Dreileiter-Mittelspannungskabel **[NA2XSF2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) 3x1x** eine tragende Rolle: Es verbindet Windenergieanlagen mit Trafostationen oder direkt mit dem [Mittelspannungsnetz](https://www.stromerzeuger-lexikon.de/mittelspannungsnetz/). Die robuste Ausführung und Längswasserdichtheit machen es ideal für:
+In Onshore-Windparks übernimmt das Dreileiter-Mittelspannungskabel **[NA2XSF2Y](/de/products/medium-voltage-cables/na2xsf2y/) 3x1x** eine tragende Rolle: Es verbindet Windenergieanlagen mit Trafostationen oder direkt mit dem [Mittelspannungsnetz](https://www.stromerzeuger-lexikon.de/mittelspannungsnetz/). Die robuste Ausführung und Längswasserdichtheit machen es ideal für:
 - direkte Verlegung im Erdreich ohne zusätzlichen Schutz
 - lange Trassen mit wechselnden Bodenverhältnissen
 - hohe elektrische Belastbarkeit über Jahrzehnte
 
 ### Einsatz in Umspannwerken und Trafostationen
-Ob als Zuleitung zum Transformator oder zur Verteilung im Mittelspannungsfeld – die dreilitrige Ausführung **[NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) 3x1x300 RM/25 12/20kV** ist in Umspannstationen ein echter Standard. Vorteile:
+Ob als Zuleitung zum Transformator oder zur Verteilung im Mittelspannungsfeld – die dreilitrige Ausführung **[NA2XS(F)2Y](/de/products/medium-voltage-cables/na2xsf2y/) 3x1x300 RM/25 12/20kV** ist in Umspannstationen ein echter Standard. Vorteile:
 - kompakte Verlegung auch bei begrenztem Platz
 - UV-beständiger PE-Mantel für Innen- und Außenbereiche
 - geringere Brandlast gegenüber PVC-basierten Kabeln
@@ -67,7 +66,7 @@ Feuchter Lehmboden? Hohe Grundwasserrisiken? Gerade in solchen Szenarien überze
 - Installationen mit hoher mechanischer Belastung (z. B. unter Straßen)
 - Verlegung ohne Kabelschutzrohr in sensiblen Regionen
 
-Diese Vielseitigkeit macht das **NA2XSF2Y 3x1x** zu einem der universellsten Mittelspannungskabel am Markt. Gerade für die Kabelinfrastruktur in Onshore-Windparks ist das [NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) die erste Wahl.
+Diese Vielseitigkeit macht das **NA2XSF2Y 3x1x** zu einem der universellsten Mittelspannungskabel am Markt. Gerade für die Kabelinfrastruktur in Onshore-Windparks ist das [NA2XS(F)2Y](/de/products/medium-voltage-cables/na2xsf2y/) die erste Wahl.
 ## Warum der Markt leergefegt ist
 ### Ursachen des Engpasses
 Die derzeitige Knappheit des dreileitrigen **NA2XSF2Y** hat mehrere Ursachen, die sich gegenseitig verstärken:
@@ -88,14 +87,14 @@ Angesichts der prekären Versorgungslage empfehlen wir:
 - **Projektpuffer einkalkulieren** – sowohl zeitlich als auch im Budget
 - **Verfügbarkeit vor Preis** – kurzfristig lieferbare Typen sichern oft den Projektfortschritt
 
-Vor allem, wenn der Einsatz von **[NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) 3x1x300 RM/25 12/20kV** geplant ist, lohnt sich der Blick auf aktuelle Lagerverfügbarkeiten – bevor die Optionen ausgehen.
+Vor allem, wenn der Einsatz von **[NA2XS(F)2Y](/de/products/medium-voltage-cables/na2xsf2y/) 3x1x300 RM/25 12/20kV** geplant ist, lohnt sich der Blick auf aktuelle Lagerverfügbarkeiten – bevor die Optionen ausgehen.
 ## Wie wir liefern können, wenn andere vertrösten
 ### Strategische Lagerhaltung statt Reaktion auf Knappheit
-Während viele erst dann nachbestellen, wenn der Markt längst ausverkauft ist, setzen wir auf vorausschauende Lagerhaltung. Bereits frühzeitig haben wir zentrale Typen wie das beliebte Dreileiter-Mittelspannungskabel **[NA2XSF2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) 3x1x** gezielt in relevanten Mengen bevorratet – weil wir wissen, wie kritisch diese für den Netzausbau sind.
+Während viele erst dann nachbestellen, wenn der Markt längst ausverkauft ist, setzen wir auf vorausschauende Lagerhaltung. Bereits frühzeitig haben wir zentrale Typen wie das beliebte Dreileiter-Mittelspannungskabel **[NA2XSF2Y](/de/products/medium-voltage-cables/na2xsf2y/) 3x1x** gezielt in relevanten Mengen bevorratet – weil wir wissen, wie kritisch diese für den Netzausbau sind.
 **Und genau das macht jetzt den Unterschied: Diese Kabel haben wir als Lieferant strategisch eingeplant – und sind bei uns verfügbar.**
 Alle Details und technischen Daten finden Sie hier:
 <VisualLinkPreview 
-url="/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/"
+url="/de/products/medium-voltage-cables/na2xsf2y/"
 title="NA2XS(F)2Y-Mittelspannungskabel | KLZ"
 summary="NA2XS(F)2Y-Mittelspannungskabel, Spannungsklasse bis 36 kV, Kupferleiter, XLPE-Isolation, geeignet für extreme Temperaturen, konform mit IEC/VDE, ideal für erneuerbare Energien und Industrieanlagen."
 image="/uploads/2025/01/NA2XSF2Y-3-scaled.webp"
@@ -108,13 +107,13 @@ Unsere Logistikprozesse sind auf Geschwindigkeit und Flexibilität ausgelegt. Du
 
 Wir liefern nicht nur die Kabel die Sie benötigen, sondern das Gesamtpaket. Von professioneller Beratung zur richtigen Kabelwahl bis hin zur Lieferung auf der Baustelle – wir betreuen Ihr gesamtes Projekt. Zuverlässig, gekonnt und zeitnah.
 ### Redundanz statt Risiko
-Wir setzen auf mehrere Lieferketten und haben bewusst Lagerkapazitäten aufgebaut. So stellen wir sicher, dass selbst bei branchenweiten Engpässen noch geliefert werden kann – ohne Improvisation. Auch Typen wie das gefragte Dreileiterkabel **[NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) 3x1x300 RM/25 12/20kV** sind bei uns verfügbar.
+Wir setzen auf mehrere Lieferketten und haben bewusst Lagerkapazitäten aufgebaut. So stellen wir sicher, dass selbst bei branchenweiten Engpässen noch geliefert werden kann – ohne Improvisation. Auch Typen wie das gefragte Dreileiterkabel **[NA2XS(F)2Y](/de/products/medium-voltage-cables/na2xsf2y/) 3x1x300 RM/25 12/20kV** sind bei uns verfügbar.
 **Keine Ausreden – wir liefern, was andere nur anbieten.**
-<!-- Call to Action -->
+
 **Wir liefern Ihnen die Kabel, die Sie brauchen!**<br />
 [Kontaktieren Sie uns für eine konkrete Anfrage.](/contact/)
 ## FAQs rund ums NA2XSF2Y
 ### Ist das NA2XSF2Y für direkte Erdverlegung geeignet?
-Ja, das [**NA2XSF2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsfl2y-2/) ist speziell für die direkte Verlegung im Erdreich entwickelt. Dank seiner Längswasserdichtheit und der robusten Außenmantelkonstruktion eignet es sich ideal für unterirdische Trassen – selbst bei schwierigen Bodenverhältnissen oder wechselnden Feuchtigkeitszonen.
+Ja, das [**NA2XSF2Y**](/de/products/medium-voltage-cables/na2xsfl2y-mv/) ist speziell für die direkte Verlegung im Erdreich entwickelt. Dank seiner Längswasserdichtheit und der robusten Außenmantelkonstruktion eignet es sich ideal für unterirdische Trassen – selbst bei schwierigen Bodenverhältnissen oder wechselnden Feuchtigkeitszonen.
 ### Welche CPR-Klasse erfüllt das Kabel?
 Die [CPR-Klassifizierung](https://www.serverschrank24.de/wissensdatenbank/klassifikation-von-verlegekabeln.html) (Construction Products Regulation) hängt von der spezifischen Ausführung und dem Hersteller ab. Üblich für das **NA2XSF2Y 3x1x** sind Klassen wie Eca oder besser, abhängig vom eingesetzten Mantelmaterial. Im Zweifel liefern wir die konkrete Deklaration für das gewünschte Produkt mit.

data/blog/de/netzausbau-2025-warum-jede-neue-leitung-ein-schritt-zur-energiewende-ist.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: 'Netzausbau 2025: Warum jede neue Leitung ein Schritt zur Energiewende ist'
 date: '2025-02-10T13:00:38'
-featuredImage: >-
-/uploads/2025/01/power-grid-station-electrical-distribution-statio-2023-11-27-05-25-36-utc-scaled.webp
+featuredImage: '/uploads/2025/01/power-grid-station-electrical-distribution-statio-2023-11-27-05-25-36-utc-scaled.webp'
 locale: de
 category: Kabel Technologie
 ---

data/blog/de/recycling-von-kabeltrommeln-nachhaltigkeit-im-windkraftprojekt.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 'Recycling von Kabeltrommeln: Nachhaltigkeit im Windkraftprojekt'
 date: '2025-03-03T09:30:21'
 featuredImage: /uploads/2025/02/5.webp

data/blog/de/reicht-windenergie-wirklich-nicht-ein-blick-hinter-die-schlagzeilen.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: Reicht Windenergie wirklich nicht? Ein Blick hinter die Schlagzeilen
 date: '2025-02-03T11:30:21'
-featuredImage: >-
-/uploads/2025/01/offshore-wind-power-and-energy-farm-with-many-wind-2023-11-27-04-51-29-utc-scaled.webp
+featuredImage: '/uploads/2025/01/offshore-wind-power-and-energy-farm-with-many-wind-2023-11-27-04-51-29-utc-scaled.webp'
 locale: de
 category: Kabel Technologie
 ---

data/blog/de/sicherheit-bei-kabeltrommeln-unfallfrei-und-effizient-arbeiten.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: 'Sicherheit bei Kabeltrommeln: Unfallfrei und effizient arbeiten'
 date: '2025-01-15T11:18:33'
-featuredImage: >-
-/uploads/2024/12/large-rolls-of-wires-against-the-blue-sky-at-sunse-2023-11-27-05-20-33-utc-Large.webp
+featuredImage: '/uploads/2024/12/large-rolls-of-wires-against-the-blue-sky-at-sunse-2023-11-27-05-20-33-utc-Large.webp'
 locale: de
 category: Kabel Technologie
 ---

data/blog/de/so-waehlen-sie-das-richtige-kabel-fuer-ihr-naechstes-projekt-aus.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: So wählen Sie das richtige Kabel für Ihr nächstes Projekt aus
 date: '2025-01-15T13:20:06'
 featuredImage: /uploads/2024/11/low-voltage-category.webp

data/blog/de/von-smart-bis-nachhaltig-so-sieht-die-energiewirtschaft-in-naher-zukunft-aus.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 'Von smart bis nachhaltig: So sieht die Energiewirtschaft in naher Zukunft aus'
 date: '2025-03-24T11:00:21'
 featuredImage: /uploads/2025/02/image_fx_-7.webp

data/blog/de/warum-die-richtigen-kabel-der-geheime-held-der-gruenen-energie-sind.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: Warum die richtigen Kabel der geheime Held der grünen Energie sind
 date: '2025-01-27T11:30:48'
-featuredImage: >-
-/uploads/2025/01/technicians-inspecting-wind-turbines-in-a-green-en-2024-12-09-01-25-20-utc-scaled.webp
+featuredImage: '/uploads/2025/01/technicians-inspecting-wind-turbines-in-a-green-en-2024-12-09-01-25-20-utc-scaled.webp'
 locale: de
 category: Kabel Technologie
 ---

data/blog/de/warum-windpark-netzanschlusskabel-extremen-belastungen-standhalten-muessen.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: Warum Windpark-Netzanschlusskabel extremen Belastungen standhalten müssen
 date: '2025-03-10T09:30:51'
 featuredImage: /uploads/2025/02/image_fx_-9.webp

data/blog/de/was-macht-ein-erstklassiges-kabel-aus-finden-sie-es-hier-heraus.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: Was macht ein erstklassiges Kabel aus? Finden Sie es hier heraus!
 date: '2025-01-15T11:31:46'
-featuredImage: >-
-/uploads/2024/12/production-of-cable-wire-at-cable-factory-2023-11-27-05-18-33-utc-Large.webp
+featuredImage: '/uploads/2024/12/production-of-cable-wire-at-cable-factory-2023-11-27-05-18-33-utc-Large.webp'
 locale: de
 category: Kabel Technologie
 ---

data/blog/de/welche-kabel-fuer-windkraft-unterschiede-von-nieder-bis-hoechstspannung-erklaert.mdx

@@ -1,8 +1,5 @@
 ---
-
-title: >-
-Welche Kabel für Windkraft? Unterschiede von Nieder- bis Höchstspannung
-erklärt
+title: 'Welche Kabel für Windkraft? Unterschiede von Nieder- bis Höchstspannung erklärt'
 date: '2025-06-10T10:36:45'
 featuredImage: /uploads/2025/04/image_fx_-2025-02-20T185502.688.webp
 locale: de
@@ -82,7 +79,7 @@ Mittelspannungskabel sind das Rückgrat eines jeden Windparks. Sie decken den Sp
 - Verbindungen in Hybridanlagen (z. B. Solar-Wind-Projekte)
 
 Wer sich für das **NA2XS(F)2Y **entscheidet, setzt auf eine bewährte Lösung für die Mittelspannungsebene. Diese Kabel sind nicht nur leistungsfähig, sondern auch langlebig und wirtschaftlich – eine sichere Bank für die Energieverteilung im Windpark.
-Dieses Kabel erhalten Sie auch direkt bei uns (KLZ). Mehr Informationen und [Bestellmöglichkeiten](/de/kontakt/) finden Sie hier:
+Dieses Kabel erhalten Sie auch direkt bei uns (KLZ). Mehr Informationen und [Bestellmöglichkeiten](/de/contact/) finden Sie hier:
 <VisualLinkPreview 
 url="/de/start/"
 title="Lassen Sie uns Ihre Energieprojekte voranbringen"
@@ -133,13 +130,13 @@ Höchstspannungskabel sind eine technische Meisterleistung. Wer diese richtig ei
 <tr>
 <td>Niederspannung (LV)</td>
 <td>bis 1 kV</td>
-<td>[N2X2Y](/de/produkte/stromkabel/niederspannungskabel/n2x2y-2/), [N2XY](/de/produkte/stromkabel/niederspannungskabel/n2xy-2/), [NA2X2Y](/de/produkte/stromkabel/niederspannungskabel/na2x2y-2/), [NA2XY](/de/produkte/stromkabel/niederspannungskabel/na2xy-2/), [NAY2Y](/de/produkte/stromkabel/niederspannungskabel/nay2y-2/), [NAYCWY](/de/produkte/stromkabel/niederspannungskabel/naycwy-2/), [NAYY](/de/produkte/stromkabel/niederspannungskabel/nayy-2/), [NY2Y](/de/produkte/stromkabel/niederspannungskabel/ny2y-2/), [NYCWY](/de/produkte/stromkabel/niederspannungskabel/nycwy-2/), [NYY](/de/produkte/stromkabel/niederspannungskabel/nyy-2/)</td>
+<td>[N2X2Y](/de/products/low-voltage-cables/n2x2y/), [N2XY](/de/products/low-voltage-cables/n2xy/), [NA2X2Y](/de/products/low-voltage-cables/na2x2y/), [NA2XY](/de/products/low-voltage-cables/na2xy/), [NAY2Y](/de/products/low-voltage-cables/nay2y/), [NAYCWY](/de/products/low-voltage-cables/naycwy/), [NAYY](/de/products/low-voltage-cables/nayy/), [NY2Y](/de/products/low-voltage-cables/ny2y/), [NYCWY](/de/products/low-voltage-cables/nycwy/), [NYY](/de/products/low-voltage-cables/nyy/)</td>
 <td>Steuerung, Nebenaggregate</td>
 </tr>
 <tr>
 <td>Mittelspannung (MV)</td>
 <td>1 – 45 kV</td>
-<td>[N2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/n2xsf2y-2/), [N2XS(FL)2Y](/de/produkte/stromkabel/mittelspannungskabel/n2xsfl2y-2/), [N2XS2Y](/de/produkte/stromkabel/mittelspannungskabel/n2xs2y-2/), [N2XSY](/de/produkte/stromkabel/mittelspannungskabel/n2xsy-2/), [NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/), [NA2XS(FL)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsfl2y-2/), [NA2XS2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xs2y-2/), [NA2XSY](/de/produkte/stromkabel/mittelspannungskabel/na2xsy-2/)</td>
+<td>[N2XS(F)2Y](/de/products/medium-voltage-cables/n2xsf2y/), [N2XS(FL)2Y](/de/products/medium-voltage-cables/n2xsfl2y-mv/), [N2XS2Y](/de/products/medium-voltage-cables/n2xs2y/), [N2XSY](/de/products/medium-voltage-cables/n2xsy/), [NA2XS(F)2Y](/de/products/medium-voltage-cables/na2xsf2y/), [NA2XS(FL)2Y](/de/products/medium-voltage-cables/na2xsfl2y-mv/), [NA2XS2Y](/de/products/medium-voltage-cables/na2xs2y/), [NA2XSY](/de/products/medium-voltage-cables/na2xsy/)</td>
 <td>Haupttrassen, Turbinen-zu-Trafo</td>
 </tr>
 <tr>

data/blog/de/wie-die-kabelbranche-nachhaltigkeit-und-erneuerbare-energien-vorantreibt.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: Wie die Kabelbranche Nachhaltigkeit und erneuerbare Energien vorantreibt
 date: '2025-04-14T10:00:41'
 featuredImage: /uploads/2025/02/image_fx_-2.webp

data/blog/de/willkommen-in-der-zukunft-von-klz-unsere-neue-website-ist-online.mdx

@@ -1,12 +1,15 @@
 ---
-
 title: 'Willkommen in der Zukunft von KLZ: Unsere neue Website ist online!'
 date: '2025-01-15T13:38:36'
 featuredImage: /uploads/2024/12/mockup_03-copy-scaled.webp
 locale: de
 category: Kabel Technologie
 ---
-# Willkommen in der Zukunft von KLZ: Unsere neue Website ist online!
+
+<HighlightBox title="Willkommen in der Zukunft von KLZ: Unsere neue Website ist online! 🎉" color="primary">
+Es ist schneller, intelligenter und voller Funktionen, um Ihr Erlebnis nahtlos und effizient zu gestalten. Entwickelt, um den Bedürfnissen unserer Kunden gerecht zu werden und die Zukunft unserer Branche widerzuspiegeln, ist dies nicht nur ein neuer Look – es ist ein ganz neues Service-Level. Lassen Sie uns die Highlights durchgehen.
+</HighlightBox>
+
 ### Das neue KLZ-Logo: modern, mutig und zukunftsorientiert
 Eine der auffälligsten Änderungen in unserem Rebranding ist das aktualisierte KLZ-Logo, das perfekt den Geist der Innovation und des Fortschritts einfängt, der unsere Arbeit antreibt. Lassen Sie uns die Details genauer betrachten:
 - **Vereinfachte Typografie:** Das neue Logo zeigt eine elegante und moderne Schriftart, die klar, mutig und leicht erkennbar ist. Sie repräsentiert unsere unkomplizierte und zuverlässige Herangehensweise an das Geschäft.
@@ -16,6 +19,9 @@ Eine der auffälligsten Änderungen in unserem Rebranding ist das aktualisierte
 Und es gibt eine entscheidende visuelle Veränderung, die Ihnen sicherlich aufgefallen ist: „KLZ (Vertriebs GmbH)“ wurde in unserem Branding zu „KLZ Cables“. Diese prägnante, moderne Darstellung macht sofort klar, wer wir sind und was wir tun.
 Natürlich bleibt unser rechtlicher Name, KLZ Vertriebs GmbH, unverändert. Diese Änderung dient dazu, es unseren Kunden und Partnern zu erleichtern, unsere Mission und Dienstleistungen sofort zu erkennen.
 Dieses neue Logo und Branding sind nicht nur ästhetische Veränderungen – sie repräsentieren ein stärkeres, klareres KLZ, während wir in das Jahr 2025 und darüber hinaus gehen. Es ist ein Design, das unsere Geschichte mit unserer Zukunft verbindet: eine Zukunft, die von Innovation, Zuverlässigkeit und Nachhaltigkeit angetrieben wird.
+
+<AnimatedImage src="/uploads/2024/11/white_logo_transparent_background.svg" alt="Neues KLZ Logo" width={541} height={540} className="max-w-xs mx-auto bg-primary p-8" />
+
 ### **Ein frisches, modernes Design für eine zukunftsorientierte Branche**
 Unsere neue Website spiegelt die Mission von KLZ wider: Menschen und Energie durch innovative, nachhaltige Lösungen zu verbinden.
 - **Kraftvolle und klare visuelle Elemente** machen die Navigation mühelos, egal ob Sie unseren Katalog durchstöbern oder mehr über unsere Dienstleistungen erfahren möchten.
@@ -23,6 +29,7 @@ Unsere neue Website spiegelt die Mission von KLZ wider: Menschen und Energie dur
 - Das aufgefrischte Branding, einschließlich unseres **eleganten neuen Logos**, repräsentiert unsere Weiterentwicklung als führendes Unternehmen in der Energielösungsbranche.
 
 Jedes Element wurde mit Ihnen im Blick gestaltet, um es Ihnen noch einfacher zu machen, das zu finden, wonach Sie suchen.
+
 ### **Entdecken Sie unseren umfassenden Kabelkatalog**
 Unser brandneuer Kabelkatalog ist das Herzstück der Website und bietet detaillierte Einblicke in jedes Kabel, das wir anbieten:
 - **NA2XS(F)2Y** – perfekt für Hochspannungsanwendungen.
@@ -30,23 +37,37 @@ Unser brandneuer Kabelkatalog ist das Herzstück der Website und bietet detailli
 - Eine breite Palette weiterer Kabel, die speziell für Wind- und Solarenergieprojekte entwickelt wurden.
 
 Jedes Produkt enthält klare Spezifikationen, Anwendungen und Vorteile, die Ihnen helfen, schnell fundierte Entscheidungen zu treffen.
+
+<AnimatedImage src="/uploads/2024/12/NA2XSY-scaled.webp" alt="Kabelkatalog Vorschau" width={2560} height={533} />
+
 ### Das Team hinter der Transformation
 Ein neues Website-Projekt zu realisieren, ist keine kleine Aufgabe – es erfordert Vision, Engagement und ein Team, das weiß, wie man liefert. Bei KLZ war dieses Redesign mehr als nur ein Projekt; es war eine gemeinschaftliche Anstrengung, um sicherzustellen, dass unsere digitale Präsenz die Zuverlässigkeit, Innovation und Expertise widerspiegelt, die uns auszeichnen.
 Besondere Anerkennung gilt **Michael** und **Klaus**, die diese Initiative mit ihrem zukunftsorientierten Ansatz vorangetrieben haben. Sie verstanden die Bedeutung, nicht nur die Funktionalität zu verbessern, sondern auch eine Benutzererfahrung zu schaffen, die wirklich mit unseren Kunden und Partnern in Verbindung steht. Ihr engagierter Einsatz stellte sicher, dass jedes Detail mit den Werten und der Mission von KLZ in Einklang stand.
 Natürlich war die Umsetzung dieser Vision nur mit einem kreativen Experten möglich, und hier spielte **Marc Mintel von Cable Creations** eine Schlüsselrolle. Vom eleganten Design bis hin zu den hochwertigen Renderings, die unsere Produkte und Dienstleistungen lebendig werden lassen – Marcs Fähigkeiten und Liebe zum Detail sind auf jeder Seite sichtbar.
 Diese Zusammenarbeit zwischen unserem internen Team und externen Partnern ist ein Beweis für das, was wir am meisten schätzen: Partnerschaften, Präzision und das Streben nach Exzellenz. Gemeinsam haben wir eine Plattform geschaffen, die nicht nur eine Ressource ist, sondern auch das Wachstum und die Ambitionen von KLZ widerspiegelt.
 Während wir weiter wachsen und uns weiterentwickeln, ist diese neue Website nur ein Beispiel dafür, wie unser Team kontinuierlich den Herausforderungen mit Energie und Expertise begegnet – ganz wie die Netzwerke, die wir unterstützen.
-### Warum das für Sie wichtig ist
+
+<AnimatedImage src="/uploads/2024/12/DSC08057-Large.webp" alt="KLZ Team" width={1280} height={853} />
+
+<ChatBubble author="KLZ Assistent" role="Warum das für Sie wichtig ist" align="right">
 Diese neue Website ist nicht nur eine ästhetische Verbesserung – sie bietet echten Mehrwert für unsere Kunden und Partner. Hier sind die Vorteile für Sie:
+
 - **Schnellerer Zugriff auf Informationen:** Mit unserem verbesserten Design und einer PageSpeed-Bewertung von über 90 war es nie einfacher, die richtigen Produkte, Dienstleistungen oder Informationen zu finden. Zeit ist Geld, und wir helfen Ihnen, beides zu sparen.
 - **Verbesserte Benutzerfreundlichkeit:** Ob auf dem Desktop oder mobil – das intuitive Layout sorgt für ein reibungsloses und nahtloses Erlebnis. Sie verbringen weniger Zeit mit Suchen und mehr Zeit mit Handeln.
 - **Eine umfassende Ressource:** Vom vollständigen Kabelkatalog bis hin zu detaillierten Servicebeschreibungen – alles, was Sie brauchen, um informierte Entscheidungen zu treffen, finden Sie mit nur wenigen Klicks.
 
 Aber es geht um mehr als nur technische Verbesserungen. Diese neue Plattform spiegelt die klare Vision von KLZ für die Zukunft wider, die Nachhaltigkeit, Zuverlässigkeit und Innovation priorisiert. Für unsere Kunden bedeutet das, mit einem Unternehmen zusammenzuarbeiten, das versteht, wohin sich die Branche entwickelt – und bereit ist, den Weg zu weisen.
+
 Indem wir unsere digitale Präsenz mit unserer Mission in Einklang bringen, verbessern wir nicht nur Ihre Erfahrung mit KLZ, sondern verstärken auch unser Engagement, ein Partner zu sein, dem Sie über Jahre hinweg vertrauen können. Wenn wir in Klarheit und Effizienz investieren, profitieren Sie von einer reibungsloseren und stärkeren Verbindung zu den Produkten und Dienstleistungen, auf die Sie angewiesen sind.
+
 Diese Website ist nicht nur ein Upgrade – sie ist ein Versprechen, Ihnen mehr von dem zu liefern, was für Sie am wichtigsten ist: Qualität, Zuverlässigkeit und Vision.
+</ChatBubble>
+
+<PowerCTA locale="de" />
+
 ### **Beginnen Sie noch heute mit der Erkundung**
 Sie sind bereits hier, also nehmen Sie sich einen Moment Zeit, um die Website zu entdecken. Durchstöbern Sie den Katalog, erfahren Sie mehr über unsere Reise oder entdecken Sie, wie unsere Dienstleistungen Ihr nächstes großes Projekt unterstützen können.
 2025 wird ein spannendes Jahr, und diese neue Website ist erst der Anfang. Begleiten Sie uns, während wir weiterhin Innovationen vorantreiben und eine hellere, grünere Zukunft gestalten.
+
 ### **Was kommt als Nächstes? Deutschsprachige Unterstützung!**
 Wir setzen uns dafür ein, das KLZ-Erlebnis für alle zugänglich zu machen. Bald wird die **deutsche Sprachunterstützung** verfügbar sein, damit unsere deutschsprachigen Kunden und Partner die Seite in ihrer bevorzugten Sprache genießen können. Bleiben Sie dran – es ist auf dem Weg!

data/blog/de/windparkbau-im-fokus-drei-typische-kabelherausforderungen.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 'Windparkbau im Fokus: drei typische Kabelherausforderungen'
 date: '2025-11-05T10:16:10'
 featuredImage: /uploads/2025/04/image_fx_-2025-02-20T193520.620.webp
@@ -26,7 +25,7 @@ Typische Ursachen für Verzögerungen:
 - Witterungseinflüsse, die das [**Erdkabellegen**](https://www.eww.at/magazin/beitraege/detail/erdkabel-sichere-stromversorgung) verzögern
 - fehlende Abstimmung zwischen Lieferanten, Tiefbau und Montage
 
-Gerade bei **Windparkprojekten** mit mehreren Kilometern des [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) ist eine exakte **Lieferkoordination** entscheidend. Teil- und Komplettlieferungen müssen so geplant sein, dass sie sich an den tatsächlichen **Baufortschritt** anpassen.
+Gerade bei **Windparkprojekten** mit mehreren Kilometern des [**NA2XS(F)2Y**](/de/products/medium-voltage-cables/na2xsf2y/) ist eine exakte **Lieferkoordination** entscheidend. Teil- und Komplettlieferungen müssen so geplant sein, dass sie sich an den tatsächlichen **Baufortschritt** anpassen.
 **Effiziente Logistiklösungen können hier den Unterschied machen:**
 <table>
 <thead>
@@ -116,7 +115,7 @@ image="https://www.nabu.de/imperia/md/nabu/images/umwelt/energie/energietraeger/
 ## Qualität und Nachhaltigkeit als Erfolgsfaktor
 Neben Zeit und Logistik spielt auch die [**Kabelqualität**](https://www.windkraft-journal.de/2025/07/14/planungsempfehlung-bei-der-verkabelung-von-windparks-durch-wind-turbine-com/214028) eine entscheidende Rolle für die langfristige Performance eines **Windparks**. Schließlich sollen die installierten **[Mittelspannungs](/de/stromkabel/mittelspannungskabel/)– und [Hochspannungskabel](/de/stromkabel/hochspannungskabel/)** über Jahrzehnte zuverlässig Energie übertragen – selbst unter extremen Witterungsbedingungen und wechselnden Lastzyklen.
 Ein hochwertiges **Kabelsystem für Windkraftanlagen** zeichnet sich durch mehrere Faktoren aus:
-- **Materialqualität:** VPE-isolierte Kabel wie [**NA2XS(F)2Y** ](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/)oder [**N2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/n2xsf2y-2/) bieten hohe elektrische Festigkeit und exzellenten Langzeitschutz.
+- **Materialqualität:** VPE-isolierte Kabel wie [**NA2XS(F)2Y** ](/de/products/medium-voltage-cables/na2xsf2y/)oder [**N2XS(F)2Y**](/de/products/medium-voltage-cables/n2xsf2y/) bieten hohe elektrische Festigkeit und exzellenten Langzeitschutz.
 - **[Normkonformität](https://www.zvei.org/fileadmin/user_upload/Presse_und_Medien/Publikationen/2017/September/ZVEI_Leitfaden_Kabel_und_Leitungen_in_Windkraftanlagen/ZVEI-Leitfaden-Kabel-und-Leitungen-in-Windkraftanlagen-September-2017.pdf):** Alle eingesetzten Komponenten sollten den einschlägigen Normen wie **DIN VDE 0276**, **VDE 0298** oder **IEC 60502** entsprechen.
 - **Montagefreundlichkeit:** Die Kabelkonstruktion muss so ausgelegt sein, dass sie sich effizient und sicher verlegen lässt – auch bei schwierigen Bodenbedingungen.
 - **Umweltaspekte:** Recyclingfähige Materialien und die [Wiederverwendung von Trommeln oder Leitermaterialien](/de/recycling-von-kabeltrommeln-nachhaltigkeit-im-windkraftprojekt/) reduzieren den ökologischen Fußabdruck.
@@ -138,4 +137,4 @@ Ob [**Mittelspannung**](/de/stromkabel/mittelspannungskabel/), **Erdkabel** oder
 Unser Vorteil liegt in der **Praxisnähe**: Wir wissen, wie eng Bauzeiten im Windparkbau sind, welche Kabelsysteme sich bewährt haben und worauf es bei der Logistik wirklich ankommt. Durch unsere **Lagerkapazitäten in der Mitte Deutschlands** reagieren wir schnell auf Änderungen und halten Lieferketten stabil – auch wenn Projekte dynamisch verlaufen.
 Mit unserem Netzwerk, unserer Marktkenntnis und unserer Leidenschaft für erneuerbare Energien sorgen wir dafür, dass Ihr **Windkraftprojekt** pünktlich und reibungslos ans Netz geht.
 ➡️ **Planen Sie ein neues Windparkprojekt oder benötigen Unterstützung bei der Kabelauswahl?**Dann sprechen Sie uns an – wir liefern die **Kabel, Lösungen und Erfahrung**, die Ihr Projekt erfolgreich machen.
-[Jetzt Kontakt aufnehmen](/de/kontakt/)
+[Jetzt Kontakt aufnehmen](/de/contact/)

data/blog/de/zukunft-sichern-mit-h1z2z2-k-unser-solarkabel-zur-intersolar-2025.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 'Zukunft sichern mit H1Z2Z2-K: Unser Solarkabel zur Intersolar 2025'
 date: '2025-04-30T09:17:33'
 featuredImage: /uploads/2025/04/inter-solar.webp
@@ -132,7 +131,7 @@ Ein Pluspunkt des H1Z2Z2-K ist seine Eignung zur direkten Erdverlegung – ohne
 ## Fazit: Qualität, die den Unterschied macht
 Das H1Z2Z2-K 6mm² steht für technische Reife und konsequente Ausrichtung auf den professionellen Einsatz in Photovoltaikanlagen. Von der hohen Temperatur- und Spannungsbeständigkeit bis zur geprüften Normkonformität – dieses Kabel vereint alles, was moderne Energieinfrastrukturen heute brauchen.
 Besonders hervorzuheben ist seine Vielseitigkeit: Ob auf Dächern, in Erdverlegung oder in PV-Großanlagen – das H1Z2Z2-K überzeugt durch Zuverlässigkeit und eine beeindruckende Lebensdauer. Damit leistet es einen direkten Beitrag zur Wirtschaftlichkeit und Nachhaltigkeit von Solarsystemen.
-Weitere Informationen, technische Daten und Bestelloptionen finden sich auf der Produktseite: 👉 [Zum H1Z2Z2-K bei KLZ](/de/produkte/solarkabel/h1z2z2-k-2/)
+Weitere Informationen, technische Daten und Bestelloptionen finden sich auf der Produktseite: 👉 [Zum H1Z2Z2-K bei KLZ](/de/products/solar-cables/h1z2z2-k-2/)
 Alles Wichtige zur Intersolar Europe finden Sie hier:
 
 <VisualLinkPreview 

data/blog/en/100-renewable-energy-only-with-the-right-cable-infrastructure.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 100% renewable energy? Only with the right cable infrastructure!
 date: '2025-03-31T12:00:23'
 featuredImage: /uploads/2025/02/image_fx_-6.webp
@@ -83,7 +82,28 @@ A key question in grid expansion is whether new power lines should be built as o
 </tbody>
 </table>
 In the past, overhead lines were favored due to lower construction costs. However, modern demands for grid stability, environmental protection, and aesthetics increasingly support underground cables. As a result, many countries are now adopting underground cabling as the standard for new high- and medium-voltage power lines.
-For those who want to dive deeper into the topic, here’s a **detailed analysis** comparing overhead lines and underground cables: [Read ](https://www.hochspannungsblog.at/wissenswertes/netzaufbau/vergleich-freileitung-erdkabel)[more](https://www.hochspannungsblog.at/wissenswertes/netzaufbau/vergleich-freileitung-erdkabel)[.](https://www.hochspannungsblog.at/wissenswertes/netzaufbau/vergleich-freileitung-erdkabel)
+For those who want to dive deeper into the topic, here’s a **detailed analysis** comparing overhead lines and underground cables: 
+<VisualLinkPreview 
+  url="https://www.hochspannungsblog.at/wissenswertes/netzaufbau/vergleich-freileitung-erdkabel"
+  title="Freileitung und Erdkabel sind „Stand der Technik“"
+  summary="Freileitung oder Erdkabel? Wir erklären Ihnen die Unterschiede und Möglichkeiten, aber auch warum was möglich ist und warum was nicht."
+  image="https://www.hochspannungsblog.at/201210-netzbau-110kv-wegscheid-mast-kabelanschluss-1723.jpg?ch=dhsowxyq&:hp=9;1;de"
+/>
+
+<VisualLinkPreview 
+  url="https://www.hochspannungsblog.at/wissenswertes/netzaufbau/vergleich-freileitung-erdkabel"
+  title="Freileitung und Erdkabel sind „Stand der Technik“"
+  summary="Freileitung oder Erdkabel? Wir erklären Ihnen die Unterschiede und Möglichkeiten, aber auch warum was möglich ist und warum was nicht."
+  image="https://www.hochspannungsblog.at/201210-netzbau-110kv-wegscheid-mast-kabelanschluss-1723.jpg?ch=dhsowxyq&:hp=9;1;de"
+/>
+
+<VisualLinkPreview 
+  url="https://www.hochspannungsblog.at/wissenswertes/netzaufbau/vergleich-freileitung-erdkabel"
+  title="Freileitung und Erdkabel sind „Stand der Technik“"
+  summary="Freileitung oder Erdkabel? Wir erklären Ihnen die Unterschiede und Möglichkeiten, aber auch warum was möglich ist und warum was nicht."
+  image="https://www.hochspannungsblog.at/201210-netzbau-110kv-wegscheid-mast-kabelanschluss-1723.jpg?ch=dhsowxyq&:hp=9;1;de"
+/>
+
 <VisualLinkPreview 
 url="https://www.hochspannungsblog.at/wissenswertes/netzaufbau/vergleich-freileitung-erdkabel"
 title="Freileitung und Erdkabel sind „Stand der Technik“"

data/blog/en/billion-euro-package-for-infrastructure-the-cable-boom-is-coming.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: 'Billion-euro package for infrastructure: The cable boom is coming'
 date: '2025-04-06T08:05:19'
-featuredImage: >-
-/uploads/2025/03/closeup-shot-of-a-person-presenting-a-euro-rain-wi-2025-02-02-14-02-05-utc-scaled.webp
+featuredImage: '/uploads/2025/03/closeup-shot-of-a-person-presenting-a-euro-rain-wi-2025-02-02-14-02-05-utc-scaled.webp'
 locale: en
 category: Kabel Technologie
 ---

data/blog/en/cable-abbreviations-decoded-the-key-to-choosing-the-right-cable.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: Cable abbreviations decoded – the key to choosing the right cable
 date: '2025-03-17T10:00:16'
-featuredImage: >-
-/uploads/2024/12/Medium-Voltage-Cables-–-KLZ-Cables-12-30-2024_05_20_PM-scaled.webp
+featuredImage: '/uploads/2024/12/Medium-Voltage-Cables-–-KLZ-Cables-12-30-2024_05_20_PM-scaled.webp'
 locale: en
 category: Kabel Technologie
 ---

data/blog/en/cable-drum-quality-the-foundation-of-cable-reliability.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 'Cable drum quality: the foundation of cable reliability'
 date: '2024-11-09T12:14:30'
 featuredImage: /uploads/2024/11/1234adws21312-scaled.jpg

data/blog/en/cable-drum-safety-ensuring-smooth-operations-and-accident-free-environments.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: 'Cable drum safety: Ensuring smooth operations and accident-free environments'
 date: '2025-01-14T12:23:33'
-featuredImage: >-
-/uploads/2024/12/large-rolls-of-wires-against-the-blue-sky-at-sunse-2023-11-27-05-20-33-utc-Large.webp
+featuredImage: '/uploads/2024/12/large-rolls-of-wires-against-the-blue-sky-at-sunse-2023-11-27-05-20-33-utc-Large.webp'
 locale: en
 category: Kabel Technologie
 ---

data/blog/en/climate-neutral-by-2050-what-we-need-to-do-to-achieve-this-goal.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: Climate neutral by 2050? What we need to do to achieve this goal
 date: '2025-01-20T12:30:17'
-featuredImage: >-
-/uploads/2025/01/business-planning-hand-using-laptop-for-working-te-2024-11-01-21-25-44-utc-scaled.webp
+featuredImage: '/uploads/2025/01/business-planning-hand-using-laptop-for-working-te-2024-11-01-21-25-44-utc-scaled.webp'
 locale: en
 category: Kabel Technologie
 ---

data/blog/en/cost-comparison-copper-vs-aluminum-cables-in-wind-farms-which-is-worthwhile-in-the-long-term.mdx

@@ -1,8 +1,5 @@
 ---
-
-title: >-
-Copper or aluminum cable? Cost comparison for underground cable and grid
-connection
+title: 'Copper or aluminum cable? Cost comparison for underground cable and grid connection'
 date: '2025-02-24T08:30:23'
 featuredImage: /uploads/2024/11/medium-voltage-category.webp
 locale: en

data/blog/en/expanding-the-grid-by-2025-building-the-foundation-for-a-successful-energy-transition.mdx

@@ -1,11 +1,7 @@
 ---
-
-title: >-
-Expanding the grid by 2025: Building the foundation for a successful energy
-transition
+title: 'Expanding the grid by 2025: Building the foundation for a successful energy transition'
 date: '2025-02-10T13:00:36'
-featuredImage: >-
-/uploads/2025/01/power-grid-station-electrical-distribution-statio-2023-11-27-05-25-36-utc-scaled.webp
+featuredImage: '/uploads/2025/01/power-grid-station-electrical-distribution-statio-2023-11-27-05-25-36-utc-scaled.webp'
 locale: en
 category: Kabel Technologie
 ---

data/blog/en/eye-opening-realities-of-green-energy-transformation.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: Eye-opening realities of green energy transformation
 date: '2024-12-30T10:55:32'
-featuredImage: >-
-/uploads/2024/12/green-electric-plug-concept-2023-11-27-05-30-00-utc-scaled.webp
+featuredImage: '/uploads/2024/12/green-electric-plug-concept-2023-11-27-05-30-00-utc-scaled.webp'
 locale: en
 category: Kabel Technologie
 ---
@@ -27,7 +25,14 @@ But why does this happen? Every cable has a resistance that slows down the flow
 ### Green energy is a central component of our future today … But it is not enough to simply rely on these energy sources. The infrastructure that brings this energy to us efficiently plays an equally crucial role.
 High-quality cables, on the other hand, have better conductivity and lower resistance. This ensures that the **electricity flows more efficiently and less is lost**. This leaves more of the generated energy for you to use – which is not only good for your electricity bill, but also helps to maximize the sustainability of your solar system. So it’s worth paying attention to quality when choosing cables in order to exploit the full potential of green energy.
 <VisualLinkPreview 
-url="https://ratedpower.com/blog/utility-scale-pv-losses/"
+url="
+<VisualLinkPreview 
+  url="https://ratedpower.com/blog/utility-scale-pv-losses/"
+  title="Ultimate guide to utility-scale PV system losses — RatedPower"
+  summary="What are solar PV system losses and how can you avoid them to maximize the electrical output from your utility-scale plant project?"
+  image="https://assets.ratedpower.com/1694509274-aerial-view-solar-panels-top-building-eco-building-factory-solar-photovoltaic-cell.jpg?auto=format&fit=crop&h=630&w=1200"
+/>
+"
 title="Ultimate guide to utility-scale PV system losses — RatedPower"
 summary="What are solar PV system losses and how can you avoid them to maximize the electrical output from your utility-scale plant project?"
 image="https://assets.ratedpower.com/1694509274-aerial-view-solar-panels-top-building-eco-building-factory-solar-photovoltaic-cell.jpg?auto=format&amp;fit=crop&amp;h=630&amp;w=1200"
@@ -36,7 +41,14 @@ image="https://assets.ratedpower.com/1694509274-aerial-view-solar-panels-top-bui
 Wind farms have a similar problem to solar plants: energy losses due to fluctuating power generation. Imagine a wind farm produces electricity, but the wind does not blow constantly. This means that at certain times the wind turbines generate more electricity than is actually needed, while at other times, when the wind drops, they can supply almost no electricity at all. In both cases, a lot of energy is lost or not used. Without a way to **store surplus energy**, there is a gap between the energy generated and the actual use, which significantly reduces the efficiency of the entire system.The solution to this problem lies in** energy storage systems** such as batteries or pumped storage power plants. These technologies make it possible to store surplus energy when the wind is blowing strongly and therefore more electricity is produced than is required at the moment. This stored energy can then be used on demand when the wind dies down or demand is particularly high. This ensures that all the electricity generated is used efficiently instead of being lost unused. Without these storage technologies, the full potential of wind energy remains untapped and the efficiency of wind farms remains far below their actual value.
 However, despite their importance, energy storage systems are associated with challenges. High costs and limited capacity continue to make the development and installation of these storage technologies a difficult endeavor. But technological progress has not stood still: New innovations in storage technologies and increasingly improved scalability are making it more and more realistic to equip wind farms with **effective and cost-efficient storage systems**. This is crucial for the future of wind energy, because only by overcoming these challenges can wind energy fully contribute to ensuring a stable and sustainable energy supply.
 <VisualLinkPreview 
-url="https://www.solarenergie.de/stromspeicher/arten/stromspeicher-windkraft"
+url="
+<VisualLinkPreview 
+  url="https://www.solarenergie.de/stromspeicher/arten/stromspeicher-windkraft"
+  title="Speicher für Windenergie: Welche Möglichkeiten gibt es?"
+  summary="Speicher für Windenergie: Welche Möglichkeiten gibt es? Windkraftanlagen mit Speicher im privaten und im öffentlichen Bereich ✓ Wie kann man Windenergie speichern? – Lernen Sie hier bereits existente und sich derzeit in der Forschung befindende Verfahren der Zukunft kennen!"
+  image="https://assets.solarwatt.de/Resources/Persistent/e084aa09af5f0cdef386088bc558a52d81509cc0/Regenerative%20Energie-1200x628.jpg"
+/>
+"
 title="Speicher für Windenergie: Welche Möglichkeiten gibt es?"
 summary="Speicher für Windenergie: Welche Möglichkeiten gibt es? Windkraftanlagen mit Speicher im privaten und im öffentlichen Bereich ✓ Wie kann man Windenergie speichern? – Lernen Sie hier bereits existente und sich derzeit in der Forschung befindende Verfahren der Zukunft kennen!"
 image="https://assets.solarwatt.de/Resources/Persistent/e084aa09af5f0cdef386088bc558a52d81509cc0/Regenerative%20Energie-1200x628.jpg"

data/blog/en/focus-on-wind-farm-construction-three-typical-cable-challenges.mdx

@@ -1,33 +1,63 @@
 ---
-
 title: 'Focus on wind farm construction: three typical cable challenges'
 date: '2025-11-05T10:16:15'
 featuredImage: /uploads/2025/04/image_fx_-2025-02-20T193520.620.webp
 locale: en
 category: Kabel Technologie
 ---
+
 # Focus on wind farm construction: three typical cable challenges
+
+<Callout type="info" title="TL;DR">
+- **Grid expansion** is crucial for the energy transition and energy security.
+- By 2024: **3,085 km of new power line**s; by 2030: another 12,000 km planned.
+- **Underground cables** are preferred for environmental and public acceptance reasons.
+- **Challenges**: bureaucracy, opposition, and labor shortages.
+- **Solutions**: public involvement, smart technologies, and innovative cables.
+
+**Goal:** Climate neutrality and sustainable energy supply by 2045. 🌍
+</Callout>
+
 Building an [**onshore wind farm**](https://www.verivox.de/strom/themen/windpark/) is a technical masterpiece – and **cable installation** plays a crucial role. Between wind turbines, transformers and grid connection points run hundreds of meters of [**medium-voltage cables**](https://www.dosensecable.es/de/diferencia-entre-cable-de-media-tension/) that transfer the generated energy safely and efficiently to the grid. But it’s exactly these **wind farm cables** that often become the most critical bottleneck in the entire project.
+
 **Wind power cabling** is far more than just sourcing materials. It requires precise planning, coordination and experience – from choosing the right **cable type** to ensuring timely delivery to the construction site. Even small delays or changes in plans can significantly affect progress and trigger high additional costs.
-Add to this the logistical challenges: **large cable drums**, different [**conductor cross sections**](https://www.conrad.de/de/ratgeber/handwerk/kabelquerschnitt-berechnen.html), special **packaging**, and ever-changing construction site conditions. Without forward planning, you risk bottlenecks – and that can delay the entire [**grid connection of the wind farm**](https://www.enargus.de/pub/bscw.cgi/d7842-2/*/*/Netzanschluss%20einer%20Windkraftanlage?op=Wiki.getwiki&amp;search=Windpark).
+
+Add to this the logistical challenges: **large cable drums**, different [**conductor cross sections**](https://www.conrad.de/de/ratgeber/handwerk/kabelquerschnitt-berechnen.html), special **packaging**, and ever-changing construction site conditions. Without forward planning, you risk bottlenecks – and that can delay the entire [**grid connection of the wind farm**](https://www.enargus.de/pub/bscw.cgi/d7842-2/*/*/Netzanschluss%20einer%20Windkraftanlage?op=Wiki.getwiki&search=Windpark).
+
 In this article, we look at the** 3 biggest challenges in wind farm construction** – and show how proactive logistics and the right cable strategy can help you stay on schedule and maximize efficiency.
+
 Find out why onshore wind farms are a crucial pillar of the energy transition here:
+
 <VisualLinkPreview 
-url="https://www.enbw.com/unternehmen/themen/windkraft/onshore-wind-pfeiler-der-energiewende.html"
-title="Onshore-Windenergie als Pfeiler der Energiewende | EnBW"
-summary="Viele Faktoren haben den Bau von Windenergieanlagen in den letzten Jahren gebremst. Lesen Sie hier die Gründe!"
-image="https://www.enbw.com/media/image-proxy/1600x914,q70,focus50x49,zoom1.0/https://www.enbw.com/media/presse/images/newsroom/onshore-windpark-langenburg-7zu4_1701415033580.jpg"
+  url="
+<VisualLinkPreview 
+  url="https://www.enbw.com/unternehmen/themen/windkraft/onshore-wind-pfeiler-der-energiewende.html"
+  title="Onshore-Windenergie als Pfeiler der Energiewende | EnBW"
+  summary="Viele Faktoren haben den Bau von Windenergieanlagen in den letzten Jahren gebremst. Lesen Sie hier die Gründe!"
+  image="https://www.enbw.com/media/image-proxy/1600x914,q70,focus50x49,zoom1.0/https://www.enbw.com/media/presse/images/newsroom/onshore-windpark-langenburg-7zu4_1701415033580.jpg"
 />
+"
+  title="Onshore-Windenergie als Pfeiler der Energiewende | EnBW"
+  summary="Viele Faktoren haben den Bau von Windenergieanlagen in den letzten Jahren gebremst. Lesen Sie hier die Gründe!"
+  image="https://www.enbw.com/media/image-proxy/1600x914,q70,focus50x49,zoom1.0/https://www.enbw.com/media/presse/images/newsroom/onshore-windpark-langenburg-7zu4_1701415033580.jpg"
+/>
+
+<AnimatedImage src="/uploads/2025/04/image_fx_-7.webp" alt="Wind farm construction site" width={1408} height={768} />
+
 ## Challenge 1: Tight construction timelines and fixed deadlines
+
 In **wind farm construction**, schedules are rarely flexible. Any delay in [**cable laying**](https://www.eef.de/news/die-infrastruktur-hinter-windparks) directly impacts the entire build process – from foundation and tower installation to commissioning. Since **grid connection deadlines** are usually contractually binding, a missing [**medium-voltage cable**](/de/stromkabel/mittelspannungskabel/) can quickly lead to costly site downtime.
+
 Typical causes of delays:
 - delayed **cable deliveries** or unclear scheduling
 - inaccurate **material planning** in large-scale projects
 - weather conditions delaying [**underground cable installation**](https://www.eww.at/magazin/beitraege/detail/erdkabel-sichere-stromversorgung)
 - lack of coordination between suppliers, civil engineers and installers
 
-Especially for **wind farm projects** involving several kilometers of [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/), precise **delivery coordination** is essential. Partial and complete deliveries must be scheduled to match the actual **construction progress**.
+Especially for **wind farm projects** involving several kilometers of [**NA2XS(F)2Y**](/en/products/medium-voltage-cables/na2xsf2y/), precise **delivery coordination** is essential. Partial and complete deliveries must be scheduled to match the actual **construction progress**.
+
 **Efficient logistics solutions can make the difference:**
+
 <table>
 <thead>
 <tr>
@@ -54,23 +84,38 @@ Especially for **wind farm projects** involving several kilometers of [**NA2XS(F
 </tr>
 </tbody>
 </table>
+
 With precise [**cable capacity**](https://www.a-eberle.de/infobrief/infobrief-20/) planning and responsive logistics, even high-pressure timelines can be handled efficiently. This ensures the **wind farm’s grid connection** stays on schedule – and energy flows reliably.
+
 Want to know which cable types are used in wind farms? Check out this article:
+
 <VisualLinkPreview 
-url="https://wind-turbine.com/magazin/ratgeber/250713/welche-arten-von-kabeln-benoetigt-man-fuer-den-bau-eines-windparks.html"
-title="Welche Arten von Kabeln benötigt man für den Bau eines Windparks?"
-summary="Die Verkabelung ist ein zentrales Element jeder Windkraftanlage und beeinflusst maßgeblich die Effizienz, Sicherheit und Wirtschaftlichkeit eines Windparks.…"
-image="https://wind-turbine.com/i/53689/68738caa5e58ffdf06031cf2/2/1200/630/68738c85497af_KabelfreinenWindparkpng.png"
+  url="
+<VisualLinkPreview 
+  url="https://wind-turbine.com/magazin/ratgeber/250713/welche-arten-von-kabeln-benoetigt-man-fuer-den-bau-eines-windparks.html"
+  title="Welche Arten von Kabeln benötigt man für den Bau eines Windparks?"
+  summary="Die Verkabelung ist ein zentrales Element jeder Windkraftanlage und beeinflusst maßgeblich die Effizienz, Sicherheit und Wirtschaftlichkeit eines Windparks.…"
+  image="https://wind-turbine.com/i/53689/68738caa5e58ffdf06031cf2/2/1200/630/68738c85497af_KabelfreinenWindparkpng.png"
 />
+"
+  title="Welche Arten von Kabeln benötigt man für den Bau eines Windparks?"
+  summary="Die Verkabelung ist ein zentrales Element jeder Windkraftanlage und beeinflusst maßgeblich die Effizienz, Sicherheit und Wirtschaftlichkeit eines Windparks.…"
+  image="https://wind-turbine.com/i/53689/68738caa5e58ffdf06031cf2/2/1200/630/68738c85497af_KabelfreinenWindparkpng.png"
+/>
+
 ## Challenge 2: Large delivery volumes and specialized packaging
-A modern **onshore wind farm** requires several kilometers of **medium-voltage cables** – often of the type [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/), [**N2XSY**](/de/produkte/stromkabel/mittelspannungskabel/n2xsy-2/) or [**NAYY**](/de/produkte/stromkabel/niederspannungskabel/nayy-2/). These cables weigh several tons per drum and require smart logistics to avoid damage, confusion and costly delays.
+
+A modern **onshore wind farm** requires several kilometers of **medium-voltage cables** – often of the type [**NA2XS(F)2Y**](/en/products/medium-voltage-cables/na2xsf2y/), [**N2XSY**](/en/products/medium-voltage-cables/n2xsy/) or [**NAYY**](/en/products/low-voltage-cables/nayy/). These cables weigh several tons per drum and require smart logistics to avoid damage, confusion and costly delays.
+
 The bigger the project, the more complex the **material coordination** becomes:
 - Different **cable cross-sections** and **conductor types** must be clearly assigned.
 - **Drum sizes** and [**installation units**](https://www.elektrofachkraft.de/sicheres-arbeiten/neue-mindestanforderungen-fuer-kabelverlegung) vary by cable length and location.
 - Clear **markings** and **packaging systems** on-site are key to avoid installation mistakes.
 
 **Our experience shows:** Planning for storage and packaging units in advance not only saves time but also reduces the risk of material loss and reorders.
+
 **Typical requirements and solutions:**
+
 <table>
 <thead>
 <tr>
@@ -97,16 +142,24 @@ The bigger the project, the more complex the **material coordination** becomes:
 </tr>
 </tbody>
 </table>
+
 A clear [**cable logistics strategy**](https://logistik-heute.de/galerien/mammutprojekt-kabellogistik-wie-kommen-tausende-tonnen-hgue-erdkabel-fuer-die-energiewende-zum-einsatzort-40875.html) is the key to avoiding material shortages and costly downtime. This helps maintain control – even for projects involving dozens of kilometers of **wind farm cabling**.
+
 Anyone who integrates **packaging, storage and labeling** early into the planning process ensures that the **wind farm cables** arrive exactly where they&#8217;re needed – with no time lost and no disruption to the construction flow.
+
+<AnimatedImage src="/uploads/2025/08/NA2XSF2Y_3x1x300_RM-25_12-20kV-0.webp" alt="NA2XSF2Y Cable" width={1920} height={1080} />
+
 ## Challenge 3: Last-minute project changes
+
 Hardly any **wind farm project** goes exactly to plan. Construction site conditions, supply bottlenecks, or new requirements from the [grid operator](https://windpark-altdorferwald.de/wissenswertes-windenergie/wie-wird-die-erzeugte-energie-ins-stromnetz-eingespeist/) often lead to spontaneous adjustments – and this is where the true flexibility of **cable logistics** is revealed.
+
 **Typical scenarios:**
 - A cable route has to be changed due to geological conditions.
 - **Cable types** or **conductor cross-sections** change after a new grid calculation.
 - The **delivery location** changes at short notice because sections progress faster or slower than expected.
 
 In such cases, it’s crucial that the supplier has **its own stock** and a **quick response time**. Only then can changes to **cable lengths** or additional **earthing components** be provided promptly, without delaying the project.
+
 An experienced partner can make all the difference:
 - **Rapid re-delivery** from central stock within Germany
 - **Flexible redirection** of deliveries in case of planning changes
@@ -114,35 +167,60 @@ An experienced partner can make all the difference:
 - **Documented traceability** to keep all changes transparent
 
 Short-term changes aren’t the exception – they’re part of everyday life in **wind farm construction**. What matters is being prepared. A well-designed [**supply chain**](https://bwo-offshorewind.de/pressemitteilung-roadmap-ist-wichtiger-schritt-fuer-resiliente-lieferketten/), clear communication, and agile warehousing structures ensure the project stays on schedule – and the wind farm connects to the grid on time.
+
 Avoid delays or issues during your wind power project by understanding early on why NABU may file objections to certain sites:
+
 <VisualLinkPreview 
-url="https://www.nabu.de/umwelt-und-ressourcen/energie/erneuerbare-energien-energiewende/windenergie/26913.html"
-title="Wann klagt der NABU gegen Windkraftprojekte?"
-summary="45 Klagen wurden wegen Fehlplanungen bei Windenergie zwischen 2010 und 2019 vom NABU auf den Weg gebracht. Nicht weil der Windenergieausbau aufgehalten werden soll, sondern weil immer wieder Vorhaben und Planungen eklatant gegen Naturschutzrecht verstoßen."
-image="https://www.nabu.de/imperia/md/nabu/images/umwelt/energie/energietraeger/windkraft/161125-nabu-windrad-allgaeu-heidrun-burchard.jpeg"
+  url="
+<VisualLinkPreview 
+  url="https://www.nabu.de/umwelt-und-ressourcen/energie/erneuerbare-energien-energiewende/windenergie/26913.html"
+  title="Wann klagt der NABU gegen Windkraftprojekte?"
+  summary="45 Klagen wurden wegen Fehlplanungen bei Windenergie zwischen 2010 und 2019 vom NABU auf den Weg gebracht. Nicht weil der Windenergieausbau aufgehalten werden soll, sondern weil immer wieder Vorhaben und Planungen eklatant gegen Naturschutzrecht verstoßen."
+  image="https://www.nabu.de/imperia/md/nabu/images/umwelt/energie/energietraeger/windkraft/161125-nabu-windrad-allgaeu-heidrun-burchard.jpeg"
 />
+"
+  title="Wann klagt der NABU gegen Windkraftprojekte?"
+  summary="45 Klagen wurden wegen Fehlplanungen bei Windenergie zwischen 2010 und 2019 vom NABU auf den Weg gebracht. Nicht weil der Windenergieausbau aufgehalten werden soll, sondern weil immer wieder Vorhaben und Planungen eklatant gegen Naturschutzrecht verstoßen."
+  image="https://www.nabu.de/imperia/md/nabu/images/umwelt/energie/energietraeger/windkraft/161125-nabu-windrad-allgaeu-heidrun-burchard.jpeg"
+/>
+
 ## Quality and sustainability as success factors
+
 In addition to time and logistics, [**cable quality**](https://www.windkraft-journal.de/2025/07/14/planungsempfehlung-bei-der-verkabelung-von-windparks-durch-wind-turbine-com/) plays a decisive role in the long-term performance of a **wind farm**. After all, the installed **[medium-voltage](/de/stromkabel/mittelspannungskabel/) and [high-voltage cables](/de/stromkabel/hochspannungskabel/)** are expected to transmit energy reliably for decades – even under extreme weather and changing load conditions.
+
 A high-quality **cable system for wind power** stands out due to several factors:
-- **Material quality:** XLPE-insulated cables like [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) or [**N2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/n2xsf2y-2/) provide high dielectric strength and excellent long-term protection.
+- **Material quality:** XLPE-insulated cables like [**NA2XS(F)2Y**](/en/products/medium-voltage-cables/na2xsf2y/) or [**N2XS(F)2Y**](/en/products/medium-voltage-cables/n2xsf2y/) provide high dielectric strength and excellent long-term protection.
 - **[Standards compliance](https://www.zvei.org/fileadmin/user_upload/Presse_und_Medien/Publikationen/2017/September/ZVEI_Leitfaden_Kabel_und_Leitungen_in_Windkraftanlagen/ZVEI-Leitfaden-Kabel-und-Leitungen-in-Windkraftanlagen-September-2017.pdf):** All components used should meet key standards such as **DIN VDE 0276**, **VDE 0298**, or **IEC 60502**.
 - **Ease of installation:** Cable design must allow for efficient and safe installation – even under difficult ground conditions.
 - **Environmental aspects:** Recyclable materials and the [reuse of drums or conductor materials](/de/recycling-von-kabeltrommeln-nachhaltigkeit-im-windkraftprojekt/) help reduce ecological footprint.
 
 More and more project developers are placing value on **sustainable cable systems** that combine energy efficiency with durability. This applies not only to the **material selection**, but also to **supply chains**: short transport routes, local storage near the project, and optimized packaging concepts reduce emissions and logistics effort.
+
 The combination of **technical quality**, **ecological responsibility**, and **efficient logistics** makes modern **wind farm cabling** a central success factor for grid expansion. Anyone who invests in smart solutions here builds the foundation for stable and sustainable energy flow – now and in the future.
+
 [Find out here which cables are suitable for your wind farm project and what makes the difference between low and high voltage options.](/de/welche-kabel-fuer-windkraft-unterschiede-von-nieder-bis-hoechstspannung-erklaert/)
+
+<AnimatedImage src="/uploads/2025/01/green-alternative-eco-friendly-energy-windmill-tu-2023-11-27-05-10-51-utc-scaled.webp" alt="Wind farm landscape" width={2560} height={1707} />
+
 ## Conclusion: Successfully connected to the grid
+
 Cabling is the backbone of any **wind farm** – and at the same time one of the most sensitive parts of the project. Tight schedules, complex logistics and last-minute changes aren’t the exception, they’re the norm. Those who identify and address these challenges early avoid standstills, cost overruns and missed deadlines.
+
 Successful **wind farm cable projects** rely on three core principles:
-- **Structured planning** – clear workflows, coordinated delivery schedules and defined responsibilities.
-- **Flexibility** – in-house stock and short response times when changes occur.
-- **Quality** – durable, standards-compliant cable systems and sustainable logistics processes.
+1. **Structured planning** – clear workflows, coordinated delivery schedules and defined responsibilities.
+2. **Flexibility** – in-house stock and short response times when changes occur.
+3. **Quality** – durable, standards-compliant cable systems and sustainable logistics processes.
 
 With the right mix of experience, organization and technical know-how, even complex **wind farm cabling** can be implemented efficiently. This keeps construction on track – and ensures the wind farm delivers power exactly when it’s needed.
+
 ### KLZ – your partner for successful wind farm cabling
+
 Whether you need [**medium voltage**](/de/stromkabel/mittelspannungskabel/), **underground cables**, or complete **grid connection solutions** – we don’t just provide the right materials, but the kind of experience that actually moves your project forward. For years, we’ve been supporting **wind power projects** throughout Germany and the Netherlands – from technical consulting and **material selection** to **on-time delivery**.
+
 Our advantage? **Real-world experience**: We know how tight construction timelines in wind projects are, which cable systems have proven themselves, and what really matters in logistics. Thanks to our **central storage facilities in Germany**, we respond quickly to changes and keep supply chains stable – even when your project gets dynamic.
+
 With our network, market knowledge, and passion for renewable energy, we ensure your **wind power project** connects to the grid on time – and without the drama.
+
 ➡️ **Planning a new wind farm or need help choosing the right cables?** Then talk to us – we deliver the **cables, solutions, and expertise** that make your project a success.
-[Get in touch now](/de/kontakt/)
+
+[Get in touch now](/en/contact/)

data/blog/en/from-smart-to-sustainable-this-is-what-the-energy-industry-will-look-like-in-the-near-future.mdx

@@ -1,8 +1,5 @@
 ---
-
-title: >-
-From smart to sustainable: this is what the energy industry will look like in
-the near future
+title: 'From smart to sustainable: this is what the energy industry will look like in the near future'
 date: '2025-03-24T11:00:44'
 featuredImage: /uploads/2025/02/image_fx_-7.webp
 locale: en

data/blog/en/green-energy-starts-underground-and-with-a-plan.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: Green energy starts underground – and with a plan
 date: '2025-05-22T09:20:07'
 featuredImage: /uploads/2025/02/image_fx_-9.webp
@@ -48,8 +47,15 @@ Integrating wind farms into the power grid requires a systemic approach. Sound p
 Professional planning not only ensures security of supply, but also reduces operating costs in the long term and enables flexible responses to grid requirements.
 You can find more information here on how wind energy basically works:
 
+<VisualLinkPreview 
+  url="
 <VisualLinkPreview 
   url="https://www.e-werk-mittelbaden.de/wie-funktioniert-windenergie"
+  title="Wie funktioniert Windenergie? - Einfach erklärt | E-Werk Mittelbaden"
+  summary="Erfahren Sie, wie Windenergie funktioniert und wie sie zur nachhaltigen Energieversorgung beiträgt. Jetzt informieren!"
+  image="https://www.e-werk-mittelbaden.de/sites/default/files/media_image/2024-12/DJI_20231105012629_0029_D-HDR.jpg"
+/>
+"
   title="Wie funktioniert Windenergie?"
   summary="- Einfach erklärt | E-Werk MittelbadenErfahren Sie, wie Windenergie funktioniert und wie sie zur nachhaltigen Energieversorgung beiträgt. Jetzt informieren!"
   image="https://www.e-werk-mittelbaden.de/sites/default/files/media_image/2024-12/DJI_20231105012629_0029_D-HDR.jpg"
@@ -71,7 +77,14 @@ This is not only about **ecological aspects** – a planned dismantling also mak
 Overall, it becomes clear: **Sustainability does not end at the grid connection.** It covers the **entire life cycle** – right up to the **last recycled cable**. Those who think about **infrastructure holistically** think it through **to the end**.
 In the following article, you can find out how, for example, wind turbines are recycled:
 <VisualLinkPreview 
-url="https://www.enbw.com/unternehmen/themen/windkraft/windrad-recycling.html"
+url="
+<VisualLinkPreview 
+  url="https://www.enbw.com/unternehmen/themen/windkraft/windrad-recycling.html"
+  title="Recycling von Windrädern | EnBW"
+  summary="Wie funktioniert das Recycling von Windrädern? Erfahren Sie mehr über Herausforderungen und die neuesten Methoden."
+  image="https://www.enbw.com/media/image-proxy/1600x914,q70,focus60x67,zoom1.45/https://www.enbw.com/media/presse/images/newsroom/windenergie/rueckbau-windpark-hemme-3_1743678993586.jpg"
+/>
+"
 title="Recycling von Windrädern | EnBW"
 summary="Wie funktioniert das Recycling von Windrädern? Erfahren Sie mehr über Herausforderungen und die neuesten Methoden."
 image="https://www.enbw.com/media/image-proxy/1600x914,q70,focus60x67,zoom1.45/https://www.enbw.com/media/presse/images/newsroom/windenergie/rueckbau-windpark-hemme-3_1743678993586.jpg"

data/blog/en/how-the-cable-industry-is-driving-sustainability-and-renewable-energies-forward.mdx

@@ -1,8 +1,5 @@
 ---
-
-title: >-
-How the cable industry is driving sustainability and renewable energies
-forward
+title: 'How the cable industry is driving sustainability and renewable energies forward'
 date: '2025-04-14T10:00:49'
 featuredImage: /uploads/2025/02/image_fx_-2.webp
 locale: en
@@ -49,7 +46,14 @@ Cables are no side note – they are the nervous system of the energy transition
 Anyone thinking about **renewable energy** today should also consider what keeps that energy moving: **the cable industry.** It doesn’t just deliver copper and insulation – it provides solutions that make our **green future** possible in the first place.
 Find out how you can contribute to a sustainable energy supply in the following article.
 <VisualLinkPreview 
-url="https://money-for-future.com/nachhaltige-energieversorgung-erneuerbare-energie"
+url="
+<VisualLinkPreview 
+  url="https://money-for-future.com/nachhaltige-energieversorgung-erneuerbare-energie"
+  title="Nachhaltige Energieversor­gung und erneuerbare Energie erklärt"
+  summary="Nachhaltige Energieversor­gung. Was kann ich tun, um die Energiewende voranzubringen? 7 Schritte zu einer nachhaltigen Lebensweise."
+  image="https://money-for-future.com/wp-content/uploads/2022/01/Image-153-1.jpg"
+/>
+"
 title="Nachhaltige Energieversor­gung und erneuerbare Energie erklärt"
 summary="Nachhaltige Energieversor­gung. Was kann ich tun, um die Energiewende voranzubringen? 7 Schritte zu einer nachhaltigen Lebensweise."
 image="https://money-for-future.com/wp-content/uploads/2022/01/Image-153-1.jpg"

data/blog/en/how-the-right-cables-quietly-power-the-green-energy-revolution.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: How the right cables quietly power the green energy revolution
 date: '2025-01-27T11:30:17'
-featuredImage: >-
-/uploads/2025/01/technicians-inspecting-wind-turbines-in-a-green-en-2024-12-09-01-25-20-utc-scaled.webp
+featuredImage: '/uploads/2025/01/technicians-inspecting-wind-turbines-in-a-green-en-2024-12-09-01-25-20-utc-scaled.webp'
 locale: en
 category: Kabel Technologie
 ---

data/blog/en/how-to-choose-the-right-cable-for-your-next-project.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: How to choose the right cable for your next project
 date: '2019-09-17T17:40:09'
 featuredImage: /uploads/2024/11/low-voltage-category.webp

data/blog/en/is-wind-energy-really-enough-a-deeper-dive-behind-the-headlines.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: Is wind energy really enough? A deeper dive behind the headlines
 date: '2025-02-03T11:30:36'
-featuredImage: >-
-/uploads/2025/01/offshore-wind-power-and-energy-farm-with-many-wind-2023-11-27-04-51-29-utc-scaled.webp
+featuredImage: '/uploads/2025/01/offshore-wind-power-and-energy-farm-with-many-wind-2023-11-27-04-51-29-utc-scaled.webp'
 locale: en
 category: Kabel Technologie
 ---

data/blog/en/klz-continues-to-grow-new-strength-in-financial-sales.mdx

@@ -0,0 +1,100 @@
+---
+title: KLZ continues to grow – new strength in Financial & Sales
+date: '2025-10-06T13:26:31'
+featuredImage: /uploads/2025/10/1759325528650.webp
+locale: en
+category: Cable Technology
+---
+# KLZ continues to grow – new strength in Financial & Sales
+### **Growth needs structure**
+**Growth sounds good –** more projects, more customers, more revenue.<br />But real, sustainable growth needs more than just speed: it needs **transparency, planning, and control**.
+To ensure that ambitious goals don't turn into a blind flight, we have decided to specifically strengthen our team. Because the larger the projects become, the more important the ability to recognize developments early and steer them specifically becomes.
+<table>
+<thead>
+<tr>
+<th>**Why we are expanding our controlling**</th>
+<th>**What we want to achieve with it**</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>More projects at home and abroad</td>
+<td>Clear figures and reliable forecasts</td>
+</tr>
+<tr>
+<td>Increasing requirements in sales</td>
+<td>Better overview of trends and margins</td>
+</tr>
+<tr>
+<td>More complex processes</td>
+<td>Faster, well-founded decisions</td>
+</tr>
+<tr>
+<td>Sustainable growth</td>
+<td>Stability instead of coincidence</td>
+</tr>
+</tbody>
+</table>
+**In short:** We don't just want to grow – we want to understand <em>how</em> we grow.<br />That's why we will rely even more on **qualitative controlling** in the future and are happy about support that makes exactly that possible.
+### **New strength in the team**
+With [**Julia Havasi**](https://www.linkedin.com/in/julia-havasi-18556b233/) we have found exactly the reinforcement we were looking for: analytically strong, structured in thinking, and with a good sense for the dynamics between numbers and people.
+As **Senior Financial & Sales Controller**, Julia will be responsible for our financial and sales controlling in the future. Her goal: **more clarity, more foresight, more substance** in every decision.
+<table>
+<thead>
+<tr>
+<th>**Area of responsibility**</th>
+<th>**Goal**</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>**Financial Controlling**</td>
+<td>Clean figures, clear structures, and comprehensible reports</td>
+</tr>
+<tr>
+<td>**Sales Controlling**</td>
+<td>Analyze sales figures, identify potential, derive trends</td>
+</tr>
+<tr>
+<td>**Forecasts & Analyses**</td>
+<td>Early assessment of market movements and investment opportunities</td>
+</tr>
+<tr>
+<td>**Reporting & Communication**</td>
+<td>Prepare complex data so that everyone understands it – quickly and precisely</td>
+</tr>
+</tbody>
+</table>
+Julia will thus play a central role in the further development of KLZ – as an interface between **management, sales, and strategy**.<br />Or, to put it more casually: she ensures that we not only know **where we stand**, but also **where we are going**.
+### **Experience that connects**
+**Understanding of numbers meets practical experience.**<br />With over 13 years of experience in controlling and sales, [**Julia Havasi**](https://www.linkedin.com/in/julia-havasi-18556b233/) brings the ideal combination of analytical precision and entrepreneurial thinking.
+**Her professional path:**<br />After her training as a **wholesale and foreign trade clerk**, she gained early insights into business processes and developed a sense for clear processes.<br />At **PETER HAHN GmbH**, she rose step by step – from international sales assistance to **Marketing Controlling Manager** in the Sales & Marketing area. There she was responsible for the analysis of key figures, budget planning, and market observation and learned to use numbers as a basis for strategic decisions.<br />She then moved to **GOLDNER GmbH (Madeleine)**, where she further deepened the topics of planning, forecasting, and reporting as a **Specialist Planning & Analytics**. Her work there was characterized by structured processes and close coordination with management and sales.
+**Her strengths:**
+- **Analytical thinking:** She recognizes connections quickly and derives concrete recommendations for action from them.
+- **Structure and accuracy:** She ensures clean processes and comprehensible data flows.
+- **Strategic sense:** She understands how operational figures influence long-term developments.
+- **Clear communication:** She brings complex content to the point in an understandable way – without numerical chaos.
+- **Practical orientation:** She thinks solution-oriented and always with an eye on the benefit for the company.
+
+With this mix of experience, structure, and communication strength, Julia is exactly the right person to accompany KLZ on its further growth towards the future.
+### **Numbers with a view to the future**
+Numbers are not an end in themselves for us – they are the foundation of every good decision.<br />With Julia Havasi, the topic of controlling at KLZ gets a new depth: away from a pure look in the rearview mirror, towards a **forward-looking analysis** that makes opportunities and risks visible early on.
+Her focus is on **putting numbers into context**:<br />How are costs and margins developing in sales? What trends are emerging in the market? And where is it worth investing specifically instead of just reacting?
+Through her experience in the area of **Planning & Analytics**, Julia manages the balancing act between detail depth and overview. She ensures that information is prepared **clearly, understandably, and relevant to decisions** – a basis on which strategies can be reliably planned.
+For us, this means:
+- We make decisions based on reliable data, not from the gut.
+- We recognize market movements before they become a risk.
+- We steer our growth more specifically and efficiently.
+
+In this way, controlling does not simply become control – but **orientation** for the future.
+### **Grow stably, act strategically**
+Growth is not a self-runner – it needs direction, control, and clear goals.<br />At KLZ, the focus is therefore not on fast "more", but on **sustainable "better"**. We want to understand where growth arises, why it arises, and how we can promote it specifically.
+This is exactly where Julia's experience comes into play.<br />With her structured view of numbers and processes, she creates transparency in areas that often remain invisible in day-to-day business. She provides the basis for setting priorities correctly, using resources specifically, and recognizing opportunities before they pass us by.
+In this way, controlling at KLZ is not understood as a brake, but as a **strategic tool** that enables growth – stable, comprehensible, and long-term successful.
+Because those who understand their numbers not only steer better but also move more safely in a market that is constantly changing.
+### **Looking ahead**
+With the reinforcement by **Julia Havasi**, KLZ is taking the next logical step: away from a purely operational view of numbers – towards a **strategic steering** that makes growth controlled, measurable, and sustainable.
+Julia's experience in financial & sales controlling creates the basis for recognizing developments early and making decisions with clarity. She ensures that we ask the right questions before we act:<br />Where does growth actually arise? Which areas provide long-term stability? And where is there a need for adjustment before it becomes a problem?
+Especially in an industry that is constantly changing, this look ahead is crucial.<br />Because sustainable growth for us does not mean constantly getting bigger, but **being better positioned** – with clear structures, reliable data, and an understanding of the dynamics of our markets.
+With Julia, we gain a colleague who shares this claim. She brings structure to complex processes, translates numbers into insights, and thus creates orientation – not only for management but for the entire team.
+In this way, KLZ will remain what makes us strong in the future: **fast, reliable, and always one step ahead.**

data/blog/en/klz-in-the-directory-of-wind-energy-2025.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: KLZ in the Directory of Wind Energy 2025
 date: '2025-01-01T10:54:11'
 featuredImage: /uploads/2025/01/klz-directory-2-scaled.webp
@@ -11,10 +10,24 @@ category: Kabel Technologie
 The <em>Directory of Wind Energy 2025</em> is the ultimate reference guide for the wind energy industry. With over 200 pages of insights, company listings, and industry contacts, it’s the resource planners, developers, and decision-makers use to connect with trusted suppliers and service providers. Covering everything from turbine manufacturers to certification companies, it’s a compact treasure trove of knowledge, both in print and online.
 Now, KLZ is part of this trusted network, making it even easier for industry professionals to find us.
 <VisualLinkPreview 
-url="https://www.erneuerbareenergien.de/"
+url="
+<VisualLinkPreview 
+  url="https://www.erneuerbareenergien.de/"
+  title="Erneuerbare Energien - Das Magazin für die Energiewende mit Wind-, Solar- und Bioenergie"
+  summary="Heft 01-2025"
+  image="https://www.erneuerbareenergien.de/sites/default/files/styles/teaser_standard__xs/public/aurora/2024/12/414535.jpeg?itok=WJmtgX-q"
+/>
+"
 title="Erneuerbare Energien - Das Magazin für die Energiewende mit Wind-, Solar- und Bioenergie"
 summary="Heft 01-2025"
-image="https://www.erneuerbareenergien.de/sites/default/files/styles/teaser_standard__xs/public/aurora/2024/12/414535.jpeg?itok=WJmtgX-q"
+image="
+<VisualLinkPreview 
+  url="https://www.erneuerbareenergien.de/"
+  title="Erneuerbare Energien - Das Magazin für die Energiewende mit Wind-, Solar- und Bioenergie"
+  summary="Heft 01-2025"
+  image="https://www.erneuerbareenergien.de/sites/default/files/styles/teaser_standard__xs/public/aurora/2024/12/414535.jpeg?itok=WJmtgX-q"
+/>
+sites/default/files/styles/teaser_standard__xs/public/aurora/2024/12/414535.jpeg?itok=WJmtgX-q"
 />
 ### Why we’re included
 Our medium voltage cables, like the **NA2XS(F)2Y**, have become essential in wind parks throughout Germany and the Netherlands. These cables play a critical role in transmitting electricity from wind turbines to substations, ensuring safe and reliable energy flow under the most demanding conditions.

data/blog/en/na2xsf2y-three-conductor-medium-voltage-cable-available.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: Shortage of NA2XSF2Y? We have the three-core medium-voltage cable
 date: '2025-08-14T08:46:52'
 featuredImage: /uploads/2025/08/NA2XSF2X_3x1x300_RM-25_12-20kV-3.webp
@@ -14,7 +13,7 @@ Medium-voltage cables such as the **[NA2XS(F)2Y](/products/power-cables/medium-v
 ### A bottleneck with consequences
 What used to be readily available is now hard to obtain. The cause lies in a mix of supply chain issues, scarce raw materials, and an overloaded production market. Many suppliers are simply sold out or can only deliver with months of delay – with drastic impacts on construction timelines and project costs.
 ### Where reserves still exist
-Despite the tense situation, there are still occasional sources with immediate availability – thanks to strategic stockpiling and streamlined logistics. We at [KLZ](/) are among the suppliers who can deliver the sought-after three-core [medium-voltage cable](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/). Anyone who can still access the **[NA2XSF2Y](/products/power-cables/medium-voltage-cables/na2xsf2y/) 3x1x** or the **NA2XS(F)2Y 3x1x300 RM/25 12/20kV** today gains a crucial time advantage – and prevents delays before they arise.
+Despite the tense situation, there are still occasional sources with immediate availability – thanks to strategic stockpiling and streamlined logistics. We at [KLZ](/) are among the suppliers who can deliver the sought-after three-core [medium-voltage cable](/en/products/medium-voltage-cables/na2xsf2y/). Anyone who can still access the **[NA2XSF2Y](/products/power-cables/medium-voltage-cables/na2xsf2y/) 3x1x** or the **NA2XS(F)2Y 3x1x300 RM/25 12/20kV** today gains a crucial time advantage – and prevents delays before they arise.
 ## What is the NA2XSF2Y anyway?
 ### Structure and materials
 The **NA2XSF2Y** is a single-core medium-voltage cable with the following properties:
@@ -42,12 +41,14 @@ Especially in direct burial, moisture is a constant risk. The integrated longitu
 
 That’s why the **NA2XSF2Y 3x1x** is the safe choice for long-lasting underground energy infrastructure.
 More info on overhead lines vs. underground cables can be found here:
+
 <VisualLinkPreview 
-url="https://www.hochspannungsblog.at/wissenswertes/netzaufbau/vergleich-freileitung-erdkabel"
-title="Freileitung und Erdkabel sind „Stand der Technik“"
-summary="Freileitung oder Erdkabel? Wir erklären Ihnen die Unterschiede und Möglichkeiten, aber auch warum was möglich ist und warum was nicht."
-image="https://www.hochspannungsblog.at/201210-netzbau-110kv-wegscheid-mast-kabelanschluss-1723.jpg?ch=dhsowxyq&amp;:hp=9;1;de"
+  url="https://www.hochspannungsblog.at/wissenswertes/netzaufbau/vergleich-freileitung-erdkabel"
+  title="Freileitung und Erdkabel sind „Stand der Technik“"
+  summary="Freileitung oder Erdkabel? Wir erklären Ihnen die Unterschiede und Möglichkeiten, aber auch warum was möglich ist und warum was nicht."
+  image="https://www.hochspannungsblog.at/201210-netzbau-110kv-wegscheid-mast-kabelanschluss-1723.jpg?ch=dhsowxyq&:hp=9;1;de"
 />
+
 ## Typical applications for the NA2XSF2Y
 ### Grid connection in wind power plants
 In onshore wind farms, the three-core medium-voltage cable **[NA2XSF2Y](/products/power-cables/medium-voltage-cables/na2xsf2y/) 3x1x** plays a crucial role: it connects wind turbines to transformer stations or directly to the [medium-voltage grid](https://www.stromerzeuger-lexikon.de/mittelspannungsnetz/). Its robust design and longitudinal water tightness make it ideal for:
@@ -88,7 +89,7 @@ Given the precarious supply situation, we recommend:
 - **Include project buffers** – in both schedule and budget
 - **Availability over price** – securing types that can be delivered quickly often keeps the project moving
 
-Especially if the use of **[NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) 3x1x300 RM/25 12/20kV** is planned, it’s worth checking current stock availability – before options run out.
+Especially if the use of **[NA2XS(F)2Y](/en/products/medium-voltage-cables/na2xsf2y/) 3x1x300 RM/25 12/20kV** is planned, it’s worth checking current stock availability – before options run out.
 ## How we deliver when others stall
 ### Strategic stockpiling instead of reacting to shortages
 While many only reorder once the market is already sold out, we focus on proactive stockpiling. We secured key types such as the popular three-core medium-voltage cable **[NA2XSF2Y](/products/power-cables/medium-voltage-cables/na2xsf2y/) 3x1x** in relevant quantities early on – because we know how critical these are for grid expansion.
@@ -108,9 +109,9 @@ Our logistics processes are designed for speed and flexibility. With our warehou
 
 We don’t just deliver the cables you need, but the complete package. From professional advice on the right cable selection to delivery directly to the construction site – we support your entire project. Reliably, expertly, and promptly.
 ### Redundancy instead of risk
-We rely on multiple supply chains and have deliberately built up warehouse capacities. This ensures that even during industry-wide shortages, we can still deliver – without improvisation. Even types such as the sought-after three-core cable **[NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) 3x1x300 RM/25 12/20kV** are available from us.
+We rely on multiple supply chains and have deliberately built up warehouse capacities. This ensures that even during industry-wide shortages, we can still deliver – without improvisation. Even types such as the sought-after three-core cable **[NA2XS(F)2Y](/en/products/medium-voltage-cables/na2xsf2y/) 3x1x300 RM/25 12/20kV** are available from us.
 **No excuses – we deliver what others only offer.**
-<!-- Call to Action -->
+
 **We deliver the cables you need!**<br />
 [Contact us for a specific request.](/contact/)
 ## FAQs about the NA2XSF2Y

data/blog/en/recycling-of-cable-drums-sustainability-in-wind-power-projects.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 'Recycling of cable drums: sustainability in wind power projects'
 date: '2025-03-03T09:30:09'
 featuredImage: /uploads/2025/02/5.webp

data/blog/en/securing-the-future-with-h1z2z2-k-our-solar-cable-for-intersolar-2025.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 'Securing the future with H1Z2Z2-K: Our solar cable for Intersolar 2025'
 date: '2025-05-01T09:40:37'
 featuredImage: /uploads/2025/04/inter-solar.webp
@@ -9,7 +8,14 @@ category: Kabel Technologie
 # Securing the future with H1Z2Z2-K: Our solar cable for Intersolar 2025
 Around [Intersolar Europe](https://www.intersolar.de/start), the topic of photovoltaics is once again moving into the spotlight. A great reason to take a closer look at a special solar cable developed specifically for use in PV systems – robust, weather-resistant, and compliant with current standards.
 <VisualLinkPreview 
-url="https://youtu.be/YbtdyvQFoVM"
+url="
+<VisualLinkPreview 
+  url="https://youtu.be/YbtdyvQFoVM"
+  title="Intersolar Europe 2025 | Save The Date | May 7–9, 2025"
+  summary="As the world’s leading exhibition for the solar industry, Intersolar Europe demonstrates the enormous vitality of the solar market. For more than 30 years, i…"
+  image="https://i.ytimg.com/vi/YbtdyvQFoVM/maxresdefault.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGEQgSyhyMA8=&rs=AOn4CLBx90qdBxgYcyMttgdOGs3-m0udZQ"
+/>
+"
 title="Intersolar Europe 2025 | Save The Date | May 7–9, 2025"
 summary="As the world’s leading exhibition for the solar industry, Intersolar Europe demonstrates the enormous vitality of the solar market. For more than 30 years, i…"
 image="https://i.ytimg.com/vi/YbtdyvQFoVM/maxresdefault.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGEQgSyhyMA8=&amp;rs=AOn4CLBx90qdBxgYcyMttgdOGs3-m0udZQ"
@@ -135,7 +141,14 @@ What really stands out is its versatility: whether on rooftops, in underground i
 Further information, technical details, and ordering options can be found on the product page: 👉 [To the H1Z2Z2-K at KLZ](/products/solar-cables/h1z2z2-k/)
 All the key details about Intersolar Europe can be found here:
 <VisualLinkPreview 
-url="https://www.intersolar.de/messe-kompakt?ref=m5f53a666f3a2cb2fee160554-s65eec4739108db093b003a02-t1746004197-cf3c592e7"
+url="
+<VisualLinkPreview 
+  url="https://www.intersolar.de/messe-kompakt?ref=m5f53a666f3a2cb2fee160554-s65eec4739108db093b003a02-t1746004197-cf3c592e7"
+  title="Intersolar Europe at a Glance"
+  summary="Intersolar Europe | Exhibition Quick Facts | Date, Venue, Opening Hours, Exhibitors"
+  image="https://www.intersolar.de/media/image/6311c9ee98bbc414b66305e2/750"
+/>
+"
 title="Intersolar Europe at a Glance"
 summary="Intersolar Europe | Exhibition Quick Facts | Date, Venue, Opening Hours, Exhibitors"
 image="https://www.intersolar.de/media/image/6311c9ee98bbc414b66305e2/750"

data/blog/en/the-art-of-cable-logistics-moving-the-backbone-of-modern-energy-networks.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: 'The art of cable logistics: moving the backbone of modern energy networks'
 date: '2025-01-14T12:56:55'
-featuredImage: >-
-/uploads/2025/01/transportation-and-logistics-trucking-2023-11-27-04-54-40-utc-scaled.webp
+featuredImage: '/uploads/2025/01/transportation-and-logistics-trucking-2023-11-27-04-54-40-utc-scaled.webp'
 locale: en
 category: Kabel Technologie
 ---

data/blog/en/the-best-underground-cables-for-wind-power-and-solar-order-from-us-now.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: The best underground cables for wind power and solar – order from us now
 date: '2025-05-26T10:18:16'
 featuredImage: /uploads/2025/04/image_fx_-2025-02-20T191245.537.webp

data/blog/en/the-perfect-cable-inquiry-how-to-save-yourself-unnecessary-queries.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: 'The perfect cable inquiry: How to save yourself unnecessary queries'
 date: '2025-02-17T08:15:52'
 featuredImage: /uploads/2025/02/1.webp

data/blog/en/this-what-you-need-to-know-about-renewable-energies-in-2025.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: This what you need to know about renewable energies in 2025
 date: '2024-11-09T12:12:37'
-featuredImage: >-
-/uploads/2024/11/aerial-view-of-electricity-station-surrounded-with-2023-11-27-05-33-40-utc-scaled.jpg
+featuredImage: '/uploads/2024/11/aerial-view-of-electricity-station-surrounded-with-2023-11-27-05-33-40-utc-scaled.jpg'
 locale: en
 category: Kabel Technologie
 ---

data/blog/en/welcome-to-the-future-of-klz-our-new-website-is-live.mdx

@@ -1,12 +1,15 @@
 ---
-
 title: 'Welcome to the future of KLZ: our new website is live!'
 date: '2024-12-30T15:39:16'
 featuredImage: /uploads/2024/12/mockup_03-copy-scaled.webp
 locale: en
 category: Kabel Technologie
 ---
-# Welcome to the future of KLZ: our new website is live!
+
+<HighlightBox title="The day has arrived—our brand-new KLZ website is officially live! 🎉" color="primary">
+It’s faster, smarter, and packed with features to make your experience seamless and efficient. Designed to meet the needs of our customers and reflect the future of our industry, this isn’t just a new look—it’s a whole new level of service. Let’s walk you through the highlights.
+</HighlightBox>
+
 ### The new KLZ logo: modern, bold, and future-focused
 One of the most striking changes in our rebranding is the updated KLZ logo, which perfectly captures the spirit of innovation and progress that drives our work. Let’s break it down:
 - **Streamlined Typography**: The new logo features a sleek and modern font that’s clean, bold, and easy to recognize, representing our straightforward and reliable approach to business.
@@ -16,6 +19,9 @@ One of the most striking changes in our rebranding is the updated KLZ logo, whic
 And there’s one key visual change you’ve likely noticed: **“**KLZ (Vertriebs GmbH)” is now simply “KLZ Cables” in our branding. This concise, contemporary presentation makes it clear who we are and what we do at a glance.
 Of course, while the visual branding now proudly states “KLZ Cables,” our legal name, **KLZ Vertriebs GmbH**, remains unchanged. This update is all about making it easier for customers and partners to connect with our mission and services instantly.
 This new logo and branding aren’t just aesthetic changes—they represent a stronger, clearer KLZ as we step into 2025 and beyond. It’s a design that bridges where we’ve come from with where we’re going: a future powered by innovation, reliability, and sustainability.
+
+<AnimatedImage src="/uploads/2024/11/white_logo_transparent_background.svg" alt="New KLZ Logo" width={541} height={540} className="max-w-xs mx-auto bg-primary p-8" />
+
 ### A fresh, modern design for a forward-thinking industry
 Our new website is a reflection of KLZ’s mission: connecting people and power through innovative, sustainable solutions.
 - **Bold **and** clean visuals** make navigation effortless, whether you’re exploring our catalog or learning about our services.
@@ -23,6 +29,7 @@ Our new website is a reflection of KLZ’s mission: connecting people and power
 - The refreshed branding, including our sleek new logo, represents our evolution as a leader in energy solutions.
 
 Every element has been designed with you in mind, making it easier than ever to find what you’re looking for.
+
 ### Explore our comprehensive cable catalog
 Our all-new **Cable Catalog** is the centerpiece of the site, offering detailed insights into every cable we provide:
 - **NA2XS(F)2Y**, perfect for high-voltage applications.
@@ -30,23 +37,37 @@ Our all-new **Cable Catalog** is the centerpiece of the site, offering detailed
 - A wide range of other cables tailored for wind and solar energy projects.
 
 Each product features clear specifications, applications, and benefits, helping you make informed decisions quickly.
+
+<AnimatedImage src="/uploads/2024/12/NA2XSY-scaled.webp" alt="Cable Catalog Preview" width={2560} height={533} />
+
 ### The team behind the transformation
 Bringing a new website to life is no small feat—it takes vision, dedication, and a team that knows how to deliver. At KLZ, this redesign was more than a project; it was a collaborative effort to ensure our digital presence reflects the reliability, innovation, and expertise that define us.
 Special recognition goes to **Michael** and **Klaus**, who spearheaded this initiative with their forward-thinking approach. They understood the importance of not just improving functionality but also creating an experience that truly connects with our customers and partners. Their hands-on involvement ensured every detail aligned with KLZ’s values and mission.
 Of course, transforming vision into reality required a creative expert, and that’s where **Marc Mintel **from** Cable Creations** played a key role. From the sleek design to the high-quality renders that bring our products and services to life, Marc’s skill and attention to detail shine through every page.
 This collaboration between our internal team and external partners is a testament to what we value most: partnerships, precision, and the pursuit of excellence. Together, we’ve created a platform that serves not only as a resource but also as a reflection of KLZ’s growth and ambition.
 As we continue to grow and evolve, this new website is just one example of how our team consistently rises to meet challenges with energy and expertise—much like the networks we help power.
-### Why this matters to you
+
+<AnimatedImage src="/uploads/2024/12/DSC08057-Large.webp" alt="KLZ Team" width={1280} height={853} />
+
+<ChatBubble author="KLZ Assistant" role="Why this matters to you" align="right">
 This new website isn’t just about aesthetics—it’s about delivering real value to our customers and partners. Here’s how it benefits you:
+
 - **Faster Access to Information**: With our improved design and PageSpeed scores of 90+, finding the right products, services, or insights has never been quicker or easier. Time is money, and we’re here to save you both.
 - **Enhanced Usability**: Whether you’re exploring on a desktop or mobile device, the intuitive layout ensures a smooth and seamless experience. You’ll spend less time searching and more time doing.
 - **A Comprehensive Resource**: From our fully featured Cable Catalog to detailed service descriptions, everything you need to make informed decisions is right at your fingertips.
 
 But it’s more than just technical improvements. This new platform reflects KLZ’s** clear vision **for the future, one that prioritizes sustainability, reliability, and innovation. For our customers, this means working with a company that understands where the industry is headed—and is ready to lead the way.
+
 By aligning our digital presence with our mission, we’re not just improving your experience with KLZ; we’re reinforcing our commitment to being a partner you can trust for years to come. When we invest in clarity and efficiency, you benefit from a smoother, stronger connection to the products and services you rely on.
+
 This website isn’t just an upgrade—it’s a promise to deliver more of what matters most to you: quality, reliability, and vision.
+</ChatBubble>
+
+<PowerCTA locale="en" />
+
 ### Start Exploring Today
 You’re already here, so take some time to explore. Browse the catalog, read about our journey, or learn how our services can support your next big project.
 2025 is set to be an exciting year, and this new website is just the beginning. Join us as we continue to innovate and power a brighter, greener future.
+
 ### What’s Next? German Language Support!
 We’re committed to making the KLZ experience accessible to everyone. **German language support** is coming soon, so our German-speaking customers and partners can enjoy the site in their preferred language. Stay tuned—it’s on the way!

data/blog/en/what-makes-a-first-class-cable-find-out-here.mdx

@@ -1,9 +1,7 @@
 ---
-
 title: What makes a first-class cable? Find out here!
 date: '2024-12-31T11:55:33'
-featuredImage: >-
-/uploads/2024/12/production-of-cable-wire-at-cable-factory-2023-11-27-05-18-33-utc-Large.webp
+featuredImage: '/uploads/2024/12/production-of-cable-wire-at-cable-factory-2023-11-27-05-18-33-utc-Large.webp'
 locale: en
 category: Kabel Technologie
 ---
@@ -45,7 +43,14 @@ Choosing the right cable is a long-term investment that pays off in safety, cost
 In a world that is increasingly moving towards a carbon-neutral energy supply, first-class cables are helping to achieve these goals. Sustainable cables are made from recyclable materials that minimize environmental impact. They also support the integration of renewable energies into the power grid by ensuring that the electricity generated is transported efficiently and without losses.
 The right choice of cable is therefore not just a technical decision – it is a contribution to a more sustainable future. By using high-quality cables, the carbon footprint of infrastructure projects can be significantly reduced. This is an important step towards an environmentally friendly and energy-efficient society.A first-class cable is therefore more than just a technical component – it is a key to a more stable, greener and more efficient energy supply.
 <VisualLinkPreview 
-url="https://www.konnworld.com/why-cable-quality-matters-the-impact-on-energy-efficiency-and-longevity"
+url="
+<VisualLinkPreview 
+  url="https://www.konnworld.com/why-cable-quality-matters-the-impact-on-energy-efficiency-and-longevity"
+  title="Why Cable Quality Matters: The Impact on Energy Efficiency and Longevity"
+  summary="In the electrical systems that we have today, there’s no denying that cable quality is important in ensuring optimal performance and safety."
+  image="https://www.konnworld.com/wp-content/uploads/2018/08/konn-b-logo.png"
+/>
+"
 title="Why Cable Quality Matters: The Impact on Energy Efficiency and Longevity"
 summary="In the electrical systems that we have today, there’s no denying that cable quality is important in ensuring optimal performance and safety."
 image="https://www.konnworld.com/wp-content/uploads/2018/08/konn-b-logo.png"
@@ -63,7 +68,14 @@ The demand for environmentally friendly materials is growing as more and more co
 - Biodegradable insulation: Another trend is the development of biodegradable or more environmentally friendly insulation materials. These materials not only reduce the use of toxic substances, but also help to minimize waste after the cable&#8217;s lifetime.In summary, choosing the right materials for cables is not only a factor in their longevity and efficiency, but also crucial for a sustainable future. Copper and aluminum offer excellent performance, but the focus on recycling and the search for more environmentally friendly alternatives is making the cable industry increasingly greener and more resource-efficient. So not only can a cable work efficiently today, it can also leave a smaller environmental footprint in the future.
 
 <VisualLinkPreview 
-url="https://insights.regencysupply.com/pros-and-cons-of-copper-and-aluminum-wire"
+url="
+<VisualLinkPreview 
+  url="https://insights.regencysupply.com/pros-and-cons-of-copper-and-aluminum-wire"
+  title="Pros and Cons of Copper and Aluminum Wire"
+  summary="Copper wire and aluminum wire — which option is better? We weight the pros and cons."
+  image="https://insights.regencysupply.com/hubfs/copper%20wire.jpg"
+/>
+"
 title="Pros and Cons of Copper and Aluminum Wire"
 summary="Copper wire and aluminum wire — which option is better? We weight the pros and cons."
 image="https://insights.regencysupply.com/hubfs/copper%20wire.jpg"
@@ -75,7 +87,14 @@ The insulation of a cable protects against short circuits and external influence
 Solar and wind energy require specialized cables that can withstand extreme weather conditions and high loads. Solar cables must be UV resistant and suitable for DC systems, while wind power cables must be flexible and corrosion resistant to withstand the constant movement of rotor blades. These advanced cables enable the efficient and safe transportation of energy, which is crucial for the sustainability and economic viability of renewable energy.
 Overall, these technologies help maximize the efficiency and safety of cables and support a sustainable energy future.
 <VisualLinkPreview 
-url="https://www.cables-unlimited.com/renewable-energy-cable-assemblies-weve-got-you-covered/"
+url="
+<VisualLinkPreview 
+  url="https://www.cables-unlimited.com/renewable-energy-cable-assemblies-weve-got-you-covered/"
+  title="Renewable Energy Cable Assemblies — We’ve Got You Covered - Cables Unlimited Inc."
+  summary="Cable assemblies used in renewable energy installations, what they are, their benefits and cable systems for renewable energy design factors."
+  image="http://www.cables-unlimited.com/wp-content/uploads/2023/02/Cables-Unlimited_Featured-Renewable-Energy-Cable-Assemblies-%E2%80%94-Weve-Got-You-Covered.jpg"
+/>
+"
 title="Renewable Energy Cable Assemblies — We’ve Got You Covered - Cables Unlimited Inc."
 summary="Cable assemblies used in renewable energy installations, what they are, their benefits and cable systems for renewable energy design factors."
 image="http://www.cables-unlimited.com/wp-content/uploads/2023/02/Cables-Unlimited_Featured-Renewable-Energy-Cable-Assemblies-%E2%80%94-Weve-Got-You-Covered.jpg"
@@ -111,7 +130,14 @@ In a world that is increasingly focusing on sustainability, sustainability certi
 
 The increasing importance of sustainability certificates is not only a response to legal requirements, but also a response to the growing awareness of consumers and companies who are looking for environmentally friendly products. In an industry increasingly dominated by green technologies, such certificates provide companies with a competitive advantage and consumers with the assurance that they are choosing responsibly produced products.
 <VisualLinkPreview 
-url="https://www.flukenetworks.com/blog/cabling-chronicles/cabling-certification"
+url="
+<VisualLinkPreview 
+  url="https://www.flukenetworks.com/blog/cabling-chronicles/cabling-certification"
+  title="Three Reasons Cabling Certification Is More Important Than Ever"
+  summary="Every time you complete the installation of a structured cabling system, you can choose whether to certify it. All links in the system should be tested in some way to make sure that they’re connected properly, but is it necessary to measure and document the performance of every link?"
+  image="https://www.flukenetworks.com/sites/default/files/blog/fn-dsx-8000_14a_w.jpg"
+/>
+"
 title="Three Reasons Cabling Certification Is More Important Than Ever"
 summary="Every time you complete the installation of a structured cabling system, you can choose whether to certify it. All links in the system should be tested in some way to make sure that they’re connected properly, but is it necessary to measure and document the performance of every link?"
 image="https://www.flukenetworks.com/sites/default/files/blog/fn-dsx-8000_14a_w.jpg"
@@ -122,7 +148,14 @@ A good cable is designed to work efficiently over the long term. Materials such
 **Sustainability**<br />
 In a world that is increasingly focusing on sustainability, environmental protection is playing an ever greater role when choosing a cable. Recyclability, sustainable production processes and certifications such as RoHS or recycling seals are decisive factors that determine the ecological footprint of a cable. Integrating these elements into cable production helps to minimize resource consumption and reduce waste, which contributes to a more environmentally friendly and resource-efficient future.
 <VisualLinkPreview 
-url="https://sustainablebrands.com/read/evolving-infrastructure-wire-cable-prioritize-sustainability"
+url="
+<VisualLinkPreview 
+  url="https://sustainablebrands.com/read/evolving-infrastructure-wire-cable-prioritize-sustainability"
+  title="Evolving Our Infrastructure Means the Wire and Cable Industry Must Prioritize Sustainability | Sustainable Brands"
+  summary="To sustainably support the tremendous global demand for connectivity, collaboration is needed across the value chain to create solutions that enable more inf…"
+  image="https://sb-web-assets.s3.amazonaws.com/production/46426/conversions/keyart-fbimg.jpg"
+/>
+"
 title="Evolving Our Infrastructure Means the Wire and Cable Industry Must Prioritize Sustainability | Sustainable Brands"
 summary="To sustainably support the tremendous global demand for connectivity, collaboration is needed across the value chain to create solutions that enable more inf…"
 image="https://sb-web-assets.s3.amazonaws.com/production/46426/conversions/keyart-fbimg.jpg"

data/blog/en/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2.mdx

@@ -1,8 +1,5 @@
 ---
-
-title: >-
-Which cables for wind power? Differences from low to extra-high voltage
-explained
+title: 'Which cables for wind power? Differences from low to extra-high voltage explained'
 date: '2025-06-10T10:35:53'
 featuredImage: /uploads/2025/04/image_fx_-2025-02-20T185502.688.webp
 locale: en
@@ -12,12 +9,14 @@ category: Kabel Technologie
 ## Cables: The Nervous System of the Energy Transition
 No cables, no power. And without the right cable type, no functioning wind farm either. In modern **onshore wind energy projects**, the choice of the correct voltage class plays a central role – not only for efficiency but also for the safety and longevity of the entire installation.
 The European Court of Auditors also calls for increased investments in the expansion of power grids to successfully advance the energy transition. Because only with modern cables and efficient infrastructure can renewable energies be reliably integrated and a sustainable energy future be secured. Here you can find more information on this topic.
+
 <VisualLinkPreview 
-url="https://www.klimareporter.de/strom/stromnetze-fuer-die-energiewende"
-title="Stromnetze für die Energiewende"
-summary="Der Europäische Rechnungshof dringt auf mehr Investitionen, um die Elektrizitätsnetze in der EU fit für erneuerbare Energien zu machen. Eine dezentrale und flex"
-image="https://www.klimareporter.de/images/karo3imgmanager/resized/standard-1/power-line-at-sunset-1100-733-80-ccb.webp"
+  url="https://www.klimareporter.de/strom/stromnetze-fuer-die-energiewende"
+  title="Stromnetze für die Energiewende"
+  summary="Der Europäische Rechnungshof dringt auf mehr Investitionen, um die Elektrizitätsnetze in der EU fit für erneuerbare Energien zu machen. Eine dezentrale und flex"
+  image="https://www.klimareporter.de/images/karo3imgmanager/resized/standard-1/power-line-at-sunset-1100-733-80-ccb.webp"
 />
+
 In the following article, we take a close look at the different voltage classes – from low voltage through medium and high voltage up to extra-high voltage – and show where they are specifically used in the wind farm. Because those who know the differences can plan projects not only more efficiently but also more cost-effectively and reliably.
 ## Low Voltage Cables – Simple, Affordable, Indispensable
 Low voltage is the entry point of any electrical infrastructure. Cables in this category are designed for **voltages up to 1,000 volts (1 kV)** and are found in nearly all standard installations – from residential buildings to transformer stations. They also play an important role in wind farms, such as supplying auxiliary units or controlling technical systems.
@@ -82,7 +81,7 @@ Medium voltage cables are the backbone of any wind farm. They cover the voltage
 - Connections in hybrid systems (e.g. solar-wind projects)
 
 Those who choose **NA2XS(F)2Y** rely on a proven solution for the medium-voltage level. These cables are not only powerful, but also durable and economical – a reliable choice for energy distribution in wind farms.
-You can also obtain this cable directly from us (KLZ). More information and [ordering options](/de/kontakt/) can be found here:
+You can also obtain this cable directly from us (KLZ). More information and [ordering options](/en/contact/) can be found here:
 <VisualLinkPreview 
 url="/contact/"
 title="Contact – Let’s Move Your Energy Projects Forward"
@@ -132,13 +131,13 @@ Extra-high voltage cables are a technical masterpiece. When used correctly, they
 <tr>
 <td>Low Voltage (LV)</td>
 <td>up to 1 kV</td>
-<td>[N2X2Y](/de/produkte/stromkabel/niederspannungskabel/n2x2y-2/), [N2XY](/de/produkte/stromkabel/niederspannungskabel/n2xy-2/), [NA2X2Y](/de/produkte/stromkabel/niederspannungskabel/na2x2y-2/), [NA2XY](/de/produkte/stromkabel/niederspannungskabel/na2xy-2/), [NAY2Y](/de/produkte/stromkabel/niederspannungskabel/nay2y-2/), [NAYCWY](/de/produkte/stromkabel/niederspannungskabel/naycwy-2/), [NAYY](/de/produkte/stromkabel/niederspannungskabel/nayy-2/), [NY2Y](/de/produkte/stromkabel/niederspannungskabel/ny2y-2/), [NYCWY](/de/produkte/stromkabel/niederspannungskabel/nycwy-2/), [NYY](/de/produkte/stromkabel/niederspannungskabel/nyy-2/)</td>
+<td>[N2X2Y](/en/products/low-voltage-cables/n2x2y/), [N2XY](/en/products/low-voltage-cables/n2xy/), [NA2X2Y](/en/products/low-voltage-cables/na2x2y/), [NA2XY](/en/products/low-voltage-cables/na2xy/), [NAY2Y](/en/products/low-voltage-cables/nay2y/), [NAYCWY](/en/products/low-voltage-cables/naycwy/), [NAYY](/en/products/low-voltage-cables/nayy/), [NY2Y](/en/products/low-voltage-cables/ny2y/), [NYCWY](/en/products/low-voltage-cables/nycwy/), [NYY](/en/products/low-voltage-cables/nyy/)</td>
 <td>Control systems, auxiliary units</td>
 </tr>
 <tr>
 <td>Medium Voltage (MV)</td>
 <td>1 – 45 kV</td>
-<td>[N2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/n2xsf2y-2/), [N2XS(FL)2Y](/de/produkte/stromkabel/mittelspannungskabel/n2xsfl2y-2/), [N2XS2Y](/de/produkte/stromkabel/mittelspannungskabel/n2xs2y-2/), [N2XSY](/de/produkte/stromkabel/mittelspannungskabel/n2xsy-2/), [NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/), [NA2XS(FL)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsfl2y-2/), [NA2XS2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xs2y-2/), [NA2XSY](/de/produkte/stromkabel/mittelspannungskabel/na2xsy-2/)</td>
+<td>[N2XS(F)2Y](/en/products/medium-voltage-cables/n2xsf2y/), [N2XS(FL)2Y](/en/products/medium-voltage-cables/n2xsfl2y-mv/), [N2XS2Y](/en/products/medium-voltage-cables/n2xs2y/), [N2XSY](/en/products/medium-voltage-cables/n2xsy/), [NA2XS(F)2Y](/en/products/medium-voltage-cables/na2xsf2y/), [NA2XS(FL)2Y](/en/products/medium-voltage-cables/na2xsfl2y-mv/), [NA2XS2Y](/en/products/medium-voltage-cables/na2xs2y/), [NA2XSY](/en/products/medium-voltage-cables/na2xsy/)</td>
 <td>Main lines, turbine-to-transformer</td>
 </tr>
 <tr>
@@ -157,12 +156,14 @@ Extra-high voltage cables are a technical masterpiece. When used correctly, they
 </table>
 The table shows: the higher the voltage, the more specialized the cable. At the same time, the demands on planning, installation, and monitoring increase.
 You can read in this article how our energy can be distributed smartly and sustainably.
+
 <VisualLinkPreview 
-url="https://www.enercity.de/magazin/unsere-welt/bedeutung-von-smart-grids-fuer-die-energiewende"
-title="Stromversorgung: Wie das Smart Grid die Energiewende ermöglicht"
-summary="Abertausende Klein- und Kleinstkraftwerke, eine sicherzustellende Versorgung, hoher Bedarf: Das Stromnetz der Zukunft muss intelligent sein."
-image="https://www.enercity.de/assets/cms/enercity-de/magazin/bedeutung-von-smart-grids-fuer-die-energiewende/306_460751759_1944x822_header.jpg"
+  url="https://www.enercity.de/magazin/unsere-welt/bedeutung-von-smart-grids-fuer-die-energiewende"
+  title="Stromversorgung: Wie das Smart Grid die Energiewende ermöglicht"
+  summary="Abertausende Klein- und Kleinstkraftwerke, eine sicherzustellende Versorgung, hoher Bedarf: Das Stromnetz der Zukunft muss intelligent sein."
+  image="https://www.enercity.de/assets/cms/enercity-de/magazin/bedeutung-von-smart-grids-fuer-die-energiewende/306_460751759_1944x822_header.jpg"
 />
+
 ## Conclusion – electricity is only as strong as its cable
 In a modern wind farm, it is not only the turbine that determines efficiency and reliability – the right choice of cable is also crucial. The requirements for voltage, insulation, load capacity and environmental conditions are varied and complex. Those who take a planned approach here can not only reduce costs, but also create long-term security.
 Whether it&#8217;s the **NAYY** **underground cable**, a **medium-voltage cable** for wind power or a fully equipped wind farm **smart grid cable** – the right solution starts with know-how. And that is exactly what we are here for.

data/blog/en/why-the-n2xsf2y-is-the-ideal-cable-for-your-energy-project.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: Why the N2XS(F)2Y is the ideal cable for your energy project
 date: '2025-09-29T12:33:30'
 featuredImage: /uploads/2025/04/image_fx_-2025-02-22T132138.470.webp
@@ -9,7 +8,7 @@ category: Kabel Technologie
 # Why the N2XS(F)2Y is the ideal cable for your energy project
 ### Why cable selection determines project success
 Whether it’s a wind farm, industrial facility, or urban distribution network – when planning medium voltage, you’re deciding not just on cable lengths, but on **[system stability](https://www.vde.com/de/fnn/themen/tar/tar-mittelspannung-vde-ar-n-4110), reliability**, and **long-term operating costs**. Cable selection has a greater impact than often assumed. While many components can be replaced, an installed medium-voltage cable quickly becomes a permanent part of the infrastructure – and therefore needs to be the right choice from the start.
-A cable like [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) performs precisely where others reach their limits. Below, we’ll show you why.
+A cable like [**NA2XS(F)2Y**](/en/products/medium-voltage-cables/na2xsf2y/) performs precisely where others reach their limits. Below, we’ll show you why.
 <h4>Typical challenges in medium-voltage cabling</h4>
 Projects in the 10 to 30 kV range bring recurring demands – regardless of whether they involve new builds, modifications, or extensions. These include:
 - **High [continuous current loads](https://www.vde-verlag.de/buecher/leseprobe/9783800746910_PROBE_01.pdf)** over many years
@@ -20,7 +19,7 @@ Projects in the 10 to 30 kV range bring recurring demands – regardless of whet
 
 The reality on construction sites shows: a cable that lacks flexibility, has large bending radii, or reaches its thermal limits too quickly not only delays implementation – it also endangers operational safety.
 <h4>Why the NA2XS(F)2Y is ideal for modern energy infrastructure</h4>
-The [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) meets these requirements with a well-thought-out, field-proven design. It is built for **long-term operation under load** and shows its strengths particularly in industrial and energy networks.
+The [**NA2XS(F)2Y**](/en/products/medium-voltage-cables/na2xsf2y/) meets these requirements with a well-thought-out, field-proven design. It is built for **long-term operation under load** and shows its strengths particularly in industrial and energy networks.
 **Key features at a glance:**
 <table>
 <thead>
@@ -52,17 +51,19 @@ The [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) m
 </tr>
 </tbody>
 </table>
-In other words: with the [NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/), you can build networks that not only work on paper but also perform reliably in practice – long-term, low-maintenance, and safe.
+In other words: with the [NA2XS(F)2Y](/en/products/medium-voltage-cables/na2xsf2y/), you can build networks that not only work on paper but also perform reliably in practice – long-term, low-maintenance, and safe.
 Learn more about why grid expansion is so important here:
+
 <VisualLinkPreview 
-url="https://www.netze-bw.de/unsernetz/netzausbau"
-title="Netzausbau - Netze BW GmbH"
-summary="Die Netze BW ist daran interessiert und dazu verpflichtet, ihr Netz im Sinne einer effizienten und sicheren Stromversorgung stetig zu optimieren."
-image="https://www.netze-bw.de/logo-seo.png"
+  url="https://www.netze-bw.de/unsernetz/netzausbau"
+  title="Netzausbau - Netze BW GmbH"
+  summary="Die Netze BW ist daran interessiert und dazu verpflichtet, ihr Netz im Sinne einer effizienten und sicheren Stromversorgung stetig zu optimieren."
+  image="https://www.netze-bw.de/logo-seo.png"
 />
+
 ### Technology you can rely on
 When medium voltage becomes part of critical infrastructure, you need cables whose technical properties can be trusted – not only under ideal conditions, but especially when environmental factors, load, and system complexity increase.
-The [**NA2XS(F)2Y**](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) was developed precisely for such situations. Its design and choice of materials are aimed at maximum electrical safety, long service life, and seamless integration into modern energy projects.
+The [**NA2XS(F)2Y**](/en/products/medium-voltage-cables/na2xsf2y/) was developed precisely for such situations. Its design and choice of materials are aimed at maximum electrical safety, long service life, and seamless integration into modern energy projects.
 <h4>Design: aluminum conductor, XLPE insulation, robust construction</h4>
 The internal structure of the NA2XS(F)2Y follows a clear logic: **[conductivity](https://kupfer.de/anwendungen/elektrotechnik-und-energie/elektrische-leiterwerkstoffe/), insulation, and protection** in perfect balance.
 **Detailed structure:**
@@ -75,14 +76,14 @@ The internal structure of the NA2XS(F)2Y follows a clear logic: **[conductivity]
 
 This combination ensures stable operation even under high thermal loads and in [EMC-sensitive environments](https://heinen-elektronik.de/glossar/emv-elektromagnetische-vertraeglichkeit/) – provided installation is carried out correctly.
 <h4>Designed for voltage classes up to 30 kV – standard-compliant and future-proof</h4>
-The [NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) is available in [voltage classes](https://www.elandcables.com/de/company/news-and-events/mv-cables-the-lowdown) up to 18/30 kV – for rated voltages up to 30 kV according to IEC 60502-2. This offers key advantages:
+The [NA2XS(F)2Y](/en/products/medium-voltage-cables/na2xsf2y/) is available in [voltage classes](https://www.elandcables.com/de/company/news-and-events/mv-cables-the-lowdown) up to 18/30 kV – for rated voltages up to 30 kV according to IEC 60502-2. This offers key advantages:
 - **International comparability** in tenders
 - **Secure approval** by grid operators or authorities
 - **Future-proof integration** into existing or newly planned systems
 
 For those who value planning reliability, technical clarity, and smooth documentation, this cable is the right choice.
 ### Powerful, reliable, and durable
-A good medium-voltage cable is not only defined by standards but by its ability to **perform consistently under real-world conditions**. The [NA2XS(F)2Y](/de/produkte/stromkabel/mittelspannungskabel/na2xsf2y-2/) was developed precisely for such demands – and offers technical advantages that truly matter in practice.
+A good medium-voltage cable is not only defined by standards but by its ability to **perform consistently under real-world conditions**. The [NA2XS(F)2Y](/en/products/medium-voltage-cables/na2xsf2y/) was developed precisely for such demands – and offers technical advantages that truly matter in practice.
 <h4>High current capacity for long-term operational stability</h4>
 The cable is designed for **continuously high current loads** – without the risk of [thermal issues](https://calcul-electrique.com/de/artikel/ueberpruefung-der-thermischen-spannungen-in-einem-leiter/), aging, or performance degradation. The combination of aluminum conductor and XLPE insulation ensures that the maximum [continuous current-carrying capacity](https://www.vde-verlag.de/buecher/leseprobe/9783800746910_PROBE_01.pdf) is maintained even under challenging conditions.
 **Advantages:**
@@ -105,7 +106,7 @@ In networks with many parallel lines or sensitive control circuits, **electromag
 
 Already convinced? Then order your medium-voltage cable directly from us:
 <VisualLinkPreview 
-url="/de/kontakt/"
+url="/en/contact/"
 title="Kontakt – Lassen Sie uns Ihre Energieprojekte voranbringen"
 summary="Schnell, verlässlich und unkompliziert – nehmen Sie Kontakt auf für individuelle Kabel- und Energielösungen. Wir sind für Sie da."
 image="/uploads/2025/02/og-2.webp"
@@ -149,12 +150,14 @@ The NA2XS(F)2Y is certified according to [**IEC 60502-2**](https://www.dke.de/de
 Anyone who **buys a medium-voltage cable** from KLZ receives not just a product – but a solution that is **technically sound, compliant with standards, and ready to use**.
 Especially in energy projects that need to be completed under time pressure or during ongoing operations, the NA2XS(F)2Y makes the decisive difference: **no discussions, no rework, no compromises**.
 Want to learn more about underground installation and buried cables? This article offers valuable insights into cable protection during underground installation.
+
 <VisualLinkPreview 
-url="https://www.richterbaustoffe.de/article/kabelschutz-bei-erdverlegung"
-title="Kabelschutz bei Erdverlegung"
-summary="Beim Um- und Ausbau der Stromnetze für die Energiewende werden ein Großteil der Leitungen und Kabel unterirdisch verlegt – um den äußeren Einflüssen unter der Erde standzuhalten und sie sicher zu isolieren, kommen…"
-image="https://images.ctfassets.net/74nz86copyef/1CDlYm1yT02sRPwG1piRUo/dc25523b67f1efc4fae65cc978f900db/hagebau_Ostendorf_Kabelschutz_Headerbild.webp"
+  url="https://www.richterbaustoffe.de/article/kabelschutz-bei-erdverlegung"
+  title="Kabelschutz bei Erdverlegung"
+  summary="Beim Um- und Ausbau der Stromnetze für die Energiewende werden ein Großteil der Leitungen und Kabel unterirdisch verlegt – um den äußeren Einflüssen unter der Erde standzuhalten und sie sicher zu isolieren, kommen…"
+  image="https://images.ctfassets.net/74nz86copyef/1CDlYm1yT02sRPwG1piRUo/dc25523b67f1efc4fae65cc978f900db/hagebau_Ostendorf_Kabelschutz_Headerbild.webp"
 />
+
 ### Conclusion:
 If you need a medium-voltage cable that performs reliably – even under real operating conditions – the NA2XS(F)2Y is the right choice.
 Whether for industrial applications, wind farm grid connections, or urban power distribution – those looking for a [medium-voltage cable](http://bauer-generator.de/glossar/mittelspannung/) that **delivers technical performance, operational reliability, and effortless integration** will find exactly that in the NA2XS(F)2Y.

data/blog/en/why-wind-farm-grid-connection-cables-must-withstand-extreme-loads.mdx

@@ -1,5 +1,4 @@
 ---
-
 title: Why wind farm grid connection cables must withstand extreme loads
 date: '2025-03-10T09:30:49'
 featuredImage: /uploads/2025/02/image_fx_-9.webp