{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-01",
  "title": "2×2 feature grid",
  "description": "Four equal-sized tiles in a 2×2 CSS grid, each with an icon, heading, and short body — clean entry point for a feature bento.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/bento/bento-01.tsx",
      "content": "import { Zap, Shield, BarChart3, Globe } from \"lucide-react\"\n\nconst tiles = [\n  {\n    icon: Zap,\n    label: \"Deploy in seconds\",\n    body: \"Push once. Your stack is live before the next standup starts.\",\n    accent: \"text-amber-500\",\n  },\n  {\n    icon: Shield,\n    label: \"Zero-trust security\",\n    body: \"Every request validated at the edge — no exceptions.\",\n    accent: \"text-emerald-500\",\n  },\n  {\n    icon: BarChart3,\n    label: \"Live metrics\",\n    body: \"Latency, error rates, and throughput visible in real time.\",\n    accent: \"text-sky-500\",\n  },\n  {\n    icon: Globe,\n    label: \"Global CDN\",\n    body: \"Assets cached across 300+ PoPs with automatic invalidation.\",\n    accent: \"text-violet-500\",\n  },\n]\n\nexport default function Bento01() {\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=\"mb-12 max-w-lg\">\n          <span className=\"font-mono text-[11px] uppercase tracking-widest text-muted-foreground\">\n            Platform\n          </span>\n          <h2 className=\"mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-4xl\">\n            Four pillars. One deployment.\n          </h2>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n          {tiles.map(({ icon: Icon, label, body, accent }) => (\n            <div\n              key={label}\n              className=\"flex flex-col gap-5 rounded-2xl border border-border bg-card p-6 sm:p-8\"\n            >\n              <div className={`grid size-10 place-items-center rounded-xl border border-border bg-muted ${accent}`}>\n                <Icon className=\"size-5\" strokeWidth={1.5} />\n              </div>\n              <div>\n                <h3 className=\"text-sm font-semibold text-foreground\">{label}</h3>\n                <p className=\"mt-1.5 text-sm text-muted-foreground text-pretty leading-relaxed\">\n                  {body}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/bento-01.tsx"
    }
  ],
  "categories": [
    "bento"
  ],
  "type": "registry:block"
}