{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-cases-role-cards",
  "title": "Use Cases — Role Cards",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/use-cases-role-cards/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/UseCasesRoleCards.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"
  ],
  "description": "Grid of role cards, each stating the job to be done, the first week of work, and the metric that role is measured on, so a reader can self-select without a tab interaction.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "use-cases"
}