{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "case-study-metric-cards",
  "title": "Case Studies — Metric Cards",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/case-study-metric-cards/CaseStudyMetricCards.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowUpRight } from 'lucide-vue-next'\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</script>\n\n<template>\n  <section data-slot=\"case-study-metric-cards\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n      <div class=\"flex flex-wrap items-end justify-between gap-6\">\n        <div class=\"max-w-2xl\">\n          <Badge variant=\"secondary\">Customer results</Badge>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">What changed after the rollout</h2>\n          <p class=\"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 class=\"mt-10 grid gap-4 md:grid-cols-3\">\n        <Card v-for=\"study in studies\" :key=\"study.company\" class=\"group\">\n          <CardContent class=\"flex h-full flex-col p-6\">\n            <!-- Metric leads: it is the only part that survives a skim. -->\n            <p class=\"font-display text-4xl font-bold tracking-tight\">{{ study.metric }}</p>\n            <p class=\"text-muted-foreground mt-1 text-sm\">{{ study.metricLabel }}</p>\n\n            <Separator class=\"my-5\" />\n\n            <p class=\"text-sm font-semibold\">{{ study.company }}</p>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">{{ study.industry }}</p>\n            <p class=\"mt-4 text-sm leading-relaxed\">{{ study.outcome }}</p>\n\n            <blockquote class=\"border-border text-muted-foreground mt-5 border-l-2 pl-4 text-sm italic\">\n              “{{ study.quote }}”\n            </blockquote>\n\n            <div class=\"mt-auto flex items-center gap-3 pt-6\">\n              <Avatar class=\"size-8\">\n                <AvatarFallback class=\"text-xs\">{{ study.author.initials }}</AvatarFallback>\n              </Avatar>\n              <div class=\"min-w-0\">\n                <p class=\"truncate text-sm font-medium\">{{ study.author.name }}</p>\n                <p class=\"text-muted-foreground truncate text-xs\">{{ study.author.role }}</p>\n              </div>\n              <Button variant=\"ghost\" size=\"icon\" class=\"ml-auto\" :aria-label=\"`Read the ${study.company} case study`\">\n                <ArrowUpRight\n                  class=\"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      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CaseStudyMetricCards.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "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": "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"
}