hiehr

src/components/SolutionSection.tsx

@@ -0,0 +1,68 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { ArrowRight, CheckCircle2 } from "lucide-react";
+
+const SolutionSection = () => {
+  const benefits = [
+    "Alle Prozesse greifen ineinander.",
+    "Informationen fließen automatisch.",
+    "Aufgaben erledigen sich im Hintergrund.",
+  ];
+
+  return (
+    <section className="py-24 md:py-32 bg-background relative">
+      <div className="container mx-auto px-6">
+        <div className="grid lg:grid-cols-2 gap-16 items-center">
+          {/* Left Content */}
+          <div>
+            <div className="label-tag mb-4">Die Lösung</div>
+            
+            <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-8">
+              Wir bauen Unternehmen, die ohne ihre Besitzer funktionieren.
+            </h2>
+            
+            <p className="text-lg md:text-xl text-muted-foreground leading-relaxed mb-8">
+              Statt isolierter Einzellösungen entwickeln wir eine zentrale digitale Infrastruktur für Ihre gesamte Firma.
+            </p>
+            
+            <div className="space-y-4 mb-10">
+              {benefits.map((benefit, index) => (
+                <div key={index} className="flex items-center gap-3">
+                  <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0" />
+                  <span className="text-lg text-foreground">{benefit}</span>
+                </div>
+              ))}
+            </div>
+
+            <Link to="/kontakt">
+              <Button
+                size="lg"
+                className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
+              >
+                Jetzt Potenzialanalyse sichern
+                <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
+              </Button>
+            </Link>
+          </div>
+
+          {/* Right Content - Visual Element */}
+          <div className="relative">
+            <div className="aspect-square bg-secondary/50 rounded-2xl border border-border p-8 md:p-12 flex flex-col justify-center">
+              <div className="space-y-6">
+                <div className="text-sm uppercase tracking-wider text-muted-foreground">Das Ergebnis</div>
+                <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground uppercase tracking-tight">
+                  Sie erhalten Kontrolle, Transparenz und die Freiheit, sich auf das zu konzentrieren, was wirklich zählt:
+                </h3>
+                <div className="text-4xl md:text-5xl font-display font-medium text-primary uppercase tracking-tight">
+                  Wachstum.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SolutionSection;