SEO blogpost V3

components/playground.tsx

@@ -10,6 +10,7 @@ import {
   Hash,
   HelpCircle,
   ListChecks,
+  Scale,
 } from "lucide-react";
 import Reveal from "@/components/reveal";
 
@@ -32,6 +33,15 @@ const GENERATORS = [
       "Kino oder Couch? Wirf die Münze und entscheide zwischen Kopf oder Zahl – auch mit eigenen Beschriftungen.",
     icon: Coins,
   },
+  {
+    id: "entwederoder",
+    slug: "entweder-oder",
+    title: "Entweder-oder-Generator",
+    badge: "Option A oder B",
+    description:
+      "Italiener oder Sushi? Trage zwei eigene Optionen ein und lass den Generator zufällig wählen.",
+    icon: Scale,
+  },
   {
     id: "wheel",
     slug: "gluecksrad",
@@ -85,7 +95,7 @@ export default function Playground() {
       <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
+            Die 8 Zufalls-Tools
           </p>
           <h2 className="mt-3 text-4xl font-semibold tracking-[-0.02em] sm:text-5xl">
             Wähle das Tool für deine{" "}
@@ -97,16 +107,14 @@ export default function Playground() {
           </p>
         </Reveal>
 
-        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {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" : ""}
+                delay={i * 0.05}
               >
                 <Link
                   href={`/${tool.slug}`}