wip

components/home/Experience.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import { Section, Container } 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">
+      <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"
+          unoptimized
+        />
+        <div className="absolute inset-0 bg-[#263336] bg-gradient-to-r from-[#263336] via-[#263336]/25 to-transparent opacity-100" />
+      </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>
+        </div>
+      </Container>
+    </Section>
+  );
+}

components/home/MeetTheTeam.tsx

@@ -12,13 +12,13 @@ export default function MeetTheTeam() {
     <Section className="relative py-24 md:py-32 overflow-hidden">
       <div className="absolute inset-0 z-0">
         <Image 
-          src="/uploads/2024/12/DSC07655-Large.webp" 
+          src="/uploads/2024/12/DSC08036-Large.webp" 
           alt="KLZ Team" 
           fill
           className="object-cover"
           unoptimized
         />
-        <div className="absolute inset-0 bg-gradient-to-r from-neutral-dark/90 to-neutral-dark/40" />
+        <div className="absolute inset-0 bg-[#263336] bg-gradient-to-r from-[#263336] via-[#263336]/25 to-transparent opacity-100" />
       </div>
       
       <Container className="relative z-10">

components/home/ProductCategories.tsx

@@ -12,28 +12,28 @@ export default function ProductCategories() {
     { 
       title: t('categories.lowVoltage.title'), 
       desc: t('categories.lowVoltage.description'),
-      img: '/uploads/2024/12/low-voltage-scaled.webp',
+      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/12/medium-voltage-scaled.webp',
+      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/2025/06/na2xsfl2y-rendered.webp',
+      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/2025/04/3.webp',
+      img: '/uploads/2024/11/solar-category.webp',
       icon: '/uploads/2024/11/Solar.svg',
       href: `/${locale}/products/solar-cables`
     }

components/home/RecentPosts.tsx

@@ -0,0 +1,63 @@
+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';
+
+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">
+      <Container>
+        <div className="flex items-center justify-between mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-text-primary">
+            {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;
+          </Link>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {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"
+                  />
+                </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>
+            </Link>
+          ))}
+        </div>
+      </Container>
+    </Section>
+  );
+}

components/home/VideoSection.tsx

@@ -16,7 +16,7 @@ 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">
+      <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) => (

components/home/WhatWeDo.tsx

@@ -9,7 +9,7 @@ export default function WhatWeDo() {
     <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="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">
@@ -17,7 +17,7 @@ export default function WhatWeDo() {
               </p>
             </div>
           </div>
-          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
+          <div className="lg:col-span-9 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
             {[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>

components/home/WhyChooseUs.tsx

@@ -9,7 +9,7 @@ export default function WhyChooseUs() {
     <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="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">
@@ -17,7 +17,7 @@ export default function WhyChooseUs() {
               </p>
             </div>
           </div>
-          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
+          <div className="lg:col-span-9 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
             {[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>