{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "use-cases-persona-tabs",
  "title": "Use Cases — Persona Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/use-cases-persona-tabs/UseCasesPersonaTabs.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRight, Check } from 'lucide-vue-next'\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</script>\n\n<template>\n  <section data-slot=\"use-cases-persona-tabs\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">Use cases</Badge>\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      <Tabs default-value=\"analytics\" class=\"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\" class=\"flex-nowrap overflow-x-auto\">\n          <TabsTrigger v-for=\"persona in personas\" :key=\"persona.value\" :value=\"persona.value\" variant=\"segmented\">\n            {{ persona.role }}\n          </TabsTrigger>\n        </TabsList>\n\n        <TabsContent v-for=\"persona in personas\" :key=\"persona.value\" :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                <li v-for=\"outcome in persona.outcomes\" :key=\"outcome\" class=\"flex items-start gap-2.5 text-sm\">\n                  <Check class=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                  <span>{{ outcome }}</span>\n                </li>\n              </ul>\n\n              <Button class=\"mt-7\">\n                {{ persona.cta }}\n                <ArrowRight class=\"ml-2 size-4\" aria-hidden=\"true\" />\n              </Button>\n            </div>\n\n            <Card class=\"self-start\">\n              <CardContent 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              </CardContent>\n            </Card>\n          </div>\n        </TabsContent>\n      </Tabs>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/UseCasesPersonaTabs.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/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"
}