hiehr

src/components/DifferentiationSection.tsx

@@ -0,0 +1,63 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
+
+const DifferentiationSection = () => {
+  return (
+    <section className="py-24 md:py-32 bg-secondary/20 relative">
+      <div className="container mx-auto px-6">
+        <div className="max-w-4xl mx-auto text-center">
+          <div className="label-tag mb-4">Der Unterschied</div>
+          
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-12">
+            Warum Unternehmen zu uns wechseln.
+          </h2>
+          
+          <div className="grid md:grid-cols-3 gap-8 mb-12">
+            <div className="p-6 border border-border rounded-lg bg-background">
+              <div className="text-4xl font-display font-medium text-foreground mb-2">01</div>
+              <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
+                Alles aus einer Hand
+              </h3>
+              <p className="text-muted-foreground text-sm">
+                Keine 10 verschiedenen Anbieter. Ein Partner für Ihre gesamte digitale Infrastruktur.
+              </p>
+            </div>
+            
+            <div className="p-6 border border-border rounded-lg bg-background">
+              <div className="text-4xl font-display font-medium text-foreground mb-2">02</div>
+              <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
+                Systeme statt Inseln
+              </h3>
+              <p className="text-muted-foreground text-sm">
+                Wir verbinden Ihre Tools zu einem durchdachten Gesamtsystem.
+              </p>
+            </div>
+            
+            <div className="p-6 border border-border rounded-lg bg-background">
+              <div className="text-4xl font-display font-medium text-foreground mb-2">03</div>
+              <h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
+                Langfristige Partnerschaft
+              </h3>
+              <p className="text-muted-foreground text-sm">
+                Wir begleiten Sie nicht nur beim Launch, sondern beim Wachstum.
+              </p>
+            </div>
+          </div>
+          
+          <Link to="/kontakt">
+            <Button
+              size="lg"
+              className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
+            >
+              Kostenlose Potenzialanalyse sichern
+              <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default DifferentiationSection;