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