UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Hero Waitlist Glow

blockmarketing
Boilerplate repo

High-conversion early access waitlist hero with role tracks, dynamic live queue spot generator, launch countdown clock, and referral booster.

Installation

$npx uipkge-ng@latest add hero-waitlist-glow
Manifest:https://uipkge.dev/r/angular/hero-waitlist-glow.jsonInstalls to:src/app/components/blocks/hero-waitlist-glow/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

HeroWaitlistRoleOption
interface HeroWaitlistRoleOption {
  id: HeroWaitlistRole
  label: string
  perk: string
}

npm dependencies

lucide-angular

Files installed (2)

  • src/app/components/blocks/hero-waitlist-glow/hero-waitlist-glow.component.ts10.8 kB
    // High-conversion waitlist hero: role tracks with perks, a live launch countdown,
// an email capture form and a success queue state with a referral booster.
// Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, computed, signal } from '@angular/core'
import { ArrowRight, Check, CheckCircle2, Copy, LucideAngularModule, Shield } from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiButtonComponent } from '@/ui/button/button.component'
import { UiCardComponent } from '@/ui/card/card.component'
import { UiInputComponent } from '@/ui/input/input.component'

export type HeroWaitlistRole = 'frontend' | 'architect' | 'founder'

export interface HeroWaitlistRoleOption {
  id: HeroWaitlistRole
  label: string
  perk: string
}

const roleOptions: HeroWaitlistRoleOption[] = [
  { id: 'frontend', label: 'Frontend / UI Engineer', perk: 'Direct access to raw SFC / TSX templates & Figma tokens' },
  { id: 'architect', label: 'Solutions Architect', perk: 'Full unbundled AST registry spec & self-hosting blueprints' },
  { id: 'founder', label: 'Founder / CTO', perk: 'Zero runtime dependency compliance & white-label enterprise SLA' },
]

function pad(value: number): string {
  return String(value).padStart(2, '0')
}

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-hero-waitlist-glow, [ui-hero-waitlist-glow]',
  standalone: true,
  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
  host: { '[attr.class]': '"contents"' },
  imports: [LucideAngularModule, UiButtonComponent, UiCardComponent, UiInputComponent],
  template: `
    <section data-slot="hero-waitlist-glow" [class]="rootClass">
      <!-- Center Radial Glow -->
      <div
        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"
      ></div>

      <div class="mx-auto max-w-4xl space-y-10">
        <!-- Top Pill -->
        <div
          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"
        >
          <span class="bg-success size-2 rounded-full"></span>
          <span class="text-foreground font-medium">Public Registry Release</span>
          <span class="text-muted-foreground">&bull;</span>
          <span class="text-primary font-semibold">96% Claimed</span>
        </div>

        <!-- Main Headline -->
        <div class="mx-auto max-w-3xl space-y-4">
          <h1 class="text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl">
            Unbundled UI components and composable application blocks.
          </h1>
          <p class="text-muted-foreground mx-auto max-w-2xl text-base leading-relaxed sm:text-lg">
            Join over thousands of developers building high-velocity web applications with unbundled Vue 3.5 & React 19
            components.
          </p>
        </div>

        <!-- Live Countdown Bar -->
        <div class="mx-auto grid max-w-md grid-cols-4 gap-3">
          @for (unit of countdownUnits(); track unit.label) {
            <div class="border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm">
              <p class="text-foreground font-mono text-2xl font-bold">{{ unit.value }}</p>
              <p class="text-muted-foreground mt-0.5 font-mono text-xs uppercase">{{ unit.label }}</p>
            </div>
          }
        </div>

        <!-- Interactive Waitlist Workbench Card -->
        <div
          ui-card
          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"
        >
          @if (!isSubmitted()) {
            <div class="space-y-6">
              <!-- Role Selection Tabs -->
              <div class="space-y-2">
                <label class="text-muted-foreground font-mono text-xs tracking-wider uppercase"
                  >Select Your Track</label
                >
                <div class="grid grid-cols-3 gap-2">
                  @for (opt of roles; track opt.id) {
                    <button type="button" [class]="roleClass(opt.id)" (click)="selectedRole.set(opt.id)">
                      {{ opt.label.split(' ')[0] }}
                    </button>
                  }
                </div>
                <p class="text-muted-foreground pt-1 text-xs italic">&rarr; {{ activeRole().perk }}</p>
              </div>

              <!-- Email Input & Submit -->
              <form class="space-y-3" (submit)="onSubmit($event)">
                <div class="flex flex-col items-center gap-2 sm:flex-row">
                  <ui-input
                    [value]="email()"
                    (valueChange)="email.set($event)"
                    type="email"
                    placeholder="name@company.com"
                    aria-label="Email address"
                    required
                    class="bg-background h-11 font-mono text-sm"
                  />
                  <button
                    ui-button
                    type="submit"
                    size="lg"
                    class="h-11 w-full shrink-0 gap-2 px-6 font-semibold sm:w-auto"
                  >
                    <span>Get Started</span>
                    <lucide-icon [img]="ArrowRight" class="size-4" />
                  </button>
                </div>
                <p class="text-muted-foreground flex items-center gap-1.5 text-xs">
                  <lucide-icon [img]="Shield" class="text-success size-3.5" />
                  <span>Zero spam. Instant private registry token delivered upon verification.</span>
                </p>
              </form>
            </div>
          } @else {
            <!-- Success Queue State -->
            <div class="space-y-5 py-4 text-center">
              <div
                class="border-success/20 bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full border"
              >
                <lucide-icon [img]="CheckCircle2" class="size-6" />
              </div>

              <div class="space-y-1">
                <h3 class="text-foreground text-xl font-bold">You're on the list!</h3>
                <p class="text-primary font-mono text-xs font-semibold">Priority Spot: #{{ queueNumber() }} in line</p>
                <p class="text-muted-foreground mx-auto max-w-sm text-xs">
                  We dispatched an invitation link to <span class="text-foreground font-mono">{{ email() }}</span
                  >.
                </p>
              </div>

              <!-- Referral Link Box -->
              <div class="border-border bg-muted/30 mx-auto max-w-md space-y-2 rounded-xl border p-3">
                <div class="text-muted-foreground flex items-center justify-between font-mono text-xs">
                  <span>Jump 5 spots per referral</span>
                  <span class="text-success font-bold">+5 boost</span>
                </div>
                <div class="flex items-center gap-2">
                  <ui-input
                    [value]="referralLink()"
                    readonly
                    aria-label="Referral link"
                    class="bg-background h-9 font-mono text-xs"
                  />
                  <button
                    ui-button
                    type="button"
                    size="sm"
                    variant="outline"
                    class="h-9 gap-1.5 px-3"
                    (click)="copyReferral()"
                  >
                    @if (referralCopied()) {
                      <lucide-icon [img]="Check" class="text-success size-3" />
                    } @else {
                      <lucide-icon [img]="Copy" class="size-3" />
                    }
                    <span>{{ referralCopied() ? 'Copied' : 'Copy' }}</span>
                  </button>
                </div>
              </div>
            </div>
          }
        </div>
      </div>
    </section>
  `,
})
export class UiHeroWaitlistGlowComponent implements OnInit, OnDestroy {
  protected readonly ArrowRight = ArrowRight
  protected readonly Check = Check
  protected readonly CheckCircle2 = CheckCircle2
  protected readonly Copy = Copy
  protected readonly Shield = Shield

