{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "features-2x2-spotlight",
  "title": "Features — 2×2 Spotlight",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/features-2x2-spotlight/Features2x2Spotlight.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 { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\n\nconst panels = [\n  {\n    eyebrow: 'Modelling',\n    title: 'One definition, every surface',\n    body: 'Dashboards, exports, and the API all resolve the same certified metric, so the number cannot disagree with itself.',\n    link: 'See the metric layer',\n    kind: 'lineage',\n  },\n  {\n    eyebrow: 'Governance',\n    title: 'Permissions you can prove',\n    body: 'Scope resolves per query from your identity provider, and every evaluation lands in an exportable audit trail.',\n    link: 'Read the access model',\n    kind: 'access',\n  },\n  {\n    eyebrow: 'Performance',\n    title: 'Budgeted, not throttled',\n    body: 'Each team gets a query budget enforced at run time, with materialised aggregates carrying the frequent load.',\n    link: 'See the caching rules',\n    kind: 'budget',\n  },\n  {\n    eyebrow: 'Delivery',\n    title: 'Ship without a redeploy',\n    body: 'Publishing a definition change rolls out to every consumer immediately, and reverting is the same one click.',\n    link: 'How releases work',\n    kind: 'release',\n  },\n]\n\nconst lineage = ['warehouse.orders', 'metrics.revenue_net', 'dashboard.exec_summary']\nconst access = [\n  { label: 'EMEA analyst', value: 'Region-scoped' },\n  { label: 'Finance lead', value: 'Full ledger' },\n  { label: 'Contractor', value: 'No payroll' },\n]\nconst budgets = [\n  { team: 'Finance', used: 62 },\n  { team: 'RevOps', used: 38 },\n  { team: 'Product', used: 81 },\n]\nconst releases = [\n  { version: 'v128', note: 'revenue_net → trailing 28d' },\n  { version: 'v127', note: 'added margin_by_channel' },\n]\n</script>\n\n<template>\n  <section data-slot=\"features-2x2-spotlight\" 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\">Platform</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Four things it does properly</h2>\n        <p class=\"text-muted-foreground mt-3 text-lg\">\n          Each panel is a mechanism, not a promise — the illustration is the real shape of the feature.\n        </p>\n      </div>\n\n      <div class=\"mt-12 grid gap-5 md:grid-cols-2\">\n        <Card v-for=\"panel in panels\" :key=\"panel.title\" class=\"group overflow-hidden\">\n          <CardContent class=\"flex h-full flex-col p-0\">\n            <!-- Illustration slot: built from primitives so it themes with the\n                 page instead of shipping a baked screenshot. -->\n            <div class=\"bg-muted/40 border-border border-b p-6\">\n              <div v-if=\"panel.kind === 'lineage'\" class=\"space-y-2\">\n                <div\n                  v-for=\"(node, index) in lineage\"\n                  :key=\"node\"\n                  class=\"border-border bg-card rounded-md border px-3 py-2 font-mono text-xs\"\n                  :class=\"index === lineage.length - 1 ? 'ml-8' : index === 1 ? 'ml-4' : ''\"\n                >\n                  {{ node }}\n                </div>\n              </div>\n\n              <div\n                v-else-if=\"panel.kind === 'access'\"\n                class=\"divide-border border-border bg-card divide-y rounded-md border\"\n              >\n                <div v-for=\"row in access\" :key=\"row.label\" class=\"flex items-center justify-between gap-3 px-3 py-2\">\n                  <span class=\"text-xs font-medium\">{{ row.label }}</span>\n                  <span class=\"text-muted-foreground font-mono text-xs\">{{ row.value }}</span>\n                </div>\n              </div>\n\n              <div v-else-if=\"panel.kind === 'budget'\" class=\"space-y-3\">\n                <div v-for=\"row in budgets\" :key=\"row.team\">\n                  <div class=\"flex items-baseline justify-between gap-3\">\n                    <span class=\"text-xs font-medium\">{{ row.team }}</span>\n                    <span class=\"text-muted-foreground font-mono text-xs\">{{ row.used }}%</span>\n                  </div>\n                  <Progress :model-value=\"row.used\" class=\"mt-1.5 h-1.5\" :aria-label=\"`${row.team} budget used`\" />\n                </div>\n              </div>\n\n              <div v-else class=\"space-y-3\">\n                <div v-for=\"release in releases\" :key=\"release.version\" class=\"flex items-baseline gap-3\">\n                  <span class=\"text-primary font-mono text-xs\">{{ release.version }}</span>\n                  <span class=\"text-muted-foreground min-w-0 truncate text-xs\">{{ release.note }}</span>\n                </div>\n                <Separator />\n                <p class=\"text-muted-foreground text-xs\">Rolled out to 41 consumers, no redeploy.</p>\n              </div>\n            </div>\n\n            <div class=\"flex flex-1 flex-col p-6\">\n              <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">{{ panel.eyebrow }}</p>\n              <h3 class=\"mt-2 text-lg font-semibold tracking-tight\">{{ panel.title }}</h3>\n              <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{{ panel.body }}</p>\n              <Button variant=\"link\" class=\"mt-auto h-auto justify-start p-0 pt-4 text-sm\">\n                {{ panel.link }}\n                <ArrowRight\n                  class=\"ml-1.5 size-3.5 transition-transform group-hover:translate-x-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/Features2x2Spotlight.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/progress.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Four large feature panels in a two-by-two grid, each with a generous illustration slot built from primitives, a headline, supporting copy, and a quiet inline link.",
  "categories": [
    "marketing"
  ]
}