wip

app/[locale]/products/page.tsx

@@ -0,0 +1,84 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import { Section, Container } from '@/components/ui';
+
+export default function ProductsPage() {
+  const t = useTranslations('Navigation');
+
+  const categories = [
+    { 
+      title: 'Low Voltage Cables', 
+      desc: 'Powering everyday essentials with reliability and safety.',
+      img: 'https://klz-cables.com/wp-content/uploads/2024/12/low-voltage-scaled.webp',
+      icon: 'https://klz-cables.com/wp-content/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: 'https://klz-cables.com/wp-content/uploads/2024/12/medium-voltage-scaled.webp',
+      icon: 'https://klz-cables.com/wp-content/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: 'https://klz-cables.com/wp-content/uploads/2025/06/na2xsfl2y-rendered.webp',
+      icon: 'https://klz-cables.com/wp-content/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: 'https://klz-cables.com/wp-content/uploads/2025/04/3.webp',
+      icon: 'https://klz-cables.com/wp-content/uploads/2024/11/Solar.svg',
+      href: '/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;
+                  </span>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </Container>
+      </Section>
+    </div>
+  );
+}

app/[locale]/team/page.tsx

@@ -7,51 +7,129 @@ export default function TeamPage() {
 
   const teamMembers = [
     {
-      name: 'Klaus',
+      name: 'Klaus Mintel',
       role: 'Founder & CEO',
-      image: '/media/team/klaus.jpg', // Placeholder path
-      bio: 'With decades of experience in the cable industry, Klaus leads KLZ with a vision for quality and innovation.'
+      image: 'https://klz-cables.com/wp-content/uploads/2024/12/DSC07963-Large.webp',
+      quote: 'Sometimes all it takes is a clear head and a good cable to make the world a little better.',
+      bio: 'Klaus is the man with the experience, bringing perspective and calm to the table—even when cable chaos threatens to take over. With impressive industry knowledge and a network as solid as our cables, he ensures everything runs smoothly. Klaus isn’t just a problem solver; he’s a strategic thinker who knows how to get to the point with a touch of humor.',
+      linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/'
     },
     {
-      name: 'Michael',
+      name: 'Michael Bodemer',
       role: 'Technical Director',
-      image: '/media/team/michael.jpg', // Placeholder path
-      bio: 'Expert in high-voltage systems and technical planning, ensuring every project meets the highest standards.'
-    },
-    // Add more team members as needed
+      image: 'https://klz-cables.com/wp-content/uploads/2024/12/DSC07768-Large.webp',
+      quote: 'Challenges exist to be solved, not to debate how complicated they are.',
+      bio: 'Michael Bodemer is the go-to guy when things get complicated—and let’s face it, that’s often the case with cable networks. With sharp insight and a knack for practical solutions, Michael is one of our key players. He’s not just detail-oriented; he’s a driving force—whether it’s in planning, customer interactions, or securing the best cables for every project.',
+      linkedin: 'https://www.linkedin.com/in/michael-bodemer-33b493122/'
+    }
   ];
 
   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 Team</h1>
-            <p className="text-xl text-text-secondary">
-              Meet the experts behind KLZ Cables. We are a dedicated team of professionals committed to powering your success.
-            </p>
-          </div>
+      {/* Hero Section */}
+      <section className="relative h-[60vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
+        <div className="absolute inset-0 z-0">
+          <Image 
+            src="https://klz-cables.com/wp-content/uploads/2024/12/DSC07655-Large.webp" 
+            alt="KLZ Team" 
+            fill
+            className="object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-black/80 to-black/40" />
+        </div>
+        
+        <Container className="relative z-10 text-center text-white max-w-4xl">
+          <h1 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
+            The bright sparks behind the power
+          </h1>
+          <p className="text-xl md:text-2xl text-neutral-light">
+            We connect energy, expertise, and innovation to power a greener future.
+          </p>
+        </Container>
+      </section>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      {/* Team Members Section */}
+      <Section className="bg-white">
+        <Container>
+          <div className="space-y-24">
             {teamMembers.map((member, idx) => (
-              <div key={idx} className="bg-white rounded-lg overflow-hidden shadow-sm border border-neutral-dark group hover:-translate-y-1 transition-transform duration-300">
-                <div className="aspect-[3/4] bg-neutral relative overflow-hidden">
-                  {/* Placeholder for team image */}
-                  <div className="absolute inset-0 flex items-center justify-center text-text-light bg-neutral-dark">
-                    <span className="text-4xl font-bold opacity-20">{member.name[0]}</span>
-                  </div>
-                  {/* <Image src={member.image} alt={member.name} fill className="object-cover" /> */}
+              <div key={idx} className={`flex flex-col md:flex-row gap-12 items-center ${idx % 2 === 1 ? 'md:flex-row-reverse' : ''}`}>
+                <div className="w-full md:w-1/2 relative aspect-[4/3] rounded-lg overflow-hidden shadow-lg">
+                  <Image 
+                    src={member.image} 
+                    alt={member.name} 
+                    fill 
+                    className="object-cover"
+                  />
                 </div>
-                <div className="p-6">
-                  <h3 className="text-xl font-bold text-text-primary mb-1">{member.name}</h3>
-                  <p className="text-primary font-medium mb-4">{member.role}</p>
-                  <p className="text-text-secondary text-sm">{member.bio}</p>
+                <div className="w-full md:w-1/2 space-y-6">
+                  <h2 className="text-4xl font-bold text-primary">{member.name}</h2>
+                  <blockquote className="text-2xl font-medium italic text-text-primary border-l-4 border-primary pl-6 py-2">
+                    "{member.quote}"
+                  </blockquote>
+                  <p className="text-lg text-text-secondary leading-relaxed">
+                    {member.bio}
+                  </p>
+                  <a 
+                    href={member.linkedin} 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center text-primary font-bold hover:text-primary-dark transition-colors group border-2 border-primary px-6 py-3 rounded-full hover:bg-primary hover:text-white"
+                  >
+                    Check {member.name.split(' ')[0]}'s LinkedIn
+                    <span className="ml-2 group-hover:translate-x-1 transition-transform">&rarr;</span>
+                  </a>
                 </div>
               </div>
             ))}
           </div>
         </Container>
       </Section>
+
+      {/* Manifesto Section */}
+      <Section className="bg-neutral-dark text-white">
+        <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>
+            <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.' },
+                { title: 'Availability', desc: 'Always there for you - no waiting, no delays, just fast and reliable support.' },
+                { title: 'Solutions', desc: 'Solutions require a lot of questions. We ask them. You, the manufacturer and ourselves.' },
+                { title: 'Logistics', desc: 'Monitoring production, regular exchanges, freight tracking, customs clearance - our everyday life.' },
+                { 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.' },
+                { title: 'Reliability', desc: 'We deliver what we promise – every time, without fail.' }
+              ].map((item, idx) => (
+                <div key={idx} className="bg-white/5 p-6 rounded-lg border border-white/10 hover:bg-white/10 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-white/70">{item.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* Gallery Section */}
+      <Section className="bg-neutral-dark py-0 pb-24">
+        <Container>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {[
+              'https://klz-cables.com/wp-content/uploads/2024/12/DSC07539-Large-600x400.webp',
+              'https://klz-cables.com/wp-content/uploads/2024/12/DSC07460-Large-600x400.webp',
+              'https://klz-cables.com/wp-content/uploads/2024/12/DSC07469-Large-600x400.webp',
+              'https://klz-cables.com/wp-content/uploads/2024/12/DSC07433-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>
+            ))}
+          </div>
+        </Container>
+      </Section>
     </div>
   );
 }

components/Footer.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 
 export default function Footer() {
@@ -10,7 +11,15 @@ export default function Footer() {
       <div className="container mx-auto px-4">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
           <div>
-            <h4 className="text-lg font-bold text-text-primary mb-4">KLZ Cables</h4>
+            <Link href="/" className="block mb-4">
+              <Image 
+                src="https://klz-cables.com/wp-content/uploads/2023/11/KLZ-Logo-blau.svg" 
+                alt="KLZ Cables" 
+                width={100} 
+                height={48} 
+                className="h-12 w-auto"
+              />
+            </Link>
             <p className="mb-4">
               Raiffeisenstraße 22<br />
               73630 Remshalden<br />
@@ -34,10 +43,10 @@ export default function Footer() {
           <div>
             <h4 className="text-lg font-bold text-text-primary mb-4">{t('products')}</h4>
             <ul className="space-y-2">
-              <li><Link href="/products/low-voltage" className="hover:text-primary">{t('lowVoltage')}</Link></li>
-              <li><Link href="/products/medium-voltage" className="hover:text-primary">{t('mediumVoltage')}</Link></li>
-              <li><Link href="/products/high-voltage" className="hover:text-primary">{t('highVoltage')}</Link></li>
-              <li><Link href="/products/solar" className="hover:text-primary">{t('solar')}</Link></li>
+              <li><Link href="/products/low-voltage-cables" className="hover:text-primary">{t('lowVoltage')}</Link></li>
+              <li><Link href="/products/medium-voltage-cables" className="hover:text-primary">{t('mediumVoltage')}</Link></li>
+              <li><Link href="/products/high-voltage-cables" className="hover:text-primary">{t('highVoltage')}</Link></li>
+              <li><Link href="/products/solar-cables" className="hover:text-primary">{t('solar')}</Link></li>
             </ul>
           </div>
 
@@ -45,8 +54,16 @@ export default function Footer() {
             <h4 className="text-lg font-bold text-text-primary mb-4">{t('followUs')}</h4>
             <div className="flex space-x-4">
               {/* Social Icons */}
-              <a href="#" className="hover:text-primary">LinkedIn</a>
-              <a href="#" className="hover:text-primary">Instagram</a>
+              <a href="https://www.linkedin.com/company/klz-cables" target="_blank" rel="noopener noreferrer" className="hover:text-primary">
+                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fillRule="evenodd" 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" clipRule="evenodd" />
+                </svg>
+              </a>
+              <a href="https://www.instagram.com/klz_cables/" target="_blank" rel="noopener noreferrer" className="hover:text-primary">
+                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fillRule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.468 2.53c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clipRule="evenodd" />
+                </svg>
+              </a>
             </div>
           </div>
         </div>

components/Header.tsx

@@ -1,15 +1,28 @@
+'use client';
+
 import Link from 'next/link';
 import Image from 'next/image';
-import { useTranslations, useLocale } from 'next-intl';
+import { useTranslations } from 'next-intl';
+import { usePathname } from 'next/navigation';
 
 export default function Header() {
   const t = useTranslations('Navigation');
-  const locale = useLocale();
+  const pathname = usePathname();
+  
+  // Extract locale from pathname
+  const currentLocale = pathname.split('/')[1] || 'en';
+  
+  // Function to get path for a different locale
+  const getPathForLocale = (newLocale: string) => {
+    const segments = pathname.split('/');
+    segments[1] = newLocale;
+    return segments.join('/');
+  };
 
   const menuItems = [
     { label: t('home'), href: '/' },
     { label: t('team'), href: '/team' },
-    { label: t('products'), href: '/products' }, // This might need a dropdown
+    { label: t('products'), href: '/products' },
     { label: t('blog'), href: '/blog' },
     { label: t('contact'), href: '/contact' },
   ];
@@ -17,16 +30,22 @@ export default function Header() {
   return (
     <header className="bg-white shadow-sm sticky top-0 z-50">
       <div className="container mx-auto px-4 h-20 flex items-center justify-between">
-        <Link href="/" className="flex-shrink-0">
-          {/* Use local logo if available, or text for now */}
-          <span className="text-2xl font-bold text-primary">KLZ Cables</span>
+        <Link href={`/${currentLocale}`} className="flex-shrink-0">
+          <Image 
+            src="https://klz-cables.com/wp-content/uploads/2023/11/KLZ-Logo-blau.svg" 
+            alt="KLZ Cables" 
+            width={100} 
+            height={48} 
+            className="h-12 w-auto"
+            priority
+          />
         </Link>
 
         <nav className="hidden md:flex items-center space-x-8">
           {menuItems.map((item) => (
             <Link 
               key={item.href} 
-              href={`/${locale}${item.href}`}
+              href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
               className="text-text-primary hover:text-primary font-medium transition-colors"
             >
               {item.label}
@@ -36,9 +55,19 @@ export default function Header() {
 
         <div className="flex items-center space-x-4">
           <div className="flex items-center space-x-2 text-sm font-medium">
-            <Link href="/en" className={`hover:text-primary ${locale === 'en' ? 'text-primary' : 'text-text-secondary'}`}>EN</Link>
+            <Link 
+              href={getPathForLocale('en')} 
+              className={`hover:text-primary transition-colors ${currentLocale === 'en' ? 'text-primary font-bold' : 'text-text-secondary'}`}
+            >
+              EN
+            </Link>
             <span className="text-text-light">|</span>
-            <Link href="/de" className={`hover:text-primary ${locale === 'de' ? 'text-primary' : 'text-text-secondary'}`}>DE</Link>
+            <Link 
+              href={getPathForLocale('de')} 
+              className={`hover:text-primary transition-colors ${currentLocale === 'de' ? 'text-primary font-bold' : 'text-text-secondary'}`}
+            >
+              DE
+            </Link>
           </div>
           
           {/* Mobile Menu Button (Placeholder) */}

next.config.mjs

@@ -13,6 +13,9 @@ const nextConfig = {
         pathname: '/wp-content/uploads/**',
       },
     ],
+    dangerouslyAllowSVG: true,
+    contentDispositionType: 'attachment',
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
   },
 };
  

styles/globals.css

@@ -5,19 +5,19 @@
   --font-heading: 'Inter', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;
 
-  --color-primary: #0056b3;
-  --color-primary-dark: #003d82;
+  --color-primary: #011fff;
+  --color-primary-dark: #0017bf;
   --color-primary-light: #e6f0ff;
 
   --color-secondary: #003d82;
   --color-secondary-light: #0056b3;
 
-  --color-accent: #e6f0ff;
+  --color-accent: #82ed20;
   --color-accent-light: #f0f7ff;
 
   --color-neutral: #f8f9fa;
   --color-neutral-light: #ffffff;
-  --color-neutral-dark: #e9ecef;
+  --color-neutral-dark: #0a0a0a;
 
   --color-text-primary: #1a1a1a;
   --color-text-secondary: #6c757d;