{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "hero-waitlist-glow", "title": "Hero Waitlist Glow", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/hero-waitlist-glow/hero-waitlist-glow.component.ts", "content": "// High-conversion waitlist hero: role tracks with perks, a live launch countdown,\n// an email capture form and a success queue state with a referral booster.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, computed, signal } from '@angular/core'\nimport { ArrowRight, Check, CheckCircle2, Copy, LucideAngularModule, Shield } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\n\nexport type HeroWaitlistRole = 'frontend' | 'architect' | 'founder'\n\nexport interface HeroWaitlistRoleOption {\n id: HeroWaitlistRole\n label: string\n perk: string\n}\n\nconst roleOptions: HeroWaitlistRoleOption[] = [\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\nfunction pad(value: number): string {\n return String(value).padStart(2, '0')\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-hero-waitlist-glow, [ui-hero-waitlist-glow]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiButtonComponent, UiCardComponent, UiInputComponent],\n template: `\n
\n \n \n\n
\n \n \n \n Public Registry Release\n •\n 96% Claimed\n
\n\n \n
\n

\n Unbundled UI components and composable application blocks.\n

\n

\n Join over thousands of developers building high-velocity web applications with unbundled Vue 3.5 & React 19\n components.\n

\n
\n\n \n
\n @for (unit of countdownUnits(); track unit.label) {\n
\n

{{ unit.value }}

\n

{{ unit.label }}

\n
\n }\n
\n\n \n \n @if (!isSubmitted()) {\n
\n \n
\n
\n\n \n
\n
\n \n \n Get Started\n \n \n
\n

\n \n Zero spam. Instant private registry token delivered upon verification.\n

\n
\n
\n } @else {\n \n
\n \n \n
\n\n
\n

You're on the list!

\n

Priority Spot: #{{ queueNumber() }} in line

\n

\n We dispatched an invitation link to {{ email() }}.\n

\n
\n\n \n
\n
\n Jump 5 spots per referral\n +5 boost\n
\n
\n \n \n @if (referralCopied()) {\n \n } @else {\n \n }\n {{ referralCopied() ? 'Copied' : 'Copy' }}\n \n
\n
\n \n }\n \n \n
\n `,\n})\nexport class UiHeroWaitlistGlowComponent implements OnInit, OnDestroy {\n protected readonly ArrowRight = ArrowRight\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Copy = Copy\n protected readonly Shield = Shield\n\n protected readonly roles = roleOptions\n\n @Input('class') className?: string\n\n readonly selectedRole = signal('frontend')\n readonly email = signal('')\n readonly isSubmitted = signal(false)\n readonly queueNumber = signal(null)\n readonly referralCopied = signal(false)\n\n readonly days = signal(14)\n readonly hours = signal(8)\n readonly minutes = signal(42)\n readonly seconds = signal(19)\n\n private timer: ReturnType | undefined\n private copyTimer: ReturnType | undefined\n\n readonly activeRole = computed(() => roleOptions.find((r) => r.id === this.selectedRole()) ?? roleOptions[0]!)\n\n readonly countdownUnits = computed(() => [\n { label: 'Days', value: pad(this.days()) },\n { label: 'Hours', value: pad(this.hours()) },\n { label: 'Mins', value: pad(this.minutes()) },\n { label: 'Secs', value: pad(this.seconds()) },\n ])\n\n readonly referralLink = computed(() => `https://uipkge.dev/join?ref=${this.queueNumber()}`)\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8', this.className)\n }\n\n roleClass(id: HeroWaitlistRole): string {\n return cn(\n 'rounded-lg border p-2.5 text-center text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',\n this.selectedRole() === 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 }\n\n ngOnInit(): void {\n this.timer = setInterval(() => this.tick(), 1000)\n }\n\n ngOnDestroy(): void {\n clearInterval(this.timer)\n clearTimeout(this.copyTimer)\n }\n\n tick(): void {\n if (this.seconds() > 0) {\n this.seconds.update((v) => v - 1)\n } else {\n this.seconds.set(59)\n if (this.minutes() > 0) {\n this.minutes.update((v) => v - 1)\n } else {\n this.minutes.set(59)\n if (this.hours() > 0) {\n this.hours.update((v) => v - 1)\n }\n }\n }\n }\n\n onSubmit(event: Event): void {\n event.preventDefault()\n this.submitWaitlist()\n }\n\n submitWaitlist(): void {\n if (!this.email() || !this.email().includes('@')) return\n this.queueNumber.set(Math.floor(Math.random() * 80) + 120)\n this.isSubmitted.set(true)\n }\n\n copyReferral(): void {\n void navigator.clipboard?.writeText(`https://uipkge.dev/join?ref=${this.queueNumber() ?? 142}`)\n this.referralCopied.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.referralCopied.set(false), 2000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-waitlist-glow/hero-waitlist-glow.component.ts" }, { "path": "packages/registry-angular/blocks/hero-waitlist-glow/index.ts", "content": "export {\n UiHeroWaitlistGlowComponent,\n type HeroWaitlistRole,\n type HeroWaitlistRoleOption,\n} from './hero-waitlist-glow.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-waitlist-glow/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/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" }