95 lines
3.9 KiB
TypeScript
95 lines
3.9 KiB
TypeScript
'use client';
|
||
|
||
import React from "react";
|
||
import {motion} from "framer-motion";
|
||
import {useThemeColors} from "@/utils/useThemeColors";
|
||
|
||
const timeline = [
|
||
{
|
||
date: "Oktober 2024",
|
||
title: "Projektgründung",
|
||
description: "Entwicklung der Idee und erste Umsetzungsschritte – inspiriert durch Technik und Nachhaltigkeit.",
|
||
current: false,
|
||
},
|
||
{
|
||
date: "Mai 2025",
|
||
title: "Go-Live",
|
||
description: "Offizieller Start mit Kundenprojekten und einem umfassenden Full-Service-Angebot.",
|
||
current: true,
|
||
},
|
||
];
|
||
|
||
const AboutTimeline3 = () => {
|
||
const colors = useThemeColors();
|
||
|
||
return (
|
||
<div className="relative w-full px-6 sm:px-12 py-8 max-w-5xl mx-auto">
|
||
<h2
|
||
className="text-2xl sm:text-3xl font-bold mt-10"
|
||
style={{color: colors.primaryText}}
|
||
>
|
||
Von der Idee bis heute
|
||
</h2>
|
||
<motion.div
|
||
className="w-12 h-[2px] mt-2 mb-12 bg-amber-500"
|
||
initial={{opacity: 0, x: -20}}
|
||
whileInView={{opacity: 1, x: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4, delay: 0.1}}
|
||
/>
|
||
|
||
<div className="relative border-l-2 border-gray-300 dark:border-gray-700 ml-6">
|
||
{timeline.map((item, idx) => (
|
||
<motion.div
|
||
key={idx}
|
||
initial={{opacity: 0, y: 20}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.5, delay: idx * 0.2}}
|
||
className="relative mb-10 pl-12"
|
||
>
|
||
{/* Timeline dot */}
|
||
<div className="absolute left-[-22px] top-0 z-10">
|
||
<div
|
||
className={`w-10 h-10 rounded-full border-2 flex items-center justify-center bg-white dark:bg-gray-900 ${
|
||
item.current
|
||
? "border-blue-600"
|
||
: "border-gray-400 dark:border-gray-600"
|
||
}`}
|
||
>
|
||
{item.current && (
|
||
<motion.span
|
||
className="absolute w-10 h-10 rounded-full bg-blue-600 opacity-40"
|
||
animate={{scale: [1, 1.6, 1], opacity: [0.4, 0, 0.4]}}
|
||
transition={{repeat: Infinity, duration: 1.6}}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Timeline card */}
|
||
<motion.div
|
||
whileHover={{scale: 1.02, translateX: 4}}
|
||
transition={{type: "spring", stiffness: 260, damping: 20}}
|
||
className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 cursor-default"
|
||
>
|
||
<div className="text-sm text-blue-600 font-semibold mb-1">{item.date}</div>
|
||
<div
|
||
className="text-lg font-bold mb-2"
|
||
style={{color: colors.primaryText}}
|
||
>
|
||
{item.title}
|
||
</div>
|
||
<div className="text-sm" style={{color: colors.secondaryText}}>
|
||
{item.description}
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AboutTimeline3;
|