{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works-before-after",
  "title": "How It Works — Before & After",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/how-it-works-before-after/HowItWorksBeforeAfter.tsx",
      "content": "'use client'\n\nimport { ArrowRight, Check, X } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\n// Rows are paired, not two independent lists — the saving only reads when the\n// old and new step for the same stage sit on one line.\nconst rows = [\n  {\n    stage: 'Collect',\n    before: 'Analyst exports four CSVs from three systems and reconciles them by hand.',\n    after: 'Metrics resolve against the warehouse at query time. Nothing is exported.',\n    saving: '~6 h per close',\n  },\n  {\n    stage: 'Define',\n    before: 'Each team keeps its own revenue formula in a spreadsheet nobody reviews.',\n    after: 'One certified definition, versioned, with an owner and a review step.',\n    saving: '11 → 1 definition',\n  },\n  {\n    stage: 'Publish',\n    before: 'Dashboards are rebuilt by hand and drift from the deck within a week.',\n    after: 'Publishing a definition updates every consumer at once, revertible.',\n    saving: 'No rebuild',\n  },\n  {\n    stage: 'Audit',\n    before: 'Restatements are reconstructed from email threads at year end.',\n    after: 'The change history is the audit trail; the pack exports from it.',\n    saving: '~3 days saved',\n  },\n]\n\nexport function HowItWorksBeforeAfter() {\n  return (\n    <section data-slot=\"how-it-works-before-after\" 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\">Before and after</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">\n            The same four stages, minus the relay\n          </h2>\n          <p className=\"text-muted-foreground mt-3 text-lg\">\n            Nothing here is new work. It is the existing close, with the manual steps removed.\n          </p>\n        </div>\n\n        <div className=\"mt-12 space-y-4\">\n          {rows.map((row) => (\n            <div key={row.stage}>\n              <div className=\"flex items-baseline gap-3\">\n                <span className=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">{row.stage}</span>\n                <Separator className=\"flex-1\" />\n                <span className=\"text-muted-foreground shrink-0 font-mono text-xs\">{row.saving}</span>\n              </div>\n\n              {/* items-stretch so both cards in a row share a height and the\n                  comparison stays line-for-line. */}\n              <div className=\"mt-3 grid items-stretch gap-3 md:grid-cols-[1fr_auto_1fr]\">\n                <Card className=\"bg-muted/30\">\n                  <CardContent className=\"flex h-full items-start gap-3 p-4\">\n                    <X className=\"text-destructive mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                    <p className=\"text-muted-foreground text-sm leading-relaxed\">{row.before}</p>\n                  </CardContent>\n                </Card>\n\n                <div className=\"hidden items-center justify-center md:flex\">\n                  <ArrowRight className=\"text-muted-foreground/50 size-4\" aria-hidden=\"true\" />\n                </div>\n\n                <Card>\n                  <CardContent className=\"flex h-full items-start gap-3 p-4\">\n                    <Check className=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                    <p className=\"text-sm leading-relaxed\">{row.after}</p>\n                  </CardContent>\n                </Card>\n              </div>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"border-border mt-10 flex flex-wrap items-center justify-between gap-4 border-t pt-6\">\n          <p className=\"text-muted-foreground text-sm\">\n            Measured against Northwind&apos;s own close, the quarter before rollout.\n          </p>\n          <Button>\n            See the rollout plan\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/HowItWorksBeforeAfter.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",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Two-column process contrast setting the old workflow against the new one step for step, with matched row heights so the saving at each stage reads at a glance.",
  "categories": [
    "marketing"
  ]
}