main repo

components/ui/timeline-demo.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import React from "react";
+import { Timeline } from "@/components/ui/timeline";
+import { colors } from "@/lib/colors";
+
+export default function TimelineDemo() {
+  const data = [
+    {
+      title: "01",
+      content: (
+        <div
+          className="rounded-2xl p-6 transition-transform duration-300 hover:-translate-y-1"
+          style={{
+            background: `linear-gradient(135deg, ${colors.background}F5, ${colors.background}E0)`,
+            minHeight: "260px",
+          }}
+        >
+          <h3
+            className="text-lg font-semibold"
+            style={{ color: colors.primary }}
+          >
+            Kennenlernen & Beratung
+          </h3>
+          <p
+            className="mt-4 text-sm leading-relaxed"
+            style={{ color: colors.secondary }}
+          >
+            Wir lernen Sie und Ihr Unternehmen kennen, sprechen über Ziele und Wünsche und schaffen
+            eine klare Basis für das gemeinsame Projekt.
+          </p>
+        </div>
+      ),
+    },
+    {
+      title: "02",
+      content: (
+        <div
+          className="rounded-2xl p-6 transition-transform duration-300 hover:-translate-y-1"
+          style={{
+            background: `linear-gradient(135deg, ${colors.background}F5, ${colors.background}E0)`,
+            minHeight: "260px",
+          }}
+        >
+          <h3
+            className="text-lg font-semibold"
+            style={{ color: colors.primary }}
+          >
+            Konzept & Struktur
+          </h3>
+          <p
+            className="mt-4 text-sm leading-relaxed"
+            style={{ color: colors.secondary }}
+          >
+            Wir entwickeln Struktur, Sitemap und Content-Plan, damit jede Seite logisch aufgebaut ist
+            und Nutzer:innen schnell die passenden Informationen finden.
+          </p>
+        </div>
+      ),
+    },
+    {
+      title: "03",
+      content: (
+        <div
+          className="rounded-2xl p-6 transition-transform duration-300 hover:-translate-y-1"
+          style={{
+            background: `linear-gradient(135deg, ${colors.background}F5, ${colors.background}E0)`,
+            minHeight: "260px",
+          }}
+        >
+          <h3
+            className="text-lg font-semibold"
+            style={{ color: colors.primary }}
+          >
+            Design & Umsetzung
+          </h3>
+          <p
+            className="mt-4 text-sm leading-relaxed"
+            style={{ color: colors.secondary }}
+          >
+            Wir gestalten Ihr digitales Erscheinungsbild und setzen das technische Fundament um – ganz
+            nach Ihren Vorstellungen und abgestimmt auf Ihre Marke.
+          </p>
+        </div>
+      ),
+    },
+    {
+      title: "04",
+      content: (
+        <div
+          className="rounded-2xl p-6 transition-transform duration-300 hover:-translate-y-1"
+          style={{
+            background: `linear-gradient(135deg, ${colors.background}F5, ${colors.background}E0)`,
+            minHeight: "260px",
+          }}
+        >
+          <h3
+            className="text-lg font-semibold"
+            style={{ color: colors.primary }}
+          >
+            Feinschliff & Go-Live
+          </h3>
+          <p
+            className="mt-4 text-sm leading-relaxed"
+            style={{ color: colors.secondary }}
+          >
+            Wir finalisieren Inhalte, testen Performance und Sicherheit und begleiten Sie beim Launch,
+            damit alles reibungslos läuft.
+          </p>
+        </div>
+      ),
+    },
+    {
+      title: "05",
+      content: (
+        <div
+          className="rounded-2xl p-6 transition-transform duration-300 hover:-translate-y-1"
+          style={{
+            background: `linear-gradient(135deg, ${colors.background}F5, ${colors.background}E0)`,
+            minHeight: "260px",
+          }}
+        >
+          <h3
+            className="text-lg font-semibold"
+            style={{ color: colors.primary }}
+          >
+            Support & Pflege
+          </h3>
+          <p
+            className="mt-4 text-sm leading-relaxed"
+            style={{ color: colors.secondary }}
+          >
+            Auch nach dem Launch bleiben wir an Ihrer Seite und kümmern uns um Updates, Wartung und
+            Optimierungen – für nachhaltigen Erfolg.
+          </p>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="relative w-full overflow-clip">
+      <Timeline data={data} />
+    </div>
+  );
+}
+