{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "waitlist",
  "title": "Waitlist",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-react/blocks/waitlist/Waitlist.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Check, Layers, Link2, ShieldCheck, Zap, type LucideIcon } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\n\nconst benefits: { icon: LucideIcon; 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: 'Dual framework', copy: 'Vue and React mirrors stay in lockstep across every component.' },\n]\n\nexport function Waitlist() {\n  const [email, setEmail] = useState('')\n  const [submitted, setSubmitted] = useState(false)\n  const [position] = useState(214)\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    if (!email.includes('@')) return\n    setSubmitted(true)\n  }\n\n  return (\n    <section data-slot=\"waitlist\" className=\"bg-background grid min-h-screen lg:grid-cols-2\">\n      <div className=\"bg-muted/40 relative flex items-center px-6 py-16 lg:border-r lg:px-16\">\n        <div className=\"max-w-lg\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"bg-primary text-primary-foreground grid size-10 place-items-center rounded-lg shadow-sm\">\n              <Layers className=\"size-5\" />\n            </div>\n            <span className=\"text-sm font-semibold tracking-tight\">Northwind</span>\n          </div>\n\n          <h1 className=\"mt-8 text-3xl font-semibold tracking-tight sm:text-4xl\">Be first in line when we launch</h1>\n          <p className=\"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 className=\"mt-10 space-y-6\">\n            {benefits.map((benefit) => (\n              <li key={benefit.title} className=\"flex gap-4\">\n                <div className=\"bg-primary/10 text-primary grid size-9 shrink-0 place-items-center rounded-lg\">\n                  <benefit.icon className=\"size-4.5\" />\n                </div>\n                <div>\n                  <p className=\"text-sm font-medium\">{benefit.title}</p>\n                  <p className=\"text-muted-foreground mt-1 text-sm\">{benefit.copy}</p>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n\n      <div className=\"flex items-center justify-center px-6 py-16\">\n        <Card className=\"w-full max-w-md\">\n          {!submitted ? (\n            <>\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.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form className=\"space-y-3\" onSubmit={handleSubmit}>\n                  <Input\n                    type=\"email\"\n                    placeholder=\"you@company.com\"\n                    value={email}\n                    onChange={(event) => setEmail(event.target.value)}\n                    required\n                  />\n                  <Button type=\"submit\" className=\"w-full\">\n                    Request access\n                  </Button>\n                </form>\n                <p className=\"text-muted-foreground mt-4 text-xs\">2,300+ teams already in line</p>\n              </CardContent>\n            </>\n          ) : (\n            <CardContent className=\"pt-6 text-center\">\n              <div className=\"bg-primary/10 text-primary mx-auto grid size-12 place-items-center rounded-full\">\n                <Check className=\"size-6\" />\n              </div>\n              <h2 className=\"mt-5 text-2xl font-semibold tracking-tight\">You&rsquo;re #{position} in line</h2>\n              <p className=\"text-muted-foreground mt-2 text-sm\">\n                We&rsquo;ll email {email} as soon as your spot opens up.\n              </p>\n              <div className=\"bg-muted/50 mt-6 flex items-start gap-3 rounded-lg border p-4 text-left\">\n                <Link2 className=\"text-muted-foreground mt-0.5 size-4 shrink-0\" />\n                <p className=\"text-muted-foreground text-xs\">\n                  Want to skip the queue? Share your invite link after launch &mdash; every friend who signs up moves\n                  you up 5 spots.\n                </p>\n              </div>\n            </CardContent>\n          )}\n        </Card>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:page",
      "target": "~/components/blocks/Waitlist.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/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"
  ]
}