{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "use-cases-industry-grid",
  "title": "Use Cases — Industry Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/use-cases-industry-grid/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/UseCasesIndustryGrid.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/toggle-group.json"
  ],
  "description": "Filterable industry use-case grid: segment chips narrow a six-card grid in place, each card carrying an icon, industry label, outcome headline, proof metric, and a quiet read-more link.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "use-cases"
}