{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works-2",
  "title": "Vertical Numbered Timeline",
  "description": "How it works timeline stacking four steps down a left rail, each with a bordered icon circle, a connecting line, a title, and supporting copy.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/how-it-works/2/how-it-works-block.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 HowItWorksBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-2xl\">\n        <div className=\"mb-14\">\n          <Badge variant=\"outline\" className=\"mb-4\">\n            How It Works\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            Up and running in four steps\n          </h2>\n          <p className=\"mt-3 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/blocks/how-it-works-2.tsx"
    }
  ],
  "meta": {
    "height": "732px",
    "tier": "free"
  },
  "categories": [
    "how-it-works"
  ],
  "type": "registry:block"
}