wip

app/[locale]/page.tsx

@@ -2,13 +2,15 @@ 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';
 
-export default function HomePage() {
+export default function HomePage({ params: { locale } }: { params: { locale: string } }) {
   const t = useTranslations('Index');
   
   return (
@@ -16,6 +18,8 @@ export default function HomePage() {
       <Hero />
       <ProductCategories />
       <WhatWeDo />
+      <RecentPosts locale={locale} />
+      <Experience />
       <WhyChooseUs />
       <MeetTheTeam />
       <GallerySection />

app/[locale]/products/page.tsx

@@ -16,28 +16,28 @@ export default function ProductsPage({ params }: ProductsPageProps) {
     { 
       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: `/${params.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: `/${params.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: `/${params.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: `/${params.locale}/products/solar-cables`
     }

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>

messages/de.json

@@ -175,6 +175,11 @@
         }
       ]
     },
+    "experience": {
+      "title": "Jahrzehntelange Erfahrung, verwurzelt in der Kabelgeschichte",
+      "p1": "Bei KLZ fließt Kabel durch unsere Adern. Klaus begann seine Reise bei der renommierten Firma Felten & Guilleaume und trat damit in die Fußstapfen seiner Eltern, die ihr Leben demselben ikonischen Unternehmen widmeten. Für Klaus ist das nicht nur Arbeit – es ist ein Vermächtnis, das auf Handwerkskunst, Innovation und Stolz basiert.",
+      "p2": "Wir ehren diese Geschichte mit Original-Illustrationen aus der Ära von Felten & Guilleaume, die einst als Postkarten verwendet wurden. Diese Bilder erinnern uns an die Generationen, die die Welt miteinander vernetzt haben – eine Tradition, die wir heute stolz fortsetzen."
+    },
     "meetTheTeam": {
       "title": "Lernen Sie das Team hinter KLZ kennen",
       "description": "Bei KLZ ist unser Team die Kraft hinter den Kabeln. Von erfahrenen Experten wie Michael und Klaus bis hin zu einer engagierten Gruppe von Planern, Logistikspezialisten und Kundendienstmitarbeitern spielt jedes Mitglied eine entscheidende Rolle. Gemeinsam verbinden wir jahrzehntelange Erfahrung, innovatives Denken und das gemeinsame Engagement für die Bereitstellung zuverlässiger Energielösungen.",

messages/en.json

@@ -175,6 +175,11 @@
         }
       ]
     },
+    "experience": {
+      "title": "Decades of experience rooted in cable history",
+      "p1": "At KLZ, cables run in our veins. Klaus began his journey at the renowned Felten & Guilleaume, following in the footsteps of his parents, who dedicated their lives to the same iconic company. For Klaus, this isn’t just work – it’s a legacy built on craftsmanship, innovation, and pride.",
+      "p2": "We honor this history with original illustrations from Felten & Guilleaume’s era, once used as postcards. These images remind us of the generations who wired the world together – a tradition we proudly continue today."
+    },
     "meetTheTeam": {
       "title": "Meet the team behind KLZ",
       "description": "At KLZ, our team is the power behind the cables. From seasoned experts like Michael and Klaus to a dedicated group of planners, logistics specialists, and customer support professionals, every member plays a vital role. Together, we combine decades of experience, innovative thinking, and a shared commitment to delivering reliable energy solutions.",