{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-cases",
  "title": "Use Cases",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/use-cases/UseCasesIndustryGrid.tsx",
      "content": "'use client'\n\nimport { useMemo, useState } from 'react'\nimport { ArrowUpRight, Banknote, Factory, HeartPulse, ShoppingCart, Ship, Truck } from 'lucide-react'\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 = [ALL, ...new Set(useCases.map((useCase) => useCase.segment))]\n\nexport function UseCasesIndustryGrid() {\n  const [active, setActive] = useState(ALL)\n  const visible = useMemo(\n    () => (active === ALL ? useCases : useCases.filter((useCase) => useCase.segment === active)),\n    [active],\n  )\n\n  return (\n    <section data-slot=\"use-cases-industry-grid\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"flex flex-wrap items-end justify-between gap-6\">\n          <div className=\"max-w-2xl\">\n            <Badge variant=\"secondary\">By industry</Badge>\n            <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Where teams start</h2>\n            <p className=\"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            value={active}\n            type=\"single\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-nowrap overflow-x-auto\"\n            aria-label=\"Filter use cases by industry\"\n            // Single-select emits '' when the active item is pressed again;\n            // fall back to ALL so the grid can never end up empty.\n            onValueChange={(value: string) => setActive(value || ALL)}\n          >\n            {segments.map((segment) => (\n              <ToggleGroupItem key={segment} value={segment}>\n                {segment}\n              </ToggleGroupItem>\n            ))}\n          </ToggleGroup>\n        </div>\n\n        <div className=\"mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {visible.map((useCase) => (\n            <Card key={useCase.title} className=\"group\">\n              <CardContent className=\"flex h-full flex-col p-6\">\n                <useCase.icon className=\"text-muted-foreground size-5\" aria-hidden=\"true\" />\n                <p className=\"text-muted-foreground mt-4 font-mono text-xs tracking-[0.14em] uppercase\">\n                  {useCase.segment}\n                </p>\n                <h3 className=\"mt-2 text-base leading-snug font-semibold\">{useCase.title}</h3>\n                <p className=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{useCase.body}</p>\n\n                <div className=\"border-border mt-auto flex items-center justify-between gap-3 border-t pt-4\">\n                  <span className=\"text-sm font-medium\">{useCase.metric}</span>\n                  <Button variant=\"ghost\" size=\"sm\" className=\"h-auto px-2 py-1\">\n                    Read\n                    <ArrowUpRight\n                      className=\"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          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/use-cases/UseCasesIndustryGrid.tsx"
    },
    {
      "path": "packages/registry-react/blocks/use-cases/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/use-cases/UseCasesPersonaTabs.tsx"
    },
    {
      "path": "packages/registry-react/blocks/use-cases/UseCasesRoleCards.tsx",
      "content": "'use client'\n\nimport { ArrowUpRight } from 'lucide-react'\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\nexport function UseCasesRoleCards() {\n  return (\n    <section data-slot=\"use-cases-role-cards\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">By role</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Find the card with your job on it</h2>\n          <p className=\"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 className=\"mt-10 grid gap-4 sm:grid-cols-2\">\n          {roles.map((role) => (\n            <Card key={role.role} className=\"group\">\n              <CardContent className=\"flex h-full flex-col p-6\">\n                <div className=\"flex items-center gap-3\">\n                  <Avatar className=\"size-9\">\n                    <AvatarFallback className=\"text-xs\">{role.initials}</AvatarFallback>\n                  </Avatar>\n                  <p className=\"text-sm font-semibold\">{role.role}</p>\n                </div>\n\n                <p className=\"mt-4 text-base leading-snug font-medium text-balance\">{role.job}</p>\n\n                <Separator className=\"my-4\" />\n\n                <p className=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">First week</p>\n                <p className=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{role.week}</p>\n\n                <div className=\"border-border mt-auto flex items-center justify-between gap-3 border-t pt-4\">\n                  <span className=\"text-xs\">\n                    <span className=\"text-muted-foreground\">Measured on </span>\n                    <span className=\"font-medium\">{role.metric}</span>\n                  </span>\n                  <Button variant=\"ghost\" size=\"sm\" className=\"h-auto shrink-0 px-2 py-1\">\n                    Read\n                    <ArrowUpRight\n                      className=\"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          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/use-cases/UseCasesRoleCards.tsx"
    },
    {
      "path": "packages/registry-react/blocks/use-cases/UseCasesScenarioWalkthrough.tsx",
      "content": "'use client'\n\nimport { ArrowRight } from 'lucide-react'\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\nexport function UseCasesScenarioWalkthrough() {\n  return (\n    <section data-slot=\"use-cases-scenario-walkthrough\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">A Tuesday</Badge>\n          <h2 className=\"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 className=\"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 className=\"mt-12 space-y-4\">\n          {steps.map((step, index) => (\n            <li key={step.action} className=\"grid grid-cols-[auto_1fr] gap-x-5\">\n              <div className=\"flex flex-col items-center\">\n                <span className=\"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                  {String(index + 1).padStart(2, '0')}\n                </span>\n                {index < steps.length - 1 && <span className=\"bg-border w-px grow\" aria-hidden=\"true\" />}\n              </div>\n\n              <Card className=\"mb-4\">\n                <CardContent className=\"p-5\">\n                  <Badge variant=\"outline\">{step.actor}</Badge>\n                  <p className=\"mt-3 text-sm leading-relaxed\">{step.action}</p>\n                  <Separator className=\"my-3\" />\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                    <span className=\"font-medium\">Recorded: </span>\n                    {step.recorded}\n                  </p>\n                </CardContent>\n              </Card>\n            </li>\n          ))}\n        </ol>\n\n        <div className=\"border-border mt-6 flex flex-wrap items-center justify-between gap-4 border-t pt-6\">\n          <p className=\"text-muted-foreground text-sm\">Total elapsed, start to resolution: about nine minutes.</p>\n          <Button>\n            Walk through it yourself\n            <ArrowRight className=\"ml-2 size-4\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/use-cases/UseCasesScenarioWalkthrough.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "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/separator.json",
    "https://uipkge.dev/r/react/tabs.json",
    "https://uipkge.dev/r/react/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"
  ]
}