{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "how-it-works-steps",
  "title": "How It Works — Three Steps",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/how-it-works-steps/HowItWorksSteps.vue",
      "content": "<script setup lang=\"ts\">\nimport { CloudUpload, Plug, Rocket } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\n\nconst steps = [\n  {\n    icon: Plug,\n    title: 'Connect your stack',\n    body: 'Point us at Postgres, Snowflake, or a CSV drop. Read-only credentials, no agent to install.',\n    detail: '~4 min',\n  },\n  {\n    icon: CloudUpload,\n    title: 'Map your metrics',\n    body: 'Pick the columns that matter. We infer types, generate the schema, and flag anything ambiguous.',\n    detail: '~10 min',\n  },\n  {\n    icon: Rocket,\n    title: 'Ship the dashboard',\n    body: 'Publish to your team with row-level permissions already applied. Iterate without a redeploy.',\n    detail: 'Same day',\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"how-it-works-steps\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">How it works</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">\n          Three steps from credentials to dashboard\n        </h2>\n        <p class=\"text-muted-foreground mt-3 text-lg\">\n          No migration, no rewrite. Most teams finish the whole path in an afternoon.\n        </p>\n      </div>\n\n      <div class=\"relative mt-14\">\n        <!-- Connector rail: decorative, so it lives outside the <ol> rather than\n             adding a phantom list item for screen readers. -->\n        <div\n          class=\"bg-border pointer-events-none absolute top-6 right-[16.67%] left-[16.67%] hidden h-px md:block\"\n          aria-hidden=\"true\"\n        />\n\n        <ol class=\"grid gap-10 md:grid-cols-3 md:gap-8\">\n          <li\n            v-for=\"(step, index) in steps\"\n            :key=\"step.title\"\n            class=\"relative flex flex-col items-start md:items-center\"\n          >\n            <div\n              class=\"border-border bg-card text-foreground relative z-10 flex size-12 items-center justify-center rounded-full border font-mono text-sm font-semibold\"\n            >\n              {{ String(index + 1).padStart(2, '0') }}\n            </div>\n\n            <div class=\"mt-5 md:text-center\">\n              <component :is=\"step.icon\" class=\"text-muted-foreground mb-3 size-5 md:mx-auto\" aria-hidden=\"true\" />\n              <h3 class=\"text-base font-semibold\">{{ step.title }}</h3>\n              <p class=\"text-muted-foreground mt-2 max-w-xs text-sm leading-relaxed md:mx-auto\">{{ step.body }}</p>\n              <p class=\"text-muted-foreground/80 mt-3 font-mono text-xs tracking-wide uppercase\">{{ step.detail }}</p>\n            </div>\n          </li>\n        </ol>\n      </div>\n\n      <div class=\"border-border mt-14 flex flex-wrap items-center gap-4 border-t pt-8\">\n        <Button>Start the walkthrough</Button>\n        <Button variant=\"ghost\">Read the setup guide</Button>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HowItWorksSteps.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json"
  ],
  "description": "Horizontal three-step explainer with numbered markers on a connector rail, per-step icon, body copy, and a time estimate, closing on a primary + ghost CTA row.",
  "categories": [
    "marketing"
  ]
}