{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "use-cases-persona-tabs",
  "title": "Use Cases — Persona Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/use-cases-persona-tabs/use-cases-persona-tabs.component.ts",
      "content": "// Persona-switched use cases: selecting a role swaps the pain-point summary, outcome\n// list, supporting metric, and CTA in place — no navigation, no layout shift between\n// tabs. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { ArrowRight, Check, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport {\n  UiTabsComponent,\n  UiTabsContentComponent,\n  UiTabsListComponent,\n  UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\ninterface Persona {\n  value: string\n  role: string\n  pain: string\n  outcomes: string[]\n  metric: { value: string; label: string }\n  cta: string\n}\n\nconst personas: Persona[] = [\n  {\n    value: 'analytics',\n    role: 'Data & analytics',\n    pain: 'Every request becomes a bespoke SQL ticket, and nobody trusts the number in the deck.',\n    outcomes: [\n      'Publish one certified metric definition per number',\n      'Retire the ad-hoc query queue without losing coverage',\n      'Trace any figure back to the column it came from',\n    ],\n    metric: { value: '71%', label: 'fewer ad-hoc data requests after one quarter' },\n    cta: 'See the analyst workflow',\n  },\n  {\n    value: 'finance',\n    role: 'Finance',\n    pain: 'Close depends on four spreadsheets and one person who knows how they link.',\n    outcomes: [\n      'Reconcile against the ledger before anything publishes',\n      'Lock a period so restated figures cannot drift',\n      'Hand auditors a change log instead of a folder',\n    ],\n    metric: { value: '5 days', label: 'cut from the average monthly close' },\n    cta: 'See the close workflow',\n  },\n  {\n    value: 'revops',\n    role: 'RevOps',\n    pain: 'Pipeline reporting disagrees with the CRM, so forecast reviews start with an argument.',\n    outcomes: [\n      'One pipeline definition shared by sales and finance',\n      'Stage changes tracked with the rep and the timestamp',\n      'Forecast snapshots you can diff week over week',\n    ],\n    metric: { value: '2.4pp', label: 'tighter forecast accuracy band' },\n    cta: 'See the forecast workflow',\n  },\n  {\n    value: 'engineering',\n    role: 'Engineering',\n    pain: 'The reporting layer is an undocumented service nobody wants to own.',\n    outcomes: [\n      'Definitions live in the repo, reviewed like any other change',\n      'No bespoke ETL to babysit at 3am',\n      'Warehouse cost ceilings enforced per team',\n    ],\n    metric: { value: '0', label: 'bespoke pipelines to maintain' },\n    cta: 'See the engineering setup',\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-use-cases-persona-tabs, [ui-use-cases-persona-tabs]',\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    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiTabsComponent,\n    UiTabsContentComponent,\n    UiTabsListComponent,\n    UiTabsTriggerComponent,\n  ],\n  template: `\n    <section data-slot=\"use-cases-persona-tabs\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <div class=\"max-w-2xl\">\n          <span ui-badge variant=\"secondary\">Use cases</span>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Pick the seat you sit in</h2>\n          <p class=\"text-muted-foreground mt-3 text-lg\">\n            Same platform, four very different first weeks. Start with the one that matches your job.\n          </p>\n        </div>\n\n        <ui-tabs [value]=\"activeTab()\" (valueChange)=\"activeTab.set($event)\" class=\"mt-10\">\n          <!-- flex-nowrap + horizontal scroll: the trigger row keeps its height\n               whether there are three roles or thirty. -->\n          <ui-tabs-list variant=\"segmented\" class=\"flex-nowrap overflow-x-auto\">\n            @for (persona of personas; track persona.value) {\n              <button ui-tabs-trigger [value]=\"persona.value\" variant=\"segmented\">\n                {{ persona.role }}\n              </button>\n            }\n          </ui-tabs-list>\n\n          @for (persona of personas; track persona.value) {\n            <ui-tabs-content [value]=\"persona.value\" class=\"mt-8\">\n              <!-- min-h keeps the panel from collapsing between tabs with shorter copy. -->\n              <div class=\"grid min-h-[19rem] gap-8 lg:grid-cols-[1.3fr_1fr]\">\n                <div>\n                  <p class=\"text-muted-foreground text-sm\">Today</p>\n                  <p class=\"mt-1.5 text-lg leading-snug font-medium text-balance\">{{ persona.pain }}</p>\n\n                  <p class=\"text-muted-foreground mt-7 text-sm\">With uipkge</p>\n                  <ul class=\"mt-3 space-y-3\">\n                    @for (outcome of persona.outcomes; track outcome) {\n                      <li class=\"flex items-start gap-2.5 text-sm\">\n                        <lucide-icon [img]=\"Check\" class=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                        <span>{{ outcome }}</span>\n                      </li>\n                    }\n                  </ul>\n\n                  <button ui-button class=\"mt-7\">\n                    {{ persona.cta }}\n                    <lucide-icon [img]=\"ArrowRight\" class=\"ml-2 size-4\" aria-hidden=\"true\" />\n                  </button>\n                </div>\n\n                <div ui-card class=\"self-start\">\n                  <div ui-card-content class=\"p-6\">\n                    <p class=\"font-display text-4xl font-bold tracking-tight\">{{ persona.metric.value }}</p>\n                    <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{{ persona.metric.label }}</p>\n                  </div>\n                </div>\n              </div>\n            </ui-tabs-content>\n          }\n        </ui-tabs>\n      </div>\n    </section>\n  `,\n})\nexport class UiUseCasesPersonaTabsComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Check = Check\n\n  protected readonly personas = personas\n\n  @Input('class') className?: string\n  @Input() set initialPersona(v: string | undefined) {\n    if (v) this.activeTab.set(v)\n  }\n\n  readonly activeTab = signal('analytics')\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/use-cases-persona-tabs/use-cases-persona-tabs.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/use-cases-persona-tabs/index.ts",
      "content": "export { UiUseCasesPersonaTabsComponent } from './use-cases-persona-tabs.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/use-cases-persona-tabs/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "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/tabs.json"
  ],
  "description": "Persona-switched use-case section: a tab list of roles swaps the pain-point summary, a three-item outcome list, a supporting metric, and a role-specific CTA without leaving the page.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "use-cases"
}