{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works-02",
  "title": "Vertical timeline how-it-works",
  "description": "Four-step vertical timeline with dashed rail, numbered nodes and an icon per step.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/how-it-works/how-it-works-02.tsx",
      "content": "import { Boxes, Code2, Rocket, ShieldCheck } from \"lucide-react\"\n\nconst steps = [\n  {\n    icon: Boxes,\n    title: \"Browse the catalog\",\n    body: \"135 production sections across nine categories. Search, filter, preview — pick the block that matches the page you're writing.\",\n  },\n  {\n    icon: Code2,\n    title: \"Install via shadcn\",\n    body: \"One command pulls the source into your project. Theme tokens, shadcn primitives and Tailwind utilities — nothing exotic.\",\n  },\n  {\n    icon: ShieldCheck,\n    title: \"Customize without fear\",\n    body: \"Every block is a single .tsx file you own. Rename, restyle, refactor — the registry won't fight you on the next pull.\",\n  },\n  {\n    icon: Rocket,\n    title: \"Ship\",\n    body: \"Drop your copy, your logo and your CTAs in. Light + dark are already wired. Push to production.\",\n  },\n]\n\nexport default function HowItWorks02() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-3xl px-6 sm:px-10\">\n        <div className=\"flex flex-col 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            A four-step path from blank page to launched site\n          </h2>\n        </div>\n\n        <ol className=\"relative mt-14 flex flex-col gap-6 border-l border-dashed border-border pl-10 sm:pl-12\">\n          {steps.map((s, i) => (\n            <li key={s.title} className=\"relative\">\n              <span className=\"absolute -left-[3.65rem] top-1 grid size-9 place-items-center rounded-full border border-border bg-card font-mono text-xs font-semibold text-foreground shadow-sm shadow-black/5 sm:-left-[4.15rem]\">\n                {String(i + 1).padStart(2, \"0\")}\n              </span>\n              <div className=\"flex items-start gap-3 rounded-xl border border-border bg-card p-4 sm:p-5\">\n                <span className=\"grid size-9 shrink-0 place-items-center rounded-lg bg-foreground/5 text-foreground\">\n                  <s.icon className=\"size-4\" />\n                </span>\n                <div className=\"flex flex-col gap-1\">\n                  <h3 className=\"font-semibold tracking-tight text-foreground\">\n                    {s.title}\n                  </h3>\n                  <p className=\"text-sm text-muted-foreground\">{s.body}</p>\n                </div>\n              </div>\n            </li>\n          ))}\n        </ol>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/how-it-works-02.tsx"
    }
  ],
  "categories": [
    "how-it-works"
  ],
  "type": "registry:block"
}