{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hero-waitlist-glow",
  "title": "Hero Waitlist Glow",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/hero-waitlist-glow/HeroWaitlistGlow.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref } from 'vue'\nimport { ArrowRight, Check, CheckCircle2, Copy, Shield } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\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\nconst selectedRole = ref<Role>('frontend')\nconst email = ref('')\nconst isSubmitted = ref(false)\nconst queueNumber = ref<number | null>(null)\nconst referralCopied = ref(false)\n\n// Countdown timer state\nconst timeLeft = ref({\n  days: 14,\n  hours: 8,\n  minutes: 42,\n  seconds: 19,\n})\n\nlet timerInterval: ReturnType<typeof setInterval> | undefined\n\nonMounted(() => {\n  timerInterval = setInterval(() => {\n    if (timeLeft.value.seconds > 0) {\n      timeLeft.value.seconds--\n    } else {\n      timeLeft.value.seconds = 59\n      if (timeLeft.value.minutes > 0) {\n        timeLeft.value.minutes--\n      } else {\n        timeLeft.value.minutes = 59\n        if (timeLeft.value.hours > 0) {\n          timeLeft.value.hours--\n        }\n      }\n    }\n  }, 1000)\n})\n\nonUnmounted(() => {\n  if (timerInterval) clearInterval(timerInterval)\n})\n\nfunction submitWaitlist() {\n  if (!email.value || !email.value.includes('@')) return\n  queueNumber.value = Math.floor(Math.random() * 80) + 120\n  isSubmitted.value = true\n}\n\nfunction copyReferral() {\n  navigator.clipboard.writeText(`https://uipkge.dev/join?ref=${queueNumber.value || 142}`)\n  referralCopied.value = true\n  setTimeout(() => (referralCopied.value = false), 2000)\n}\n\nconst activeRoleObj = computed(() => roleOptions.find((r) => r.id === selectedRole.value)!)\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-waitlist-glow\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <!-- Center Radial Glow -->\n    <div\n      class=\"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\n    <div class=\"mx-auto max-w-4xl space-y-10\">\n      <!-- Top Pill -->\n      <div\n        class=\"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      >\n        <span class=\"bg-success size-2 rounded-full\" />\n        <span class=\"text-foreground font-medium\">Public Registry Release</span>\n        <span class=\"text-muted-foreground\">&bull;</span>\n        <span class=\"text-primary font-semibold\">96% Claimed</span>\n      </div>\n\n      <!-- Main Headline -->\n      <div class=\"mx-auto max-w-3xl space-y-4\">\n        <h1 class=\"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 class=\"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 class=\"mx-auto grid max-w-md grid-cols-4 gap-3\">\n        <div class=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n          <p class=\"text-foreground font-mono text-2xl font-bold\">{{ String(timeLeft.days).padStart(2, '0') }}</p>\n          <p class=\"text-muted-foreground mt-0.5 font-mono text-xs uppercase\">Days</p>\n        </div>\n        <div class=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n          <p class=\"text-foreground font-mono text-2xl font-bold\">{{ String(timeLeft.hours).padStart(2, '0') }}</p>\n          <p class=\"text-muted-foreground mt-0.5 font-mono text-xs uppercase\">Hours</p>\n        </div>\n        <div class=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n          <p class=\"text-foreground font-mono text-2xl font-bold\">{{ String(timeLeft.minutes).padStart(2, '0') }}</p>\n          <p class=\"text-muted-foreground mt-0.5 font-mono text-xs uppercase\">Mins</p>\n        </div>\n        <div class=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n          <p class=\"text-foreground font-mono text-2xl font-bold\">{{ String(timeLeft.seconds).padStart(2, '0') }}</p>\n          <p class=\"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\n        class=\"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      >\n        <div v-if=\"!isSubmitted\" class=\"space-y-6\">\n          <!-- Role Selection Tabs -->\n          <div class=\"space-y-2\">\n            <label class=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">Select Your Track</label>\n            <div class=\"grid grid-cols-3 gap-2\">\n              <button\n                v-for=\"opt in roleOptions\"\n                :key=\"opt.id\"\n                type=\"button\"\n                class=\"rounded-lg border p-2.5 text-center text-xs font-medium transition-colors\"\n                :class=\"\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                @click=\"selectedRole = opt.id\"\n              >\n                {{ opt.label.split(' ')[0] }}\n              </button>\n            </div>\n            <p class=\"text-muted-foreground pt-1 text-xs italic\">&rarr; {{ activeRoleObj.perk }}</p>\n          </div>\n\n          <!-- Email Input & Submit -->\n          <form class=\"space-y-3\" @submit.prevent=\"submitWaitlist\">\n            <div class=\"flex flex-col items-center gap-2 sm:flex-row\">\n              <Input\n                v-model=\"email\"\n                type=\"email\"\n                placeholder=\"name@company.com\"\n                required\n                class=\"bg-background h-11 font-mono text-sm\"\n              />\n              <Button type=\"submit\" size=\"lg\" class=\"h-11 w-full shrink-0 gap-2 px-6 font-semibold sm:w-auto\">\n                <span>Get Started</span>\n                <ArrowRight class=\"size-4\" />\n              </Button>\n            </div>\n            <p class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n              <Shield class=\"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        <!-- Success Queue State -->\n        <div v-else class=\"space-y-5 py-4 text-center\">\n          <div\n            class=\"border-success/20 bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full border\"\n          >\n            <CheckCircle2 class=\"size-6\" />\n          </div>\n\n          <div class=\"space-y-1\">\n            <h3 class=\"text-foreground text-xl font-bold\">You're on the list!</h3>\n            <p class=\"text-primary font-mono text-xs font-semibold\">Priority Spot: #{{ queueNumber }} in line</p>\n            <p class=\"text-muted-foreground mx-auto max-w-sm text-xs\">\n              We dispatched an invitation link to <span class=\"text-foreground font-mono\">{{ email }}</span\n              >.\n            </p>\n          </div>\n\n          <!-- Referral Link Box -->\n          <div class=\"border-border bg-muted/30 mx-auto max-w-md space-y-2 rounded-xl border p-3\">\n            <div class=\"text-muted-foreground flex items-center justify-between font-mono text-xs\">\n              <span>Jump 5 spots per referral</span>\n              <span class=\"text-success font-bold\">+5 boost</span>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <Input\n                readonly\n                :value=\"`https://uipkge.dev/join?ref=${queueNumber}`\"\n                class=\"bg-background h-9 font-mono text-xs\"\n              />\n              <Button type=\"button\" size=\"sm\" variant=\"outline\" class=\"h-9 gap-1.5 px-3\" @click=\"copyReferral\">\n                <Check v-if=\"referralCopied\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                <span>{{ referralCopied ? 'Copied' : 'Copy' }}</span>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HeroWaitlistGlow.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/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"
}