{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works-arrow-flow",
  "title": "How It Works — Arrow Flow",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/how-it-works-arrow-flow/HowItWorksArrowFlow.tsx",
      "content": "'use client'\n\nimport { Fragment } from 'react'\nimport { ArrowRight, Boxes, FileCheck, GitPullRequest, Send } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\n\nconst stages = [\n  { icon: Boxes, label: 'Connect', body: 'Read-only credentials to the warehouse.', artefact: 'Schema mirror' },\n  { icon: GitPullRequest, label: 'Define', body: 'Metrics authored as reviewable files.', artefact: 'Merged PR' },\n  { icon: FileCheck, label: 'Certify', body: 'Reconciled against the prior quarters.', artefact: 'Sign-off' },\n  { icon: Send, label: 'Publish', body: 'Rolled out to every consumer at once.', artefact: 'Live metric' },\n]\n\nexport function HowItWorksArrowFlow() {\n  return (\n    <section data-slot=\"how-it-works-arrow-flow\" 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\">The flow</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Four stages, one artefact each</h2>\n          <p className=\"text-muted-foreground mt-3 text-lg\">\n            Every stage ends in something you can point at, so progress is never a status update.\n          </p>\n        </div>\n\n        {/* Arrows sit between cells rather than inside cards, so they stay put\n            when a card's copy runs longer. Below md the row becomes a rail. */}\n        <div className=\"mt-12 grid gap-4 md:grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] md:items-stretch md:gap-0\">\n          {stages.map((stage, index) => (\n            <Fragment key={stage.label}>\n              <div className=\"flex items-center gap-4 md:contents\">\n                <Card className=\"flex-1 md:h-full\">\n                  <CardContent className=\"p-5\">\n                    <span\n                      className=\"border-border text-muted-foreground flex size-9 items-center justify-center rounded-lg border\"\n                      aria-hidden=\"true\"\n                    >\n                      <stage.icon className=\"size-4\" />\n                    </span>\n                    <p className=\"mt-4 text-sm font-semibold\">{stage.label}</p>\n                    <p className=\"text-muted-foreground mt-1.5 text-xs leading-relaxed\">{stage.body}</p>\n                    <p className=\"text-muted-foreground/80 mt-3 font-mono text-xs tracking-wide uppercase\">\n                      → {stage.artefact}\n                    </p>\n                  </CardContent>\n                </Card>\n              </div>\n\n              {index < stages.length - 1 && (\n                <div\n                  className=\"text-muted-foreground/50 hidden items-center justify-center px-2 md:flex\"\n                  aria-hidden=\"true\"\n                >\n                  <ArrowRight className=\"size-4\" />\n                </div>\n              )}\n            </Fragment>\n          ))}\n        </div>\n\n        <div className=\"mt-10\">\n          <Button variant=\"outline\">\n            Walk through a real rollout\n            <ArrowRight className=\"ml-2 size-4\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/HowItWorksArrowFlow.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Four-stage horizontal flow joined by drawn SVG arrows, each stage carrying an icon tile, a short label, and the artefact it produces, wrapping to a vertical rail on narrow screens.",
  "categories": [
    "marketing"
  ]
}