Initialisieren
This commit is contained in:
156
components/playground.tsx
Normal file
156
components/playground.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowRight,
|
||||
CircleDashed,
|
||||
Coins,
|
||||
Dices,
|
||||
Disc3,
|
||||
Hash,
|
||||
HelpCircle,
|
||||
ListChecks,
|
||||
} from "lucide-react";
|
||||
import Reveal from "@/components/reveal";
|
||||
|
||||
const GENERATORS = [
|
||||
{
|
||||
id: "janein",
|
||||
slug: "ja-nein-generator",
|
||||
title: "Ja-Nein-Generator",
|
||||
badge: "Zwei Optionen",
|
||||
description:
|
||||
"Stelle eine Frage und erhalte sofort eine unparteiische Antwort mit Ja oder Nein. Ideal für schnelle Alltagsentscheidungen.",
|
||||
icon: HelpCircle,
|
||||
},
|
||||
{
|
||||
id: "coin",
|
||||
slug: "muenze-werfen",
|
||||
title: "Münze werfen",
|
||||
badge: "3D Münzwurf",
|
||||
description:
|
||||
"Wirf eine goldene 3D-Münze in die Luft und überlasse knifflige Wahlentscheidungen dem klassischen Kopf oder Zahl.",
|
||||
icon: Coins,
|
||||
},
|
||||
{
|
||||
id: "wheel",
|
||||
slug: "gluecksrad",
|
||||
title: "Glücksrad online",
|
||||
badge: "Entscheidungsrad",
|
||||
description:
|
||||
"Erstelle dein eigenes Glücksrad mit individuellen Feldern und drehe für eine transparente, zufällige Auswahl.",
|
||||
icon: Disc3,
|
||||
},
|
||||
{
|
||||
id: "dice",
|
||||
slug: "wuerfel-online",
|
||||
title: "Würfel online",
|
||||
badge: "Würfel-Simulator",
|
||||
description:
|
||||
"Rolle einen oder mehrere 6er, 10er oder benutzerdefinierte 3D-Würfel für Spiele & Entscheidungen.",
|
||||
icon: Dices,
|
||||
},
|
||||
{
|
||||
id: "number",
|
||||
slug: "zufallszahl-generator",
|
||||
title: "Zufallszahl-Generator",
|
||||
badge: "Zahlenbereich",
|
||||
description:
|
||||
"Generiere eine oder mehrere echte Zufallszahlen in einem frei definierten Bereich zwischen Minimum und Maximum.",
|
||||
icon: Hash,
|
||||
},
|
||||
{
|
||||
id: "ball",
|
||||
slug: "magic-8-ball",
|
||||
title: "Magic 8-Ball",
|
||||
badge: "Mystisches Orakel",
|
||||
description:
|
||||
"Befrage die magische Billardkugel und erhalte geheimnisvolle Antworten auf deine Lebensfragen.",
|
||||
icon: CircleDashed,
|
||||
},
|
||||
{
|
||||
id: "list",
|
||||
slug: "namen-auslosen",
|
||||
title: "Namen & Liste auslosen",
|
||||
badge: "Gewinnspiel & Teams",
|
||||
description:
|
||||
"Mische Namen oder Optionen in einer Liste, lose Gewinner aus oder erstelle automatisch zufällige Gruppen.",
|
||||
icon: ListChecks,
|
||||
},
|
||||
] as const;
|
||||
|
||||
export default function Playground() {
|
||||
return (
|
||||
<section id="tools" className="relative scroll-mt-20 py-20 sm:py-28">
|
||||
<div className="relative 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">
|
||||
Die 7 Zufalls-Tools
|
||||
</p>
|
||||
<h2 className="mt-3 text-4xl font-semibold tracking-[-0.02em] sm:text-5xl">
|
||||
Wähle deinen{" "}
|
||||
<em className="font-display italic text-[#0d7a57]">Generator</em>.
|
||||
</h2>
|
||||
<p className="mt-4 text-lg leading-relaxed text-ink-soft">
|
||||
Klicke auf ein Tool, um direkt zur interaktiven Vollversion mit
|
||||
allen Einstellungen zu gelangen.
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{GENERATORS.map((tool, i) => {
|
||||
const Icon = tool.icon;
|
||||
const isFeatured = i === 6;
|
||||
|
||||
return (
|
||||
<Reveal
|
||||
key={tool.id}
|
||||
delay={i * 0.06}
|
||||
className={isFeatured ? "sm:col-span-2 lg:col-span-1" : ""}
|
||||
>
|
||||
<Link
|
||||
href={`/${tool.slug}`}
|
||||
className="group relative flex h-full flex-col justify-between overflow-hidden rounded-[2rem] border border-line bg-surface p-7 sm:p-8 shadow-lift transition-all duration-300 hover:-translate-y-1.5 hover:border-[#0d7a57]/40 hover:shadow-[0_20px_45px_rgba(13,122,87,0.14)]"
|
||||
>
|
||||
{/* Subtiler Glow-Effekt im Hintergrund der Karte */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute -right-12 -top-12 h-36 w-36 rounded-full bg-[#0d7a57]/5 blur-2xl transition-all duration-500 group-hover:scale-150 group-hover:bg-[#0d7a57]/15"
|
||||
/>
|
||||
|
||||
<div>
|
||||
{/* Icon & Badge Header */}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-[#0d7a57]/20 bg-[#e6f7f0] text-[#0d7a57] shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-[#0d7a57] group-hover:bg-[#0d7a57] group-hover:text-white">
|
||||
<Icon className="h-6 w-6" strokeWidth={2.1} />
|
||||
</div>
|
||||
<span className="inline-flex items-center rounded-full border border-line bg-paper px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-ink-soft">
|
||||
{tool.badge}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Titel & Beschreibung */}
|
||||
<h3 className="mt-6 font-display text-2xl font-semibold tracking-tight text-ink transition-colors duration-200 group-hover:text-[#0d7a57]">
|
||||
{tool.title}
|
||||
</h3>
|
||||
<p className="mt-2.5 text-sm leading-relaxed text-ink-soft">
|
||||
{tool.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Link Footer */}
|
||||
<div className="mt-8 flex items-center justify-between border-t border-line/60 pt-4 text-xs font-semibold uppercase tracking-widest text-[#0d7a57]">
|
||||
<span>Generator öffnen</span>
|
||||
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-[#e6f7f0] text-[#0d7a57] transition-all duration-300 group-hover:translate-x-1 group-hover:bg-[#0d7a57] group-hover:text-white">
|
||||
<ArrowRight className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</Reveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user