{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "waitlist",
  "title": "Waitlist",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-vue/blocks/waitlist/Waitlist.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Check, Layers, Link2, ShieldCheck, Zap } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\n\nconst email = ref('')\nconst submitted = ref(false)\nconst position = ref(214)\n\nconst benefits = [\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\nfunction handleSubmit() {\n  if (!email.value.includes('@')) return\n  submitted.value = true\n}\n</script>\n\n<template>\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          <li v-for=\"benefit in benefits\" :key=\"benefit.title\" class=\"flex gap-4\">\n            <div class=\"bg-primary/10 text-primary grid size-9 shrink-0 place-items-center rounded-lg\">\n              <component :is=\"benefit.icon\" 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        </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        <template v-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\" @submit.prevent=\"handleSubmit\">\n              <Input v-model=\"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        </template>\n\n        <template v-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        </template>\n      </Card>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:page",
      "target": "~/app/components/blocks/Waitlist.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/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"
  ]
}