{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "case-study-metric-comparison",
  "title": "Case Study — Metric Comparison",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/case-study-metric-comparison/CaseStudyMetricComparison.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRight, TrendingDown, TrendingUp } 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'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\n// `better` records which direction is good, so the delta colour never has to be\n// hard-coded per row — a falling close time is good, falling accuracy is not.\nconst metrics = [\n  { name: 'Days to close', before: '9.4', after: '4.2', delta: '−55%', better: 'down' },\n  { name: 'Ad-hoc data requests / month', before: '212', after: '61', delta: '−71%', better: 'down' },\n  { name: 'Certified metrics published', before: '0', after: '340', delta: '+340', better: 'up' },\n  { name: 'Forecast accuracy band', before: '±6.1pp', after: '±3.7pp', delta: '−2.4pp', better: 'down' },\n]\n</script>\n\n<template>\n  <section data-slot=\"case-study-metric-comparison\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n      <Badge variant=\"secondary\">Northwind Logistics</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        Two quarters either side of the rollout\n      </h2>\n      <p class=\"text-muted-foreground mt-3 text-lg\">\n        Their numbers, their definitions, measured the same way before and after. Nothing normalised.\n      </p>\n\n      <Card class=\"mt-8\">\n        <CardContent class=\"p-0\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead>Metric</TableHead>\n                <TableHead class=\"text-right\">Q4 2025</TableHead>\n                <TableHead class=\"text-right\">Q2 2026</TableHead>\n                <TableHead class=\"text-right\">Change</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"metric in metrics\" :key=\"metric.name\">\n                <TableCell class=\"font-medium\">{{ metric.name }}</TableCell>\n                <TableCell class=\"text-muted-foreground text-right font-mono text-sm\">{{ metric.before }}</TableCell>\n                <TableCell class=\"text-right font-mono text-sm font-semibold\">{{ metric.after }}</TableCell>\n                <TableCell class=\"text-right\">\n                  <span class=\"text-success inline-flex items-center gap-1.5 font-mono text-sm\">\n                    <component\n                      :is=\"metric.better === 'down' ? TrendingDown : TrendingUp\"\n                      class=\"size-3.5\"\n                      aria-hidden=\"true\"\n                    />\n                    {{ metric.delta }}\n                  </span>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n\n          <Separator />\n\n          <p class=\"text-muted-foreground px-6 py-4 text-xs leading-relaxed\">\n            Measured from their own close calendar and ticket queue. The rollout completed between the two quarters; no\n            headcount was added or removed in finance during the period.\n          </p>\n        </CardContent>\n      </Card>\n\n      <Button class=\"mt-8\">\n        Read how they did it\n        <ArrowRight class=\"ml-2 size-4\" aria-hidden=\"true\" />\n      </Button>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CaseStudyMetricComparison.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",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Single customer result shown as a before-and-after table of four metrics, each row carrying the prior value, the current value, and the delta, under a short context line.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "case-study"
}