{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "use-cases",
  "title": "Use Cases",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/use-cases/UseCasesIndustryGrid.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowUpRight, Banknote, Factory, HeartPulse, ShoppingCart, Ship, Truck } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\nconst useCases = [\n  {\n    icon: Banknote,\n    segment: 'Financial services',\n    title: 'Close the books without a spreadsheet relay',\n    body: 'Ledger-reconciled metrics that lock on period close, with an auditable trail for every restatement.',\n    metric: '5 days off close',\n  },\n  {\n    icon: HeartPulse,\n    segment: 'Healthcare',\n    title: 'Report on care quality without exposing PHI',\n    body: 'Row-level scoping evaluated per query, so a shared dashboard never leaks a chart the viewer cannot open.',\n    metric: 'HIPAA-scoped by default',\n  },\n  {\n    icon: ShoppingCart,\n    segment: 'Retail',\n    title: 'One margin definition across every channel',\n    body: 'Store, marketplace, and wholesale roll up to the same certified metric instead of three competing exports.',\n    metric: '3 channels, 1 number',\n  },\n  {\n    icon: Truck,\n    segment: 'Logistics',\n    title: 'Track service levels against the contract',\n    body: 'On-time thresholds encoded per customer contract, so breach reporting stops being a manual comparison.',\n    metric: '98.2% SLA visibility',\n  },\n  {\n    icon: Factory,\n    segment: 'Manufacturing',\n    title: 'Yield reporting that survives a line change',\n    body: 'Definitions version with the production line, so last quarter’s numbers stay comparable after a retool.',\n    metric: '12 lines reconciled',\n  },\n  {\n    icon: Ship,\n    segment: 'Logistics',\n    title: 'Landed cost per shipment, not per guess',\n    body: 'Freight, duty, and demurrage join at query time against the booking rather than a monthly allocation.',\n    metric: 'Per-shipment costing',\n  },\n]\n\nconst ALL = 'All'\nconst segments = computed(() => [ALL, ...new Set(useCases.map((useCase) => useCase.segment))])\nconst active = ref(ALL)\nconst visible = computed(() =>\n  active.value === ALL ? useCases : useCases.filter((useCase) => useCase.segment === active.value),\n)\n\n// ToggleGroup single-select emits '' when the active item is pressed again;\n// fall back to ALL so the grid can never end up empty.\nfunction onSegmentChange(value: unknown) {\n  active.value = typeof value === 'string' && value ? value : ALL\n}\n</script>\n\n<template>\n  <section data-slot=\"use-cases-industry-grid\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n      <div class=\"flex flex-wrap items-end justify-between gap-6\">\n        <div class=\"max-w-2xl\">\n          <Badge variant=\"secondary\">By industry</Badge>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Where teams start</h2>\n          <p class=\"text-muted-foreground mt-3 text-lg\">\n            Six rollouts we run often enough to have opinions about. Filter to yours.\n          </p>\n        </div>\n\n        <ToggleGroup\n          :model-value=\"active\"\n          type=\"single\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"flex-nowrap overflow-x-auto\"\n          aria-label=\"Filter use cases by industry\"\n          @update:model-value=\"onSegmentChange\"\n        >\n          <ToggleGroupItem v-for=\"segment in segments\" :key=\"segment\" :value=\"segment\">\n            {{ segment }}\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n\n      <div class=\"mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n        <Card v-for=\"useCase in visible\" :key=\"useCase.title\" class=\"group\">\n          <CardContent class=\"flex h-full flex-col p-6\">\n            <component :is=\"useCase.icon\" class=\"text-muted-foreground size-5\" aria-hidden=\"true\" />\n            <p class=\"text-muted-foreground mt-4 font-mono text-xs tracking-[0.14em] uppercase\">\n              {{ useCase.segment }}\n            </p>\n            <h3 class=\"mt-2 text-base leading-snug font-semibold\">{{ useCase.title }}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{{ useCase.body }}</p>\n\n            <div class=\"border-border mt-auto flex items-center justify-between gap-3 border-t pt-4\">\n              <span class=\"text-sm font-medium\">{{ useCase.metric }}</span>\n              <Button variant=\"ghost\" size=\"sm\" class=\"h-auto px-2 py-1\">\n                Read\n                <ArrowUpRight\n                  class=\"ml-1 size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                  aria-hidden=\"true\"\n                />\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/use-cases/UseCasesIndustryGrid.vue"
    },
    {
      "path": "packages/registry-vue/blocks/use-cases/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/use-cases/UseCasesPersonaTabs.vue"
    },
    {
      "path": "packages/registry-vue/blocks/use-cases/UseCasesRoleCards.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowUpRight } from 'lucide-vue-next'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\n// Naming the metric each role is judged on is what lets someone self-select\n// without reading all four cards.\nconst roles = [\n  {\n    initials: 'FC',\n    role: 'Financial controller',\n    job: 'Close the books without a reconciliation relay.',\n    week: 'Reconcile revenue and margin against the ledger, then lock the period.',\n    metric: 'Days to close',\n  },\n  {\n    initials: 'AL',\n    role: 'Analytics lead',\n    job: 'Stop being a query queue for the rest of the company.',\n    week: 'Publish the ten numbers that generate the most tickets as certified metrics.',\n    metric: 'Ad-hoc requests per month',\n  },\n  {\n    initials: 'RO',\n    role: 'RevOps',\n    job: 'Make forecast review about the forecast.',\n    week: 'Agree one pipeline definition with finance and snapshot it weekly.',\n    metric: 'Forecast accuracy band',\n  },\n  {\n    initials: 'DE',\n    role: 'Data engineer',\n    job: 'Stop owning an undocumented reporting service.',\n    week: 'Move definitions into the repo and delete the bespoke extract jobs.',\n    metric: 'Pipelines maintained',\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"use-cases-role-cards\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">By role</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Find the card with your job on it</h2>\n        <p class=\"text-muted-foreground mt-3 text-lg\">\n          Each one names the work of the first week and the number that role is actually judged on.\n        </p>\n      </div>\n\n      <div class=\"mt-10 grid gap-4 sm:grid-cols-2\">\n        <Card v-for=\"role in roles\" :key=\"role.role\" class=\"group\">\n          <CardContent class=\"flex h-full flex-col p-6\">\n            <div class=\"flex items-center gap-3\">\n              <Avatar class=\"size-9\">\n                <AvatarFallback class=\"text-xs\">{{ role.initials }}</AvatarFallback>\n              </Avatar>\n              <p class=\"text-sm font-semibold\">{{ role.role }}</p>\n            </div>\n\n            <p class=\"mt-4 text-base leading-snug font-medium text-balance\">{{ role.job }}</p>\n\n            <Separator class=\"my-4\" />\n\n            <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">First week</p>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{{ role.week }}</p>\n\n            <div class=\"border-border mt-auto flex items-center justify-between gap-3 border-t pt-4\">\n              <span class=\"text-xs\">\n                <span class=\"text-muted-foreground\">Measured on </span>\n                <span class=\"font-medium\">{{ role.metric }}</span>\n              </span>\n              <Button variant=\"ghost\" size=\"sm\" class=\"h-auto shrink-0 px-2 py-1\">\n                Read\n                <ArrowUpRight\n                  class=\"ml-1 size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                  aria-hidden=\"true\"\n                />\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/use-cases/UseCasesRoleCards.vue"
    },
    {
      "path": "packages/registry-vue/blocks/use-cases/UseCasesScenarioWalkthrough.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRight } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\n// One concrete scenario beats four abstract ones: the reader can check it\n// against their own Tuesday.\nconst steps = [\n  {\n    actor: 'Controller',\n    action: 'Notices Q1 revenue in the board deck is £41k above the close pack.',\n    recorded: 'Nothing yet — this is the part that used to take a day to explain.',\n  },\n  {\n    actor: 'Controller',\n    action: 'Opens the metric and reads its history instead of asking the analytics team.',\n    recorded: 'Definition v127, changed 14 Feb by finance-analytics, reviewed by A. Reyes.',\n  },\n  {\n    actor: 'Analyst',\n    action: 'Sees the deck was built on v126, before the trailing window changed.',\n    recorded: 'Consumer list shows which dashboards still resolve the older version.',\n  },\n  {\n    actor: 'Analyst',\n    action: 'Republishes the deck against the current definition; the gap disappears.',\n    recorded: 'Publish event, with the before and after figures attached.',\n  },\n  {\n    actor: 'Auditor',\n    action: 'Six months later, asks why Q1 was restated.',\n    recorded: 'The whole chain above, exported as a single PDF in under a minute.',\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"use-cases-scenario-walkthrough\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">A Tuesday</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n          Two numbers disagree. Here is the whole sequence.\n        </h2>\n        <p class=\"text-muted-foreground mt-3 text-lg\">\n          Not a feature list — the actual path, including what the system writes down at each step.\n        </p>\n      </div>\n\n      <ol class=\"mt-12 space-y-4\">\n        <li v-for=\"(step, index) in steps\" :key=\"step.action\" class=\"grid grid-cols-[auto_1fr] gap-x-5\">\n          <div class=\"flex flex-col items-center\">\n            <span\n              class=\"border-border bg-card text-muted-foreground relative z-10 flex size-9 shrink-0 items-center justify-center rounded-full border font-mono text-xs font-semibold\"\n            >\n              {{ String(index + 1).padStart(2, '0') }}\n            </span>\n            <span v-if=\"index < steps.length - 1\" class=\"bg-border w-px grow\" aria-hidden=\"true\" />\n          </div>\n\n          <Card class=\"mb-4\">\n            <CardContent class=\"p-5\">\n              <Badge variant=\"outline\">{{ step.actor }}</Badge>\n              <p class=\"mt-3 text-sm leading-relaxed\">{{ step.action }}</p>\n              <Separator class=\"my-3\" />\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                <span class=\"font-medium\">Recorded: </span>{{ step.recorded }}\n              </p>\n            </CardContent>\n          </Card>\n        </li>\n      </ol>\n\n      <div class=\"border-border mt-6 flex flex-wrap items-center justify-between gap-4 border-t pt-6\">\n        <p class=\"text-muted-foreground text-sm\">Total elapsed, start to resolution: about nine minutes.</p>\n        <Button>\n          Walk through it yourself\n          <ArrowRight class=\"ml-2 size-4\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/use-cases/UseCasesScenarioWalkthrough.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "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/separator.json",
    "https://uipkge.dev/r/vue/tabs.json",
    "https://uipkge.dev/r/vue/toggle-group.json"
  ],
  "description": "Use-case set spanning a filterable industry grid, persona-switched tabs, self-select role cards, and a numbered end-to-end scenario walkthrough.",
  "categories": [
    "marketing"
  ]
}