Case Study — Featured Story

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface FeaturedResult {
  value: string
  label: string
}

interface CompanyFact {
  term: string
  detail: string
}

Files installed (2)

• src/app/components/blocks/case-study-featured-story/case-study-featured-story.component.ts6.7 kB

  Copy

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

• src/app/components/blocks/case-study-featured-story/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/case-study-featured-story.json