{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-1",
  "title": "Icon Bento With Hero Tile",
  "description": "Bento grid of feature cards where one tile spans two columns and rows, each carrying an icon, title, and short capability description.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/bento/1/bento-block.tsx",
      "content": "import {\n  Card,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\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: \"lead\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Brain\"\n        tabler=\"IconBrain\"\n        hugeicons=\"BrainIcon\"\n        phosphor=\"Brain\"\n        remixicon=\"RiBrainLine\"\n        {...p}\n      />\n    ),\n    title: \"AI-powered automation\",\n    description:\n      \"Let intelligent workflows handle the repetitive work so your team can focus on what actually moves the needle.\",\n    span: \"md:col-span-2 md:row-span-2\",\n    iconSize: \"size-10 md:size-14\",\n    titleSize: \"text-base md:text-2xl\",\n    descSize: \"text-sm md:text-base\",\n  },\n  {\n    id: \"speed\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Flashlight\"\n        tabler=\"IconBulb\"\n        hugeicons=\"FlashlightIcon\"\n        phosphor=\"Flashlight\"\n        remixicon=\"RiFlashlightLine\"\n        {...p}\n      />\n    ),\n    title: \"Instant deployments\",\n    description: \"Ship changes globally in under 30 seconds from any branch.\",\n    span: \"\",\n    iconSize: \"size-10\",\n    titleSize: \"text-base\",\n    descSize: \"text-sm\",\n  },\n  {\n    id: \"security\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Lock\"\n        tabler=\"IconLockPassword\"\n        hugeicons=\"LockPasswordIcon\"\n        phosphor=\"Lock\"\n        remixicon=\"RiLockPasswordLine\"\n        {...p}\n      />\n    ),\n    title: \"Zero-trust security\",\n    description: \"Granular policies and end-to-end encryption out of the box.\",\n    span: \"\",\n    iconSize: \"size-10\",\n    titleSize: \"text-base\",\n    descSize: \"text-sm\",\n  },\n  {\n    id: \"analytics\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"LineChart\"\n        tabler=\"IconChartLine\"\n        hugeicons=\"ChartLineIcon\"\n        phosphor=\"ChartLine\"\n        remixicon=\"RiLineChartLine\"\n        {...p}\n      />\n    ),\n    title: \"Real-time analytics\",\n    description: \"Live dashboards with sub-second refresh and custom metrics.\",\n    span: \"\",\n    iconSize: \"size-10\",\n    titleSize: \"text-base\",\n    descSize: \"text-sm\",\n  },\n  {\n    id: \"global\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Globe\"\n        tabler=\"IconGlobe\"\n        hugeicons=\"GlobalIcon\"\n        phosphor=\"Globe\"\n        remixicon=\"RiGlobalLine\"\n        {...p}\n      />\n    ),\n    title: \"Global edge network\",\n    description: \"Serve users from 200+ PoPs with automatic failover.\",\n    span: \"\",\n    iconSize: \"size-10\",\n    titleSize: \"text-base\",\n    descSize: \"text-sm\",\n  },\n  {\n    id: \"teams\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Users\"\n        tabler=\"IconUsersGroup\"\n        hugeicons=\"UserGroupIcon\"\n        phosphor=\"UsersThree\"\n        remixicon=\"RiTeamLine\"\n        {...p}\n      />\n    ),\n    title: \"Built for teams\",\n    description:\n      \"Roles, reviews, and audit logs designed for real collaboration.\",\n    span: \"\",\n    iconSize: \"size-10\",\n    titleSize: \"text-base\",\n    descSize: \"text-sm\",\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-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            Platform\n          </span>\n          <h2 className=\"mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            One platform, every capability\n          </h2>\n          <p className=\"mt-3 text-muted-foreground\">\n            Acme bundles everything modern teams need, with no plugins and no\n            glue code.\n          </p>\n        </div>\n\n        <div className=\"mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 md:grid-rows-[auto_auto]\">\n          {tiles.map(\n            ({\n              id,\n              icon: Icon,\n              title,\n              description,\n              span,\n              iconSize,\n              titleSize,\n              descSize,\n            }) => (\n              <Card\n                key={id}\n                className={[\"flex flex-col justify-between p-6\", span]\n                  .filter(Boolean)\n                  .join(\" \")}\n              >\n                <CardHeader className=\"p-0\">\n                  <span\n                    className={[\n                      \"flex items-center justify-center rounded-lg border border-border bg-muted\",\n                      iconSize,\n                    ].join(\" \")}\n                  >\n                    <Icon className=\"size-5\" aria-hidden=\"true\" />\n                  </span>\n                  <CardTitle\n                    className={[\"mt-4 font-semibold\", titleSize].join(\" \")}\n                  >\n                    {title}\n                  </CardTitle>\n                  <CardDescription className={[\"mt-2\", descSize].join(\" \")}>\n                    {description}\n                  </CardDescription>\n                </CardHeader>\n              </Card>\n            )\n          )}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "880px",
    "tier": "free"
  },
  "categories": [
    "bento"
  ],
  "type": "registry:block"
}