From cbb78558044298afa4510780a07c0cfbdcb3d5ed Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Mon, 26 Jan 2026 20:21:17 +0100
Subject: [PATCH] frontend fixes

---
 app/[locale]/contact/page.tsx       |  2 +-
 app/[locale]/team/page.tsx          | 40 ++++++++++---
 components/Footer.tsx               | 24 ++++----
 components/Lightbox.tsx             | 92 +++++++++++++++++++++++++++++
 components/blog/TableOfContents.tsx |  2 +-
 components/home/GallerySection.tsx  | 30 ++++++++--
 components/home/RecentPosts.tsx     |  8 +--
 components/home/WhatWeDo.tsx        |  6 +-
 components/home/WhyChooseUs.tsx     |  8 +--
 styles/globals.css                  |  5 +-
 10 files changed, 177 insertions(+), 40 deletions(-)
 create mode 100644 components/Lightbox.tsx

diff --git a/app/[locale]/contact/page.tsx b/app/[locale]/contact/page.tsx
index 741837d1..c84008a8 100644
--- a/app/[locale]/contact/page.tsx
+++ b/app/[locale]/contact/page.tsx
@@ -179,7 +179,7 @@ export default function ContactPage() {
 
               <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">
+                <ul className="space-y-2 md:space-y-4 list-none m-0 p-0">
                   <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>
diff --git a/app/[locale]/team/page.tsx b/app/[locale]/team/page.tsx
index 099c5dba..a82b7865 100644
--- a/app/[locale]/team/page.tsx
+++ b/app/[locale]/team/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useTranslations } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 import { Metadata } from 'next';
@@ -5,6 +7,7 @@ import JsonLd from '@/components/JsonLd';
 import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
 import { Section, Container, Heading, Badge, Button } from '@/components/ui';
 import Image from 'next/image';
