{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "bento-asymmetric-grid",
  "title": "Bento — Asymmetric Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/bento-asymmetric-grid/BentoAsymmetricGrid.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowUpRight, Quote } 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 capabilities = ['Versioned definitions', 'Row-level access', 'Query budgets', 'Drift alerting', 'Audit export']\n\nconst budgets = [\n  { team: 'Finance', used: 62 },\n  { team: 'RevOps', used: 38 },\n  { team: 'Product', used: 81 },\n]\n</script>\n\n<template>\n  <section data-slot=\"bento-asymmetric-grid\" 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\">The shape of it</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">One layer, five jobs</h2>\n      </div>\n\n      <!-- Spans are explicit rather than auto-flowed, so rearranging the\n           composition is a class change and not a reshuffle of the markup. -->\n      <div class=\"mt-10 grid gap-3 sm:grid-cols-3 lg:grid-rows-2\">\n        <Card class=\"sm:row-span-2\">\n          <CardContent class=\"flex h-full flex-col p-6\">\n            <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">Everything included</p>\n            <h3 class=\"mt-3 text-xl font-semibold tracking-tight text-balance\">No feature gates between plans</h3>\n            <p class=\"text-muted-foreground mt-3 text-sm leading-relaxed\">\n              Limits differ; capabilities do not. The list below is on every plan from the first day of a trial.\n            </p>\n\n            <Separator class=\"my-5\" />\n\n            <ul class=\"space-y-2.5\">\n              <li v-for=\"capability in capabilities\" :key=\"capability\" class=\"flex items-center gap-2.5 text-sm\">\n                <span class=\"bg-primary size-1.5 shrink-0 rounded-full\" aria-hidden=\"true\" />\n                <span>{{ capability }}</span>\n              </li>\n            </ul>\n\n            <Button variant=\"outline\" size=\"sm\" class=\"mt-auto self-start pt-0 [&]:mt-6\">Compare plans</Button>\n          </CardContent>\n        </Card>\n\n        <Card class=\"sm:col-span-2\">\n          <CardContent class=\"flex h-full flex-wrap items-center justify-between gap-4 p-6\">\n            <div>\n              <p class=\"font-display text-4xl font-bold tracking-tight\">4.2 days</p>\n              <p class=\"text-muted-foreground mt-1 text-sm\">median time to close, down from 9.4</p>\n            </div>\n            <Badge variant=\"secondary\" class=\"shrink-0\">240 rollouts</Badge>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardContent class=\"p-6\">\n            <p class=\"text-muted-foreground text-xs tracking-wide uppercase\">Query budgets</p>\n            <div class=\"mt-4 space-y-3\">\n              <div v-for=\"budget in budgets\" :key=\"budget.team\">\n                <div class=\"flex items-baseline justify-between gap-3\">\n                  <span class=\"text-xs font-medium\">{{ budget.team }}</span>\n                  <span class=\"text-muted-foreground font-mono text-xs\">{{ budget.used }}%</span>\n                </div>\n                <Progress :model-value=\"budget.used\" class=\"mt-1.5 h-1.5\" :aria-label=\"`${budget.team} budget used`\" />\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card class=\"group\">\n          <CardContent class=\"flex h-full flex-col p-6\">\n            <Quote class=\"text-muted-foreground/60 size-4\" aria-hidden=\"true\" />\n            <blockquote class=\"mt-3 text-sm leading-relaxed\">\n              “We stopped arguing about whose number was right.”\n            </blockquote>\n            <p class=\"text-muted-foreground mt-auto pt-4 text-xs\">Erin Walsh · VP Finance, Northwind</p>\n            <Button variant=\"ghost\" size=\"sm\" class=\"mt-2 h-auto justify-start px-0 text-xs\">\n              Read the story\n              <ArrowUpRight\n                class=\"ml-1 size-3 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                aria-hidden=\"true\"\n              />\n            </Button>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/BentoAsymmetricGrid.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": "Asymmetric bento where one tall tile anchors the composition and three shorter tiles carry a headline metric, a budget breakdown, and a customer quote.",
  "categories": [
    "marketing"
  ]
}