{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-01",
  "title": "Bento 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/bento-01/Bento01.tsx",
      "content": "import { Activity, Clock, ShieldCheck, Sparkles } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent } from '@/components/ui/card'\n\nexport function Bento01() {\n  return (\n    <section className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-24\">\n        <div className=\"mb-12 max-w-2xl space-y-3\">\n          <p className=\"text-primary text-sm font-medium tracking-widest uppercase\">Built for scale</p>\n          <h2 className=\"text-3xl font-semibold tracking-tight sm:text-4xl\">A workspace your team grows into, not out of.</h2>\n          <p className=\"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 className=\"grid gap-4 lg:grid-cols-4 lg:grid-rows-2\">\n          <Card className=\"lg:col-span-2 lg:row-span-2\">\n            <CardContent className=\"flex h-full flex-col gap-6 p-8\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n                  <Sparkles className=\"size-5\" />\n                </div>\n                <Badge variant=\"secondary\">New</Badge>\n              </div>\n              <div className=\"space-y-3\">\n                <h3 className=\"text-2xl font-semibold tracking-tight\">AI-assisted reviews</h3>\n                <p className=\"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 className=\"bg-muted/30 mt-auto rounded-lg border p-5\">\n                <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                  <span>Draft quality</span>\n                  <span className=\"font-mono\">92 / 100</span>\n                </div>\n                <div className=\"bg-muted mt-3 h-2 overflow-hidden rounded-full\">\n                  <div className=\"bg-primary h-full w-[92%] rounded-full\" />\n                </div>\n                <div className=\"mt-4 grid grid-cols-3 gap-3 text-center text-xs\">\n                  <div>\n                    <p className=\"text-foreground font-mono text-base\">12</p>\n                    <p className=\"text-muted-foreground\">Goals</p>\n                  </div>\n                  <div>\n                    <p className=\"text-foreground font-mono text-base\">34</p>\n                    <p className=\"text-muted-foreground\">1:1 notes</p>\n                  </div>\n                  <div>\n                    <p className=\"text-foreground font-mono text-base\">8</p>\n                    <p className=\"text-muted-foreground\">Peers</p>\n                  </div>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n\n          <Card className=\"lg:col-span-2 lg:row-span-1\">\n            <CardContent className=\"flex h-full items-start gap-5 p-6\">\n              <div className=\"bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg\">\n                <Activity className=\"size-5\" />\n              </div>\n              <div className=\"space-y-2\">\n                <h3 className=\"text-lg font-semibold tracking-tight\">Real-time activity</h3>\n                <p className=\"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 className=\"flex h-full flex-col justify-between gap-4 p-6\">\n              <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n                <Clock className=\"size-5\" />\n              </div>\n              <div>\n                <p className=\"text-3xl font-semibold tracking-tight\">12 min</p>\n                <p className=\"text-muted-foreground mt-1 text-sm\">Average setup time</p>\n              </div>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardContent className=\"flex h-full flex-col justify-between gap-4 p-6\">\n              <div className=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n                <ShieldCheck className=\"size-5\" />\n              </div>\n              <div>\n                <p className=\"text-sm font-semibold tracking-tight\">SOC 2 · ISO 27001 · GDPR</p>\n                <p className=\"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  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/Bento01.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/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"
  ]
}