{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "how-it-works-steps",
  "title": "How It Works — Three Steps",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/how-it-works-steps/how-it-works-steps.component.ts",
      "content": "// Horizontal three-step explainer with numbered markers on a connector rail, per-step\n// icon, body copy, and a time estimate, closing on a primary + ghost CTA row.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { CloudUpload, LucideAngularModule, Plug, Rocket, type LucideIconData } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\n\nexport interface HowItWorksStep {\n  icon: LucideIconData\n  title: string\n  body: string\n  detail: string\n}\n\nconst steps: HowItWorksStep[] = [\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\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-how-it-works-steps, [ui-how-it-works-steps]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent],\n  template: `\n    <section data-slot=\"how-it-works-steps\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"max-w-2xl\">\n          <span ui-badge variant=\"secondary\">How it works</span>\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          ></div>\n\n          <ol class=\"grid gap-10 md:grid-cols-3 md:gap-8\">\n            @for (step of allSteps; track step.title; let index = $index) {\n              <li class=\"relative flex flex-col items-start md:items-center\">\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                  {{ pad(index + 1) }}\n                </div>\n\n                <div class=\"mt-5 md:text-center\">\n                  <lucide-icon\n                    [img]=\"step.icon\"\n                    class=\"text-muted-foreground mb-3 size-5 md:mx-auto\"\n                    aria-hidden=\"true\"\n                  />\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\">\n                    {{ step.detail }}\n                  </p>\n                </div>\n              </li>\n            }\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 ui-button>Start the walkthrough</button>\n          <button ui-button variant=\"ghost\">Read the setup guide</button>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiHowItWorksStepsComponent {\n  protected readonly allSteps = steps\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n\n  pad(n: number): string {\n    return String(n).padStart(2, '0')\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/how-it-works-steps/how-it-works-steps.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/how-it-works-steps/index.ts",
      "content": "export { UiHowItWorksStepsComponent, type HowItWorksStep } from './how-it-works-steps.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/how-it-works-steps/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/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"
  ]
}