{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "waitlist-hero",
  "type": "registry:component",
  "title": "Waitlist hero",
  "description": "A React waitlist hero with a pulsing background glow, an email input, a request access button with an onSubmit callback, and an avatar stack of signups.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/input.json",
    "https://ui.minidev.pro/r/social-proof.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/waitlist-hero.tsx",
      "type": "registry:ui",
      "target": "components/ui/waitlist-hero.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { inputVariants } from \"@/components/ui/input\"\nimport { SocialProof } from \"@/components/ui/social-proof\"\n\nfunction WaitlistHero({\n  onSubmit,\n  className,\n}: {\n  onSubmit?: (email: string) => void\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const [email, setEmail] = React.useState(\"\")\n  return (\n    <section\n      data-slot=\"waitlist-hero\"\n      data-tier=\"premium\"\n      className={cn(\"relative overflow-hidden rounded-2xl border border-border bg-surface px-6 py-24 text-center\", className)}\n    >\n      <motion.div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-x-0 top-0 h-40 bg-[radial-gradient(ellipse_at_top,color-mix(in_oklch,var(--accent)_25%,transparent),transparent_70%)]\"\n        animate={reduce ? undefined : { opacity: [0.7, 1, 0.7] }}\n        transition={{ duration: 6, repeat: Infinity }}\n      />\n      <div className=\"relative mx-auto max-w-xl\">\n        <p className=\"text-xs font-medium tracking-[0.01em] text-fg-muted uppercase\">Coming soon</p>\n        <h1 className=\"mt-3 text-4xl font-medium tracking-[-0.026em] text-fg\">Join the waitlist</h1>\n        <p className=\"mt-3 text-sm text-fg-muted\">Be first to the motion pack, landing templates, and launch kits.</p>\n        <form\n          className=\"mt-6 flex flex-col gap-2 sm:flex-row\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            onSubmit?.(email)\n          }}\n        >\n          <input\n            type=\"email\"\n            required\n            aria-label=\"Email\"\n            placeholder=\"you@company.com\"\n            value={email}\n            onChange={(e) => setEmail(e.target.value)}\n            className={cn(inputVariants({ size: \"default\" }), \"flex-1\")}\n          />\n          <Button type=\"submit\">Request access</Button>\n        </form>\n        <div className=\"mt-6 flex justify-center\">\n          <SocialProof\n            countLabel=\"1,800+ already waiting\"\n            people={[{ name: \"A\" }, { name: \"B\" }, { name: \"C\" }, { name: \"D\" }]}\n          />\n        </div>\n      </div>\n    </section>\n  )\n}\nexport { WaitlistHero }\n"
    }
  ]
}