Initial Commit

frontend/components/About/Section/AboutTimeline.tsx

@@ -0,0 +1,94 @@
+'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;