{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works-timeline",
  "title": "How It Works — Vertical Timeline",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/how-it-works-timeline/HowItWorksTimeline.tsx",
      "content": "'use client'\n\nimport { Check, Clock } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport {\n  Timeline,\n  TimelineContent,\n  TimelineDescription,\n  TimelineHeader,\n  TimelineItem,\n  TimelineMedia,\n  TimelineTitle,\n} from '@/components/ui/timeline'\n\nconst stages = [\n  {\n    title: 'Kickoff & access',\n    status: 'Week 1',\n    done: true,\n    body: 'A shared channel, a named engineer, and read-only credentials. Nothing is provisioned until scope is signed off.',\n    outcomes: ['Workspace provisioned', 'SSO connected', 'Data contract agreed'],\n  },\n  {\n    title: 'Model your data',\n    status: 'Week 2',\n    done: true,\n    body: 'We mirror your warehouse schema and reconcile it against last quarter’s numbers before anything is published.',\n    outcomes: ['Schema mirrored', 'Historical backfill', 'Reconciliation signed off'],\n  },\n  {\n    title: 'Pilot with one team',\n    status: 'Week 3–4',\n    done: false,\n    body: 'A single team runs their real reporting cycle on it. We fix what they hit before anyone else sees it.',\n    outcomes: ['Pilot cohort live', 'Feedback loop open', 'Runbook drafted'],\n  },\n  {\n    title: 'Roll out & hand over',\n    status: 'Week 5',\n    done: false,\n    body: 'Permissions, alerting, and the runbook move to your team. Support stays on call through the first close.',\n    outcomes: ['Org-wide access', 'Alerting configured', 'Ownership transferred'],\n  },\n]\n\nexport function HowItWorksTimeline() {\n  return (\n    <section data-slot=\"how-it-works-timeline\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">Implementation</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">\n            From kickoff to hand-over in five weeks\n          </h2>\n          <p className=\"text-muted-foreground mt-3 text-lg\">\n            The same plan we run for every rollout. No phase starts before the one above it is signed off.\n          </p>\n        </div>\n\n        <Timeline className=\"mt-14\" density=\"comfortable\">\n          {stages.map((stage, index) => (\n            <TimelineItem key={stage.title} status={stage.done ? 'success' : 'default'}>\n              <TimelineMedia variant=\"outline\" status={stage.done ? 'success' : 'muted'}>\n                {stage.done ? (\n                  <Check className=\"size-4\" aria-hidden=\"true\" />\n                ) : (\n                  <span className=\"font-mono text-xs font-semibold\">{String(index + 1).padStart(2, '0')}</span>\n                )}\n              </TimelineMedia>\n\n              <TimelineContent>\n                <TimelineHeader>\n                  <TimelineTitle as=\"h3\" className=\"text-base font-semibold\">\n                    {stage.title}\n                  </TimelineTitle>\n                  <Badge variant={stage.done ? 'secondary' : 'outline'} className=\"gap-1.5 font-normal\">\n                    <Clock className=\"size-3\" aria-hidden=\"true\" />\n                    {stage.status}\n                  </Badge>\n                </TimelineHeader>\n\n                <TimelineDescription className=\"mt-2 max-w-prose leading-relaxed\">{stage.body}</TimelineDescription>\n\n                <Card className=\"mt-4\">\n                  <CardHeader className=\"pb-3\">\n                    <CardTitle className=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">\n                      What you have at the end\n                    </CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <ul className=\"grid gap-2 sm:grid-cols-3\">\n                      {stage.outcomes.map((outcome) => (\n                        <li key={outcome} className=\"text-foreground flex items-start gap-2 text-sm\">\n                          <Check className=\"text-primary mt-0.5 size-3.5 shrink-0\" aria-hidden=\"true\" />\n                          <span>{outcome}</span>\n                        </li>\n                      ))}\n                    </ul>\n                  </CardContent>\n                </Card>\n              </TimelineContent>\n            </TimelineItem>\n          ))}\n        </Timeline>\n\n        <Separator />\n        <div className=\"mt-8 flex flex-wrap items-center gap-4\">\n          <Button>Book an implementation call</Button>\n          <Button variant=\"ghost\">Download the rollout plan</Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport default HowItWorksTimeline\n",
      "type": "registry:block",
      "target": "~/components/blocks/HowItWorksTimeline.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/timeline.json"
  ],
  "description": "Vertical numbered timeline with a continuous rail, per-stage status badge, outcome bullets, and a paired detail card — for onboarding or implementation narratives that need more room than a three-up row.",
  "categories": [
    "marketing"
  ]
}