{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-waitlist-glow",
  "title": "Hero Waitlist Glow",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/hero-waitlist-glow/HeroWaitlistGlow.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Check, CheckCircle2, Copy, Shield } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { cn } from '@/lib/utils'\n\ntype Role = 'frontend' | 'architect' | 'founder'\n\ninterface RoleOption {\n  id: Role\n  label: string\n  perk: string\n}\n\nconst roleOptions: RoleOption[] = [\n  { id: 'frontend', label: 'Frontend / UI Engineer', perk: 'Direct access to raw SFC / TSX templates & Figma tokens' },\n  { id: 'architect', label: 'Solutions Architect', perk: 'Full unbundled AST registry spec & self-hosting blueprints' },\n  { id: 'founder', label: 'Founder / CTO', perk: 'Zero runtime dependency compliance & white-label enterprise SLA' },\n]\n\nexport interface HeroWaitlistGlowProps {\n  className?: string\n}\n\nexport function HeroWaitlistGlow({ className }: HeroWaitlistGlowProps) {\n  const [selectedRole, setSelectedRole] = React.useState<Role>('frontend')\n  const [email, setEmail] = React.useState('')\n  const [isSubmitted, setIsSubmitted] = React.useState(false)\n  const [queueNumber, setQueueNumber] = React.useState<number | null>(null)\n  const [referralCopied, setReferralCopied] = React.useState(false)\n\n  // Countdown timer state\n  const [timeLeft, setTimeLeft] = React.useState({\n    days: 14,\n    hours: 8,\n    minutes: 42,\n    seconds: 19,\n  })\n\n  React.useEffect(() => {\n    const timer = setInterval(() => {\n      setTimeLeft((prev) => {\n        if (prev.seconds > 0) {\n          return { ...prev, seconds: prev.seconds - 1 }\n        }\n        if (prev.minutes > 0) {\n          return { ...prev, minutes: prev.minutes - 1, seconds: 59 }\n        }\n        if (prev.hours > 0) {\n          return { ...prev, hours: prev.hours - 1, minutes: 59, seconds: 59 }\n        }\n        return prev\n      })\n    }, 1000)\n\n    return () => clearInterval(timer)\n  }, [])\n\n  const submitWaitlist = (e: React.FormEvent) => {\n    e.preventDefault()\n    if (!email || !email.includes('@')) return\n    setQueueNumber(Math.floor(Math.random() * 80) + 120)\n    setIsSubmitted(true)\n  }\n\n  const copyReferral = () => {\n    navigator.clipboard.writeText(`https://uipkge.dev/join?ref=${queueNumber || 142}`)\n    setReferralCopied(true)\n    setTimeout(() => setReferralCopied(false), 2000)\n  }\n\n  const activeRoleObj = roleOptions.find((r) => r.id === selectedRole)!\n\n  return (\n    <section\n      data-slot=\"hero-waitlist-glow\"\n      className={cn(\n        'bg-background relative overflow-hidden px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8',\n        className,\n      )}\n    >\n      {/* Center Radial Glow */}\n      <div className=\"bg-primary/15 pointer-events-none absolute top-1/4 left-1/2 -z-10 h-96 w-full max-w-4xl -translate-x-1/2 -translate-y-1/2 rounded-full blur-xl\" />\n\n      <div className=\"mx-auto max-w-4xl space-y-10\">\n        {/* Top Pill */}\n        <div className=\"border-border bg-muted/40 inline-flex items-center gap-2 rounded-full border px-3.5 py-1 font-mono text-xs shadow-xs\">\n          <span className=\"bg-success size-2 rounded-full\" />\n          <span className=\"text-foreground font-medium\">Public Registry Release</span>\n          <span className=\"text-muted-foreground\">&bull;</span>\n          <span className=\"text-primary font-semibold\">96% Claimed</span>\n        </div>\n\n        {/* Main Headline */}\n        <div className=\"mx-auto max-w-3xl space-y-4\">\n          <h1 className=\"text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n            Unbundled UI components and composable application blocks.\n          </h1>\n          <p className=\"text-muted-foreground mx-auto max-w-2xl text-base leading-relaxed sm:text-lg\">\n            Join over thousands of developers building high-velocity web applications with unbundled Vue 3.5 & React 19\n            components.\n          </p>\n        </div>\n\n        {/* Live Countdown Bar */}\n        <div className=\"mx-auto grid max-w-md grid-cols-4 gap-3\">\n          <div className=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n            <p className=\"text-foreground font-mono text-2xl font-bold\">{String(timeLeft.days).padStart(2, '0')}</p>\n            <p className=\"text-muted-foreground mt-0.5 font-mono text-xs uppercase\">Days</p>\n          </div>\n          <div className=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n            <p className=\"text-foreground font-mono text-2xl font-bold\">{String(timeLeft.hours).padStart(2, '0')}</p>\n            <p className=\"text-muted-foreground mt-0.5 font-mono text-xs uppercase\">Hours</p>\n          </div>\n          <div className=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n            <p className=\"text-foreground font-mono text-2xl font-bold\">{String(timeLeft.minutes).padStart(2, '0')}</p>\n            <p className=\"text-muted-foreground mt-0.5 font-mono text-xs uppercase\">Mins</p>\n          </div>\n          <div className=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n            <p className=\"text-foreground font-mono text-2xl font-bold\">{String(timeLeft.seconds).padStart(2, '0')}</p>\n            <p className=\"text-muted-foreground mt-0.5 font-mono text-xs uppercase\">Secs</p>\n          </div>\n        </div>\n\n        {/* Interactive Waitlist Workbench Card */}\n        <Card className=\"border-border bg-card/95 mx-auto max-w-2xl overflow-hidden rounded-2xl p-6 text-left shadow-sm backdrop-blur-md sm:p-8\">\n          {!isSubmitted ? (\n            <div className=\"space-y-6\">\n              {/* Role Selection Tabs */}\n              <div className=\"space-y-2\">\n                <label className=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">\n                  Select Your Track\n                </label>\n                <div className=\"grid grid-cols-3 gap-2\">\n                  {roleOptions.map((opt) => (\n                    <button\n                      key={opt.id}\n                      type=\"button\"\n                      className={cn(\n                        'rounded-lg border p-2.5 text-center text-xs font-medium transition-colors',\n                        selectedRole === opt.id\n                          ? 'border-primary bg-primary/10 text-foreground font-semibold shadow-xs'\n                          : 'border-border bg-background/50 text-muted-foreground hover:text-foreground',\n                      )}\n                      onClick={() => setSelectedRole(opt.id)}\n                    >\n                      {opt.label.split(' ')[0]}\n                    </button>\n                  ))}\n                </div>\n                <p className=\"text-muted-foreground pt-1 text-xs italic\">&rarr; {activeRoleObj.perk}</p>\n              </div>\n\n              {/* Email Input & Submit */}\n              <form className=\"space-y-3\" onSubmit={submitWaitlist}>\n                <div className=\"flex flex-col items-center gap-2 sm:flex-row\">\n                  <Input\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                    type=\"email\"\n                    placeholder=\"name@company.com\"\n                    required\n                    className=\"bg-background h-11 font-mono text-sm\"\n                  />\n                  <Button type=\"submit\" size=\"lg\" className=\"h-11 w-full shrink-0 gap-2 px-6 font-semibold sm:w-auto\">\n                    <span>Get Started</span>\n                    <ArrowRight className=\"size-4\" />\n                  </Button>\n                </div>\n                <p className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                  <Shield className=\"text-success size-3.5\" />\n                  <span>Zero spam. Instant private registry token delivered upon verification.</span>\n                </p>\n              </form>\n            </div>\n          ) : (\n            <div className=\"space-y-5 py-4 text-center\">\n              <div className=\"border-success/20 bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full border\">\n                <CheckCircle2 className=\"size-6\" />\n              </div>\n\n              <div className=\"space-y-1\">\n                <h3 className=\"text-foreground text-xl font-bold\">You're on the list!</h3>\n                <p className=\"text-primary font-mono text-xs font-semibold\">Priority Spot: #{queueNumber} in line</p>\n                <p className=\"text-muted-foreground mx-auto max-w-sm text-xs\">\n                  We dispatched an invitation link to <span className=\"text-foreground font-mono\">{email}</span>.\n                </p>\n              </div>\n\n              {/* Referral Link Box */}\n              <div className=\"border-border bg-muted/30 mx-auto max-w-md space-y-2 rounded-xl border p-3\">\n                <div className=\"text-muted-foreground flex items-center justify-between font-mono text-xs\">\n                  <span>Jump 5 spots per referral</span>\n                  <span className=\"text-success font-bold\">+5 boost</span>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Input\n                    readOnly\n                    value={`https://uipkge.dev/join?ref=${queueNumber}`}\n                    className=\"bg-background h-9 font-mono text-xs\"\n                  />\n                  <Button type=\"button\" size=\"sm\" variant=\"outline\" className=\"h-9 gap-1.5 px-3\" onClick={copyReferral}>\n                    {referralCopied ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                    <span>{referralCopied ? 'Copied' : 'Copy'}</span>\n                  </Button>\n                </div>\n              </div>\n            </div>\n          )}\n        </Card>\n      </div>\n    </section>\n  )\n}\nexport default HeroWaitlistGlow\n",
      "type": "registry:block",
      "target": "~/components/blocks/HeroWaitlistGlow.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/input.json"
  ],
  "description": "High-conversion early access waitlist hero with role tracks, dynamic live queue spot generator, launch countdown clock, and referral booster.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}