{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-2x2-spotlight",
  "title": "Features — 2×2 Spotlight",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/features-2x2-spotlight/Features2x2Spotlight.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 { 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\nexport function Features2x2Spotlight() {\n  return (\n    <section data-slot=\"features-2x2-spotlight\" 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\">Platform</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Four things it does properly</h2>\n          <p className=\"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 className=\"mt-12 grid gap-5 md:grid-cols-2\">\n          {panels.map((panel) => (\n            <Card key={panel.title} className=\"group overflow-hidden\">\n              <CardContent className=\"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 className=\"bg-muted/40 border-border border-b p-6\">\n                  {panel.kind === 'lineage' && (\n                    <div className=\"space-y-2\">\n                      {lineage.map((node, index) => (\n                        <div\n                          key={node}\n                          className={`border-border bg-card rounded-md border px-3 py-2 font-mono text-xs ${\n                            index === lineage.length - 1 ? 'ml-8' : index === 1 ? 'ml-4' : ''\n                          }`}\n                        >\n                          {node}\n                        </div>\n                      ))}\n                    </div>\n                  )}\n\n                  {panel.kind === 'access' && (\n                    <div className=\"divide-border border-border bg-card divide-y rounded-md border\">\n                      {access.map((row) => (\n                        <div key={row.label} className=\"flex items-center justify-between gap-3 px-3 py-2\">\n                          <span className=\"text-xs font-medium\">{row.label}</span>\n                          <span className=\"text-muted-foreground font-mono text-xs\">{row.value}</span>\n                        </div>\n                      ))}\n                    </div>\n                  )}\n\n                  {panel.kind === 'budget' && (\n                    <div className=\"space-y-3\">\n                      {budgets.map((row) => (\n                        <div key={row.team}>\n                          <div className=\"flex items-baseline justify-between gap-3\">\n                            <span className=\"text-xs font-medium\">{row.team}</span>\n                            <span className=\"text-muted-foreground font-mono text-xs\">{row.used}%</span>\n                          </div>\n                          <Progress value={row.used} className=\"mt-1.5 h-1.5\" aria-label={`${row.team} budget used`} />\n                        </div>\n                      ))}\n                    </div>\n                  )}\n\n                  {panel.kind === 'release' && (\n                    <div className=\"space-y-3\">\n                      {releases.map((release) => (\n                        <div key={release.version} className=\"flex items-baseline gap-3\">\n                          <span className=\"text-primary font-mono text-xs\">{release.version}</span>\n                          <span className=\"text-muted-foreground min-w-0 truncate text-xs\">{release.note}</span>\n                        </div>\n                      ))}\n                      <Separator />\n                      <p className=\"text-muted-foreground text-xs\">Rolled out to 41 consumers, no redeploy.</p>\n                    </div>\n                  )}\n                </div>\n\n                <div className=\"flex flex-1 flex-col p-6\">\n                  <p className=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">{panel.eyebrow}</p>\n                  <h3 className=\"mt-2 text-lg font-semibold tracking-tight\">{panel.title}</h3>\n                  <p className=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{panel.body}</p>\n                  <Button variant=\"link\" className=\"mt-auto h-auto justify-start p-0 pt-4 text-sm\">\n                    {panel.link}\n                    <ArrowRight\n                      className=\"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          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/Features2x2Spotlight.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "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/progress.json",
    "https://uipkge.dev/r/react/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"
  ]
}