Archived
88 lines
3.4 KiB
TypeScript
88 lines
3.4 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowRight, CheckCircle2 } from "lucide-react";
|
|
import { LampTop } from "@/components/ui/lamp";
|
|
import LightRays from "@/components/LightRays";
|
|
|
|
const SolutionSection = () => {
|
|
const benefits = [
|
|
"Alle Prozesse greifen ineinander.",
|
|
"Informationen fließen automatisch.",
|
|
"Aufgaben erledigen sich im Hintergrund.",
|
|
];
|
|
|
|
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="#22d3ee"
|
|
raysSpeed={1}
|
|
lightSpread={0.5}
|
|
rayLength={3}
|
|
followMouse={false}
|
|
mouseInfluence={0}
|
|
noiseAmount={0}
|
|
distortion={0}
|
|
pulsating
|
|
fadeDistance={2}
|
|
saturation={2}
|
|
/>
|
|
</div>
|
|
<LampTop lineClassName="bg-cyan-400" />
|
|
<div className="container mx-auto px-6 relative z-10">
|
|
<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="solution-section-tint 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;
|