{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "case-study-featured-story",
  "title": "Case Study — Featured Story",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/case-study-featured-story/case-study-featured-story.component.ts",
      "content": "// Single featured customer story in a split layout: narrative column with\n// challenge/approach/result copy and a pull quote, paired with a sticky results\n// panel of four metrics plus company facts. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, LucideAngularModule, Quote } 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\ninterface FeaturedResult {\n  value: string\n  label: string\n}\n\ninterface CompanyFact {\n  term: string\n  detail: string\n}\n\nconst results: FeaturedResult[] = [\n  { value: '5 days', label: 'off the monthly close' },\n  { value: '11 → 1', label: 'reconciliation spreadsheets' },\n  { value: '340', label: 'certified metrics published' },\n  { value: '6 weeks', label: 'kickoff to full hand-over' },\n]\n\nconst facts: CompanyFact[] = [\n  { term: 'Industry', detail: 'Freight forwarding' },\n  { term: 'Size', detail: '1,200 staff · 18 countries' },\n  { term: 'Stack', detail: 'Snowflake · dbt · Okta' },\n  { term: 'Live since', detail: 'Q1 2026' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-case-study-featured-story, [ui-case-study-featured-story]',\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-featured-story\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"grid gap-12 lg:grid-cols-[1.4fr_1fr] lg:gap-16\">\n          <article>\n            <span ui-badge variant=\"secondary\">Case study</span>\n            <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n              How Northwind Logistics closed the books five days early\n            </h2>\n\n            <div class=\"mt-8 space-y-8\">\n              <div>\n                <h3 class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">The challenge</h3>\n                <p class=\"mt-2.5 leading-relaxed\">\n                  Month-end ran on eleven spreadsheets maintained by four people across three time zones. Every close\n                  opened with a reconciliation pass nobody had budgeted for, and restatements were tracked in email.\n                </p>\n              </div>\n\n              <div>\n                <h3 class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">The approach</h3>\n                <p class=\"mt-2.5 leading-relaxed\">\n                  We mirrored the warehouse schema, rebuilt revenue and margin as versioned definitions, and reconciled\n                  them against the prior four quarters before anything was published. A single regional team piloted the\n                  first close; the rest of finance moved over two weeks later.\n                </p>\n              </div>\n\n              <div>\n                <h3 class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">The result</h3>\n                <p class=\"mt-2.5 leading-relaxed\">\n                  Close now starts from a reconciled position. Restatements open a reviewable change instead of a\n                  thread, and the audit pack is generated from the same history.\n                </p>\n              </div>\n            </div>\n\n            <figure class=\"border-border mt-10 border-l-2 pl-6\">\n              <lucide-icon [img]=\"Quote\" class=\"text-muted-foreground/60 size-5\" aria-hidden=\"true\" />\n              <blockquote class=\"mt-3 text-lg leading-snug font-medium text-balance\">\n                We stopped arguing about whose number was right and started arguing about what to do next. That is the\n                whole change, and it was worth the six weeks.\n              </blockquote>\n              <figcaption class=\"mt-5 flex items-center gap-3\">\n                <ui-avatar class=\"size-9\">\n                  <ui-avatar-fallback class=\"text-xs\">EW</ui-avatar-fallback>\n                </ui-avatar>\n                <div>\n                  <p class=\"text-sm font-medium\">Erin Walsh</p>\n                  <p class=\"text-muted-foreground text-xs\">VP Finance, Northwind Logistics</p>\n                </div>\n              </figcaption>\n            </figure>\n\n            <button ui-button class=\"mt-10\">\n              Read the full story\n              <lucide-icon [img]=\"ArrowRight\" class=\"ml-2 size-4\" aria-hidden=\"true\" />\n            </button>\n          </article>\n\n          <!-- Sticky results panel: keeps the numbers in view while the narrative scrolls. -->\n          <aside class=\"lg:sticky lg:top-24 lg:self-start\">\n            <div ui-card>\n              <div ui-card-content class=\"p-6\">\n                <h3 class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">Results</h3>\n                <dl class=\"mt-5 grid grid-cols-2 gap-x-4 gap-y-6\">\n                  @for (result of results; track result.label) {\n                    <div>\n                      <dt class=\"sr-only\">{{ result.label }}</dt>\n                      <dd>\n                        <span class=\"font-display block text-2xl font-bold tracking-tight\">{{ result.value }}</span>\n                        <span class=\"text-muted-foreground mt-1 block text-xs leading-snug\">{{ result.label }}</span>\n                      </dd>\n                    </div>\n                  }\n                </dl>\n\n                <ui-separator class=\"my-6\" />\n\n                <dl class=\"space-y-3\">\n                  @for (fact of facts; track fact.term) {\n                    <div class=\"flex items-baseline justify-between gap-4 text-sm\">\n                      <dt class=\"text-muted-foreground\">{{ fact.term }}</dt>\n                      <dd class=\"text-right font-medium\">{{ fact.detail }}</dd>\n                    </div>\n                  }\n                </dl>\n              </div>\n            </div>\n          </aside>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiCaseStudyFeaturedStoryComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Quote = Quote\n\n  protected readonly results = results\n  protected readonly facts = facts\n\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-featured-story/case-study-featured-story.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/case-study-featured-story/index.ts",
      "content": "export { UiCaseStudyFeaturedStoryComponent } from './case-study-featured-story.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/case-study-featured-story/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": "Single featured customer story in a split layout: narrative column with challenge/approach/result copy and a pull quote, paired with a sticky results panel of four metrics plus company facts.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "case-study"
}