{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-bento",
  "type": "registry:component",
  "title": "Hero bento",
  "description": "A Tailwind hero section with a large headline above a bento grid of product tiles for AI, billing, auth and admin that fade up with a stagger on load.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/hero-bento.tsx",
      "type": "registry:ui",
      "target": "components/ui/hero-bento.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nconst tiles = [\n  { title: \"AI surfaces\", body: \"Threads, traces, citations.\", span: \"lg:col-span-2\" },\n  { title: \"Billing\", body: \"Plans, seats, invoices.\", span: \"\" },\n  { title: \"Auth\", body: \"OTP, magic links, 2FA.\", span: \"\" },\n  { title: \"Admin\", body: \"Roles, audits, flags.\", span: \"lg:col-span-2\" },\n]\n\nfunction HeroBento({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <section\n      data-slot=\"hero-bento\"\n      data-tier=\"premium\"\n      className={cn(\"min-w-0 overflow-hidden rounded-2xl border border-border bg-bg p-4 sm:p-10\", className)}\n    >\n      <div className=\"mx-auto max-w-2xl text-center\">\n        <h1 className=\"text-[clamp(1.5rem,2.5vw+1rem,2.25rem)] font-medium tracking-[-0.022em] text-fg\">\n          Everything your product shell needs\n        </h1>\n        <p className=\"mt-3 text-sm text-fg-muted\">Everything your team needs, arranged so the important parts land first.</p>\n        <Button className=\"mt-6 w-full sm:w-auto\">Open gallery</Button>\n      </div>\n      <div className=\"mt-8 grid min-w-0 gap-3 sm:mt-10 sm:grid-cols-2 lg:grid-cols-3\">\n        {tiles.map((t, i) => (\n          <motion.div\n            key={t.title}\n            initial={reduce ? false : { opacity: 0, y: 12 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ delay: 0.05 * i, duration: 0.35 }}\n            className={cn(\n              \"min-w-0 rounded-xl border border-border bg-surface p-5 shadow-highlight\",\n              t.span\n            )}\n          >\n            <h2 className=\"text-sm font-medium text-fg\">{t.title}</h2>\n            <p className=\"mt-1 text-xs text-fg-muted\">{t.body}</p>\n          </motion.div>\n        ))}\n      </div>\n    </section>\n  )\n}\nexport { HeroBento }\n"
    }
  ]
}