{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-3",
  "description": "An asymmetric bento grid with one large feature tile and supporting tiles.",
  "dependencies": [
    "@remixicon/react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/blocks/bento/3/bento-block.tsx",
      "content": "import {\n  RiCheckLine,\n  RiCodeBoxLine,\n  RiPulseLine,\n  RiShieldKeyholeLine,\n  RiSparkling2Line,\n} from \"@remixicon/react\"\n\nconst tags = [\"TypeScript\", \"Go\", \"Python\", \"Rust\", \"CLI\", \"REST\"]\n\nexport default function BentoBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mx-auto max-w-2xl text-center\">\n          <span className=\"text-sm font-medium tracking-widest text-muted-foreground uppercase\">\n            Why teams switch\n          </span>\n          <h2 className=\"mt-3 text-3xl font-bold tracking-tight sm:text-4xl\">\n            Everything you need to ship\n          </h2>\n          <p className=\"mt-3 text-muted-foreground\">\n            A focused toolkit that scales from your first commit to your\n            millionth request.\n          </p>\n        </div>\n\n        <div className=\"mt-12 grid gap-px border border-border bg-border md:grid-cols-3\">\n          {/* Lead tile: feature + terminal snippet */}\n          <div className=\"flex flex-col justify-between gap-8 bg-background p-8 md:col-span-2 md:row-span-2\">\n            <div>\n              <span className=\"flex size-14 items-center justify-center border border-border bg-muted\">\n                <RiSparkling2Line className=\"size-7\" aria-hidden=\"true\" />\n              </span>\n              <h3 className=\"mt-6 text-2xl font-semibold tracking-tight\">\n                Intelligent build pipeline\n              </h3>\n              <p className=\"mt-3 max-w-md text-base leading-relaxed text-muted-foreground\">\n                Caching, parallelism, and preview environments work out of the\n                box. Push a branch and get a live URL in seconds.\n              </p>\n            </div>\n\n            <div\n              className=\"border border-border bg-muted/40 p-4 font-mono text-xs leading-relaxed\"\n              aria-hidden=\"true\"\n            >\n              <p className=\"text-muted-foreground\">\n                <span className=\"text-foreground\">$</span> acme deploy\n              </p>\n              <p className=\"mt-2 flex items-center gap-1.5 text-muted-foreground\">\n                <RiCheckLine className=\"size-3.5 text-foreground\" />\n                Built in 8.2s\n              </p>\n              <p className=\"mt-1 flex items-center gap-1.5 text-muted-foreground\">\n                <RiCheckLine className=\"size-3.5 text-foreground\" />\n                Live at acme.app\n              </p>\n            </div>\n          </div>\n\n          {/* Stat tile */}\n          <div className=\"flex flex-col justify-between gap-6 bg-background p-8\">\n            <span className=\"flex size-10 items-center justify-center border border-border bg-muted\">\n              <RiPulseLine className=\"size-5\" aria-hidden=\"true\" />\n            </span>\n            <div>\n              <p className=\"text-4xl font-bold tracking-tight tabular-nums\">\n                99.99%\n              </p>\n              <p className=\"mt-1 text-sm text-muted-foreground\">\n                Uptime over the last 90 days\n              </p>\n            </div>\n          </div>\n\n          {/* Feature tile */}\n          <div className=\"flex flex-col gap-4 bg-background p-8\">\n            <span className=\"flex size-10 items-center justify-center border border-border bg-muted\">\n              <RiShieldKeyholeLine className=\"size-5\" aria-hidden=\"true\" />\n            </span>\n            <div>\n              <h3 className=\"text-base font-semibold\">Secure by default</h3>\n              <p className=\"mt-2 text-sm leading-relaxed text-muted-foreground\">\n                Automatic TLS, secrets, and access controls.\n              </p>\n            </div>\n          </div>\n\n          {/* Full-width tile: feature + tech tags */}\n          <div className=\"flex flex-col gap-5 bg-background p-8 md:col-span-3\">\n            <div>\n              <span className=\"flex size-10 items-center justify-center border border-border bg-muted\">\n                <RiCodeBoxLine className=\"size-5\" aria-hidden=\"true\" />\n              </span>\n              <h3 className=\"mt-4 text-base font-semibold\">\n                A developer experience you will not fight\n              </h3>\n              <p className=\"mt-2 max-w-lg text-sm leading-relaxed text-muted-foreground\">\n                Typed SDKs, a fast CLI, and clear logs mean less time reading\n                docs and more time building.\n              </p>\n            </div>\n            <div className=\"flex flex-wrap gap-2\">\n              {tags.map((tag) => (\n                <span\n                  key={tag}\n                  className=\"border border-border bg-muted/50 px-2.5 py-1 font-mono text-xs font-medium text-muted-foreground\"\n                >\n                  {tag}\n                </span>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "70vh",
    "tier": "free"
  },
  "categories": [
    "bento"
  ],
  "type": "registry:block"
}