{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "waitlist", "title": "Waitlist", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/waitlist/waitlist.component.ts", "content": "// Pre-launch signup page: split layout with product pitch, logo mark and three benefit\n// bullets on the left, and an email capture card on the right that flips to a\n// queue-position confirmation with referral hint after submit. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { Check, Layers, Link2, LucideAngularModule, ShieldCheck, Zap } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\n\ninterface WaitlistBenefit {\n icon: typeof Zap\n title: string\n copy: string\n}\n\nconst benefits: WaitlistBenefit[] = [\n { icon: Zap, title: 'Ships in minutes', copy: 'Drop-in blocks and primitives, not boilerplate to rewrite.' },\n {\n icon: ShieldCheck,\n title: 'Own the code',\n copy: 'Every file is copied into your repo. Edit it freely, no lock-in.',\n },\n { icon: Layers, title: 'Dual framework', copy: 'Vue and React mirrors stay in lockstep across every component.' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-waitlist, [ui-waitlist]',\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: [\n LucideAngularModule,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n ],\n template: `\n
\n
\n
\n
\n
\n \n
\n Northwind\n
\n\n

Be first in line when we launch

\n

\n We’re onboarding a small cohort of teams each week. Join the waitlist and we’ll save your spot.\n

\n\n
    \n @for (benefit of benefits; track benefit.title) {\n
  • \n
    \n \n
    \n
    \n

    {{ benefit.title }}

    \n

    {{ benefit.copy }}

    \n
    \n
    • \n }\n
\n
\n
\n\n
\n
\n @if (!submitted()) {\n
\n

Join the waitlist

\n

\n Early access rolls out weekly. No spam — one email when it’s your turn.\n

\n
\n
\n
\n \n \n \n

2,300+ teams already in line

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

You’re #{{ position() }} in line

\n

\n We’ll email {{ email() }} as soon as your spot opens up.\n

\n
\n \n

\n Want to skip the queue? Share your invite link after launch — every friend who signs up moves\n you up 5 spots.\n

\n
\n
\n }\n
\n
\n
\n `,\n})\nexport class UiWaitlistComponent {\n protected readonly Check = Check\n protected readonly Layers = Layers\n protected readonly Link2 = Link2\n\n protected readonly benefits = benefits\n\n @Input('class') className?: string\n @Input() set initialEmail(v: string) {\n this.email.set(v ?? '')\n }\n\n readonly email = signal('')\n readonly submitted = signal(false)\n readonly position = signal(214)\n\n get rootClass(): string {\n return cn('bg-background grid min-h-screen lg:grid-cols-2', this.className)\n }\n\n handleSubmit(event: Event): void {\n event.preventDefault()\n if (!this.email().includes('@')) return\n this.submitted.set(true)\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/waitlist/waitlist.component.ts" }, { "path": "packages/registry-angular/blocks/waitlist/index.ts", "content": "export { UiWaitlistComponent } from './waitlist.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/waitlist/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": "Pre-launch signup page. Split layout with product pitch, logo mark, three benefit bullets on the left and an email capture card on the right that flips to a queue-position confirmation with referral hint after submit.", "categories": [ "marketing" ] }