fix: full translation parity, component consistency, and link clickability

2026-05-27 12:04:51 +02:00
parent fa747763b8
commit 2b79d18a93
9 changed files with 199 additions and 113 deletions
--- a/components/blocks/CompanyTimeline.tsx
+++ b/components/blocks/CompanyTimeline.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { motion, useScroll, useTransform } from 'framer-motion';
 import { Building2, Compass, Layers, ArrowDownToLine, Wrench, Factory, Zap, MapPin, CheckCircle2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';

 const iconMap: Record<string, React.ElementType> = {
  Building2,
@@ -16,37 +17,6 @@ const iconMap: Record<string, React.ElementType> = {
  CheckCircle2
 };

-const defaultMilestones = [
-  {
-    date: '16.12.2015',
-    year: '2015',
-    title: 'Gründung E-TIB GmbH',
-    desc: 'Ausführung elektrischer Infrastrukturprojekte, Kabeltiefbau und Horizontalspülbohrungen.',
-    iconName: 'Building2',
-  },
-  {
-    date: '04.02.2019',
-    year: '2019',
-    title: 'Gründung E-TIB Ingenieurgesellschaft',
-    desc: 'Genehmigungs- und Ausführungsplanung, komplexe Querungen sowie Netzanschlussplanung.',
-    iconName: 'Compass',
-  },
-  {
-    date: '14.11.2019',
-    year: '2019',
-    title: 'Gründung E-TIB Verwaltung GmbH',
-    desc: 'Zentrale Dienste, Erwerb, Vermietung, Verpachtung und Verwaltung von Immobilien und Maschinen.',
-    iconName: 'Layers',
-  },
-  {
-    date: '21.10.2025',
-    year: '2025',
-    title: 'Gründung E-TIB Bohrtechnik GmbH',
-    desc: 'Spezialisierung auf präzise Horizontalspülbohrungen in allen Bodenklassen.',
-    iconName: 'ArrowDownToLine',
-  },
-];
-
 interface Milestone {
  date: string;
  year: string;
@@ -62,10 +32,45 @@ interface CompanyTimelineProps {
 }

 export function CompanyTimeline({ 
-  badge = 'Unsere Geschichte', 
-  title = 'Meilensteine der Entwicklung', 
-  milestones = defaultMilestones 
+  badge, 
+  title, 
+  milestones 
 }: CompanyTimelineProps) {
+  const t = useTranslations('CompanyTimeline');
+  
+  const finalBadge = badge || t('badge');
+  const finalTitle = title || t('title');
+  
+  const finalMilestones = milestones || [
+    {
+      date: '16.12.2015',
+      year: '2015',
+      title: t('milestones.2015.title'),
+      desc: t('milestones.2015.desc'),
+      iconName: 'Building2',
+    },
+    {
+      date: '04.02.2019',
+      year: '2019',
+      title: t('milestones.2019_ing.title'),
+      desc: t('milestones.2019_ing.desc'),
+      iconName: 'Compass',
+    },
+    {
+      date: '14.11.2019',
+      year: '2019',
+      title: t('milestones.2019_verw.title'),
+      desc: t('milestones.2019_verw.desc'),
+      iconName: 'Layers',
+    },
+    {
+      date: '21.10.2025',
+      year: '2025',
+      title: t('milestones.2025.title'),
+      desc: t('milestones.2025.desc'),
+      iconName: 'ArrowDownToLine',
+    },
+  ];
  const containerRef = React.useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: containerRef,
@@ -84,10 +89,10 @@ export function CompanyTimeline({
        <div className="text-center mb-24">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white border border-neutral-200 text-neutral-dark text-xs font-bold uppercase tracking-wider mb-6 shadow-sm">
            <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
-            {badge}
+            {finalBadge}
          </div>
          <h3 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold text-neutral-dark tracking-tight">
-            {title}
+            {finalTitle}
          </h3>
        </div>

@@ -104,7 +109,7 @@ export function CompanyTimeline({
          </div>

          <div className="space-y-16 md:space-y-24">
-            {milestones.map((milestone, i) => {
+            {finalMilestones.map((milestone, i) => {
              const isEven = i % 2 === 0;
              const Icon = iconMap[milestone.iconName] || Building2;
              
--- a/components/blocks/InteractiveGermanyMap.tsx
+++ b/components/blocks/InteractiveGermanyMap.tsx
@@ -7,7 +7,7 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
 import { Location, defaultLocations, minorLocations } from '@/lib/map-data';
-import { useLocale } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';

 const allLocations = [...defaultLocations, ...minorLocations];

@@ -27,9 +27,9 @@ interface InteractiveGermanyMapProps {
 }

 export function InteractiveGermanyMap({
-  badge = 'Einsatzgebiete',
-  title = <>Deutschlandweit<br/>für Sie im Einsatz.</>,
-  description = 'Von unseren strategischen Standorten in Guben und Bülstedt steuern und realisieren wir komplexe Infrastrukturprojekte im gesamten Bundesgebiet.',
+  badge,
+  title,
+  description,
  stats = [
    { value: '100', suffix: '%', label: 'Überregionale Reichweite' },
    { value: '2', suffix: '+', label: 'Operative Standorte' },
@@ -40,6 +40,13 @@ export function InteractiveGermanyMap({
  const [activeLocation, setActiveLocation] = useState<Location | null>(null);
  const router = useRouter();
  const locale = useLocale();
+  const t = useTranslations('InteractiveGermanyMap');
+  const tStandard = useTranslations('StandardPage');
+
+  const finalBadge = badge || tStandard('badge');
+  // the map is mostly used with specific props, so we leave title & description to fallbacks if not provided
+  const finalTitle = title || (locale === 'en' ? <>Nationwide<br/>in operation for you.</> : <>Deutschlandweit<br/>für Sie im Einsatz.</>);
+  const finalDescription = description || (locale === 'en' ? 'From our strategic locations in Guben and Bülstedt, we control and implement complex infrastructure projects nationwide.' : 'Von unseren strategischen Standorten in Guben und Bülstedt steuern und realisieren wir komplexe Infrastrukturprojekte im gesamten Bundesgebiet.');

  const hq = locations.find((l) => l.type === 'hq');
  const branch = locations.find((l) => l.type === 'branch');
@@ -62,21 +69,21 @@ export function InteractiveGermanyMap({
          <div className="xl:col-span-5 text-white z-20">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider mb-8">
              <MapPin className="w-4 h-4" />
-              <span>{badge}</span>
+              <span>{finalBadge}</span>
            </div>
            
            {isHero ? (
              <h1 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 break-words [hyphens:auto]">
-                {title}
+                {finalTitle}
              </h1>
            ) : (
              <h3 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 break-words [hyphens:auto]">
-                {title}
+                {finalTitle}
              </h3>
            )}
            
            <p className="text-white/60 text-lg mb-12 leading-relaxed">
-              {description}
+              {finalDescription}
            </p>

            {/* Industrial Stats Grid */}
@@ -204,9 +211,7 @@ export function InteractiveGermanyMap({
                        <div className="flex items-center gap-2 mb-1">
                          <MapPin className="w-3.5 h-3.5 text-primary" />
                          <span className="text-xs font-bold text-primary uppercase tracking-wider">
-                            {activeLocation.type === 'hq' ? 'Hauptsitz' : 
-                             activeLocation.type === 'branch' ? 'Niederlassung' : 
-                             activeLocation.type === 'minor_node' ? 'Projekt' : 'Referenz'}
+                            {t(`types.${activeLocation.type === 'minor_node' ? 'project' : activeLocation.type}`)}
                          </span>
                        </div>
                        <div className="font-heading font-bold text-lg leading-tight mb-2">
@@ -218,12 +223,7 @@ export function InteractiveGermanyMap({
                          </div>
                        ) : (
                          <div className="text-white/60 text-xs mb-3">
-                            {activeLocation.description === 'wind' ? 'Errichtung Leitungstrassen & Netzanbindung für Windpark-Infrastruktur.' :
-                             activeLocation.description === 'pv' ? 'Bau von Mittelspannungstrassen zur Einspeisung der PV-Anlage.' :
-                             activeLocation.description === 'fiber' ? 'Komplexer FTTx Breitbandausbau inkl. LWL-Montage & Tiefbau.' :
-                             activeLocation.description === 'power' ? '110kV Hochspannungstrasse Erdkabelverlegung.' :
-                             activeLocation.description === 'battery' ? 'Infrastrukturausbau für BESS (Batteriespeicher).' :
-                             'Komplexes Infrastrukturprojekt (Tiefbau & HDD).'}
+                            {t(`descriptions.${['wind','pv','fiber','power','battery'].includes(activeLocation.description || '') ? activeLocation.description : 'default'}`)}
                          </div>
                        )}
                        
@@ -233,17 +233,11 @@ export function InteractiveGermanyMap({
                              <>
                                <li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
                                  <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
-                                  <span>{
-                                    activeLocation.description === 'wind' ? 'Netzanbindung Windpark' :
-                                    activeLocation.description === 'pv' ? 'Einspeisung PV-Anlage' :
-                                    activeLocation.description === 'fiber' ? 'FTTx Infrastruktur' :
-                                    activeLocation.description === 'power' ? '110kV Trasse' :
-                                    activeLocation.description === 'battery' ? 'BESS Anschluss' : 'Infrastrukturprojekt'
-                                  }</span>
+                                  <span>{t(`features.${['wind','pv','fiber','power','battery'].includes(activeLocation.description || '') ? activeLocation.description : 'default'}`)}</span>
                                </li>
                                <li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
                                  <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
-                                  <span>Tiefbau & Spülbohrung (HDD)</span>
+                                  <span>{t('features.method')}</span>
                                </li>
                              </>
                            ) : (
@@ -259,7 +253,7 @@ export function InteractiveGermanyMap({

                        {activeLocation.href && (
                          <div className="inline-flex items-center text-xs font-bold text-primary">
-                            {locale === 'en' ? 'Learn more' : 'Zum Projekt'}
+                            {t('learnMore')}
                            <ArrowUpRight className="w-3.5 h-3.5 ml-1" />
                          </div>
                        )}
--- a/components/blocks/ReferencesSlider.test.tsx
+++ b/components/blocks/ReferencesSlider.test.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { ReferencesSlider, Reference } from './ReferencesSlider';
+import { NextIntlClientProvider } from 'next-intl';

 // Mock next/link to render standard <a> tag
 vi.mock('next/link', () => ({
@@ -21,6 +22,13 @@ vi.mock('next/image', () => ({
  }
 }));

+// Mock next-intl
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+  useLocale: () => 'en',
+  NextIntlClientProvider: ({ children }: any) => <>{children}</>
+}));
+
 describe('ReferencesSlider TDD', () => {
  const mockReferences: Reference[] = [
    {
@@ -49,8 +57,8 @@ describe('ReferencesSlider TDD', () => {
    
    const links = screen.getAllByTestId('reference-tile-link');
    expect(links).toHaveLength(2);
-    expect(links[0].getAttribute('href')).toBe('/referenzen/referenz-projekt-eins');
-    expect(links[1].getAttribute('href')).toBe('/referenzen/referenz-projekt-zwei');
+    expect(links[0].getAttribute('href')).toBe('/en/referenzen/referenz-projekt-eins');
+    expect(links[1].getAttribute('href')).toBe('/en/referenzen/referenz-projekt-zwei');
  });

  it('allows navigation on simple click (no drag)', () => {
--- a/components/blocks/ReferencesSlider.tsx
+++ b/components/blocks/ReferencesSlider.tsx
@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
 import Link from 'next/link';
 import Image from 'next/image';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
+import { useTranslations, useLocale } from 'next-intl';

 export interface Reference {
  id: string;
@@ -34,6 +35,9 @@ interface ReferencesSliderProps {
 }

 export function ReferencesSlider(props: ReferencesSliderProps) {
+  const t = useTranslations('ReferencesSlider');
+  const locale = useLocale();
+
  const { data } = props;
  const references = props.references || [];
  const containerRef = React.useRef<HTMLDivElement>(null);
@@ -43,11 +47,11 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
  const isDraggingRef = React.useRef(false);
  const [isDragging, setIsDragging] = React.useState(false);
  
-  const badge = props.badge || data?.badge || 'Ausgewählte Projekte';
-  const title = props.title || data?.title || 'Referenzen & Erfolge';
-  const description = props.description || data?.description || 'Ein Auszug unserer erfolgreich abgeschlossenen Projekte im Bereich Kabeltiefbau, Bohrtechnik und Netzinfrastruktur.';
-  const ctaLabel = props.ctaLabel || data?.ctaLabel || 'Alle Referenzen ansehen';
-  const ctaHref = props.ctaHref || data?.ctaHref || '/referenzen';
+  const badge = props.badge || data?.badge || t('badge');
+  const title = props.title || data?.title || t('title');
+  const description = props.description || data?.description || t('description');
+  const ctaLabel = props.ctaLabel || data?.ctaLabel || t('ctaLabel');
+  const ctaHref = props.ctaHref || data?.ctaHref || `/${locale}/referenzen`;

  if (!references || references.length === 0) return null;

@@ -132,7 +136,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
                className="flex-shrink-0 w-[320px] md:w-[480px] snap-center group pointer-events-auto"
              >
                <Link
-                  href={`/referenzen/${ref.slug}`}
+                  href={`/${locale}/referenzen/${ref.slug}`}
                  onClick={handleTileClick}
                  data-testid="reference-tile-link"
                  className="block relative aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl"
--- a/components/layout/LanguageSwitcher.test.tsx
+++ b/components/layout/LanguageSwitcher.test.tsx
@@ -28,20 +28,20 @@ describe('LanguageSwitcher TDD', () => {
    vi.clearAllMocks();
  });

-  it('translates /en/events to /de/messen when switching to German', () => {
-    vi.mocked(usePathname).mockReturnValue('/en/events');
+  it('translates /en/trade-fairs to /de/messen when switching to German', () => {
+    (usePathname as any).mockReturnValue('/en/trade-fairs');
    render(<LanguageSwitcher />);

    const deLink = screen.getByLabelText('Switch to Deutsch');
    expect(deLink.getAttribute('href')).toBe('/de/messen');
  });

-  it('translates /de/messen to /en/events when switching to English', () => {
-    vi.mocked(usePathname).mockReturnValue('/de/messen');
+  it('translates /de/messen to /en/trade-fairs when switching to English', () => {
+    (usePathname as any).mockReturnValue('/de/messen');
    render(<LanguageSwitcher />);

    const enLink = screen.getByLabelText('Switch to English');
-    expect(enLink.getAttribute('href')).toBe('/en/events');
+    expect(enLink.getAttribute('href')).toBe('/en/trade-fairs');
  });

  it('translates /en/about-us to /de/ueber-uns when switching to German', () => {