93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { motion, useScroll, useTransform } from 'framer-motion';
|
|
|
|
const milestones = [
|
|
{
|
|
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.',
|
|
},
|
|
{
|
|
year: '2019',
|
|
date: '04.02.2019',
|
|
title: 'Gründung E-TIB Ingenieurgesellschaft mbH',
|
|
desc: 'Erweiterung in Planung, Projektierung und Dokumentation. Abdeckung komplexer Querungen.',
|
|
},
|
|
{
|
|
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.',
|
|
},
|
|
{
|
|
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.',
|
|
},
|
|
];
|
|
|
|
export function CompanyTimeline() {
|
|
const containerRef = React.useRef<HTMLDivElement>(null);
|
|
const { scrollYProgress } = useScroll({
|
|
target: containerRef,
|
|
offset: ["start center", "end center"]
|
|
});
|
|
|
|
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">Unsere Geschichte</h2>
|
|
<h3 className="font-heading text-4xl font-extrabold text-neutral-dark">Meilensteine der Entwicklung</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">
|
|
<motion.div
|
|
className="w-full bg-primary"
|
|
style={{ height: lineHeight }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-16">
|
|
{milestones.map((milestone, i) => {
|
|
const isEven = i % 2 === 0;
|
|
return (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
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' : ''}`}
|
|
>
|
|
{/* 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" />
|
|
|
|
{/* 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">
|
|
{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>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|