hiehr

src/components/ProblemSection.tsx

@@ -0,0 +1,68 @@
+import { Calendar, MessageSquareOff, TrendingDown, Folders } from "lucide-react";
+
+const ProblemSection = () => {
+  const problems = [
+    {
+      icon: Calendar,
+      text: "Termine werden manuell koordiniert.",
+    },
+    {
+      icon: MessageSquareOff,
+      text: "Kundenanfragen gehen unter.",
+    },
+    {
+      icon: TrendingDown,
+      text: "Marketing bringt keine planbaren Ergebnisse.",
+    },
+    {
+      icon: Folders,
+      text: "Wichtige Informationen liegen verteilt in verschiedenen Tools.",
+    },
+  ];
+
+  return (
+    <section className="py-24 md:py-32 bg-background relative">
+      <div className="container mx-auto px-6">
+        {/* Section Header */}
+        <div className="mb-16 md:mb-20 max-w-4xl">
+          <div className="label-tag mb-4">Das Problem</div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-8">
+            Ihr Unternehmen sollte kein zweiter Vollzeitjob sein.
+          </h2>
+          <p className="text-lg md:text-xl text-muted-foreground leading-relaxed">
+            Zu viele Firmen verlieren täglich Umsatz durch ineffiziente Prozesse, doppelte Dateneingaben und fehlende Automationen.
+          </p>
+        </div>
+
+        {/* Problem Points */}
+        <div className="grid md:grid-cols-2 gap-6 mb-16">
+          {problems.map((problem, index) => (
+            <div
+              key={index}
+              className="flex items-start gap-4 p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
+            >
+              <div className="w-10 h-10 rounded-full border border-destructive/30 bg-destructive/10 flex items-center justify-center flex-shrink-0">
+                <problem.icon className="w-5 h-5 text-destructive" />
+              </div>
+              <p className="text-lg text-foreground font-medium">
+                {problem.text}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* Closing Statement */}
+        <div className="max-w-3xl">
+          <p className="text-lg text-muted-foreground mb-4">
+            Das kostet nicht nur Zeit – es verhindert Wachstum.
+          </p>
+          <p className="text-xl md:text-2xl text-foreground font-display font-medium">
+            Wer heute nicht digital strukturiert ist, wird morgen abgehängt.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProblemSection;