{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-cases-persona-tabs",
  "title": "Use Cases — Persona Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/use-cases-persona-tabs/UseCasesPersonaTabs.tsx",
      "content": "'use client'\n\nimport { ArrowRight, Check } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nconst personas = [\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\nexport function UseCasesPersonaTabs() {\n  return (\n    <section data-slot=\"use-cases-persona-tabs\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">Use cases</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Pick the seat you sit in</h2>\n          <p className=\"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        <Tabs defaultValue=\"analytics\" className=\"mt-10\">\n          {/* flex-nowrap + horizontal scroll: the trigger row keeps its height\n              whether there are three roles or thirty. */}\n          <TabsList variant=\"segmented\" className=\"flex-nowrap overflow-x-auto\">\n            {personas.map((persona) => (\n              <TabsTrigger key={persona.value} value={persona.value} variant=\"segmented\">\n                {persona.role}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n\n          {personas.map((persona) => (\n            <TabsContent key={persona.value} value={persona.value} className=\"mt-8\">\n              {/* min-h keeps the panel from collapsing between tabs with shorter copy. */}\n              <div className=\"grid min-h-[19rem] gap-8 lg:grid-cols-[1.3fr_1fr]\">\n                <div>\n                  <p className=\"text-muted-foreground text-sm\">Today</p>\n                  <p className=\"mt-1.5 text-lg leading-snug font-medium text-balance\">{persona.pain}</p>\n\n                  <p className=\"text-muted-foreground mt-7 text-sm\">With uipkge</p>\n                  <ul className=\"mt-3 space-y-3\">\n                    {persona.outcomes.map((outcome) => (\n                      <li key={outcome} className=\"flex items-start gap-2.5 text-sm\">\n                        <Check className=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                        <span>{outcome}</span>\n                      </li>\n                    ))}\n                  </ul>\n\n                  <Button className=\"mt-7\">\n                    {persona.cta}\n                    <ArrowRight className=\"ml-2 size-4\" aria-hidden=\"true\" />\n                  </Button>\n                </div>\n\n                <Card className=\"self-start\">\n                  <CardContent className=\"p-6\">\n                    <p className=\"font-display text-4xl font-bold tracking-tight\">{persona.metric.value}</p>\n                    <p className=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{persona.metric.label}</p>\n                  </CardContent>\n                </Card>\n              </div>\n            </TabsContent>\n          ))}\n        </Tabs>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/UseCasesPersonaTabs.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/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"
}