{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-02",
  "title": "Wide hero + two below",
  "description": "A full-width top tile with headline and CTA over two narrower feature tiles — classic 3-tile asymmetric bento.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "content/components/bento/bento-02.tsx",
      "content": "import { ArrowRight, Code2, Layers } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function Bento02() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-5xl px-6 sm:px-10\">\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n          {/* Wide top tile */}\n          <div className=\"relative overflow-hidden rounded-2xl border border-border bg-card p-8 sm:col-span-2\">\n            <div\n              aria-hidden\n              className=\"pointer-events-none absolute inset-0 opacity-30\"\n              style={{\n                background:\n                  \"radial-gradient(ellipse 60% 80% at 70% 50%, rgba(99,102,241,0.15), transparent)\",\n              }}\n            />\n            <div className=\"relative flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between\">\n              <div className=\"max-w-lg\">\n                <span className=\"inline-flex items-center gap-1.5 rounded-full border border-border bg-muted px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-widest text-muted-foreground\">\n                  What you get\n                </span>\n                <h2 className=\"mt-4 text-balance text-2xl font-semibold tracking-tight sm:text-3xl\">\n                  Components that ship with production intent — not playground polish.\n                </h2>\n                <p className=\"mt-3 text-sm text-muted-foreground text-pretty\">\n                  Every block is responsive, accessible, and wired to your shadcn token set. Drop them in. Swap the copy. Ship.\n                </p>\n              </div>\n              <Button className=\"w-fit shrink-0 gap-2\">\n                Browse catalog <ArrowRight className=\"size-4\" />\n              </Button>\n            </div>\n          </div>\n\n          {/* Bottom-left tile */}\n          <div className=\"flex flex-col gap-5 rounded-2xl border border-border bg-muted/40 p-7\">\n            <div className=\"grid size-10 place-items-center rounded-xl border border-border bg-background\">\n              <Code2 className=\"size-5 text-foreground\" strokeWidth={1.5} />\n            </div>\n            <div>\n              <h3 className=\"text-sm font-semibold text-foreground\">One-file blocks</h3>\n              <p className=\"mt-1.5 text-sm text-muted-foreground text-pretty leading-relaxed\">\n                Each section lives in a single <code className=\"rounded bg-muted px-1 font-mono text-xs\">.tsx</code> file — no internal dependencies to untangle.\n              </p>\n            </div>\n          </div>\n\n          {/* Bottom-right tile */}\n          <div className=\"flex flex-col gap-5 rounded-2xl border border-border bg-muted/40 p-7\">\n            <div className=\"grid size-10 place-items-center rounded-xl border border-border bg-background\">\n              <Layers className=\"size-5 text-foreground\" strokeWidth={1.5} />\n            </div>\n            <div>\n              <h3 className=\"text-sm font-semibold text-foreground\">shadcn registry</h3>\n              <p className=\"mt-1.5 text-sm text-muted-foreground text-pretty leading-relaxed\">\n                Install any block with a single <code className=\"rounded bg-muted px-1 font-mono text-xs\">pnpm dlx shadcn add</code> command straight from the registry.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/bento-02.tsx"
    }
  ],
  "categories": [
    "bento"
  ],
  "type": "registry:block"
}