88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import { Calendar, MessageSquareOff, TrendingDown, Folders } from "lucide-react";
|
||
import { LampTop } from "@/components/ui/lamp";
|
||
import LightRays from "@/components/LightRays";
|
||
|
||
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="section-problem-solution py-24 md:py-32 relative overflow-hidden">
|
||
<div className="absolute inset-0 w-full overflow-hidden z-0">
|
||
<LightRays
|
||
raysOrigin="top-center"
|
||
raysColor="#ef4444"
|
||
raysSpeed={1}
|
||
lightSpread={0.5}
|
||
rayLength={3}
|
||
followMouse={false}
|
||
mouseInfluence={0}
|
||
noiseAmount={0}
|
||
distortion={0}
|
||
pulsating
|
||
fadeDistance={2}
|
||
saturation={2}
|
||
/>
|
||
</div>
|
||
<LampTop />
|
||
<div className="container mx-auto px-6 relative z-10">
|
||
{/* 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="problem-section-tint 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;
|