+import Lightbox from '@/components/Lightbox';
 import Reveal from '@/components/Reveal';
 
 interface TeamPageProps {
@@ -42,6 +45,17 @@ export async function generateMetadata({ params: { locale } }: TeamPageProps): P
 export default function TeamPage() {
   const t = useTranslations('Team');
 
+  const [lightboxOpen, setLightboxOpen] = React.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React.useState(0);
+
+  const teamGalleryImages = [
+    '/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/DSC07387-Large-600x400.webp'
+  ];
+
   return (
     <div className="flex flex-col min-h-screen bg-neutral-light">
       <JsonLd
@@ -280,21 +294,29 @@ export default function TeamPage() {
             <span className="text-white">{t('gallery.title')}</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/DSC07387-Large-600x400.webp'
-            ].map((src, idx) => (
-              <div key={idx} className="relative aspect-[3/4] rounded-2xl md:rounded-[32px] overflow-hidden group shadow-2xl">
+            {teamGalleryImages.map((src, idx) => (
+              <button
+                key={idx}
+                onClick={() => {
+                  setLightboxIndex(idx);
+                  setLightboxOpen(true);
+                }}
+                className="relative aspect-[3/4] rounded-2xl md:rounded-[32px] overflow-hidden group shadow-2xl cursor-pointer"
+              >
                 <Image src={src} alt={t('gallery.title')} 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>
+              </button>
             ))}
           </div>
         </Container>
+
+        <Lightbox
+          isOpen={lightboxOpen}
+          images={teamGalleryImages}
+          initialIndex={lightboxIndex}
+          onClose={() => setLightboxOpen(false)}
+        />
       </Section>
     </div>
   );
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 97d4b5f7..6ae29f2d 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -31,7 +31,7 @@ export default function Footer() {
               {t('tagline')}
             </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">
+              <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 text-white 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"/>
@@ -43,33 +43,33 @@ export default function Footer() {
           {/* Links Columns */}
           <div className="lg:col-span-2">
             <h4 className="text-accent font-bold uppercase tracking-widest text-xs md: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 className="space-y-4 text-white/70 list-none m-0 p-0">
+              <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="text-white/70 hover:text-white transition-colors">{t('legalNotice')}</Link></li>
+              <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="text-white/70 hover:text-white transition-colors">{t('privacyPolicy')}</Link></li>
+              <li><Link href={`/${locale}/${t('termsSlug')}`} className="text-white/70 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-xs md:text-sm mb-8">{t('company')}</h4>
-            <ul className="space-y-4 text-white/70">
-              <li><Link href={`/${locale}/team`} className="hover:text-white transition-colors">{navT('team')}</Link></li>
-              <li><Link href={`/${locale}/products`} className="hover:text-white transition-colors">{navT('products')}</Link></li>
-              <li><Link href={`/${locale}/blog`} className="hover:text-white transition-colors">{navT('blog')}</Link></li>
-              <li><Link href={`/${locale}/contact`} className="hover:text-white transition-colors">{navT('contact')}</Link></li>
+            <ul className="space-y-4 text-white/70 list-none m-0 p-0">
+              <li><Link href={`/${locale}/team`} className="text-white/70 hover:text-white transition-colors">{navT('team')}</Link></li>
+              <li><Link href={`/${locale}/products`} className="text-white/70 hover:text-white transition-colors">{navT('products')}</Link></li>
+              <li><Link href={`/${locale}/blog`} className="text-white/70 hover:text-white transition-colors">{navT('blog')}</Link></li>
+              <li><Link href={`/${locale}/contact`} className="text-white/70 hover:text-white transition-colors">{navT('contact')}</Link></li>
             </ul>
           </div>
 
           {/* Recent Posts Column */}
           <div className="lg:col-span-4">
             <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('recentPosts')}</h4>
-            <ul className="space-y-6">
+            <ul className="space-y-6 list-none m-0 p-0">
               {[
                 "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">
+                  <Link href="#" className="group block text-white/80">
                     <p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2 text-base md:text-base">
                       {post}
                     </p>
diff --git a/components/Lightbox.tsx b/components/Lightbox.tsx
new file mode 100644
index 00000000..3afc3016
--- /dev/null
+++ b/components/Lightbox.tsx
@@ -0,0 +1,92 @@
+`use client`;
+
+import React, { useEffect } from 'react';
+import Image from 'next/image';
+
+interface LightboxProps {
+  isOpen: boolean;
+  images: string[];
+  initialIndex: number;
+  onClose: () => void;
+}
+
+export default function Lightbox({ isOpen, images, initialIndex, onClose }: LightboxProps) {
+  const [currentIndex, setCurrentIndex] = React.useState(initialIndex);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const prevImage = () => {
+    setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
+  };
+
+  const nextImage = () => {
+    setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
+  };
+
+  return (
+    <div className="fixed inset-0 z-[9999] bg-black/90 flex items-center justify-center p-4">
+      <button
+        onClick={onClose}
+        className="absolute top-6 right-6 text-white text-3xl hover:text-accent transition-colors z-[10000] rounded-full w-12 h-12 flex items-center justify-center hover:bg-white/20"
+        aria-label="Close lightbox"
+      >
+        ×
+      </button>
+      
+      <button
+        onClick={prevImage}
+        className="absolute left-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-accent transition-colors w-12 h-12 flex items-center justify-center hover:bg-white/20 rounded-full z-[10000]"
+        aria-label="Previous image"
+      >
+        ‹
+      </button>
+      
+      <button
+        onClick={nextImage}
+        className="absolute right-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-accent transition-colors w-12 h-12 flex items-center justify-center hover:bg-white/20 rounded-full z-[10000]"
+        aria-label="Next image"
+      >
+        ›
+      </button>
+
+      <div className="relative max-w-6xl max-h-[90vh] w-full h-full flex items-center justify-center">
+        <Image
+          src={images[currentIndex]}
+          alt={`Gallery image ${currentIndex + 1}`}
+          fill
+          className="object-contain max-h-[90vh] max-w-full"
+          unoptimized
+        />
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 bg-black/50 text-white px-6 py-3 rounded-full text-sm font-medium">
+          {currentIndex + 1} / {images.length}
+        </div>
+      </div>
+
+      {/* Keyboard navigation */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-[9998]"
+          tabIndex={-1}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') onClose();
+            if (e.key === 'ArrowLeft') prevImage();
+            if (e.key === 'ArrowRight') nextImage();
+          }}
+          onClick={onClose}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/blog/TableOfContents.tsx b/components/blog/TableOfContents.tsx
index 4a870976..b27d5d50 100644
--- a/components/blog/TableOfContents.tsx
+++ b/components/blog/TableOfContents.tsx
@@ -75,7 +75,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
                   }
                 }}
               >
-                {heading.text}
+                {heading.text.replace(/\*\*(.*?)\*\*/g, '$1')}
               </a>
             </li>
           ))}
diff --git a/components/home/GallerySection.tsx b/components/home/GallerySection.tsx
index a974abd7..77601fea 100644
--- a/components/home/GallerySection.tsx
+++ b/components/home/GallerySection.tsx
@@ -1,7 +1,10 @@
-import React from 'react';
+'use client';
+
+import React, { useState } from 'react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { Section, Container, Heading } from '../../components/ui';
+import Lightbox from '../Lightbox';
 
 export default function GallerySection() {
   const t = useTranslations('Home.gallery');
@@ -14,6 +17,9 @@ export default function GallerySection() {
     '/uploads/2024/12/DSC07768-Large.webp',
   ];
 
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+
   return (
     <Section className="bg-white text-white py-32">
       <Container>
@@ -23,9 +29,16 @@ export default function GallerySection() {
         
         <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-3xl group shadow-lg hover:shadow-2xl transition-all duration-700">
-              <Image 
-                src={src} 
+            <button
+              key={idx}
+              onClick={() => {
+                setLightboxIndex(idx);
+                setLightboxOpen(true);
+              }}
+              className="relative aspect-[4/3] overflow-hidden rounded-3xl group shadow-lg hover:shadow-2xl transition-all duration-700 cursor-pointer"
+            >
+              <Image
+                src={src}
                 alt={`${t('alt')} ${idx + 1}`}
                 fill
                 className="object-cover transition-transform duration-1000 group-hover:scale-110"
@@ -33,10 +46,17 @@ export default function GallerySection() {
               />
               <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>
+            </button>
           ))}
         </div>
       </Container>
+
+      <Lightbox
+        isOpen={lightboxOpen}
+        images={images}
+        initialIndex={lightboxIndex}
+        onClose={() => setLightboxOpen(false)}
+      />
     </Section>
   );
 }
diff --git a/components/home/RecentPosts.tsx b/components/home/RecentPosts.tsx
index 7390393e..472888cd 100644
--- a/components/home/RecentPosts.tsx
+++ b/components/home/RecentPosts.tsx
@@ -19,10 +19,10 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
     <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={t('latestNews')} className="mb-0 text-white">
+          <Heading level={2} subtitle={t('latestNews')} className="mb-0 text-primary">
             {t('allArticles')}
           </Heading>
-          <Link href={`/${locale}/blog`} className="group flex items-center text-white font-bold text-base md:text-lg touch-target">
+          <Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-base md:text-lg touch-target">
             {t('allArticles')} 
             <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
           </Link>
@@ -56,10 +56,10 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                       day: 'numeric'
                     })}
                   </div>
