{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "startup",
  "title": "Startup",
  "description": "Lean startup landing page template for early-stage products and waitlists: centered hero section with inline email capture, stats, feature grid, how it works timeline, testimonial, and waitlist signup.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card",
    "checkbox",
    "input",
    "label",
    "separator",
    "sheet",
    "sonner",
    "utils"
  ],
  "files": [
    {
      "path": "registry/templates/startup/install-page.tsx",
      "content": "import { Toaster } from \"@/components/ui/sonner\"\nimport Features from \"@/components/startup/features\"\nimport Footer from \"@/components/startup/footer\"\nimport Header from \"@/components/startup/header\"\nimport Hero from \"@/components/startup/hero\"\nimport HowItWorks from \"@/components/startup/how-it-works\"\nimport Newsletter from \"@/components/startup/newsletter\"\nimport Stats from \"@/components/startup/stats\"\nimport Testimonials from \"@/components/startup/testimonials\"\n\n/**\n * Page wash. A background paints only inside its own box, so the fixed-height\n * band this replaces sliced every pool whose falloff reached past its edge into\n * a straight line mid-page, and left the rest of the scroll flat. `inset-0`\n * removes both problems at once. Each pool also eases through a half-alpha stop\n * on its way to zero: a two-stop fade ramps linearly, which the eye reads as the\n * flat edge of a disc rather than as light.\n *\n * Inline `backgroundImage` rather than `bg-[…]` — Tailwind only sees class\n * names it can read literally, and at this length one string per theme is\n * unreadable anyway. The layers swap on `dark:`.\n */\nconst pool = (size: string, color: string, mid: string, out: string) =>\n  `radial-gradient(${size}, ${color}, ${mid} 38%, ${out} 78%)`\n\nconst wash = (base: string, a: number, b: number) => {\n  const at = (v: number) => `rgba(${base},${v})`\n  return [\n    pool(\"38% 13% at 84% 9%\", at(a), at(a / 2), at(0)),\n    pool(\"42% 13% at 12% 28%\", at(b), at(b / 2), at(0)),\n    pool(\"40% 12% at 70% 47%\", at(a), at(a / 2), at(0)),\n    pool(\"42% 12% at 14% 66%\", at(b), at(b / 2), at(0)),\n    pool(\"40% 13% at 74% 87%\", at(a), at(a / 2), at(0)),\n  ].join(\",\")\n}\n\nconst WASH_LIGHT = wash(\"0,0,0\", 0.04, 0.034)\nconst WASH_DARK = wash(\"255,255,255\", 0.06, 0.051)\n\nexport default function StartupTemplate() {\n  return (\n    <div className=\"relative isolate flex min-h-svh w-full flex-col bg-background text-foreground\">\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-x-0 top-0 -z-10 h-[720px] bg-[radial-gradient(65%_60%_at_50%_-8%,rgba(0,0,0,0.06),transparent_72%)] dark:bg-[radial-gradient(65%_60%_at_50%_-8%,rgba(255,255,255,0.13),transparent_72%)]\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 -z-10 dark:hidden\"\n        style={{ backgroundImage: WASH_LIGHT }}\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 -z-10 hidden dark:block\"\n        style={{ backgroundImage: WASH_DARK }}\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-[560px] bg-[radial-gradient(55%_50%_at_50%_100%,rgba(0,0,0,0.05),transparent_70%)] dark:bg-[radial-gradient(55%_50%_at_50%_100%,rgba(255,255,255,0.08),transparent_70%)]\"\n      />\n      <Toaster />\n      <Header />\n      <main className=\"flex w-full flex-col\">\n        <Hero />\n        <Stats />\n        <Features />\n        <HowItWorks />\n        <Testimonials />\n        <Newsletter />\n      </main>\n      <div className=\"border-t border-border/50\">\n        <Footer />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/startup/page.tsx"
    },
    {
      "path": "registry/templates/startup/components/features.tsx",
      "content": "import {\n  Card,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\nconst features = [\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Flashlight\"\n        tabler=\"IconBulb\"\n        hugeicons=\"FlashlightIcon\"\n        phosphor=\"Flashlight\"\n        remixicon=\"RiFlashlightLine\"\n        {...p}\n      />\n    ),\n    title: \"Lightning fast\",\n    copy: \"Ship in milliseconds with an edge-first runtime tuned for speed.\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"ShieldCheck\"\n        tabler=\"IconShieldCheck\"\n        hugeicons=\"Shield01Icon\"\n        phosphor=\"ShieldCheck\"\n        remixicon=\"RiShieldCheckLine\"\n        {...p}\n      />\n    ),\n    title: \"Secure by default\",\n    copy: \"Encryption, audit logs, and granular access baked into every layer.\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"LayoutGrid\"\n        tabler=\"IconLayoutGrid\"\n        hugeicons=\"LayoutGridIcon\"\n        phosphor=\"GridFour\"\n        remixicon=\"RiLayoutGridLine\"\n        {...p}\n      />\n    ),\n    title: \"Composable blocks\",\n    copy: \"Drop in sharp, accessible components and compose them your way.\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"ChartBar\"\n        tabler=\"IconChartBar\"\n        hugeicons=\"BarChartIcon\"\n        phosphor=\"ChartBar\"\n        remixicon=\"RiBarChartBoxLine\"\n        {...p}\n      />\n    ),\n    title: \"Real-time insights\",\n    copy: \"Track usage and performance the moment events happen.\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"LineChart\"\n        tabler=\"IconChartLine\"\n        hugeicons=\"ChartLineIcon\"\n        phosphor=\"ChartLine\"\n        remixicon=\"RiLineChartLine\"\n        {...p}\n      />\n    ),\n    title: \"Scales with you\",\n    copy: \"From first user to millions without re-architecting a thing.\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Settings\"\n        tabler=\"IconSettings\"\n        hugeicons=\"SettingsIcon\"\n        phosphor=\"GearSix\"\n        remixicon=\"RiSettings3Line\"\n        {...p}\n      />\n    ),\n    title: \"Fully configurable\",\n    copy: \"Tune defaults, theming, and workflows to fit your team.\",\n  },\n]\n\nexport default function Features() {\n  return (\n    <section className=\"flex w-full items-center justify-center px-6 py-16 sm:py-24\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mx-auto max-w-2xl text-center\">\n          <Badge variant=\"secondary\" className=\"mb-4 tracking-widest uppercase\">\n            Features\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl\">\n            Everything you need to build\n          </h2>\n          <p className=\"mt-4 text-muted-foreground\">\n            A focused toolkit that gets out of your way so you can move fast.\n          </p>\n        </div>\n\n        <div className=\"mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3\">\n          {features.map(({ icon: Icon, title, copy }) => (\n            <Card key={title} className=\"p-6\">\n              <CardHeader className=\"p-0\">\n                <span className=\"flex size-11 items-center justify-center rounded-lg border border-border bg-muted\">\n                  <Icon className=\"size-5\" aria-hidden=\"true\" />\n                </span>\n                <CardTitle className=\"mt-4 text-base font-semibold\">\n                  {title}\n                </CardTitle>\n                <CardDescription className=\"mt-2 text-sm\">\n                  {copy}\n                </CardDescription>\n              </CardHeader>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/startup/features.tsx"
    },
    {
      "path": "registry/templates/startup/components/footer.tsx",
      "content": "const NAV_LINKS = [\n  { label: \"Product\", href: \"#\" },\n  { label: \"Pricing\", href: \"#\" },\n  { label: \"Docs\", href: \"#\" },\n  { label: \"Blog\", href: \"#\" },\n  { label: \"Privacy\", href: \"#\" },\n  { label: \"Terms\", href: \"#\" },\n]\n\nexport default function Footer() {\n  return (\n    <section className=\"flex w-full flex-col items-stretch\">\n      <footer className=\"mx-auto w-full max-w-5xl px-6 py-8\">\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n              className=\"size-6 shrink-0 text-primary\"\n            >\n              <rect\n                x=\"3\"\n                y=\"3\"\n                width=\"8\"\n                height=\"8\"\n                transform=\"rotate(-6 7 7)\"\n              />\n              <rect\n                x=\"3\"\n                y=\"13\"\n                width=\"8\"\n                height=\"8\"\n                transform=\"rotate(5 7 17)\"\n              />\n              <rect\n                x=\"13\"\n                y=\"13\"\n                width=\"8\"\n                height=\"8\"\n                transform=\"rotate(-4 17 17)\"\n              />\n              <rect\n                x=\"13\"\n                y=\"3\"\n                width=\"8\"\n                height=\"8\"\n                transform=\"rotate(15 17 7)\"\n              />\n            </svg>\n            <div className=\"flex flex-col leading-none\">\n              <span className=\"text-sm font-bold tracking-tight\">Acme</span>\n              <span className=\"text-xs text-muted-foreground\">\n                Build fast. Ship faster.\n              </span>\n            </div>\n          </div>\n\n          <nav\n            aria-label=\"Footer\"\n            className=\"flex flex-wrap items-center gap-x-5 gap-y-1\"\n          >\n            {NAV_LINKS.map((link) => (\n              <a\n                key={link.label}\n                href={link.href}\n                className=\"text-xs text-muted-foreground transition-colors hover:text-foreground\"\n              >\n                {link.label}\n              </a>\n            ))}\n          </nav>\n\n          <p className=\"shrink-0 text-xs text-muted-foreground\">\n            &copy; {new Date().getFullYear()} Acme, Inc.\n          </p>\n        </div>\n      </footer>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/startup/footer.tsx"
    },
    {
      "path": "registry/templates/startup/components/header.tsx",
      "content": "\"use client\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst navLinks = [\"Blocks\", \"Docs\", \"Pricing\", \"Changelog\"]\n\nexport default function Header() {\n  return (\n    <header className=\"sticky top-0 z-30 w-full border-b border-border bg-background/80 backdrop-blur\">\n      <div className=\"mx-auto flex h-16 w-full max-w-5xl items-center gap-6 px-6\">\n        <a href=\"#\" className=\"flex items-center gap-2\">\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            className=\"size-6 shrink-0 text-primary\"\n          >\n            <rect x=\"3\" y=\"3\" width=\"8\" height=\"8\" transform=\"rotate(-6 7 7)\" />\n            <rect\n              x=\"3\"\n              y=\"13\"\n              width=\"8\"\n              height=\"8\"\n              transform=\"rotate(5 7 17)\"\n            />\n            <rect\n              x=\"13\"\n              y=\"13\"\n              width=\"8\"\n              height=\"8\"\n              transform=\"rotate(-4 17 17)\"\n            />\n            <rect\n              x=\"13\"\n              y=\"3\"\n              width=\"8\"\n              height=\"8\"\n              transform=\"rotate(15 17 7)\"\n            />\n          </svg>\n          <span className=\"text-lg font-bold tracking-tight\">Acme</span>\n        </a>\n        <nav className=\"hidden items-center gap-6 md:flex\">\n          {navLinks.map((link) => (\n            <a\n              key={link}\n              href=\"#\"\n              className=\"text-sm font-medium text-muted-foreground transition-colors hover:text-foreground\"\n            >\n              {link}\n            </a>\n          ))}\n        </nav>\n        <div className=\"ml-auto flex items-center gap-2\">\n          <Button\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"hidden md:inline-flex\"\n          >\n            Book A Demo\n            <IconPlaceholder\n              lucide=\"ArrowRight\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRightIcon\"\n              phosphor=\"ArrowRight\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n\n          <Sheet>\n            <SheetTrigger\n              render={\n                <Button variant=\"outline\" size=\"icon\" className=\"md:hidden\" />\n              }\n              aria-label=\"Open menu\"\n            >\n              <IconPlaceholder\n                lucide=\"Menu\"\n                tabler=\"IconMenu\"\n                hugeicons=\"MenuIcon\"\n                phosphor=\"List\"\n                remixicon=\"RiMenuLine\"\n                aria-hidden=\"true\"\n              />\n            </SheetTrigger>\n            <SheetContent side=\"right\" className=\"w-full sm:max-w-xs\">\n              <SheetHeader>\n                <SheetTitle className=\"flex items-center gap-2\">\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                    className=\"size-5 shrink-0 text-primary\"\n                  >\n                    <rect\n                      x=\"3\"\n                      y=\"3\"\n                      width=\"8\"\n                      height=\"8\"\n                      transform=\"rotate(-6 7 7)\"\n                    />\n                    <rect\n                      x=\"3\"\n                      y=\"13\"\n                      width=\"8\"\n                      height=\"8\"\n                      transform=\"rotate(5 7 17)\"\n                    />\n                    <rect\n                      x=\"13\"\n                      y=\"13\"\n                      width=\"8\"\n                      height=\"8\"\n                      transform=\"rotate(-4 17 17)\"\n                    />\n                    <rect\n                      x=\"13\"\n                      y=\"3\"\n                      width=\"8\"\n                      height=\"8\"\n                      transform=\"rotate(15 17 7)\"\n                    />\n                  </svg>\n                  Acme\n                </SheetTitle>\n              </SheetHeader>\n              <nav className=\"flex flex-col px-2\">\n                {navLinks.map((link) => (\n                  <SheetClose\n                    key={link}\n                    render={<a href=\"#\" />}\n                    nativeButton={false}\n                    className=\"rounded-md px-2 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n                  >\n                    {link}\n                  </SheetClose>\n                ))}\n              </nav>\n              <div className=\"mt-auto p-4\">\n                <Button\n                  render={<a href=\"#\" />}\n                  nativeButton={false}\n                  className=\"w-full\"\n                >\n                  Book A Demo\n                  <IconPlaceholder\n                    lucide=\"ArrowRight\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRightIcon\"\n                    phosphor=\"ArrowRight\"\n                    remixicon=\"RiArrowRightLine\"\n                    data-icon=\"inline-end\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </div>\n            </SheetContent>\n          </Sheet>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/startup/header.tsx"
    },
    {
      "path": "registry/templates/startup/components/hero.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nexport default function Hero() {\n  const [email, setEmail] = useState(\"\")\n  const [submitted, setSubmitted] = useState(false)\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    if (!email) return\n    setSubmitted(true)\n    toast.success(\"You're on the list\", {\n      description: `We'll reach out to ${email} when your spot is ready.`,\n    })\n  }\n\n  return (\n    <section className=\"relative isolate flex w-full items-center justify-center overflow-hidden px-6 py-16 sm:py-24\">\n      <div\n        aria-hidden=\"true\"\n        className={cn(\n          \"pointer-events-none absolute inset-0 -z-10\",\n          \"bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)]\",\n          \"bg-[size:56px_56px] opacity-40\",\n          \"[mask-image:radial-gradient(ellipse_70%_60%_at_50%_40%,black,transparent)]\"\n        )}\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_60%_50%_at_50%_0%,var(--color-primary)/0.12,transparent)]\"\n      />\n\n      <div className=\"mx-auto flex w-full max-w-2xl flex-col items-center text-center\">\n        <Badge variant=\"secondary\" className=\"px-3 py-1\">\n          <IconPlaceholder\n            lucide=\"Sparkles\"\n            tabler=\"IconSparkles\"\n            hugeicons=\"SparklesIcon\"\n            phosphor=\"Sparkle\"\n            remixicon=\"RiSparkling2Line\"\n            data-icon=\"inline-start\"\n            className=\"size-3.5\"\n          />\n          Now in public beta\n        </Badge>\n\n        <h1 className=\"mt-6 font-heading text-4xl font-bold tracking-tight text-balance sm:text-5xl md:text-6xl\">\n          Ship your next idea with Acme\n        </h1>\n\n        <p className=\"mt-5 max-w-xl text-base text-balance text-muted-foreground sm:text-lg\">\n          The all-in-one platform that turns rough sketches into\n          production-ready apps. Build faster, launch sooner, and scale without\n          the busywork.\n        </p>\n\n        <form\n          onSubmit={handleSubmit}\n          className=\"mt-9 flex w-full max-w-md flex-col gap-3 sm:flex-row\"\n        >\n          <div className=\"flex-1\">\n            <Label htmlFor=\"hero-email\" className=\"sr-only\">\n              Email address\n            </Label>\n            <Input\n              id=\"hero-email\"\n              type=\"email\"\n              required\n              placeholder=\"you@acme.com\"\n              value={email}\n              onChange={(event) => setEmail(event.target.value)}\n              className=\"h-11\"\n            />\n          </div>\n          <Button type=\"submit\" size=\"lg\" className=\"h-11 shrink-0\">\n            {submitted ? \"You're on the list\" : \"Get Started\"}\n            {!submitted && (\n              <IconPlaceholder\n                lucide=\"ArrowRight\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"ArrowRight\"\n                remixicon=\"RiArrowRightLine\"\n                data-icon=\"inline-end\"\n                className=\"size-4\"\n              />\n            )}\n          </Button>\n        </form>\n\n        <p className=\"mt-4 flex items-center justify-center gap-1.5 text-xs text-muted-foreground\">\n          <IconPlaceholder\n            lucide=\"ShieldCheck\"\n            tabler=\"IconShieldCheck\"\n            hugeicons=\"Shield01Icon\"\n            phosphor=\"ShieldCheck\"\n            remixicon=\"RiShieldCheckLine\"\n            className=\"size-3.5\"\n          />\n          No credit card required. Unsubscribe anytime.\n        </p>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/startup/hero.tsx"
    },
    {
      "path": "registry/templates/startup/components/how-it-works.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\nconst steps = [\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"UserPlus\"\n        tabler=\"IconUserPlus\"\n        hugeicons=\"UserAddIcon\"\n        phosphor=\"UserPlus\"\n        remixicon=\"RiUserAddLine\"\n        {...p}\n      />\n    ),\n    title: \"Create your account\",\n    copy: \"Sign up in under two minutes, no credit card required. Your workspace is ready the moment you confirm your email.\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Settings\"\n        tabler=\"IconSettings\"\n        hugeicons=\"SettingsIcon\"\n        phosphor=\"GearSix\"\n        remixicon=\"RiSettings4Line\"\n        {...p}\n      />\n    ),\n    title: \"Configure your workflow\",\n    copy: \"Choose from pre-built templates or define your own pipeline. Acme adapts to how your team already works.\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Users\"\n        tabler=\"IconUsersGroup\"\n        hugeicons=\"UserGroupIcon\"\n        phosphor=\"UsersThree\"\n        remixicon=\"RiTeamLine\"\n        {...p}\n      />\n    ),\n    title: \"Invite your team\",\n    copy: \"Send role-based invites in bulk. Colleagues join with a single click and inherit the right permissions automatically.\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Rocket\"\n        tabler=\"IconRocket\"\n        hugeicons=\"RocketIcon\"\n        phosphor=\"Rocket\"\n        remixicon=\"RiRocketLine\"\n        {...p}\n      />\n    ),\n    title: \"Ship with confidence\",\n    copy: \"Run automated checks, review the audit trail, and deploy, knowing Acme has your back at every stage.\",\n  },\n]\n\nexport default function HowItWorks() {\n  return (\n    <section className=\"flex w-full items-center justify-center px-6 py-16 sm:py-24\">\n      <div className=\"mx-auto grid w-full max-w-5xl grid-cols-1 gap-12 md:grid-cols-[1fr_1.3fr] md:gap-16\">\n        <div className=\"md:sticky md:top-24 md:self-start\">\n          <Badge variant=\"secondary\" className=\"mb-4 tracking-widest uppercase\">\n            How It Works\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl\">\n            Up and running in four steps\n          </h2>\n          <p className=\"mt-4 text-muted-foreground\">\n            Acme is designed for momentum. Go from sign-up to full team\n            collaboration without a single support ticket.\n          </p>\n        </div>\n\n        <ol className=\"flex flex-col\">\n          {steps.map(({ icon: Icon, title, copy }, index) => {\n            const isLast = index === steps.length - 1\n            return (\n              <li key={title} className=\"flex gap-6\">\n                <div className=\"flex flex-col items-center\">\n                  <span className=\"flex size-10 shrink-0 items-center justify-center rounded-lg border border-border bg-muted\">\n                    <Icon\n                      className=\"size-4 text-foreground\"\n                      aria-hidden=\"true\"\n                    />\n                  </span>\n                  {!isLast && <span className=\"mt-1 w-px flex-1 bg-border\" />}\n                </div>\n\n                <div className={isLast ? \"pb-0\" : \"pb-10\"}>\n                  <h3 className=\"font-heading text-base font-semibold\">\n                    {title}\n                  </h3>\n                  <p className=\"mt-1.5 text-sm text-muted-foreground\">{copy}</p>\n                </div>\n              </li>\n            )\n          })}\n        </ol>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/startup/how-it-works.tsx"
    },
    {
      "path": "registry/templates/startup/components/newsletter.tsx",
      "content": "\"use client\"\nimport { toast } from \"sonner\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nexport default function Newsletter() {\n  return (\n    <section className=\"flex w-full items-center justify-center px-6 py-16 sm:py-24\">\n      <div className=\"mx-auto w-full max-w-5xl rounded-xl border border-border bg-card px-8 py-10 sm:px-12 sm:py-14\">\n        <div className=\"flex flex-col gap-8 md:flex-row md:items-center md:justify-between md:gap-16\">\n          <div className=\"flex flex-col gap-4 md:max-w-sm\">\n            <Badge variant=\"secondary\" className=\"tracking-widest uppercase\">\n              Acme Weekly\n            </Badge>\n            <h2 className=\"font-heading text-3xl leading-tight font-bold tracking-tight text-balance sm:text-4xl\">\n              Insights that move your work forward\n            </h2>\n            <p className=\"text-sm text-muted-foreground\">\n              Product deep-dives, industry trends, and practical guides from the\n              Acme team, landing in your inbox every Tuesday morning.\n            </p>\n          </div>\n\n          <div className=\"flex flex-col gap-3 md:max-w-md md:min-w-0 md:flex-1\">\n            <form\n              className=\"flex flex-col gap-3\"\n              onSubmit={(e) => {\n                e.preventDefault()\n                toast.success(\"You're subscribed. See you Tuesday!\")\n              }}\n            >\n              <div className=\"flex flex-col gap-2 sm:flex-row\">\n                <Input\n                  type=\"email\"\n                  placeholder=\"work@company.com\"\n                  aria-label=\"Email address\"\n                  className=\"flex-1 border-border bg-background\"\n                />\n                <Button type=\"submit\" className=\"shrink-0\">\n                  Subscribe\n                  <IconPlaceholder\n                    lucide=\"ArrowRight\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRightIcon\"\n                    phosphor=\"ArrowRight\"\n                    remixicon=\"RiArrowRightLine\"\n                    data-icon=\"inline-end\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Checkbox id=\"newsletter-consent\" name=\"consent\" />\n                <label\n                  htmlFor=\"newsletter-consent\"\n                  className=\"text-sm font-normal text-muted-foreground\"\n                >\n                  I agree to receive the Acme Weekly newsletter.\n                </label>\n              </div>\n            </form>\n            <p className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n              <IconPlaceholder\n                lucide=\"Lock\"\n                tabler=\"IconLock\"\n                hugeicons=\"LockIcon\"\n                phosphor=\"Lock\"\n                remixicon=\"RiLockLine\"\n                aria-hidden=\"true\"\n                className=\"shrink-0\"\n                size={12}\n              />\n              Your data stays private. Unsubscribe any time, no questions asked.\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/startup/newsletter.tsx"
    },
    {
      "path": "registry/templates/startup/components/stats.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nconst stats = [\n  { value: \"$2.4B\", label: \"Revenue processed\" },\n  { value: \"38 ms\", label: \"Median latency\" },\n  { value: \"99.98%\", label: \"Uptime last 12 mo\" },\n  { value: \"6,200+\", label: \"Businesses onboarded\" },\n]\n\nexport default function Stats() {\n  return (\n    <section className=\"flex w-full items-center justify-center px-6 py-16 sm:py-24\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mb-12 text-center\">\n          <Badge variant=\"secondary\" className=\"mb-4 tracking-widest uppercase\">\n            By The Numbers\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl\">\n            Acme by the numbers\n          </h2>\n        </div>\n\n        <dl className=\"grid grid-cols-2 gap-y-10 md:grid-cols-4 md:gap-y-0\">\n          {stats.map(({ value, label }) => (\n            <div\n              key={label}\n              className=\"flex flex-col items-center gap-2 text-center\"\n            >\n              <dt className=\"text-5xl font-bold tracking-tight tabular-nums sm:text-6xl\">\n                {value}\n              </dt>\n              <dd className=\"text-sm text-muted-foreground\">{label}</dd>\n            </div>\n          ))}\n        </dl>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/startup/stats.tsx"
    },
    {
      "path": "registry/templates/startup/components/testimonials.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst testimonial = {\n  quote:\n    \"Acme's platform compressed what used to be a six-week integration cycle down to a single sprint. Our engineers finally have breathing room to work on things that matter, and our customers felt the difference immediately.\",\n  name: \"Isabelle Fontaine\",\n  role: \"Chief Product Officer\",\n  company: \"Meridian Labs\",\n  initials: \"IF\",\n  avatar: \"https://i.pravatar.cc/150?img=45\",\n}\n\nconst metrics = [\n  { value: \"6×\", label: \"faster integrations\" },\n  { value: \"40%\", label: \"less engineer toil\" },\n  { value: \"1 sprint\", label: \"to full deployment\" },\n]\n\nexport default function Testimonials() {\n  return (\n    <section className=\"flex w-full items-center justify-center px-6 py-16 sm:py-24\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <Badge variant=\"secondary\" className=\"mb-4 tracking-widest uppercase\">\n          Customer Story\n        </Badge>\n        <div className=\"relative rounded-xl border border-border bg-card p-10 sm:p-14\">\n          <div\n            className=\"absolute top-10 left-0 h-16 w-[3px] bg-foreground\"\n            aria-hidden=\"true\"\n          />\n\n          <IconPlaceholder\n            lucide=\"Quote\"\n            tabler=\"IconQuotes\"\n            hugeicons=\"QuotesIcon\"\n            phosphor=\"Quotes\"\n            remixicon=\"RiDoubleQuotesR\"\n            className=\"mb-8 size-8 text-muted-foreground\"\n            aria-hidden=\"true\"\n          />\n\n          <blockquote className=\"max-w-3xl text-xl leading-[1.65] font-medium tracking-tight text-foreground sm:text-2xl\">\n            &ldquo;{testimonial.quote}&rdquo;\n          </blockquote>\n\n          <Separator className=\"my-10\" />\n\n          <div className=\"flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"flex items-center gap-4\">\n              <Avatar className=\"size-14 border border-border\">\n                <AvatarImage\n                  src={testimonial.avatar}\n                  alt={testimonial.name}\n                  className=\"grayscale\"\n                />\n                <AvatarFallback className=\"text-sm font-semibold\">\n                  {testimonial.initials}\n                </AvatarFallback>\n              </Avatar>\n\n              <div className=\"flex flex-col gap-1\">\n                <span className=\"text-sm leading-tight font-semibold text-foreground\">\n                  {testimonial.name}\n                </span>\n                <span className=\"text-xs leading-tight text-muted-foreground\">\n                  {testimonial.role},{\" \"}\n                  <span className=\"font-medium text-foreground\">\n                    {testimonial.company}\n                  </span>\n                </span>\n              </div>\n            </div>\n\n            <div className=\"flex items-center gap-6 sm:gap-8\">\n              {metrics.map((m, i) => (\n                <div\n                  key={i}\n                  className=\"flex flex-col items-center gap-0.5 text-center\"\n                >\n                  <span className=\"text-lg leading-none font-bold tracking-tight text-foreground\">\n                    {m.value}\n                  </span>\n                  <span className=\"text-[11px] leading-tight text-muted-foreground\">\n                    {m.label}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/startup/testimonials.tsx"
    }
  ],
  "meta": {
    "kind": "template",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "features",
    "footer",
    "header",
    "hero",
    "how-it-works",
    "newsletter",
    "stats",
    "testimonials"
  ],
  "type": "registry:block"
}