{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-2",
  "title": "Equal Four-Tile Bento",
  "description": "Bento grid of four identically sized tiles under a centered heading, each with a square icon, category badge, title, and one-line description.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/bento/2/bento-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\nconst tiles = [\n  {\n    id: \"observability\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"ChartBar\"\n        tabler=\"IconChartBar\"\n        hugeicons=\"BarChartIcon\"\n        phosphor=\"ChartBar\"\n        remixicon=\"RiBarChartBoxLine\"\n        {...p}\n      />\n    ),\n    category: \"Observability\",\n    title: \"Full-stack visibility\",\n    description:\n      \"Trace every request end-to-end and surface bottlenecks before they reach users.\",\n  },\n  {\n    id: \"infrastructure\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Cloud\"\n        tabler=\"IconCloud\"\n        hugeicons=\"CloudIcon\"\n        phosphor=\"Cloud\"\n        remixicon=\"RiCloudLine\"\n        {...p}\n      />\n    ),\n    category: \"Infrastructure\",\n    title: \"On-demand compute\",\n    description:\n      \"Auto-scale servers in 14 regions with zero configuration and sub-second provisioning.\",\n  },\n  {\n    id: \"security\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"ShieldCheck\"\n        tabler=\"IconShieldCheck\"\n        hugeicons=\"Shield01Icon\"\n        phosphor=\"ShieldCheck\"\n        remixicon=\"RiShieldCheckLine\"\n        {...p}\n      />\n    ),\n    category: \"Security\",\n    title: \"Defence in depth\",\n    description:\n      \"SOC 2 Type II controls, mutual TLS, and role-based access enforced at every layer.\",\n  },\n  {\n    id: \"integrations\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Layers\"\n        tabler=\"IconStack\"\n        hugeicons=\"Layers01Icon\"\n        phosphor=\"Stack\"\n        remixicon=\"RiStackLine\"\n        {...p}\n      />\n    ),\n    category: \"Integrations\",\n    title: \"Connect anything\",\n    description:\n      \"200+ pre-built connectors and a unified webhook bus for tools your team already uses.\",\n  },\n]\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-4xl\">\n        <div className=\"mx-auto max-w-xl text-center\">\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            Built for every layer of the stack\n          </h2>\n          <p className=\"mt-3 text-base text-muted-foreground\">\n            Acme ships four core capabilities so you never have to stitch\n            together another vendor.\n          </p>\n        </div>\n\n        <div className=\"mt-12 grid grid-cols-1 gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-2\">\n          {tiles.map(({ id, icon: Icon, category, title, description }) => (\n            <div key={id} className=\"flex flex-col gap-5 bg-card p-8\">\n              <div className=\"flex items-start justify-between gap-3\">\n                <span className=\"flex size-12 items-center justify-center rounded-lg bg-muted\">\n                  <Icon className=\"size-6 text-foreground\" aria-hidden=\"true\" />\n                </span>\n                <Badge variant=\"secondary\">{category}</Badge>\n              </div>\n\n              <div className=\"flex flex-col gap-2\">\n                <h3 className=\"font-heading text-lg leading-snug font-semibold\">\n                  {title}\n                </h3>\n                <p className=\"text-sm leading-relaxed text-muted-foreground\">\n                  {description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "708px",
    "tier": "free"
  },
  "categories": [
    "bento"
  ],
  "type": "registry:block"
}