77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
import {
|
||
ShieldCheck,
|
||
SlidersHorizontal,
|
||
Smartphone,
|
||
Sparkles,
|
||
} from "lucide-react";
|
||
import Reveal from "@/components/reveal";
|
||
|
||
const FEATURES = [
|
||
{
|
||
icon: SlidersHorizontal,
|
||
title: "Komplett anpassbar",
|
||
text: "Beschriftungen, Optionen und Antworten – alles passt sich deiner Entscheidung an und bleibt automatisch gespeichert.",
|
||
tint: "bg-[#e6f7f0] text-[#0d7a57]",
|
||
},
|
||
{
|
||
icon: ShieldCheck,
|
||
title: "Kein Account nötig",
|
||
text: "Kein Login, keine Werbung, kein Schnickschnack. Öffnen, werfen, entscheiden – fertig.",
|
||
tint: "bg-[#e6f7f0] text-[#0d7a57]",
|
||
},
|
||
{
|
||
icon: Smartphone,
|
||
title: "Überall dabei",
|
||
text: "Ob Handy, Tablet oder Desktop: Der Entscheidomat fühlt sich auf jedem Gerät butterweich an.",
|
||
tint: "bg-[#e6f7f0] text-[#0d7a57]",
|
||
},
|
||
{
|
||
icon: Sparkles,
|
||
title: "Liebe zum Detail",
|
||
text: "Physikalische Spins, feine 3D-Animationen und Soundeffekte machen jede Entscheidung zum kleinen Erlebnis.",
|
||
tint: "bg-[#e6f7f0] text-[#0d7a57]",
|
||
},
|
||
];
|
||
|
||
export default function Features() {
|
||
return (
|
||
<section id="features" className="relative scroll-mt-20 py-24 sm:py-32">
|
||
<div className="mx-auto w-full max-w-6xl px-5 sm:px-8">
|
||
<Reveal className="mx-auto max-w-2xl text-center">
|
||
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-ink-soft">
|
||
Warum Entscheidomat?
|
||
</p>
|
||
<h2 className="mt-3 text-4xl font-semibold tracking-[-0.02em] sm:text-5xl">
|
||
Weil Entscheiden auch{" "}
|
||
<em className="font-display italic text-[#0d7a57]">schön</em> sein kann.
|
||
</h2>
|
||
<p className="mt-4 text-lg leading-relaxed text-ink-soft">
|
||
Keine langweiligen Standard-Tools mehr. Hier bekommst du Zufall mit
|
||
Stil – und trotzdem blitzschnell und ohne Hürden.
|
||
</p>
|
||
</Reveal>
|
||
|
||
<div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||
{FEATURES.map((feature, i) => (
|
||
<Reveal key={feature.title} delay={i * 0.08}>
|
||
<div className="group h-full rounded-3xl border border-line bg-surface p-7 shadow-soft transition-all duration-300 hover:-translate-y-1.5 hover:shadow-lift">
|
||
<div
|
||
className={`flex h-12 w-12 items-center justify-center rounded-2xl ${feature.tint} transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-6`}
|
||
>
|
||
<feature.icon className="h-6 w-6" strokeWidth={2.1} />
|
||
</div>
|
||
<h3 className="mt-5 font-display text-lg font-semibold tracking-tight">
|
||
{feature.title}
|
||
</h3>
|
||
<p className="mt-2 text-sm leading-relaxed text-ink-soft">
|
||
{feature.text}
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|