{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works-steps",
  "title": "How It Works — Three Steps",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/how-it-works-steps/HowItWorksSteps.tsx",
      "content": "'use client'\n\nimport { CloudUpload, Plug, Rocket } from 'lucide-react'\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\nexport function HowItWorksSteps() {\n  return (\n    <section data-slot=\"how-it-works-steps\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">How it works</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">\n            Three steps from credentials to dashboard\n          </h2>\n          <p className=\"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 className=\"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            className=\"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 className=\"grid gap-10 md:grid-cols-3 md:gap-8\">\n            {steps.map((step, index) => (\n              <li key={step.title} className=\"relative flex flex-col items-start md:items-center\">\n                <div className=\"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                  {String(index + 1).padStart(2, '0')}\n                </div>\n\n                <div className=\"mt-5 md:text-center\">\n                  <step.icon className=\"text-muted-foreground mb-3 size-5 md:mx-auto\" aria-hidden=\"true\" />\n                  <h3 className=\"text-base font-semibold\">{step.title}</h3>\n                  <p className=\"text-muted-foreground mt-2 max-w-xs text-sm leading-relaxed md:mx-auto\">{step.body}</p>\n                  <p className=\"text-muted-foreground/80 mt-3 font-mono text-xs tracking-wide uppercase\">\n                    {step.detail}\n                  </p>\n                </div>\n              </li>\n            ))}\n          </ol>\n        </div>\n\n        <div className=\"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  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/HowItWorksSteps.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/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"
  ]
}