Waitlist

Installation

Variants

Files installed (1)

• src/lib/components/blocks/waitlist/Waitlist.svelte4 kB

  Copy

  <script lang="ts">
    import type { Component } from 'svelte'
    import { Check, Layers, Link2, ShieldCheck, Zap } from '@lucide/svelte'
    import { Button } from '$lib/components/ui/button'
    import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card'
    import { Input } from '$lib/components/ui/input'
  
    let email = $state('')
    let submitted = $state(false)
    const position = 214
  
    const benefits: { icon: Component; title: string; copy: string }[] = [
      { icon: Zap, title: 'Ships in minutes', copy: 'Drop-in blocks and primitives, not boilerplate to rewrite.' },
      {
        icon: ShieldCheck,
        title: 'Own the code',
        copy: 'Every file is copied into your repo. Edit it freely, no lock-in.',
      },
      { icon: Layers, title: 'Triple framework', copy: 'Vue, React, and Svelte mirrors stay in lockstep.' },
    ]
  
    function handleSubmit(e: SubmitEvent) {
      e.preventDefault()
      if (!email.includes('@')) return
      submitted = true
    }
  </script>
  
  <section data-slot="waitlist" class="bg-background grid min-h-screen lg:grid-cols-2">
    <div class="bg-muted/40 relative flex items-center px-6 py-16 lg:border-r lg:px-16">
      <div class="max-w-lg">
        <div class="flex items-center gap-3">
          <div class="bg-primary text-primary-foreground grid size-10 place-items-center rounded-lg shadow-sm">
            <Layers class="size-5" />
          </div>
          <span class="text-sm font-semibold tracking-tight">Northwind</span>
        </div>
  
        <h1 class="mt-8 text-3xl font-semibold tracking-tight sm:text-4xl">Be first in line when we launch</h1>
        <p class="text-muted-foreground mt-4 text-base sm:text-lg">
          We&rsquo;re onboarding a small cohort of teams each week. Join the waitlist and we&rsquo;ll save your spot.
        </p>
  
        <ul class="mt-10 space-y-6">
          {#each benefits as benefit (benefit.title)}
            {@const BenefitIcon = benefit.icon}
            <li class="flex gap-4">
              <div class="bg-primary/10 text-primary grid size-9 shrink-0 place-items-center rounded-lg">
                <BenefitIcon class="size-4.5" />
              </div>
              <div>
                <p class="text-sm font-medium">{benefit.title}</p>
                <p class="text-muted-foreground mt-1 text-sm">{benefit.copy}</p>
              </div>
            </li>
          {/each}
        </ul>
      </div>
    </div>
  
    <div class="flex items-center justify-center px-6 py-16">
      <Card class="w-full max-w-md">
        {#if !submitted}
          <CardHeader>
            <CardTitle>Join the waitlist</CardTitle>
            <CardDescription
              >Early access rolls out weekly. No spam &mdash; one email when it&rsquo;s your turn.</CardDescription
            >
          </CardHeader>
          <CardContent>
            <form class="space-y-3" onsubmit={handleSubmit}>
              <Input bind:value={email} type="email" placeholder="you@company.com" required />
              <Button type="submit" class="w-full">Request access</Button>
            </form>
            <p class="text-muted-foreground mt-4 text-xs">2,300+ teams already in line</p>
          </CardContent>
        {:else}
          <CardContent class="pt-6 text-center">
            <div class="bg-primary/10 text-primary mx-auto grid size-12 place-items-center rounded-full">
              <Check class="size-6" />
            </div>
            <h2 class="mt-5 text-2xl font-semibold tracking-tight">You&rsquo;re #{position} in line</h2>
            <p class="text-muted-foreground mt-2 text-sm">
              We&rsquo;ll email {email} as soon as your spot opens up.
            </p>
            <div class="bg-muted/50 mt-6 flex items-start gap-3 rounded-lg border p-4 text-left">
              <Link2 class="text-muted-foreground mt-0.5 size-4 shrink-0" />
              <p class="text-muted-foreground text-xs">
                Want to skip the queue? Share your invite link after launch &mdash; every friend who signs up moves you
                up 5 spots.
              </p>
            </div>
          </CardContent>
        {/if}
      </Card>
    </div>
  </section>
  

Raw manifest:https://uipkge.dev/r/svelte/waitlist.json