{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works-09",
  "title": "3-step horizontal row",
  "description": "Minimal 3-step section with numbered circles, a full-width connector line and a centered CTA — no icons, type does the work.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "content/components/how-it-works/how-it-works-09.tsx",
      "content": "import { ArrowRight } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst steps = [\n  {\n    n: \"01\",\n    title: \"Pick a block\",\n    body: \"Browse 135 production sections. Search by category, preview live, copy the install command.\",\n  },\n  {\n    n: \"02\",\n    title: \"Install in seconds\",\n    body: \"Run one CLI command. Dependencies, primitives and styles wire themselves into your project.\",\n  },\n  {\n    n: \"03\",\n    title: \"Ship to production\",\n    body: \"Swap the copy and your brand mark. Light and dark mode are pre-wired. Push and move on.\",\n  },\n]\n\nexport default function HowItWorks09() {\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=\"mb-14 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 text-foreground\"\n            style={{ fontSize: \"clamp(1.85rem, 4vw, 2.75rem)\", letterSpacing: \"-0.03em\" }}\n          >\n            Three steps from browse to live\n          </h2>\n        </div>\n\n        <div className=\"relative grid grid-cols-1 gap-8 md:grid-cols-3\">\n          {/* connector lines */}\n          <div className=\"absolute inset-x-0 top-6 hidden h-px bg-border md:block\" />\n\n          {steps.map((step, i) => (\n            <div key={step.n} className=\"relative flex flex-col items-center gap-4 text-center\">\n              <div className=\"relative z-10 flex size-12 items-center justify-center rounded-full border border-border bg-background\">\n                <span className=\"text-xs font-semibold tabular-nums text-muted-foreground\">\n                  {step.n}\n                </span>\n              </div>\n              <div className=\"flex flex-col gap-2\">\n                <h3 className=\"font-semibold tracking-tight text-foreground\">{step.title}</h3>\n                <p className=\"text-sm leading-relaxed text-muted-foreground\">{step.body}</p>\n              </div>\n              {i < steps.length - 1 && (\n                <ArrowRight className=\"mt-2 size-4 text-muted-foreground/40 md:hidden\" />\n              )}\n            </div>\n          ))}\n        </div>\n\n        <div className=\"mt-14 flex justify-center\">\n          <Button size=\"lg\" className=\"rounded-full px-8\">\n            Browse blocks\n            <ArrowRight className=\"size-4\" />\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/how-it-works-09.tsx"
    }
  ],
  "categories": [
    "how-it-works"
  ],
  "type": "registry:block"
}