H

src/components/Process.tsx

@@ -0,0 +1,70 @@
+const Process = () => {
+  const steps = [
+    {
+      number: "01",
+      title: "Erstgespräch",
+      description: "Wir lernen Ihr Unternehmen und Ihre Ziele kennen. In einem unverbindlichen Gespräch besprechen wir Ihre Wünsche.",
+    },
+    {
+      number: "02",
+      title: "Konzept & Design",
+      description: "Basierend auf unserer Analyse erstellen wir ein individuelles Konzept und Design für Ihre Website.",
+    },
+    {
+      number: "03",
+      title: "Entwicklung",
+      description: "Unsere Entwickler setzen Ihre Website mit modernsten Technologien um. Sie bleiben informiert.",
+    },
+    {
+      number: "04",
+      title: "Launch & Support",
+      description: "Nach gründlichen Tests geht Ihre Website live. Wir stehen Ihnen auch danach mit Support zur Seite.",
+    },
+  ];
+
+  return (
+    <section id="process" className="py-24 md:py-32 bg-secondary/20 relative">
+      <div className="container mx-auto px-6">
+        {/* Section Header */}
+        <div className="mb-16 md:mb-24">
+          <div className="label-tag mb-4">So arbeiten wir</div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase">
+            Ablauf
+          </h2>
+        </div>
+
+        <div className="max-w-4xl">
+          {steps.map((step, index) => (
+            <div
+              key={step.number}
+              className="group flex gap-8 md:gap-12 pb-16 last:pb-0 border-l border-border pl-8 md:pl-12 relative"
+            >
+              {/* Line dot */}
+              <div className="absolute -left-[5px] top-0 w-[10px] h-[10px] rounded-full bg-background border-2 border-border group-hover:border-foreground transition-colors" />
+              
+              {/* Number */}
+              <div className="hidden md:block">
+                <span className="stat-number text-6xl text-border group-hover:text-muted-foreground/30 transition-colors">
+                  {step.number}
+                </span>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1">
+                <span className="md:hidden label-tag mb-2 block">{step.number}</span>
+                <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground mb-4 uppercase tracking-tight">
+                  {step.title}
+                </h3>
+                <p className="text-muted-foreground leading-relaxed max-w-lg">
+                  {step.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Process;