{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline-02",
  "title": "Horizontal 4-step process",
  "description": "Four numbered steps connected by a hairline across the page on desktop, stacked vertically on mobile — built for process and onboarding flows.",
  "files": [
    {
      "path": "content/components/timeline/timeline-02.tsx",
      "content": "const steps = [\n  {\n    number: \"01\",\n    label: \"Design\",\n    description: \"Sketch architecture, define data contracts, lock the API surface.\",\n  },\n  {\n    number: \"02\",\n    label: \"Build\",\n    description: \"Ship vertical slices. Each slice is tested before the next begins.\",\n  },\n  {\n    number: \"03\",\n    label: \"Review\",\n    description: \"Automated checks plus a two-engineer sign-off. No exceptions.\",\n  },\n  {\n    number: \"04\",\n    label: \"Deploy\",\n    description: \"Blue-green rollout with instant rollback if error rates climb.\",\n  },\n]\n\nexport default function Timeline02() {\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 text-center\">\n          <span className=\"font-mono text-[11px] uppercase tracking-widest text-muted-foreground\">\n            Process\n          </span>\n          <h2 className=\"mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-4xl\">\n            Four steps. No shortcuts.\n          </h2>\n        </div>\n\n        {/* Horizontal layout on md+, stacked on mobile */}\n        <div className=\"relative flex flex-col gap-8 md:flex-row md:gap-0\">\n          {/* connecting line — desktop only */}\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute left-0 right-0 top-5 hidden h-px bg-border md:block\"\n          />\n\n          {steps.map((step, i) => (\n            <div key={i} className=\"relative flex flex-1 flex-col items-center text-center\">\n              {/* step circle */}\n              <div className=\"relative z-0 mb-5 flex size-10 items-center justify-center rounded-full border border-border bg-background\">\n                <span className=\"font-mono text-xs font-semibold text-primary\">{step.number}</span>\n              </div>\n\n              <h3 className=\"text-sm font-semibold text-foreground\">{step.label}</h3>\n              <p className=\"mt-2 max-w-[180px] text-xs text-pretty text-muted-foreground leading-relaxed\">\n                {step.description}\n              </p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/timeline-02.tsx"
    }
  ],
  "categories": [
    "timeline"
  ],
  "type": "registry:block"
}