{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "case-study-metric-cards",
  "title": "Case Studies — Metric Cards",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/case-study-metric-cards/CaseStudyMetricCards.tsx",
      "content": "'use client'\n\nimport { ArrowUpRight } from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\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\nconst studies = [\n  {\n    metric: '5 days',\n    metricLabel: 'off the monthly close',\n    company: 'Northwind Logistics',\n    industry: 'Freight forwarding · 1,200 staff',\n    outcome: 'Replaced eleven reconciliation spreadsheets with one certified revenue model.',\n    quote: 'We stopped arguing about whose number was right and started arguing about what to do next.',\n    author: { name: 'Erin Walsh', role: 'VP Finance', initials: 'EW' },\n  },\n  {\n    metric: '71%',\n    metricLabel: 'fewer ad-hoc data requests',\n    company: 'Halden Health',\n    industry: 'Provider network · 40 clinics',\n    outcome: 'Clinic leads self-serve their own quality metrics without filing a ticket.',\n    quote: 'The analytics team went from a request queue to actually building things again.',\n    author: { name: 'Daniel Brooks', role: 'Head of Analytics', initials: 'DB' },\n  },\n  {\n    metric: '2.4pp',\n    metricLabel: 'tighter forecast accuracy',\n    company: 'Verity Retail Group',\n    industry: 'Omnichannel retail · 310 stores',\n    outcome: 'Sales and finance now forecast off the same pipeline definition, snapshotted weekly.',\n    quote: 'Forecast review stopped opening with twenty minutes of reconciling two decks.',\n    author: { name: 'Priya Raman', role: 'RevOps Director', initials: 'PR' },\n  },\n]\n\nexport function CaseStudyMetricCards() {\n  return (\n    <section data-slot=\"case-study-metric-cards\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"flex flex-wrap items-end justify-between gap-6\">\n          <div className=\"max-w-2xl\">\n            <Badge variant=\"secondary\">Customer results</Badge>\n            <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">What changed after the rollout</h2>\n            <p className=\"text-muted-foreground mt-3 text-lg\">\n              Three teams, measured against their own numbers from the quarter before.\n            </p>\n          </div>\n          <Button variant=\"outline\">All case studies</Button>\n        </div>\n\n        <div className=\"mt-10 grid gap-4 md:grid-cols-3\">\n          {studies.map((study) => (\n            <Card key={study.company} className=\"group\">\n              <CardContent className=\"flex h-full flex-col p-6\">\n                {/* Metric leads: it is the only part that survives a skim. */}\n                <p className=\"font-display text-4xl font-bold tracking-tight\">{study.metric}</p>\n                <p className=\"text-muted-foreground mt-1 text-sm\">{study.metricLabel}</p>\n\n                <Separator className=\"my-5\" />\n\n                <p className=\"text-sm font-semibold\">{study.company}</p>\n                <p className=\"text-muted-foreground mt-0.5 text-xs\">{study.industry}</p>\n                <p className=\"mt-4 text-sm leading-relaxed\">{study.outcome}</p>\n\n                <blockquote className=\"border-border text-muted-foreground mt-5 border-l-2 pl-4 text-sm italic\">\n                  “{study.quote}”\n                </blockquote>\n\n                <div className=\"mt-auto flex items-center gap-3 pt-6\">\n                  <Avatar className=\"size-8\">\n                    <AvatarFallback className=\"text-xs\">{study.author.initials}</AvatarFallback>\n                  </Avatar>\n                  <div className=\"min-w-0\">\n                    <p className=\"truncate text-sm font-medium\">{study.author.name}</p>\n                    <p className=\"text-muted-foreground truncate text-xs\">{study.author.role}</p>\n                  </div>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"ml-auto\"\n                    aria-label={`Read the ${study.company} case study`}\n                  >\n                    <ArrowUpRight\n                      className=\"size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                      aria-hidden=\"true\"\n                    />\n                  </Button>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CaseStudyMetricCards.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "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": "Three-up customer results grid where each card leads with the headline metric, then the customer logo wordmark, a one-line outcome, the pull quote with attribution, and a link to the full story.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "case-study"
}