{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"bento-feature-cells","type":"registry:block","title":"Bento Feature Cells","description":"Four principles in a balanced two-row bento.","categories":["bento"],"dependencies":["lucide-react"],"registryDependencies":[],"files":[{"path":"registry/blocks/bento-feature-cells.tsx","content":"import { Boxes, Fingerprint, Gauge, Palette } from \"lucide-react\";\n\nconst cells = [\n  {\n    icon: Gauge,\n    title: \"Fast by default\",\n    description:\n      \"Server components, edge caching and zero client JS where none is needed.\",\n    span: true,\n  },\n  {\n    icon: Palette,\n    title: \"Yours to theme\",\n    description: \"Semantic tokens — change five variables, rebrand everything.\",\n    span: false,\n  },\n  {\n    icon: Fingerprint,\n    title: \"Accessible\",\n    description: \"Keyboard, screen readers and focus states handled for you.\",\n    span: false,\n  },\n  {\n    icon: Boxes,\n    title: \"Composable\",\n    description:\n      \"Every section is a standalone component. Stack, reorder, remove — nothing breaks.\",\n    span: true,\n  },\n];\n\nexport default function BentoFeatureCells() {\n  return (\n    <section className=\"bg-background\">\n      <div className=\"mx-auto w-full max-w-5xl px-6 py-20 sm:py-24\">\n        <div className=\"mb-12 text-center\">\n          <h2 className=\"text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n            Built on decisions, not defaults\n          </h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            Four principles behind every component we ship.\n          </p>\n        </div>\n\n        <div className=\"grid gap-4 sm:grid-cols-3\">\n          {cells.map((cell) => (\n            <div\n              key={cell.title}\n              className={\n                cell.span\n                  ? \"rounded-xl border border-border/60 bg-card p-6 sm:col-span-2\"\n                  : \"rounded-xl border border-border/60 bg-card p-6\"\n              }\n            >\n              <cell.icon className=\"size-5\" />\n              <h3 className=\"mt-4 text-sm font-medium\">{cell.title}</h3>\n              <p className=\"mt-1.5 text-sm text-muted-foreground\">\n                {cell.description}\n              </p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block","target":"components/blocks/bento/bento-feature-cells.tsx"}]}