{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "bento-01",
  "title": "Bento 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/bento-01/Bento01.vue",
      "content": "<script setup lang=\"ts\">\nimport { Activity, Clock, ShieldCheck, Sparkles } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent } from '@/components/ui/card'\n</script>\n\n<template>\n  <section class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-24\">\n      <div class=\"mb-12 max-w-2xl space-y-3\">\n        <p class=\"text-primary text-sm font-medium tracking-widest uppercase\">Built for scale</p>\n        <h2 class=\"text-3xl font-semibold tracking-tight sm:text-4xl\">A workspace your team grows into, not out of.</h2>\n        <p class=\"text-muted-foreground text-lg\">\n          Four surfaces that work end-to-end. Replace any one without touching the rest.\n        </p>\n      </div>\n\n      <div class=\"grid gap-4 lg:grid-cols-4 lg:grid-rows-2\">\n        <Card class=\"lg:col-span-2 lg:row-span-2\">\n          <CardContent class=\"flex h-full flex-col gap-6 p-8\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n                <Sparkles class=\"size-5\" />\n              </div>\n              <Badge variant=\"secondary\">New</Badge>\n            </div>\n            <div class=\"space-y-3\">\n              <h3 class=\"text-2xl font-semibold tracking-tight\">AI-assisted reviews</h3>\n              <p class=\"text-muted-foreground\">\n                Draft 360 feedback in seconds. The assistant reads your goals, your 1:1 notes and your peer reviews,\n                then writes a first pass you can edit. Every suggestion cites the source so nothing comes out of\n                nowhere.\n              </p>\n            </div>\n\n            <div class=\"bg-muted/30 mt-auto rounded-lg border p-5\">\n              <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span>Draft quality</span>\n                <span class=\"font-mono\">92 / 100</span>\n              </div>\n              <div class=\"bg-muted mt-3 h-2 overflow-hidden rounded-full\">\n                <div class=\"bg-primary h-full w-[92%] rounded-full\" />\n              </div>\n              <div class=\"mt-4 grid grid-cols-3 gap-3 text-center text-xs\">\n                <div>\n                  <p class=\"text-foreground font-mono text-base\">12</p>\n                  <p class=\"text-muted-foreground\">Goals</p>\n                </div>\n                <div>\n                  <p class=\"text-foreground font-mono text-base\">34</p>\n                  <p class=\"text-muted-foreground\">1:1 notes</p>\n                </div>\n                <div>\n                  <p class=\"text-foreground font-mono text-base\">8</p>\n                  <p class=\"text-muted-foreground\">Peers</p>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card class=\"lg:col-span-2 lg:row-span-1\">\n          <CardContent class=\"flex h-full items-start gap-5 p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg\">\n              <Activity class=\"size-5\" />\n            </div>\n            <div class=\"space-y-2\">\n              <h3 class=\"text-lg font-semibold tracking-tight\">Real-time activity</h3>\n              <p class=\"text-muted-foreground text-sm\">\n                Every event — hire, promotion, time-off, payroll run — streams into a single timeline you can filter by\n                team, person or module.\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardContent class=\"flex h-full flex-col justify-between gap-4 p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Clock class=\"size-5\" />\n            </div>\n            <div>\n              <p class=\"text-3xl font-semibold tracking-tight\">12 min</p>\n              <p class=\"text-muted-foreground mt-1 text-sm\">Average setup time</p>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardContent class=\"flex h-full flex-col justify-between gap-4 p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <ShieldCheck class=\"size-5\" />\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold tracking-tight\">SOC 2 · ISO 27001 · GDPR</p>\n              <p class=\"text-muted-foreground mt-1 text-sm\">Encrypted at rest, audited quarterly.</p>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Bento01.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Four-tile bento grid (4 cols × 2 rows on lg). One large 2×2 hero tile with a mini progress + stats illustration; one wide 2×1 secondary tile; two square 1×1 tiles (a big-number setup-time stat and a compliance line). Each tile is a raw Card with the content spelled out inline — swap any one without affecting the others.",
  "categories": [
    "marketing"
  ]
}