{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "how-it-works-timeline",
  "title": "How It Works — Vertical Timeline",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/how-it-works-timeline/HowItWorksTimeline.vue",
      "content": "<script setup lang=\"ts\">\nimport { Check, Clock } from 'lucide-vue-next'\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</script>\n\n<template>\n  <section data-slot=\"how-it-works-timeline\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">Implementation</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">From kickoff to hand-over in five weeks</h2>\n        <p class=\"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 class=\"mt-14\" density=\"comfortable\">\n        <TimelineItem v-for=\"(stage, index) in stages\" :key=\"stage.title\" :status=\"stage.done ? 'success' : 'default'\">\n          <TimelineMedia variant=\"outline\" :status=\"stage.done ? 'success' : 'muted'\">\n            <Check v-if=\"stage.done\" class=\"size-4\" aria-hidden=\"true\" />\n            <span v-else class=\"font-mono text-xs font-semibold\">{{ String(index + 1).padStart(2, '0') }}</span>\n          </TimelineMedia>\n\n          <TimelineContent>\n            <TimelineHeader>\n              <TimelineTitle as=\"h3\" class=\"text-base font-semibold\">{{ stage.title }}</TimelineTitle>\n              <Badge :variant=\"stage.done ? 'secondary' : 'outline'\" class=\"gap-1.5 font-normal\">\n                <Clock class=\"size-3\" aria-hidden=\"true\" />\n                {{ stage.status }}\n              </Badge>\n            </TimelineHeader>\n\n            <TimelineDescription class=\"mt-2 max-w-prose leading-relaxed\">\n              {{ stage.body }}\n            </TimelineDescription>\n\n            <Card class=\"mt-4\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle class=\"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 class=\"grid gap-2 sm:grid-cols-3\">\n                  <li\n                    v-for=\"outcome in stage.outcomes\"\n                    :key=\"outcome\"\n                    class=\"text-foreground flex items-start gap-2 text-sm\"\n                  >\n                    <Check class=\"text-primary mt-0.5 size-3.5 shrink-0\" aria-hidden=\"true\" />\n                    <span>{{ outcome }}</span>\n                  </li>\n                </ul>\n              </CardContent>\n            </Card>\n          </TimelineContent>\n        </TimelineItem>\n      </Timeline>\n\n      <Separator />\n      <div class=\"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</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HowItWorksTimeline.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/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"
  ]
}