wip

2026-01-17 16:33:19 +01:00
parent d4e4142381
commit d8184caa9d
17 changed files with 287 additions and 114 deletions
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -5,6 +5,7 @@ import { Container, Heading } from './ui';

 export default function Footer() {
  const t = useTranslations('Footer');
+  const navT = useTranslations('Navigation');
  const locale = useLocale();
  const currentYear = new Date().getFullYear();

@@ -19,7 +20,7 @@ export default function Footer() {
            <Link href={`/${locale}`} className="inline-block group">
              <Image 
                src="/logo-white.svg" 
-                alt="KLZ Cables" 
+                alt={t('products')} 
                width={150} 
                height={40} 
                className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
@@ -27,7 +28,7 @@ export default function Footer() {
              />
            </Link>
            <p className="text-white/60 text-lg leading-relaxed max-w-sm">
-              Leading the way in cable infrastructure and sustainable energy solutions. Quality, innovation, and reliability since 1998.
+              {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">
@@ -50,12 +51,12 @@ export default function Footer() {
          </div>

          <div className="lg:col-span-2">
-            <h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">Company</h4>
+            <h4 className="text-accent font-bold uppercase tracking-widest 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">Our Team</Link></li>
-              <li><Link href={`/${locale}/products`} className="hover:text-white transition-colors">Products</Link></li>
-              <li><Link href={`/${locale}/blog`} className="hover:text-white transition-colors">Blog</Link></li>
-              <li><Link href={`/${locale}/contact`} className="hover:text-white transition-colors">Contact</Link></li>
+              <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>
          </div>

@@ -72,7 +73,7 @@ export default function Footer() {
                    <p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2">
                      {post}
                    </p>
-                    <span className="text-xs text-white/40 uppercase tracking-widest">Read Article &rarr;</span>
+                    <span className="text-xs text-white/40 uppercase tracking-widest">{t('readArticle')} &rarr;</span>
                  </Link>
                </li>
              ))}
@@ -81,7 +82,7 @@ export default function Footer() {
        </div>

        <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-sm font-medium">
-          <p>Copyright © {currentYear} KLZ Vertriebs GmbH. All rights reserved.</p>
+          <p>{t('copyright', { year: currentYear })}</p>
          <div className="flex gap-8">
            <Link href="/en" className="hover:text-white transition-colors">English</Link>
            <Link href="/de" className="hover:text-white transition-colors">Deutsch</Link>
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -75,7 +75,7 @@ export default function Header() {
          <Link href={`/${currentLocale}`} className="flex-shrink-0 group touch-target">
            <Image 
              src={logoSrc} 
-              alt="KLZ Cables" 
+              alt={t('home')} 
              width={120} 
              height={120} 
              className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
@@ -132,7 +132,7 @@ export default function Header() {
            <button 
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 z-50", textColorClass)}
-              aria-label="Toggle Menu"
+              aria-label={t('toggleMenu')}
            >
              <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {isMobileMenuOpen ? (
@@ -198,7 +198,7 @@ export default function Header() {
          
          {/* Bottom Branding */}
          <div className="p-12 flex justify-center opacity-20">
-            <Image src="/logo-white.svg" alt="KLZ" width={80} height={80} unoptimized />
+            <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
          </div>
        </div>
      </header>
--- a/components/home/CTA.tsx
+++ b/components/home/CTA.tsx
@@ -14,11 +14,11 @@ export default function CTA() {
      <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">
+            <Heading level={2} subtitle={t('subtitle')} 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.
+              {t('description')}
            </p>
          </div>
          <div className="flex-shrink-0">
--- a/components/home/Experience.tsx
+++ b/components/home/Experience.tsx
@@ -11,7 +11,7 @@ export default function Experience() {
      <div className="absolute inset-0 z-0">
        <Image 
          src="/uploads/2024/12/1694273920124-copy-2.webp" 
-          alt="Experience Background" 
+          alt={t('subtitle')} 
          fill
          className="object-cover object-center scale-105 animate-slow-zoom"
          unoptimized
@@ -22,7 +22,7 @@ export default function Experience() {
      
      <Container className="relative z-10">
        <div className="max-w-3xl">
-          <Heading level={2} subtitle="Our Legacy" className="text-white">
+          <Heading level={2} subtitle={t('subtitle')} 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">
@@ -36,12 +36,12 @@ export default function Experience() {
          
          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="animate-fade-in">
-              <div className="text-4xl font-extrabold text-accent mb-4">Certified Quality</div>
-              <div className="text-lg font-bold uppercase tracking-widest text-white/60">VDE Approved & Trusted by Major Energy Suppliers</div>
+              <div className="text-4xl font-extrabold text-accent mb-4">{t('certifiedQuality')}</div>
+              <div className="text-lg font-bold uppercase tracking-widest text-white/60">{t('vdeApproved')}</div>
            </div>
            <div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
-              <div className="text-4xl font-extrabold text-accent mb-4">Full Spectrum</div>
-              <div className="text-lg font-bold uppercase tracking-widest text-white/60">From 1kV to 220kV Solutions</div>
+              <div className="text-4xl font-extrabold text-accent mb-4">{t('fullSpectrum')}</div>
+              <div className="text-lg font-bold uppercase tracking-widest text-white/60">{t('solutionsRange')}</div>
            </div>
          </div>
        </div>
--- a/components/home/GallerySection.tsx
+++ b/components/home/GallerySection.tsx
@@ -17,7 +17,7 @@ export default function GallerySection() {
  return (
    <Section className="bg-white text-neutral-dark py-32">
      <Container>
-        <Heading level={2} subtitle="Visual Journey" align="center">
+        <Heading level={2} subtitle={t('subtitle')} align="center">
          {t('title')}
        </Heading>
        
--- a/components/home/MeetTheTeam.tsx
+++ b/components/home/MeetTheTeam.tsx
@@ -5,6 +5,7 @@ import { Section, Container, Button, Heading } from '../../components/ui';

 export default function MeetTheTeam() {
  const t = useTranslations('Home.meetTheTeam');
+  const teamT = useTranslations('Team');
  const locale = useLocale();

  return (
@@ -12,7 +13,7 @@ export default function MeetTheTeam() {
      <div className="absolute inset-0 z-0">
        <Image 
          src="/uploads/2024/12/DSC08036-Large.webp" 
-          alt="KLZ Team" 
+          alt={t('subtitle')} 
          fill
          className="object-cover scale-105 animate-slow-zoom"
          unoptimized
@@ -23,7 +24,7 @@ export default function MeetTheTeam() {
      
      <Container className="relative z-10">
        <div className="max-w-3xl text-white animate-slide-up">
-          <Heading level={2} subtitle="The People Behind KLZ" className="text-white mb-8">
+          <Heading level={2} subtitle={t('subtitle')} className="text-white mb-8">
            <span className="text-white">{t('title')}</span>
          </Heading>
          
@@ -43,10 +44,10 @@ export default function MeetTheTeam() {
            <div className="flex items-center gap-4">
              <div className="flex -space-x-4">
                <div className="w-14 h-14 rounded-full border-4 border-primary-dark overflow-hidden relative">
-                  <Image src="/uploads/2024/12/DSC07768-Large.webp" alt="Michael Bodemer" fill className="object-cover" />
+                  <Image src="/uploads/2024/12/DSC07768-Large.webp" alt={teamT('michael.name')} fill className="object-cover" />
                </div>
                <div className="w-14 h-14 rounded-full border-4 border-primary-dark overflow-hidden relative">
-                  <Image src="/uploads/2024/12/DSC07963-Large.webp" alt="Klaus Mintel" fill className="object-cover" />
+                  <Image src="/uploads/2024/12/DSC07963-Large.webp" alt={teamT('klaus.name')} fill className="object-cover" />
                </div>
              </div>
              <span className="text-white/60 font-bold text-sm uppercase tracking-widest">
--- a/components/home/RecentPosts.tsx
+++ b/components/home/RecentPosts.tsx
@@ -9,6 +9,7 @@ interface RecentPostsProps {
 }

 export default async function RecentPosts({ locale }: RecentPostsProps) {
+  const t = await getTranslations('Blog');
  const posts = await getAllPosts(locale);
  const recentPosts = posts.slice(0, 3);

@@ -18,11 +19,11 @@ 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="Insights" className="mb-0">
-            {locale === 'de' ? 'Aktuelle Blogbeiträge' : 'Recent Blog Posts'}
+          <Heading level={2} subtitle={t('latestNews')} className="mb-0">
+            {t('allArticles')}
          </Heading>
          <Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-lg touch-target">
-            {locale === 'de' ? 'Alle Beiträge ansehen' : 'View all posts'} 
+            {t('allArticles')} 
            <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
          </Link>
        </div>
@@ -59,7 +60,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                    {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'}
+                    {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" />
                    </svg>
--- a/components/home/WhatWeDo.tsx
+++ b/components/home/WhatWeDo.tsx
@@ -11,7 +11,7 @@ export default function WhatWeDo() {
        <div className="sticky-narrative-container">
          <div className="sticky-narrative-sidebar">
            <div className="lg:sticky lg:top-32">
-              <Heading level={2} subtitle="Our Expertise">
+              <Heading level={2} subtitle={t('expertise')}>
                {t('title')}
              </Heading>
              <p className="text-lg md:text-xl text-text-secondary leading-relaxed">
--- a/components/home/WhyChooseUs.tsx
+++ b/components/home/WhyChooseUs.tsx
@@ -11,7 +11,7 @@ export default function WhyChooseUs() {
        <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">
+              <Heading level={2} subtitle={t('whyKlz')}>
                {t('title')}
              </Heading>
              <p className="text-xl text-text-secondary leading-relaxed">
@@ -19,19 +19,14 @@ export default function WhyChooseUs() {
              </p>
              
              <div className="mt-12 space-y-6">
-                {[
-                  'Certified Quality Standards',
-                  'Sustainable Supply Chain',
-                  'Expert Technical Support',
-                  'Fast Global Delivery'
-                ].map((item, i) => (
+                {[0, 1, 2, 3].map((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>
+                    <span className="font-bold text-primary">{t(`features.${i}`)}</span>
                  </div>
                ))}
              </div>