{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-4",
  "title": "Bento With Static Chart Visuals",
  "description": "Bento grid whose hero automation tile carries a bar-chart visual, with supporting tiles showing deploy times, progress bars, and headline numbers.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/bento/4/bento-block.tsx",
      "content": "import { Card } from \"@/components/ui/card\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\nimport type * as React from \"react\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\n/** An icon held in data and rendered later, e.g. `<item.icon className=\"size-4\" />`. */\ntype IconRenderer = (props: IconProps) => React.ReactNode\n\nexport default function BentoBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-muted/30 px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-6xl\">\n        <div className=\"max-w-2xl\">\n          <span className=\"text-sm font-medium tracking-widest text-muted-foreground uppercase\">\n            Capabilities\n          </span>\n          <h2 className=\"mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            Everything Acme runs on, in one grid\n          </h2>\n          <p className=\"mt-3 text-muted-foreground\">\n            A composable platform that scales from your first deploy to your\n            millionth request, without changing tools.\n          </p>\n        </div>\n\n        <div className=\"mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 md:grid-rows-[repeat(2,minmax(0,1fr))_auto]\">\n          <Card className=\"relative flex flex-col justify-between gap-8 overflow-hidden rounded-lg border-border p-8 sm:col-span-2 md:col-span-2 md:row-span-2\">\n            <div className=\"flex flex-col gap-4\">\n              <span className=\"flex size-12 items-center justify-center rounded-lg border border-border bg-primary text-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"Sparkles\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"Sparkle\"\n                  remixicon=\"RiSparklingLine\"\n                  className=\"size-6\"\n                  aria-hidden=\"true\"\n                />\n              </span>\n              <div>\n                <h3 className=\"font-heading text-2xl font-semibold tracking-tight\">\n                  Intelligent automation engine\n                </h3>\n                <p className=\"mt-3 max-w-sm text-muted-foreground\">\n                  Define workflows once and let Acme orchestrate retries,\n                  scaling, and rollbacks across every environment automatically.\n                </p>\n              </div>\n            </div>\n            <div className=\"flex items-end gap-1.5\" aria-hidden=\"true\">\n              {[28, 40, 33, 52, 45, 66, 54, 78, 64, 92].map((h, i, arr) => (\n                <div\n                  key={i}\n                  className={cn(\n                    \"flex-1\",\n                    i === arr.length - 1 ? \"bg-primary\" : \"bg-primary/25\"\n                  )}\n                  style={{ height: `${h}px` }}\n                />\n              ))}\n            </div>\n          </Card>\n\n          <Tile\n            icon={(p: IconProps) => (\n              <IconPlaceholder\n                lucide=\"Clock\"\n                tabler=\"IconClock\"\n                hugeicons=\"TimeIcon\"\n                phosphor=\"Clock\"\n                remixicon=\"RiTimeLine\"\n                {...p}\n              />\n            )}\n            title=\"Sub-second deploys\"\n            description=\"Ship globally in under 30 seconds from any branch.\"\n          >\n            <div className=\"mt-5 flex items-center gap-2\" aria-hidden=\"true\">\n              <span className=\"text-3xl font-bold tracking-tight\">0.4</span>\n              <span className=\"text-sm text-muted-foreground\">sec avg</span>\n            </div>\n          </Tile>\n\n          <Tile\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            title=\"Zero-trust security\"\n            description=\"Granular policies and encryption on by default.\"\n          >\n            <div className=\"mt-5 space-y-2\" aria-hidden=\"true\">\n              {[92, 74, 88].map((w, i) => (\n                <div key={i} className=\"flex items-center gap-2\">\n                  <span className=\"size-2.5 shrink-0 bg-primary\" />\n                  <span className=\"h-1.5 flex-1 bg-muted\">\n                    <span\n                      className=\"block h-full bg-primary/40\"\n                      style={{ width: `${w}%` }}\n                    />\n                  </span>\n                </div>\n              ))}\n            </div>\n          </Tile>\n\n          <Tile\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            title=\"Live analytics\"\n            description=\"Custom metrics with sub-second refresh.\"\n          >\n            <div className=\"mt-5 flex items-end gap-1.5\" aria-hidden=\"true\">\n              {[34, 50, 40, 60, 48, 74].map((h, i, arr) => (\n                <div\n                  key={i}\n                  className={cn(\n                    \"flex-1\",\n                    i === arr.length - 1 ? \"bg-primary\" : \"bg-primary/30\"\n                  )}\n                  style={{ height: `${h}px` }}\n                />\n              ))}\n            </div>\n          </Tile>\n\n          <Tile\n            icon={(p: IconProps) => (\n              <IconPlaceholder\n                lucide=\"Cpu\"\n                tabler=\"IconCpu\"\n                hugeicons=\"CpuIcon\"\n                phosphor=\"Cpu\"\n                remixicon=\"RiCpuLine\"\n                {...p}\n              />\n            )}\n            title=\"Elastic compute\"\n            description=\"Scale to zero, burst to thousands of cores.\"\n          >\n            <div className=\"mt-5 space-y-1.5\" aria-hidden=\"true\">\n              <div className=\"h-2 w-full rounded-sm bg-muted\">\n                <div className=\"h-full w-3/4 rounded-lg bg-primary/40\" />\n              </div>\n              <div className=\"h-2 w-full rounded-sm bg-muted\">\n                <div className=\"h-full w-1/2 rounded-sm bg-primary/40\" />\n              </div>\n            </div>\n          </Tile>\n\n          <Tile\n            className=\"sm:col-span-2 md:col-span-4\"\n            icon={(p: IconProps) => (\n              <IconPlaceholder\n                lucide=\"GitBranch\"\n                tabler=\"IconGitBranch\"\n                hugeicons=\"GitBranchIcon\"\n                phosphor=\"GitBranch\"\n                remixicon=\"RiGitBranchLine\"\n                {...p}\n              />\n            )}\n            title=\"Preview every branch\"\n            description=\"Each pull request gets an isolated, shareable environment with its own URL and data snapshot.\"\n          >\n            <div className=\"mt-5 flex items-center gap-3\" aria-hidden=\"true\">\n              <span className=\"size-3 rounded-md bg-primary\" />\n              <span className=\"h-px flex-1 bg-border\" />\n              <span className=\"size-2.5 rounded-sm border border-border bg-muted\" />\n              <span className=\"h-px flex-1 bg-border\" />\n              <span className=\"size-2.5 rounded-sm border border-border bg-muted\" />\n            </div>\n          </Tile>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nfunction Tile({\n  icon: Icon,\n  title,\n  description,\n  className,\n  children,\n}: {\n  icon: IconRenderer\n  title: string\n  description: string\n  className?: string\n  children?: React.ReactNode\n}) {\n  return (\n    <Card\n      className={cn(\"flex flex-col rounded-lg border-border p-6\", className)}\n    >\n      <span className=\"flex size-10 items-center justify-center rounded-md border border-border bg-muted\">\n        <Icon className=\"size-5\" aria-hidden=\"true\" />\n      </span>\n      <h3 className=\"mt-4 font-heading font-semibold tracking-tight\">\n        {title}\n      </h3>\n      <p className=\"mt-2 text-sm text-muted-foreground\">{description}</p>\n      {children}\n    </Card>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "1211px",
    "tier": "free"
  },
  "categories": [
    "bento"
  ],
  "type": "registry:block"
}