{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud-2",
  "type": "registry:block",
  "description": "Stylish logo grid featuring top tech brands with decorative plus icons and dynamic borders for a modern visual layout.",
  "files": [
    {
      "path": "registry/blocks/logo-cloud/2/logo-cloud.tsx",
      "content": "import { PlusIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ntype Logo = {\n  src: string;\n  alt: string;\n  width?: number;\n  height?: number;\n};\n\ntype LogoCloudProps = React.ComponentProps<\"div\">;\n\nexport function LogoCloud({ className, ...props }: LogoCloudProps) {\n  return (\n    <div\n      className={cn(\"grid grid-cols-2 border md:grid-cols-4\", className)}\n      {...props}\n    >\n      <LogoCard\n        className=\"relative border-r border-b bg-secondary dark:bg-secondary/30\"\n        logo={{\n          src: \"https://svgl.app/library/nvidia-wordmark-light.svg\",\n          alt: \"Nvidia Logo\",\n        }}\n      >\n        <PlusIcon\n          className=\"-right-[12.5px] -bottom-[12.5px] absolute z-10 size-6\"\n          strokeWidth={1}\n        />\n      </LogoCard>\n\n      <LogoCard\n        className=\"border-b md:border-r\"\n        logo={{\n          src: \"https://svgl.app/library/supabase_wordmark_light.svg\",\n          alt: \"Supabase Logo\",\n        }}\n      />\n\n      <LogoCard\n        className=\"relative border-r border-b md:bg-secondary dark:md:bg-secondary/30\"\n        logo={{\n          src: \"https://svgl.app/library/github_wordmark_light.svg\",\n          alt: \"GitHub Logo\",\n        }}\n      >\n        <PlusIcon\n          className=\"-right-[12.5px] -bottom-[12.5px] absolute z-10 size-6\"\n          strokeWidth={1}\n        />\n        <PlusIcon\n          className=\"-bottom-[12.5px] -left-[12.5px] absolute z-10 hidden size-6 md:block\"\n          strokeWidth={1}\n        />\n      </LogoCard>\n\n      <LogoCard\n        className=\"relative border-b bg-secondary md:bg-background dark:bg-secondary/30 md:dark:bg-background\"\n        logo={{\n          src: \"https://svgl.app/library/openai_wordmark_light.svg\",\n          alt: \"OpenAI Logo\",\n        }}\n      />\n\n      <LogoCard\n        className=\"relative border-r border-b bg-secondary md:border-b-0 md:bg-background dark:bg-secondary/30 md:dark:bg-background\"\n        logo={{\n          src: \"https://svgl.app/library/turso-wordmark-light.svg\",\n          alt: \"Turso Logo\",\n        }}\n      >\n        <PlusIcon\n          className=\"-right-[12.5px] -bottom-[12.5px] md:-left-[12.5px] absolute z-10 size-6 md:hidden\"\n          strokeWidth={1}\n        />\n      </LogoCard>\n\n      <LogoCard\n        className=\"border-b bg-background md:border-r md:border-b-0 md:bg-secondary dark:md:bg-secondary/30\"\n        logo={{\n          src: \"https://svgl.app/library/clerk-wordmark-light.svg\",\n          alt: \"Clerk Logo\",\n        }}\n      />\n\n      <LogoCard\n        className=\"border-r\"\n        logo={{\n          src: \"https://svgl.app/library/claude-ai-wordmark-icon_light.svg\",\n          alt: \"Claude AI Logo\",\n        }}\n      />\n\n      <LogoCard\n        className=\"bg-secondary dark:bg-secondary/30\"\n        logo={{\n          src: \"https://svgl.app/library/vercel_wordmark.svg\",\n          alt: \"Vercel Logo\",\n        }}\n      />\n    </div>\n  );\n}\n\ntype LogoCardProps = React.ComponentProps<\"div\"> & {\n  logo: Logo;\n};\n\nfunction LogoCard({ logo, className, children, ...props }: LogoCardProps) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center bg-background px-4 py-8 md:p-8\",\n        className\n      )}\n      {...props}\n    >\n      <img\n        alt={logo.alt}\n        className=\"pointer-events-none h-4 select-none md:h-5 dark:brightness-0 dark:invert\"\n        height={logo.height || \"auto\"}\n        src={logo.src}\n        width={logo.width || \"auto\"}\n      />\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "50vh"
  },
  "categories": [
    "logo-cloud"
  ]
}