-                  <h3 className="text-lg md:text-xl font-bold text-white group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
+                  <h3 className="text-lg md:text-xl 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-white font-bold group-hover:underline decoration-2 underline-offset-4">
+                  <div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
                     {t('readMore')}
                     <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" />
diff --git a/components/home/WhatWeDo.tsx b/components/home/WhatWeDo.tsx
index e0d54e3d..87b21b12 100644
--- a/components/home/WhatWeDo.tsx
+++ b/components/home/WhatWeDo.tsx
@@ -6,12 +6,12 @@ export default function WhatWeDo() {
   const t = useTranslations('Home.whatWeDo');
 
   return (
-    <Section className="bg-white text-white">
+    <Section className="bg-white">
       <Container>
         <div className="sticky-narrative-container">
           <div className="sticky-narrative-sidebar">
             <div className="lg:sticky lg:top-32">
-              <Heading level={2} subtitle={t('expertise')}>
+              <Heading level={2} subtitle={t('expertise')} className="text-primary-dark">
                 {t('title')}
               </Heading>
               <p className="text-base md:text-lg text-text-secondary leading-relaxed">
@@ -33,7 +33,7 @@ export default function WhatWeDo() {
                   </span>
                   <div className="h-px flex-grow bg-neutral-medium" />
                 </div>
-                <h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 text-white group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
+                <h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 text-primary-dark group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
                 <p className="text-text-secondary text-base md:text-base leading-relaxed">{t(`items.${idx}.description`)}</p>
               </div>
             ))}
diff --git a/components/home/WhyChooseUs.tsx b/components/home/WhyChooseUs.tsx
index eed7b5fd..21b756c8 100644
--- a/components/home/WhyChooseUs.tsx
+++ b/components/home/WhyChooseUs.tsx
@@ -6,12 +6,12 @@ export default function WhyChooseUs() {
   const t = useTranslations('Home.whyChooseUs');
 
   return (
-    <Section className="bg-neutral-light text-white">
+    <Section className="bg-neutral-light">
       <Container>
         <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={t('whyKlz')}>
+              <Heading level={2} subtitle={t('whyKlz')} className="text-primary-dark">
                 {t('title')}
               </Heading>
               <p className="text-base md:text-lg text-text-secondary leading-relaxed">
@@ -26,7 +26,7 @@ export default function WhyChooseUs() {
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                       </svg>
                     </div>
-                    <span className="font-bold text-white text-base md:text-base">{t(`features.${i}`)}</span>
+                    <span className="font-bold text-primary-dark text-base md:text-base">{t(`features.${i}`)}</span>
                   </div>
                 ))}
               </div>
@@ -38,7 +38,7 @@ export default function WhyChooseUs() {
                 <div className="w-14 h-14 bg-saturated/10 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-accent transition-colors duration-500">
                   <span className="text-white font-bold text-lg group-hover:text-primary-dark">0{idx + 1}</span>
                 </div>
-                <h3 className="text-xl font-bold mb-4 text-white">{t(`items.${idx}.title`)}</h3>
+                <h3 className="text-xl font-bold mb-4 text-primary-dark">{t(`items.${idx}.title`)}</h3>
                 <p className="text-text-secondary text-base md:text-base leading-relaxed">{t(`items.${idx}.description`)}</p>
               </div>
             ))}
diff --git a/styles/globals.css b/styles/globals.css
index 97ed4ddb..b7dd69be 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -61,6 +61,9 @@
 }
 
 @layer base {
+  .bg-primary a, .bg-primary-dark a {
+    @apply text-white/90 hover:text-white transition-colors;
+  }
   body {
     @apply text-base md:text-lg antialiased;
     text-rendering: optimizeLegibility;
@@ -89,7 +92,7 @@
   
   /* Link styles */
   a {
-    @apply transition-colors duration-200 underline-offset-2 hover:underline;
+    @apply no-underline transition-all duration-200;
   }
   
   /* List styles */