{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "case-study-metric-cards",
  "title": "Case Studies — Metric Cards",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/case-study-metric-cards/case-study-metric-cards.component.ts",
      "content": "// Three-up customer results grid: each card leads with the headline metric, then the\n// customer wordmark, a one-line outcome, the pull quote with attribution, and a link to\n// the full story. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowUpRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface CaseStudyMetricCardStudy {\n  metric: string\n  metricLabel: string\n  company: string\n  industry: string\n  outcome: string\n  quote: string\n  author: { name: string; role: string; initials: string }\n}\n\nconst defaultStudies: CaseStudyMetricCardStudy[] = [\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\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-case-study-metric-cards, [ui-case-study-metric-cards]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiAvatarComponent,\n    UiAvatarFallbackComponent,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"case-study-metric-cards\" [class]=\"rootClass\">\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            <span ui-badge variant=\"secondary\">Customer results</span>\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 ui-button variant=\"outline\">All case studies</button>\n        </div>\n\n        <div class=\"mt-10 grid gap-4 md:grid-cols-3\">\n          @for (study of studies; track study.company) {\n            <div ui-card class=\"group\">\n              <div ui-card-content 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                <ui-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                  &ldquo;{{ study.quote }}&rdquo;\n                </blockquote>\n\n                <div class=\"mt-auto flex items-center gap-3 pt-6\">\n                  <ui-avatar class=\"size-8\">\n                    <ui-avatar-fallback class=\"text-xs\">{{ study.author.initials }}</ui-avatar-fallback>\n                  </ui-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\n                    ui-button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    class=\"ml-auto\"\n                    [attr.aria-label]=\"'Read the ' + study.company + ' case study'\"\n                  >\n                    <lucide-icon\n                      [img]=\"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              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiCaseStudyMetricCardsComponent {\n  protected readonly ArrowUpRight = ArrowUpRight\n\n  @Input() studies: CaseStudyMetricCardStudy[] = defaultStudies.map((s) => ({ ...s, author: { ...s.author } }))\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/case-study-metric-cards/case-study-metric-cards.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/case-study-metric-cards/index.ts",
      "content": "export { UiCaseStudyMetricCardsComponent, type CaseStudyMetricCardStudy } from './case-study-metric-cards.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/case-study-metric-cards/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/avatar.json",
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/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"
}