75 lines
3.2 KiB
TypeScript
75 lines
3.2 KiB
TypeScript
import { Link } from "react-router-dom";
|
||
import { Button } from "@/components/ui/button";
|
||
import { ArrowRight } from "lucide-react";
|
||
import CountUp from "@/components/CountUp";
|
||
|
||
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">
|
||
<CountUp from={0} to={1} duration={1} padMinLength={2} startWhen={true} />
|
||
</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">
|
||
Website, Automation und Schnittstellen aus einer Hand – ein Ansprechpartner statt fünf Agenturen.
|
||
</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">
|
||
<CountUp from={0} to={2} duration={1} padMinLength={2} startWhen={true} />
|
||
</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">
|
||
CRM, Formulare und Website tauschen Daten – ohne manuelles Nachpflegen.
|
||
</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">
|
||
<CountUp from={0} to={3} duration={1} padMinLength={2} startWhen={true} />
|
||
</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">
|
||
Nach dem Go-live bleiben wir dran: Optimierung, wenn Ihr Team und Umsatz wachsen.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<Link
|
||
to="/kontakt"
|
||
data-analytics-cta="Potenzialanalyse starten"
|
||
data-analytics-location="differentiation_section"
|
||
>
|
||
<Button
|
||
size="lg"
|
||
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
|
||
>
|
||
Potenzialanalyse starten
|
||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default DifferentiationSection;
|