{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "features-numbered-grid",
  "title": "Features — Numbered Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/features-numbered-grid/FeaturesNumberedGrid.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRight, Boxes, Clock, GitBranch, Lock, Receipt, Signal } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\n\nconst features = [\n  {\n    icon: GitBranch,\n    title: 'Definitions under review',\n    body: 'Metrics live in the repo. Changing one opens a pull request with a diff, an owner, and a revert path.',\n  },\n  {\n    icon: Lock,\n    title: 'Access at query time',\n    body: 'Scope resolves from your identity provider on every query, so a shared link cannot outrun permissions.',\n  },\n  {\n    icon: Clock,\n    title: 'Freshness you choose',\n    body: 'Materialise the hot aggregates on a schedule; let everything else fall through to the warehouse.',\n  },\n  {\n    icon: Receipt,\n    title: 'Cost ceilings per team',\n    body: 'Query budgets are enforced where the query runs, not reconciled from an invoice a month later.',\n  },\n  {\n    icon: Signal,\n    title: 'Drift alerting',\n    body: 'Threshold and anomaly alerts fire against certified metrics, so nobody debates the trigger.',\n  },\n  {\n    icon: Boxes,\n    title: 'Embedding without forks',\n    body: 'Signed, scoped URLs render the same dashboards inside your product with the viewer’s own permissions.',\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"features-numbered-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\">How it holds up</Badge>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Six decisions, in order of impact</h2>\n        </div>\n        <Button variant=\"outline\">\n          Read the architecture notes\n          <ArrowRight class=\"ml-2 size-4\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n\n      <!-- gap-px over a border-coloured ground draws hairline rules between\n           cells, so the grid reads as one table rather than six floating cards. -->\n      <div\n        class=\"bg-border border-border mt-10 grid gap-px overflow-hidden rounded-xl border sm:grid-cols-2 lg:grid-cols-3\"\n      >\n        <article v-for=\"(feature, index) in features\" :key=\"feature.title\" class=\"bg-background p-6\">\n          <div class=\"flex items-center gap-3\">\n            <span class=\"text-muted-foreground/70 font-mono text-xs\">{{ String(index + 1).padStart(2, '0') }}</span>\n            <component :is=\"feature.icon\" class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n          </div>\n          <h3 class=\"mt-4 text-base font-semibold\">{{ feature.title }}</h3>\n          <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{{ feature.body }}</p>\n        </article>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FeaturesNumberedGrid.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json"
  ],
  "description": "Six-cell feature grid drawn with one-pixel dividers instead of cards, each cell led by a monospace ordinal, an icon, a title, and two lines of supporting copy.",
  "categories": [
    "marketing"
  ]
}