{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works",
  "title": "How It Works",
  "description": "A numbered process with an animated gradient dashed connector, in horizontal or vertical orientation.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/how-it-works.tsx",
      "content": "import * as React from \"react\"\nimport { CheckCircle } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * HowItWorks — a numbered process. Each step is a chip-iconed card with a mono\n * index, an uppercase label, a body line and an optional accent tag pill. On\n * desktop, `horizontal` (default) joins the steps with an animated gradient\n * dashed SVG connector (navy → accent); `vertical` stacks them.\n *\n * An optional `busPanel` node renders below — e.g. a brand panel summarising\n * what the process feeds.\n */\n\nexport interface ProcessStep {\n  label: string\n  icon: React.FC<{ className?: string }>\n  body: React.ReactNode\n  /** An accent tag pill shown beneath the body. */\n  tag?: string\n}\n\n/** The gradient dashed connector line — navy → accent. */\nfunction StepConnector({ className }: { className?: string }) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute top-7 right-0 left-0 hidden md:block\",\n        className\n      )}\n    >\n      <svg viewBox=\"0 0 800 4\" preserveAspectRatio=\"none\" className=\"h-1 w-full\">\n        <defs>\n          <linearGradient id=\"nx-flow-line\" x1=\"0\" x2=\"1\">\n            <stop offset=\"0%\" stopColor=\"rgb(18 21 65)\" />\n            <stop offset=\"100%\" stopColor=\"rgb(247 236 51)\" />\n          </linearGradient>\n        </defs>\n        <line\n          x1=\"60\"\n          y1=\"2\"\n          x2=\"740\"\n          y2=\"2\"\n          stroke=\"url(#nx-flow-line)\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeDasharray=\"1 6\"\n        />\n      </svg>\n    </div>\n  )\n}\n\ninterface HowItWorksProps {\n  steps: ProcessStep[]\n  orientation?: \"horizontal\" | \"vertical\"\n  /** An optional summary panel rendered below the steps. */\n  busPanel?: React.ReactNode\n  className?: string\n}\n\nfunction HowItWorks({\n  steps,\n  orientation = \"horizontal\",\n  busPanel,\n  className,\n}: HowItWorksProps) {\n  const horizontal = orientation === \"horizontal\"\n  return (\n    <div data-slot=\"how-it-works\" className={cn(\"flex flex-col gap-10\", className)}>\n      <div\n        className={cn(\n          \"relative grid gap-6\",\n          horizontal ? \"md:grid-cols-4 md:gap-0\" : \"grid-cols-1\"\n        )}\n      >\n        {horizontal ? <StepConnector /> : null}\n\n        {steps.map(({ label, icon: Icon, body, tag }, idx) => (\n          <div\n            key={label}\n            className={cn(\n              \"relative flex items-start gap-4\",\n              horizontal && \"md:flex-col md:items-start md:px-4\"\n            )}\n          >\n            <div className=\"flex size-14 shrink-0 items-center justify-center rounded-2xl bg-brand-600 text-white shadow-sm ring-4 ring-brand-25\">\n              <Icon className=\"size-6\" />\n            </div>\n            <div className=\"flex flex-col gap-1\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"font-mono text-[10px] tracking-widest text-text-tertiary\">\n                  {String(idx + 1).padStart(2, \"0\")}\n                </span>\n                <span className=\"text-sm font-semibold tracking-wide text-text-brand-secondary uppercase\">\n                  {label}\n                </span>\n              </div>\n              <p className=\"text-md font-semibold text-text-primary\">{body}</p>\n              {tag ? (\n                <span className=\"inline-flex w-fit items-center gap-1 rounded-full bg-accent-300 px-2 py-0.5 text-[11px] font-semibold text-brand-700\">\n                  <CheckCircle className=\"size-3\" />\n                  {tag}\n                </span>\n              ) : null}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {busPanel}\n    </div>\n  )\n}\n\nexport { HowItWorks, StepConnector }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/how-it-works.tsx"
    }
  ],
  "type": "registry:block"
}