Initialisieren

2026-07-23 21:59:15 +02:00
commit 2d961adad4
76 changed files with 14318 additions and 0 deletions
--- a/components/features.tsx
+++ b/components/features.tsx
@@ -0,0 +1,76 @@
+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>
+  );
+}