  protected readonly roles = roleOptions

  @Input('class') className?: string

  readonly selectedRole = signal<HeroWaitlistRole>('frontend')
  readonly email = signal('')
  readonly isSubmitted = signal(false)
  readonly queueNumber = signal<number | null>(null)
  readonly referralCopied = signal(false)

  readonly days = signal(14)
  readonly hours = signal(8)
  readonly minutes = signal(42)
  readonly seconds = signal(19)

  private timer: ReturnType<typeof setInterval> | undefined
  private copyTimer: ReturnType<typeof setTimeout> | undefined

  readonly activeRole = computed(() => roleOptions.find((r) => r.id === this.selectedRole()) ?? roleOptions[0]!)

  readonly countdownUnits = computed(() => [
    { label: 'Days', value: pad(this.days()) },
    { label: 'Hours', value: pad(this.hours()) },
    { label: 'Mins', value: pad(this.minutes()) },
    { label: 'Secs', value: pad(this.seconds()) },
  ])

  readonly referralLink = computed(() => `https://uipkge.dev/join?ref=${this.queueNumber()}`)

  get rootClass(): string {
    return cn('bg-background relative overflow-hidden px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8', this.className)
  }

  roleClass(id: HeroWaitlistRole): string {
    return cn(
      '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',
      this.selectedRole() === id
        ? 'border-primary bg-primary/10 text-foreground font-semibold shadow-xs'
        : 'border-border bg-background/50 text-muted-foreground hover:text-foreground',
    )
  }

  ngOnInit(): void {
    this.timer = setInterval(() => this.tick(), 1000)
  }

  ngOnDestroy(): void {
    clearInterval(this.timer)
    clearTimeout(this.copyTimer)
  }

  tick(): void {
    if (this.seconds() > 0) {
      this.seconds.update((v) => v - 1)
    } else {
      this.seconds.set(59)
      if (this.minutes() > 0) {
        this.minutes.update((v) => v - 1)
      } else {
        this.minutes.set(59)
        if (this.hours() > 0) {
          this.hours.update((v) => v - 1)
        }
      }
    }
  }

  onSubmit(event: Event): void {
    event.preventDefault()
    this.submitWaitlist()
  }

  submitWaitlist(): void {
    if (!this.email() || !this.email().includes('@')) return
    this.queueNumber.set(Math.floor(Math.random() * 80) + 120)
    this.isSubmitted.set(true)
  }

  copyReferral(): void {
    void navigator.clipboard?.writeText(`https://uipkge.dev/join?ref=${this.queueNumber() ?? 142}`)
    this.referralCopied.set(true)
    clearTimeout(this.copyTimer)
    this.copyTimer = setTimeout(() => this.referralCopied.set(false), 2000)
  }
}
  • src/app/components/blocks/hero-waitlist-glow/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/hero-waitlist-glow.json