From 56012fd0d670d61f823b511de58d8b394ed22667 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Wed, 13 May 2026 11:46:40 +0200
Subject: [PATCH] feat(ui): modernize company timeline with icons and giant
 typography

---
 components/blocks/CompanyTimeline.tsx | 97 ++++++++++++++++++++-------
 1 file changed, 72 insertions(+), 25 deletions(-)

diff --git a/components/blocks/CompanyTimeline.tsx b/components/blocks/CompanyTimeline.tsx
index 386502b67..ffa3642bc 100644
--- a/components/blocks/CompanyTimeline.tsx
+++ b/components/blocks/CompanyTimeline.tsx
@@ -2,34 +2,45 @@
 
 import * as React from 'react';
 import { motion, useScroll, useTransform } from 'framer-motion';
+import { Building2, Compass, Layers, Drill, ArrowDownToLine, Wrench } from 'lucide-react';
 
 const defaultMilestones = [
   {
     date: '16.12.2015',
+    year: '2015',
     title: 'Gründung E-TIB GmbH',
     desc: 'Ausführung elektrischer Infrastrukturprojekte, Kabelbau und Horizontalspülbohrungen.',
+    icon: Building2,
   },
   {
     date: '04.02.2019',
-    title: 'Gründung E-TIB Ingenieurgesellschaft mbH',
+    year: '2019',
+    title: 'Gründung E-TIB Ingenieurgesellschaft',
     desc: 'Genehmigungs- und Ausführungsplanung, komplexe Querungen sowie Netzanschlussplanung.',
+    icon: 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.',
+    icon: Layers,
   },
   {
     date: '21.10.2025',
+    year: '2025',
     title: 'Gründung E-TIB Bohrtechnik GmbH',
     desc: 'Spezialisierung auf präzise Horizontalspülbohrungen in allen Bodenklassen.',
+    icon: ArrowDownToLine,
   },
 ];
 
 interface Milestone {
   date: string;
+  year: string;
   title: string;
   desc: string;
+  icon: React.ElementType;
 }
 
 interface CompanyTimelineProps {
@@ -52,48 +63,84 @@ export function CompanyTimeline({
   const lineHeight = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
 
   return (
-    <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">{badge}</h2>
-          <h3 className="font-heading text-4xl font-extrabold text-neutral-dark">{title}</h3>
+    <section className="py-24 md:py-32 bg-[#FAFAFA] relative overflow-hidden">
+      {/* Background Decor */}
+      <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/5 rounded-full blur-[100px] pointer-events-none -translate-y-1/2 translate-x-1/3" />
+      <div className="absolute bottom-0 left-0 w-[800px] h-[800px] bg-neutral-200/40 rounded-full blur-[120px] pointer-events-none translate-y-1/3 -translate-x-1/3" />
+
+      <div className="container max-w-5xl relative z-10">
+        <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}
+          </div>
+          <h3 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold text-neutral-dark tracking-tight">
+            {title}
+          </h3>
         </div>
 
         <div ref={containerRef} className="relative">
-          {/* Central Line */}
-          <div className="absolute left-4 md:left-1/2 top-0 bottom-0 w-1 bg-neutral-200 -translate-x-1/2 rounded-full overflow-hidden">
+          {/* Central Line Background */}
+          <div className="absolute left-[38px] md:left-1/2 top-0 bottom-0 w-1.5 bg-neutral-200 -translate-x-1/2 rounded-full" />
+          
+          {/* Animated Central Line */}
+          <div className="absolute left-[38px] md:left-1/2 top-0 bottom-0 w-1.5 -translate-x-1/2 rounded-full overflow-hidden">
             <motion.div 
-              className="w-full bg-primary"
+              className="w-full bg-primary drop-shadow-[0_0_8px_rgba(130,237,32,0.8)]"
               style={{ height: lineHeight }}
             />
           </div>
 
-          <div className="space-y-12 md:space-y-0">
+          <div className="space-y-16 md:space-y-24">
             {milestones.map((milestone, i) => {
               const isEven = i % 2 === 0;
-              // isEven (0, 2): Left side on desktop
-              // !isEven (1, 3): Right side on desktop
+              const Icon = milestone.icon;
+              
               return (
                 <motion.div 
                   key={i}
-                  initial={{ opacity: 0, y: 30 }}
+                  initial={{ opacity: 0, y: 40 }}
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true, margin: "-100px" }}
-                  transition={{ duration: 0.6 }}
-                  className="relative flex flex-col w-full"
+                  transition={{ duration: 0.7, ease: "easeOut" }}
+                  className="relative flex flex-col md:flex-row items-center w-full group"
                 >
-                  {/* Timeline Dot */}
-                  <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" />
+                  {/* Timeline Dot with Pulse */}
+                  <div className="absolute left-[38px] md:left-1/2 top-0 md:top-1/2 w-8 h-8 rounded-full bg-white border-[5px] border-neutral-200 group-hover:border-primary transition-colors duration-500 z-20 -translate-x-1/2 md:-translate-y-1/2 shadow-sm flex items-center justify-center">
+                    <div className="w-2 h-2 rounded-full bg-neutral-300 group-hover:bg-primary transition-colors duration-500" />
+                  </div>
                   
-                  {/* 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 md:text-3xl mb-3 text-neutral-dark leading-tight">{milestone.title}</h4>
-                      <p className="text-text-secondary leading-relaxed">{milestone.desc}</p>
+                  {/* Content Box Wrapper */}
+                  <div className={`w-full md:w-1/2 pl-24 md:pl-0 ${isEven ? 'md:pr-16 md:text-right' : 'md:pl-16 md:ml-auto md:text-left'}`}>
+                    
+                    {/* The Card */}
+                    <div className="relative bg-white p-8 md:p-10 rounded-[2rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-neutral-100 hover:shadow-[0_20px_40px_rgb(0,0,0,0.08)] hover:border-primary/20 transition-all duration-500 overflow-hidden transform hover:-translate-y-1">
+                      
+                      {/* Giant Typography Background Year */}
+                      <div className={`absolute select-none pointer-events-none text-[140px] leading-none font-black text-neutral-50 z-0 ${isEven ? '-left-8' : '-right-8'} -bottom-10 opacity-70 group-hover:scale-110 transition-transform duration-700`}>
+                        {milestone.year}
+                      </div>
+
+                      <div className="relative z-10">
+                        {/* Header Row */}
+                        <div className={`flex items-center gap-4 mb-6 ${isEven ? 'md:flex-row-reverse' : ''}`}>
+                          <div className="w-12 h-12 rounded-2xl bg-primary/10 text-primary flex items-center justify-center shrink-0 group-hover:bg-primary group-hover:text-neutral-dark transition-colors duration-500">
+                            <Icon className="w-6 h-6" />
+                          </div>
+                          <span className="inline-block py-1.5 px-4 rounded-full bg-neutral-100 text-neutral-600 font-bold text-sm tracking-wide">
+                            {milestone.date}
+                          </span>
+                        </div>
+                        
+                        <h4 className="font-heading font-extrabold text-2xl md:text-3xl mb-4 text-neutral-dark leading-tight group-hover:text-primary transition-colors duration-300">
+                          {milestone.title}
+                        </h4>
+                        <p className="text-neutral-500 text-lg leading-relaxed">
+                          {milestone.desc}
+                        </p>
+                      </div>
                     </div>
+
                   </div>
                 </motion.div>
               );