{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works-1",
  "title": "Three Step Icon Cards",
  "description": "How it works row of three numbered step cards, each with an icon tile, a title, and one line of supporting copy under a centered heading.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/how-it-works/1/how-it-works-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\nconst steps = [\n  {\n    number: \"01\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"UploadCloud\"\n        tabler=\"IconCloudUpload\"\n        hugeicons=\"CloudUploadIcon\"\n        phosphor=\"CloudArrowUp\"\n        remixicon=\"RiUploadCloudLine\"\n        {...p}\n      />\n    ),\n    title: \"Connect your data\",\n    copy: \"Link your existing sources in seconds, no migration scripts, no downtime.\",\n  },\n  {\n    number: \"02\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Search\"\n        tabler=\"IconSearch\"\n        hugeicons=\"SearchIcon\"\n        phosphor=\"MagnifyingGlass\"\n        remixicon=\"RiSearchEyeLine\"\n        {...p}\n      />\n    ),\n    title: \"Analyze and configure\",\n    copy: \"Acme maps your schema, surfaces anomalies, and suggests optimal settings automatically.\",\n  },\n  {\n    number: \"03\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Flashlight\"\n        tabler=\"IconBulb\"\n        hugeicons=\"FlashlightIcon\"\n        phosphor=\"Flashlight\"\n        remixicon=\"RiFlashlightLine\"\n        {...p}\n      />\n    ),\n    title: \"Go live instantly\",\n    copy: \"Publish with a single click and start delivering results to your team right away.\",\n  },\n]\n\nexport default function HowItWorksBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mx-auto max-w-2xl text-center\">\n          <span className=\"text-sm font-medium tracking-widest text-muted-foreground uppercase\">\n            How It Works\n          </span>\n          <h2 className=\"mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            From setup to results in three steps\n          </h2>\n          <p className=\"mt-3 text-muted-foreground\">\n            Acme keeps the process simple so your team spends time on outcomes,\n            not configuration.\n          </p>\n        </div>\n\n        <div className=\"mt-12 grid grid-cols-1 gap-6 sm:grid-cols-3\">\n          {steps.map(({ number, icon: Icon, title, copy }) => (\n            <Card key={number} className=\"relative p-6\">\n              <Badge\n                variant=\"secondary\"\n                className=\"absolute top-6 right-6 font-mono text-xs tabular-nums\"\n              >\n                {number}\n              </Badge>\n\n              <CardHeader className=\"p-0\">\n                <span className=\"flex size-12 items-center justify-center rounded-lg border border-border bg-muted\">\n                  <Icon className=\"size-5 text-foreground\" aria-hidden=\"true\" />\n                </span>\n\n                <CardTitle className=\"mt-5 text-base font-semibold\">\n                  {title}\n                </CardTitle>\n                <CardDescription className=\"mt-2 text-sm\">\n                  {copy}\n                </CardDescription>\n              </CardHeader>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/how-it-works-1.tsx"
    }
  ],
  "meta": {
    "height": "512px",
    "tier": "free"
  },
  "categories": [
    "how-it-works"
  ],
  "type": "registry:block"
}