{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "illustration-card-grid",
  "type": "registry:ui",
  "description": "Grid of cards with gateway illustrations",
  "registryDependencies": [
    "https://cult-ui.com/r/gateway-endpoint-illustration.json",
    "https://cult-ui.com/r/gateway-route-illustration.json",
    "https://cult-ui.com/r/gateway-svg-illustration.json"
  ],
  "files": [
    {
      "path": "registry/default/ui/illustration-card-grid.tsx",
      "content": "import type { ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { GatewayEndpoint } from \"@/registry/default/ui/gateway-endpoint-illustration\"\nimport { GatewayRouting } from \"@/registry/default/ui/gateway-route-illustration\"\nimport { GatewayOverhead } from \"@/registry/default/ui/gateway-svg-illustration\"\n\nexport type IllustrationCardGridItem = {\n  id?: string\n  title: ReactNode\n  description: ReactNode\n  illustration: ReactNode\n  className?: string\n  contentClassName?: string\n  titleClassName?: string\n  descriptionClassName?: string\n  illustrationClassName?: string\n}\n\nexport type IllustrationCardGridProps = React.ComponentProps<\"section\"> & {\n  items?: IllustrationCardGridItem[]\n  cardClassName?: string\n  contentClassName?: string\n  titleClassName?: string\n  descriptionClassName?: string\n  illustrationClassName?: string\n}\n\nexport const DEFAULT_ILLUSTRATION_CARD_GRID_ITEMS: IllustrationCardGridItem[] =\n  [\n    {\n      id: \"gateway-endpoint\",\n      title: \"One API key, hundreds of models\",\n      description:\n        \"Unified billing and observability across your entire AI stack, with text, image, and video models.\",\n      illustration: <GatewayEndpoint />,\n    },\n    {\n      id: \"gateway-overhead\",\n      title: \"Built-in failovers, better uptime\",\n      description:\n        \"Automatic fallbacks during provider outages so your app stays up even when a model goes down.\",\n      illustration: <GatewayOverhead />,\n    },\n    {\n      id: \"gateway-routing\",\n      title: \"No markup, just list price\",\n      description: \"Pay exactly what providers charge with no platform fees.\",\n      illustration: <GatewayRouting />,\n    },\n  ]\n\nexport function IllustrationCardGrid({\n  items = DEFAULT_ILLUSTRATION_CARD_GRID_ITEMS,\n  className,\n  cardClassName,\n  contentClassName,\n  titleClassName,\n  descriptionClassName,\n  illustrationClassName,\n  ...props\n}: IllustrationCardGridProps) {\n  const largeScreenColumnsClass =\n    items.length === 2 ? \"lg:grid-cols-2\" : \"lg:grid-cols-3\"\n\n  return (\n    <section\n      className={cn(\n        \"mx-auto grid w-full max-w-5xl grid-cols-1 border\",\n        largeScreenColumnsClass,\n        className\n      )}\n      data-slot=\"illustration-card-grid\"\n      {...props}\n    >\n      {items.map((item, index) => {\n        const isLastCard = index === items.length - 1\n\n        return (\n          <div\n            className={cn(\n              \"flex flex-col gap-8 p-8 lg:h-[450px]\",\n              !isLastCard && \"border-b lg:border-r lg:border-b-0\",\n              cardClassName,\n              item.className\n            )}\n            data-slot=\"illustration-card-grid-item\"\n            key={item.id ?? index}\n          >\n            <div\n              className={cn(\n                \"flex flex-col gap-4\",\n                contentClassName,\n                item.contentClassName\n              )}\n              data-slot=\"illustration-card-grid-content\"\n            >\n              <h3\n                className={cn(\n                  \"text-balance font-medium text-2xl text-foreground/90 leading-8 tracking-[-0.96px]\",\n                  titleClassName,\n                  item.titleClassName\n                )}\n                data-slot=\"illustration-card-grid-title\"\n              >\n                {item.title}\n              </h3>\n              <p\n                className={cn(\n                  \"text-foreground/70\",\n                  descriptionClassName,\n                  item.descriptionClassName\n                )}\n                data-slot=\"illustration-card-grid-description\"\n              >\n                {item.description}\n              </p>\n            </div>\n            <div\n              className={cn(\n                \"pointer-events-none flex grow select-none items-end justify-center\",\n                illustrationClassName,\n                item.illustrationClassName\n              )}\n              data-slot=\"illustration-card-grid-illustration\"\n            >\n              {item.illustration}\n            </div>\n          </div>\n        )\n      })}\n    </section>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}