{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works-01",
  "title": "Three numbered steps",
  "description": "Centered three-column path with numbered icons, kicker, headline and a single Get-started CTA.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "content/components/how-it-works/how-it-works-01.tsx",
      "content": "import { ArrowRight, Layers, Send, ShieldCheck } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst steps = [\n  {\n    n: \"01\",\n    icon: Layers,\n    title: \"Pick a block\",\n    body: \"Browse the catalog and copy the install command. Each block ships as a single .tsx file.\",\n  },\n  {\n    n: \"02\",\n    icon: ShieldCheck,\n    title: \"Drop it in\",\n    body: \"Run the shadcn CLI from your project root. Imports, primitives and styles install themselves.\",\n  },\n  {\n    n: \"03\",\n    icon: Send,\n    title: \"Ship the page\",\n    body: \"Swap the copy, drop your brand mark in, push to production. No surprises in dark mode.\",\n  },\n]\n\nexport default function HowItWorks01() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-5xl px-6 sm:px-10\">\n        <div className=\"flex flex-col items-center gap-3 text-center\">\n          <span className=\"text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground\">\n            How it works\n          </span>\n          <h2\n            className=\"text-balance font-semibold tracking-tight\"\n            style={{\n              fontSize: \"clamp(1.85rem, 4vw, 2.75rem)\",\n              letterSpacing: \"-0.03em\",\n              lineHeight: 1.08,\n            }}\n          >\n            From catalog to live page in three steps\n          </h2>\n          <p className=\"max-w-md text-balance text-sm text-muted-foreground sm:text-base\">\n            No build pipeline to learn, no proprietary framework — just the\n            shadcn CLI you already use.\n          </p>\n        </div>\n\n        <ol className=\"mt-14 grid gap-6 sm:grid-cols-3\">\n          {steps.map((s) => (\n            <li\n              key={s.n}\n              className=\"flex flex-col gap-3 rounded-2xl border border-border bg-card p-5 shadow-sm shadow-black/5 sm:p-6\"\n            >\n              <div className=\"flex items-center justify-between\">\n                <span className=\"grid size-10 place-items-center rounded-xl bg-foreground/5 text-foreground\">\n                  <s.icon className=\"size-5\" />\n                </span>\n                <span className=\"font-mono text-xs font-medium uppercase tracking-widest text-muted-foreground\">\n                  {s.n}\n                </span>\n              </div>\n              <h3 className=\"font-semibold text-lg tracking-tight\">\n                {s.title}\n              </h3>\n              <p className=\"text-sm text-muted-foreground\">{s.body}</p>\n            </li>\n          ))}\n        </ol>\n\n        <div className=\"mt-10 flex justify-center\">\n          <Button size=\"lg\" className=\"rounded-full\">\n            Get started\n            <ArrowRight />\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/how-it-works-01.tsx"
    }
  ],
  "categories": [
    "how-it-works"
  ],
  "type": "registry:block"
}