feat(ui): finalize E-TIB modernization with footer redesign, video optimization, and TS fixes

Former-commit-id: 67ac02c8404cc66893fdf97308574701cca6000c
2026-05-07 10:43:20 +02:00
parent f2fdea96ec
commit 5439df72ea
3712 changed files with 932332 additions and 1867 deletions
--- a/components/layout/LanguageSwitcher.tsx
+++ b/components/layout/LanguageSwitcher.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface LanguageSwitcherProps {
+  mobile?: boolean;
+  isSolidMode?: boolean;
+}
+
+export function LanguageSwitcher({ mobile = false, isSolidMode = false }: LanguageSwitcherProps) {
+  const pathname = usePathname() || '/';
+  const currentLocale = pathname.startsWith('/en') ? 'en' : 'de';
+
+  const getSwitchedUrl = (newLocale: string) => {
+    const pathWithoutLocale = pathname.replace(/^\/(en|de)/, '');
+    return `/${newLocale}${pathWithoutLocale === '' ? '' : pathWithoutLocale}`;
+  };
+
+  const locales = [
+    { code: 'de', label: 'DE', fullLabel: 'Deutsch', flag: '🇩🇪' },
+    { code: 'en', label: 'EN', fullLabel: 'English', flag: '🇬🇧' },
+  ] as const;
+
+  if (mobile) {
+    return (
+      <div className="flex flex-col gap-3">
+        {locales.map((loc) => (
+          <Link
+            key={loc.code}
+            href={getSwitchedUrl(loc.code)}
+            className={`flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
+              currentLocale === loc.code
+                ? 'bg-primary/10 text-primary border border-primary/20'
+                : 'text-text-secondary hover:bg-neutral-50 border border-transparent'
+            }`}
+          >
+            <span className="text-2xl" aria-hidden="true">{loc.flag}</span>
+            <span>{loc.fullLabel}</span>
+            {currentLocale === loc.code && (
+              <svg className="w-5 h-5 ml-auto text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            )}
+          </Link>
+        ))}
+      </div>
+    );
+  }
+
+  // Desktop styles dependent on isSolidMode
+  const containerClass = isSolidMode
+    ? 'bg-neutral-100 border-neutral-200'
+    : 'bg-white/10 backdrop-blur-sm border-white/10';
+
+  return (
+    <div className={`flex items-center rounded-full p-0.5 border ${containerClass} transition-colors duration-300`}>
+      {locales.map((loc) => {
+        const isActive = currentLocale === loc.code;
+        
+        let linkClass = '';
+        if (isActive) {
+          linkClass = 'bg-white text-primary shadow-sm';
+        } else {
+          linkClass = isSolidMode 
+            ? 'text-text-secondary hover:text-primary' 
+            : 'text-white/70 hover:text-white';
+        }
+
+        return (
+          <Link
+            key={loc.code}
+            href={getSwitchedUrl(loc.code)}
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all duration-300 ${linkClass}`}
+            aria-label={`Switch to ${loc.fullLabel}`}
+          >
+            <span className="text-sm" aria-hidden="true">{loc.flag}</span>
+            <span>{loc.label}</span>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}