{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"bento-mobile","type":"registry:block","title":"Bento Mobile","description":"Mobile-first story: smart alerts, offline mode, biometrics.","categories":["bento"],"dependencies":["lucide-react"],"registryDependencies":[],"files":[{"path":"registry/blocks/bento-mobile.tsx","content":"import { Bell, Fingerprint, WifiOff } from \"lucide-react\";\n\nexport default function BentoMobile() {\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 for the phone in your pocket\n          </h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            Not a shrunken dashboard — a real mobile product.\n          </p>\n        </div>\n\n        <div className=\"grid gap-4 md:grid-cols-2\">\n          {/* Notifications cell */}\n          <div className=\"rounded-xl border border-border/60 bg-card p-6\">\n            <Bell className=\"size-5\" />\n            <h3 className=\"mt-4 text-sm font-medium\">\n              Alerts that respect your sleep\n            </h3>\n            <p className=\"mt-1.5 text-sm text-muted-foreground\">\n              Critical pages ring through. Everything else waits for morning.\n            </p>\n            <div aria-hidden className=\"mt-5 space-y-2\">\n              <div className=\"rounded-xl border border-border/60 bg-background p-3 shadow-sm\">\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-xs font-semibold\">\n                    ⚠ production is down\n                  </span>\n                  <span className=\"font-mono text-[10px] text-muted-foreground\">\n                    now\n                  </span>\n                </div>\n                <p className=\"mt-1 text-xs text-muted-foreground\">\n                  api-gateway · 5xx spike · tap to roll back\n                </p>\n              </div>\n              <div className=\"rounded-xl border border-border/60 bg-muted/40 p-3 opacity-60\">\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-xs font-medium\">deploy succeeded</span>\n                  <span className=\"font-mono text-[10px] text-muted-foreground\">\n                    8:00\n                  </span>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Offline + biometrics cells */}\n          <div className=\"grid gap-4\">\n            <div className=\"rounded-xl border border-border/60 bg-card p-6\">\n              <WifiOff className=\"size-5\" />\n              <h3 className=\"mt-4 text-sm font-medium\">Works in the tunnel</h3>\n              <p className=\"mt-1.5 text-sm text-muted-foreground\">\n                Full offline mode — reads cached, writes queued, synced the\n                second you resurface.\n              </p>\n            </div>\n            <div className=\"rounded-xl border border-border/60 bg-card p-6\">\n              <Fingerprint className=\"size-5\" />\n              <h3 className=\"mt-4 text-sm font-medium\">\n                Approvals with Face ID\n              </h3>\n              <p className=\"mt-1.5 text-sm text-muted-foreground\">\n                Production actions confirm biometrically — no password on a\n                tiny keyboard at 2 a.m.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block","target":"components/blocks/bento/bento-mobile.tsx"}]}