Webklar.com/components/ui/timeline-demo.tsx

"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>
  );
}