{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid",
  "title": "Bento Grid",
  "description": "Feature bento with hover-reveal CTAs and rich backgrounds.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/bento-grid.tsx",
      "content": "import { ArrowRightIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport function BentoGrid({ className, children, ...props }: BentoGridProps) {\n  return (\n    <div\n      data-slot=\"bento-grid\"\n      className={cn(\n        \"grid w-full auto-rows-[22rem] grid-cols-1 gap-4 md:grid-cols-3\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\ninterface BentoCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string;\n  description: string;\n  /** Visual filling the card behind the text (chart, image, animation…) */\n  background?: React.ReactNode;\n  icon?: React.ReactNode;\n  href?: string;\n  cta?: string;\n}\n\nexport function BentoCard({\n  name,\n  description,\n  background,\n  icon,\n  href,\n  cta = \"Learn more\",\n  className,\n  ...props\n}: BentoCardProps) {\n  return (\n    <div\n      data-slot=\"bento-card\"\n      className={cn(\n        \"group/bento relative flex flex-col justify-end overflow-hidden rounded-2xl border bg-card transition-shadow duration-300 hover:shadow-xl hover:shadow-primary/5\",\n        className\n      )}\n      {...props}\n    >\n      {background && (\n        <div className=\"absolute inset-0 overflow-hidden transition-transform duration-500 ease-out group-hover/bento:scale-[1.04] motion-reduce:transition-none motion-reduce:group-hover/bento:scale-100\">\n          {background}\n        </div>\n      )}\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 bg-gradient-to-t from-card via-card/60 to-transparent\"\n      />\n      <div\n        className={cn(\n          \"pointer-events-none relative z-10 flex flex-col gap-1 p-6 transition-transform duration-300 ease-out motion-reduce:transition-none\",\n          href &&\n            \"group-focus-within/bento:-translate-y-7 group-hover/bento:-translate-y-7 motion-reduce:-translate-y-7\"\n        )}\n      >\n        {icon && (\n          <div className=\"mb-2 w-fit text-primary [&_svg]:size-8\">{icon}</div>\n        )}\n        <h3 className=\"text-lg font-semibold text-card-foreground\">{name}</h3>\n        <p className=\"text-sm text-muted-foreground\">{description}</p>\n      </div>\n      {href && (\n        <div className=\"absolute inset-x-0 bottom-0 z-10 translate-y-full p-6 pt-0 transition-transform duration-300 ease-out group-focus-within/bento:translate-y-0 group-hover/bento:translate-y-0 motion-reduce:translate-y-0\">\n          <a\n            href={href}\n            className=\"inline-flex items-center gap-1 rounded-sm text-sm font-medium text-primary hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n          >\n            {cta}\n            <ArrowRightIcon className=\"size-4 transition-transform group-hover/bento:translate-x-0.5\" />\n          </a>\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/bento-grid.tsx"
    }
  ],
  "type": "registry:ui"
}