wip

components/home/CTA.tsx

@@ -1,25 +1,32 @@
 import React from 'react';
-import Link from 'next/link';
 import { useTranslations, useLocale } from 'next-intl';
-import { Section, Container } from '../../components/ui';
+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">
-            {t('title')}
-          </h2>
-          <Link href={`/${locale}/contact`} className="group flex items-center gap-4 text-xl font-bold text-[#82ed20]">
-            {t('button')}
-            <span className="w-10 h-10 border-2 border-[#82ed20] rounded-full flex items-center justify-center group-hover:bg-[#82ed20] group-hover:text-primary transition-all">
-              &rarr;
-            </span>
-          </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

@@ -1,32 +1,51 @@
 import React from 'react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
-import { Section, Container } from '../../components/ui';
+import { Section, Container, Heading } from '../../components/ui';
 
 export default function Experience() {
   const t = useTranslations('Home.experience');
 
   return (
-    <Section className="relative py-24 md:py-32 overflow-hidden text-white">
+    <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-left"
+          className="object-cover object-center scale-105 animate-slow-zoom"
           unoptimized
         />
-        <div className="absolute inset-0 bg-[#263336] bg-gradient-to-r from-[#263336] via-[#263336]/25 to-transparent opacity-100" />
+        <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-2xl">
-          <h2 className="text-4xl md:text-5xl font-bold mb-8 leading-tight">
-            {t('title')}
-          </h2>
-          <div className="space-y-6 text-lg text-white/90 leading-relaxed">
-            <p>{t('p1')}</p>
-            <p>{t('p2')}</p>
+        <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-2 md:grid-cols-4 gap-8">
+            {[
+              { label: 'Years Experience', value: '25+' },
+              { label: 'Projects Completed', value: '1.2k' },
+              { label: 'Global Partners', value: '85' },
+              { label: 'Cable Types', value: '450+' },
+            ].map((stat, i) => (
+              <div key={i} className="animate-fade-in" style={{ animationDelay: `${i * 100}ms` }}>
+                <div className="text-4xl font-extrabold text-accent mb-2">{stat.value}</div>
+                <div className="text-sm font-bold uppercase tracking-widest text-white/60">{stat.label}</div>
+              </div>
+            ))}
           </div>
         </div>
       </Container>

components/home/GallerySection.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
-import { Section, Container } from '../../components/ui';
+import { Section, Container, Heading } from '../../components/ui';
 
 export default function GallerySection() {
   const t = useTranslations('Home.gallery');
@@ -15,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">{t('title')}</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={`${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,17 +1,16 @@
 import React from 'react';
-import Link from 'next/link';
 import { useTranslations } from 'next-intl';
-import { Container } from '@/components/ui';
+import { Container, Button } from '@/components/ui';
 import Scribble from '@/components/Scribble';
 
 export default function Hero() {
   const t = useTranslations('Home.hero');
 
   return (
-    <section className="relative h-[80vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
+    <section className="relative h-[90vh] flex items-center justify-center overflow-hidden bg-primary-dark">
       <div className="absolute inset-0 z-0">
         <video 
-          className="w-full h-full object-cover"
+          className="w-full h-full object-cover scale-105 animate-slow-zoom"
           autoPlay 
           muted 
           loop 
@@ -21,31 +20,38 @@ export default function Hero() {
           <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 className="absolute inset-0 bg-gradient-to-b from-primary-dark/40 via-primary-dark/20 to-primary-dark/60" />
       </div>
       
       <Container className="relative z-10 text-left text-white w-full">
-        <div className="max-w-4xl">
-          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 tracking-tight leading-tight">
+        <div className="max-w-5xl animate-slide-up">
+          <h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold mb-8 tracking-tight leading-[1.05]">
             {t.rich('title', {
               green: (chunks) => (
-                <span className="relative inline-block ml-4 mr-2">
-                  <span className="relative z-10 text-white italic">{chunks}</span>
-                  <Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%]" />
+                <span 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" />
                 </span>
               )
             })}
           </h1>
-          <div className="mt-8">
-            <Link href="/contact" className="inline-flex items-center text-white text-xl font-medium group">
+          <div className="mt-12 flex flex-wrap gap-6">
+            <Button href="/contact" variant="accent" size="xl" className="group">
               {t('cta')}
-              <span className="ml-2 w-8 h-8 border-2 border-white rounded-full flex items-center justify-center group-hover:bg-white group-hover:text-black transition-all">
-                &rarr;
-              </span>
-            </Link>
+              <span className="ml-3 transition-transform group-hover:translate-x-1">&rarr;</span>
+            </Button>
+            <Button href="/products" variant="white" size="xl" className="group">
+              Explore Products
+            </Button>
           </div>
         </div>
       </Container>
+      
+      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce">
+        <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/MeetTheTeam.tsx

@@ -1,47 +1,58 @@
 import React from 'react';
-import Link from 'next/link';
 import Image from 'next/image';
 import { useTranslations, useLocale } from 'next-intl';
-import { Section, Container, Button } from '../../components/ui';
+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/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-[#263336] bg-gradient-to-r from-[#263336] via-[#263336]/25 to-transparent opacity-100" />
+        <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">{t('title')}</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">
-              {t('description')}
+          <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={`/${locale}/team`} variant="primary" size="lg">
-            {t('cta')}
-          </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 -space-x-4">
+              {[1, 2, 3, 4].map((i) => (
+                <div key={i} className="w-14 h-14 rounded-full border-4 border-primary-dark bg-neutral-medium overflow-hidden">
+                  <div className="w-full h-full bg-primary-light flex items-center justify-center text-primary font-bold text-xs">
+                    KLZ
+                  </div>
+                </div>
+              ))}
+              <div className="w-14 h-14 rounded-full border-4 border-primary-dark bg-accent flex items-center justify-center text-primary-dark font-bold text-sm">
+                +12
+              </div>
+            </div>
+          </div>
         </div>
       </Container>
     </Section>

components/home/ProductCategories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { useTranslations, useLocale } from 'next-intl';
-import { Section } from '../../components/ui';
+import { Section, Heading } from '../../components/ui';
 
 export default function ProductCategories() {
   const t = useTranslations('Products');
@@ -40,26 +40,31 @@ export default function ProductCategories() {
   ];
 
   return (
-    <Section className="bg-white py-0">
+    <Section className="bg-neutral-light py-0">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
         {categories.map((category, idx) => (
-          <Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] overflow-hidden">
+          <Link key={idx} href={category.href} className="group block relative h-[500px] lg:h-[650px] overflow-hidden border-r border-white/10 last:border-r-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"
               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-10 flex flex-col justify-end text-white">
+              <div className="mb-6 transform transition-all duration-500 group-hover:-translate-y-4">
+                <div className="w-16 h-16 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center mb-6 border border-white/20">
+                  <img src={category.icon} alt="" className="w-10 h-10 brightness-0 invert" />
+                </div>
+                <h3 className="text-3xl font-bold mb-4 leading-tight">{category.title}</h3>
+                <p className="text-white/80 text-lg line-clamp-3 opacity-0 group-hover:opacity-100 transition-all duration-500 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-sm opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
+                Explore Category <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

@@ -2,58 +2,70 @@ import React from 'react';
 import Link from 'next/link';
 import { getAllPosts } from '@/lib/blog';
 import { getTranslations } from 'next-intl/server';
-import { Section, Container } from '../../components/ui';
+import { Section, Container, Heading, Card, Badge } from '../../components/ui';
 
 interface RecentPostsProps {
   locale: string;
 }
 
 export default async function RecentPosts({ locale }: RecentPostsProps) {
-  const t = await getTranslations('Footer'); // Reusing recentPosts title from Footer or Index
   const posts = await getAllPosts(locale);
   const recentPosts = posts.slice(0, 3);
 
   if (recentPosts.length === 0) return null;
 
   return (
-    <Section className="bg-neutral-light py-24">
+    <Section className="bg-neutral py-24">
       <Container>
-        <div className="flex items-center justify-between mb-12">
-          <h2 className="text-3xl md:text-4xl font-bold text-text-primary">
+        <div className="flex flex-col md:flex-row items-end justify-between mb-16 gap-6">
+          <Heading level={2} subtitle="Insights" className="mb-0">
             {locale === 'de' ? 'Aktuelle Blogbeiträge' : 'Recent Blog Posts'}
-          </h2>
-          <Link href={`/${locale}/blog`} className="text-primary font-bold hover:underline">
-            {locale === 'de' ? 'Alle Beiträge ansehen' : 'View all posts'} &rarr;
+          </Heading>
+          <Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-lg">
+            {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">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
           {recentPosts.map((post) => (
-            <Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all border border-neutral">
-              {post.frontmatter.featuredImage && (
-                <div className="relative h-48 overflow-hidden">
-                  <img 
-                    src={post.frontmatter.featuredImage} 
-                    alt={post.frontmatter.title}
-                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
-                  />
+            <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">
+                {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 bg-gradient-to-t from-primary-dark/60 to-transparent 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-8 flex flex-col flex-grow">
+                  <div className="text-sm font-medium text-text-light mb-4 flex items-center gap-2">
+                    <span className="w-8 h-px bg-neutral-medium" />
+                    {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric'
+                    })}
+                  </div>
+                  <h3 className="text-2xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 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>
-              )}
-              <div className="p-6">
-                <div className="text-xs text-text-secondary mb-2">
-                  {new Date(post.frontmatter.date).toLocaleDateString(locale, {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric'
-                  })}
-                </div>
-                <h3 className="text-xl font-bold text-text-primary group-hover:text-primary transition-colors line-clamp-2 mb-4">
-                  {post.frontmatter.title}
-                </h3>
-                <span className="text-primary text-sm font-bold inline-flex items-center">
-                  {locale === 'de' ? 'Weiterlesen' : 'Read more'} &rarr;
-                </span>
-              </div>
+              </Card>
             </Link>
           ))}
         </div>

components/home/VideoSection.tsx

@@ -1,14 +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 
@@ -16,17 +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-[#0a0a0a]/70 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">
-          {t.rich('title', {
-            future: (chunks) => (
-              <span className="relative inline-block mx-2">
-                <span className="relative z-10 italic">{chunks}</span>
-                <Scribble variant="underline" className="w-full h-full top-full left-0" />
-              </span>
-            )
-          })}
-        </h2>
+      <div 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,6 +1,6 @@
 import React from 'react';
 import { useTranslations } from 'next-intl';
-import { Section, Container } from '../../components/ui';
+import { Section, Container, Heading } from '../../components/ui';
 
 export default function WhatWeDo() {
   const t = useTranslations('Home.whatWeDo');
@@ -8,21 +8,33 @@ export default function WhatWeDo() {
   return (
     <Section className="bg-white text-neutral-dark">
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
-          <div className="lg:col-span-3">
-            <div className="sticky top-24">
-              <h2 className="text-5xl font-bold text-primary mb-6">{t('title')}</h2>
-              <p className="text-xl text-text-secondary">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
+          <div className="lg:col-span-4">
+            <div className="sticky top-32">
+              <Heading level={2} subtitle="Our Expertise">
+                {t('title')}
+              </Heading>
+              <p className="text-xl text-text-secondary leading-relaxed">
                 {t('subtitle')}
               </p>
+              <div className="mt-12 p-8 bg-primary-light rounded-2xl border border-primary/10">
+                <p className="text-primary font-bold text-lg italic">
+                  "We don't just deliver cables; we deliver the infrastructure for a sustainable future."
+                </p>
+              </div>
             </div>
           </div>
-          <div className="lg:col-span-9 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
+          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-20">
             {[0, 1, 2, 3].map((idx) => (
-              <div key={idx} className="space-y-4">
-                <span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">0{idx + 1}</span>
-                <h3 className="text-2xl font-bold">{t(`items.${idx}.title`)}</h3>
-                <p className="text-text-secondary leading-relaxed">{t(`items.${idx}.description`)}</p>
+              <div key={idx} className="group">
+                <div className="flex items-center gap-4 mb-6">
+                  <span className="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white font-bold 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-2xl font-bold mb-4 text-primary group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
+                <p className="text-text-secondary text-lg leading-relaxed">{t(`items.${idx}.description`)}</p>
               </div>
             ))}
           </div>

components/home/WhyChooseUs.tsx

@@ -1,28 +1,50 @@
 import React from 'react';
 import { useTranslations } from 'next-intl';
-import { Section, Container } from '../../components/ui';
+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-3">
-            <div className="sticky top-24">
-              <h2 className="text-5xl font-bold text-primary mb-6">{t('title')}</h2>
-              <p className="text-xl text-text-secondary">
+        <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-9 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
+          <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="space-y-4">
-                <span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">0{idx + 1}</span>
-                <h3 className="text-2xl font-bold">{t(`items.${idx}.title`)}</h3>
-                <p className="text-text-secondary leading-relaxed">{t(`items.${idx}.description`)}</p>
+              <div 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>