{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "how-it-works-before-after",
  "title": "How It Works — Before & After",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/how-it-works-before-after/HowItWorksBeforeAfter.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRight, Check, X } from 'lucide-vue-next'\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</script>\n\n<template>\n  <section data-slot=\"how-it-works-before-after\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">Before and after</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">The same four stages, minus the relay</h2>\n        <p class=\"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 class=\"mt-12 space-y-4\">\n        <div v-for=\"row in rows\" :key=\"row.stage\">\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">{{ row.stage }}</span>\n            <Separator class=\"flex-1\" />\n            <span class=\"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 class=\"mt-3 grid items-stretch gap-3 md:grid-cols-[1fr_auto_1fr]\">\n            <Card class=\"bg-muted/30\">\n              <CardContent class=\"flex h-full items-start gap-3 p-4\">\n                <X class=\"text-destructive mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                <p class=\"text-muted-foreground text-sm leading-relaxed\">{{ row.before }}</p>\n              </CardContent>\n            </Card>\n\n            <div class=\"hidden items-center justify-center md:flex\">\n              <ArrowRight class=\"text-muted-foreground/50 size-4\" aria-hidden=\"true\" />\n            </div>\n\n            <Card>\n              <CardContent class=\"flex h-full items-start gap-3 p-4\">\n                <Check class=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                <p class=\"text-sm leading-relaxed\">{{ row.after }}</p>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"border-border mt-10 flex flex-wrap items-center justify-between gap-4 border-t pt-6\">\n        <p class=\"text-muted-foreground text-sm\">Measured against Northwind's own close, the quarter before rollout.</p>\n        <Button>\n          See the rollout plan\n          <ArrowRight class=\"ml-2 size-4\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HowItWorksBeforeAfter.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/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"
  ]
}