{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "coming-soon-5",
  "title": "Launch Progress Milestones",
  "description": "Coming soon screen with a launch progress bar and Design, Beta, and Launch milestone labels above a waitlist email form with a success state.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "input",
    "progress"
  ],
  "files": [
    {
      "path": "registry/blocks/coming-soon/5/coming-soon-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Progress } from \"@/components/ui/progress\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst milestones = [\n  { label: \"Design\", done: true },\n  { label: \"Beta\", done: true },\n  { label: \"Launch\", done: false },\n]\n\nconst emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nexport default function ComingSoonBlock() {\n  const [email, setEmail] = useState(\"\")\n  const [joined, setJoined] = useState(false)\n\n  return (\n    <section className=\"flex min-h-svh w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto flex w-full max-w-md flex-col items-center text-center\">\n        <span className=\"text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n          Coming soon\n        </span>\n        <h1 className=\"mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n          We&apos;re almost ready\n        </h1>\n        <p className=\"mt-3 text-sm text-pretty text-muted-foreground\">\n          Acme is putting the finishing touches on launch. Join the waitlist and\n          we&apos;ll let you know the moment it&apos;s live.\n        </p>\n\n        <div className=\"mt-8 w-full\">\n          <Progress value={68} className=\"h-1.5\" />\n          <div className=\"mt-3 flex justify-between\">\n            {milestones.map((milestone) => (\n              <span\n                key={milestone.label}\n                className={cn(\n                  \"flex items-center gap-1 text-xs\",\n                  milestone.done ? \"text-foreground\" : \"text-muted-foreground\"\n                )}\n              >\n                {milestone.done && (\n                  <IconPlaceholder\n                    lucide=\"Check\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"Check\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"size-3.5\"\n                    aria-hidden=\"true\"\n                  />\n                )}\n                {milestone.label}\n              </span>\n            ))}\n          </div>\n        </div>\n\n        {joined ? (\n          <p className=\"mt-8 flex items-center gap-2 rounded-lg border border-border bg-muted/40 px-4 py-3 text-sm\">\n            <IconPlaceholder\n              lucide=\"Check\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"Check\"\n              remixicon=\"RiCheckLine\"\n              className=\"size-4\"\n              aria-hidden=\"true\"\n            />\n            You&apos;re on the list. We&apos;ll be in touch soon.\n          </p>\n        ) : (\n          <form\n            onSubmit={(event) => {\n              event.preventDefault()\n              if (emailPattern.test(email)) setJoined(true)\n            }}\n            className=\"mt-8 flex w-full flex-col gap-2 sm:flex-row\"\n            noValidate\n          >\n            <Input\n              type=\"email\"\n              required\n              value={email}\n              onChange={(event) => setEmail(event.target.value)}\n              placeholder=\"you@example.com\"\n              aria-label=\"Email address\"\n              className=\"flex-1\"\n            />\n            <Button type=\"submit\">Notify me</Button>\n          </form>\n        )}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/coming-soon-5.tsx"
    }
  ],
  "meta": {
    "height": "386px",
    "tier": "free"
  },
  "categories": [
    "coming-soon"
  ],
  "type": "registry:block"
}