73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import { Users, Cog, MessageSquare, Target, BarChart3, Layers } from "lucide-react";
|
|
|
|
const Values = () => {
|
|
const features = [
|
|
{
|
|
icon: Users,
|
|
title: "Digitale Kundenplattform",
|
|
description: "Verwalten Sie Kontakte, Anfragen und Projekte zentral.",
|
|
},
|
|
{
|
|
icon: Cog,
|
|
title: "Automatisierte Prozesse",
|
|
description: "Reduzieren Sie manuelle Arbeit drastisch.",
|
|
},
|
|
{
|
|
icon: MessageSquare,
|
|
title: "Intelligente Kundenkommunikation",
|
|
description: "Keine Anfrage geht mehr verloren.",
|
|
},
|
|
{
|
|
icon: Target,
|
|
title: "Planbare Neukundengewinnung",
|
|
description: "Strukturierte Funnels statt Zufall.",
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: "Echtzeit-Analytics",
|
|
description: "Treffen Sie Entscheidungen auf Basis klarer Daten.",
|
|
},
|
|
{
|
|
icon: Layers,
|
|
title: "Skalierbare Infrastruktur",
|
|
description: "Ihr System wächst mit Ihrem Unternehmen.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="features" className="py-24 md:py-32 bg-background relative">
|
|
<div className="container mx-auto px-6">
|
|
{/* Section Header */}
|
|
<div className="mb-16 md:mb-24 max-w-3xl">
|
|
<div className="label-tag mb-4">Was Sie bekommen</div>
|
|
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
|
|
Alles, was Ihr Unternehmen braucht. In einem System.
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{features.map((feature, index) => (
|
|
<div
|
|
key={feature.title}
|
|
className="group p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
<div className="w-12 h-12 rounded-full border border-border flex items-center justify-center mb-6 group-hover:border-foreground/30 transition-colors">
|
|
<feature.icon className="w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors" />
|
|
</div>
|
|
<h3 className="text-xl font-display font-medium text-foreground mb-3 uppercase tracking-tight">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Values;
|