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

Former-commit-id: 67ac02c8404cc66893fdf97308574701cca6000c

components/blocks/CompanyTimeline.tsx

@@ -3,34 +3,46 @@
 import * as React from 'react';
 import { motion, useScroll, useTransform } from 'framer-motion';
 
-const milestones = [
+const defaultMilestones = [
   {
-    year: '2015',
-    date: '16.12.2015',
-    title: 'Gründung E-TIB GmbH',
-    desc: 'Aufbau der Kernkompetenzen: Kabelbau, Kabelpflugarbeiten, Horizontalspülbohrungen, Elektromontagen bis 110 kV, Glasfaser-Kabelmontagen.',
+    date: '2015',
+    title: 'Gründung der E-TIB GmbH',
+    desc: 'Gründung im brandenburgischen Guben mit Fokus auf Tiefbauarbeiten und Kabelmontagen.',
   },
   {
-    year: '2019',
-    date: '04.02.2019',
-    title: 'Gründung E-TIB Ingenieurgesellschaft mbH',
-    desc: 'Erweiterung in Planung, Projektierung und Dokumentation. Abdeckung komplexer Querungen.',
+    date: 'Wachstum',
+    title: 'Erweiterung der Kompetenzen',
+    desc: 'Konsequenter Ausbau der Leistungen um Horizontalspülbohrungen und Kabelpflugarbeiten.',
   },
   {
-    year: '2019',
-    date: '14.11.2019',
-    title: 'Gründung E-TIB Verwaltung GmbH',
-    desc: 'Bündelung von Erwerb, Vermietung, Verpachtung und Verwaltung von Immobilien, Grundstücken, Maschinen und Geräten.',
+    date: 'Unternehmensgruppe',
+    title: 'Zusammenschluss',
+    desc: 'Bündelung der Fachbereiche mit der NEMO GmbH und der E-TIB Ingenieurgesellschaft mbH.',
   },
   {
-    year: '2025',
-    date: '21.10.2025',
-    title: 'Gründung E-TIB Bohrtechnik GmbH',
-    desc: 'Spezialisierung auf präzise Horizontalspülbohrungen in allen Bodenklassen zur Sicherung der technologischen Marktdominanz.',
+    date: 'Heute',
+    title: 'Die E-TIB Gruppe',
+    desc: 'Ein starker Verbund mit über 50 Mitarbeitern für bundesweite Infrastrukturprojekte.',
   },
 ];
 
-export function CompanyTimeline() {
+interface Milestone {
+  date: string;
+  title: string;
+  desc: string;
+}
+
+interface CompanyTimelineProps {
+  badge?: string;
+  title?: string;
+  milestones?: Milestone[];
+}
+
+export function CompanyTimeline({ 
+  badge = 'Unsere Geschichte', 
+  title = 'Meilensteine der Entwicklung', 
+  milestones = defaultMilestones 
+}: CompanyTimelineProps) {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const { scrollYProgress } = useScroll({
     target: containerRef,
@@ -43,8 +55,8 @@ export function CompanyTimeline() {
     <section className="py-24 bg-white relative">
       <div className="container max-w-4xl">
         <div className="text-center mb-16">
-          <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Unsere Geschichte</h2>
-          <h3 className="font-heading text-4xl font-extrabold text-neutral-dark">Meilensteine der Entwicklung</h3>
+          <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
+          <h3 className="font-heading text-4xl font-extrabold text-neutral-dark">{title}</h3>
         </div>
 
         <div ref={containerRef} className="relative">
@@ -56,9 +68,11 @@ export function CompanyTimeline() {
             />
           </div>
 
-          <div className="space-y-16">
+          <div className="space-y-12 md:space-y-0">
             {milestones.map((milestone, i) => {
               const isEven = i % 2 === 0;
+              // isEven (0, 2): Left side on desktop
+              // !isEven (1, 3): Right side on desktop
               return (
                 <motion.div 
                   key={i}
@@ -66,19 +80,19 @@ export function CompanyTimeline() {
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true, margin: "-100px" }}
                   transition={{ duration: 0.6 }}
-                  className={`relative flex flex-col md:flex-row items-center ${isEven ? 'md:flex-row-reverse' : ''}`}
+                  className="relative flex flex-col w-full"
                 >
                   {/* Timeline Dot */}
-                  <div className="absolute left-4 md:left-1/2 w-8 h-8 rounded-full bg-white border-4 border-primary z-10 -translate-x-1/2 shadow-lg" />
+                  <div className="absolute left-4 md:left-1/2 top-8 md:top-1/2 w-6 h-6 rounded-full bg-white border-4 border-primary z-10 -translate-x-1/2 md:-translate-y-1/2 shadow-lg" />
                   
-                  {/* Content Container */}
-                  <div className={`w-full pl-16 md:pl-0 md:w-1/2 ${isEven ? 'md:pr-16 text-left md:text-right' : 'md:pl-16 text-left'}`}>
-                    <div className="bg-neutral-50 p-6 rounded-2xl shadow-sm border border-neutral-100 hover:shadow-md transition-shadow">
-                      <span className="inline-block py-1 px-3 rounded-full bg-primary/10 text-primary font-bold text-sm mb-4">
+                  {/* Content Box */}
+                  <div className={`w-full md:w-[calc(50%-2.5rem)] pl-16 md:pl-0 ${isEven ? 'md:mr-auto md:text-right' : 'md:ml-auto md:text-left'}`}>
+                    <div className="bg-neutral-50 p-6 md:p-8 rounded-2xl shadow-sm border border-neutral-100 hover:shadow-md transition-shadow relative">
+                      <span className="inline-block py-1.5 px-4 rounded-full bg-primary/10 text-primary font-bold text-sm mb-4">
                         {milestone.date}
                       </span>
-                      <h4 className="font-heading font-bold text-2xl mb-2 text-neutral-dark">{milestone.title}</h4>
-                      <p className="text-text-secondary">{milestone.desc}</p>
+                      <h4 className="font-heading font-bold text-2xl md:text-3xl mb-3 text-neutral-dark leading-tight">{milestone.title}</h4>
+                      <p className="text-text-secondary leading-relaxed">{milestone.desc}</p>
                     </div>
                   </div>
                 </motion.div>