{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud-2",
  "type": "registry:block",
  "title": "Logo Cloud 2",
  "description": "Logo grid with a hover state that reveals a customers link.",
  "files": [
    {
      "path": "app/preview/logo-cloud/two/page.tsx",
      "content": "import { ChevronRight } from 'lucide-react'\nimport Link from 'next/link'\n\nexport default function LogoCloudTwo() {\n    return (\n        <section className=\"bg-background py-16\">\n            <div className=\"group relative m-auto max-w-5xl px-6\">\n                <div className=\"absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 duration-500 group-hover:scale-100 group-hover:opacity-100\">\n                    <Link\n                        href=\"/\"\n                        className=\"block text-sm duration-150 hover:opacity-75\">\n                        <span> Meet Our Customers</span>\n\n                        <ChevronRight className=\"ml-1 inline-block size-3\" />\n                    </Link>\n                </div>\n                <div className=\"group-hover:blur-xs mx-auto mt-12 grid max-w-2xl grid-cols-4 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14\">\n                    <div className=\"flex\">\n                        <img\n                            className=\"mx-auto h-5 w-fit dark:invert\"\n                            src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/nvidia.svg\"\n                            alt=\"Nvidia Logo\"\n                            height=\"20\"\n                            width=\"auto\"\n                        />\n                    </div>\n\n                    <div className=\"flex\">\n                        <img\n                            className=\"mx-auto h-4 w-fit dark:invert\"\n                            src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/stripe.svg\"\n                            alt=\"Stripe Logo\"\n                            height=\"16\"\n                            width=\"auto\"\n                        />\n                    </div>\n                    <div className=\"flex\">\n                        <img\n                            className=\"mx-auto h-4 w-fit dark:invert\"\n                            src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/github.svg\"\n                            alt=\"GitHub Logo\"\n                            height=\"16\"\n                            width=\"auto\"\n                        />\n                    </div>\n                    <div className=\"flex\">\n                        <img\n                            className=\"mx-auto h-5 w-fit dark:invert\"\n                            src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/nike.svg\"\n                            alt=\"Nike Logo\"\n                            height=\"20\"\n                            width=\"auto\"\n                        />\n                    </div>\n                    <div className=\"flex\">\n                        <img\n                            className=\"mx-auto h-5 w-fit dark:invert\"\n                            src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/lemonsqueezy.svg\"\n                            alt=\"Lemon Squeezy Logo\"\n                            height=\"20\"\n                            width=\"auto\"\n                        />\n                    </div>\n                    <div className=\"flex\">\n                        <img\n                            className=\"mx-auto h-4 w-fit dark:invert\"\n                            src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/laravel.svg\"\n                            alt=\"Laravel Logo\"\n                            height=\"16\"\n                            width=\"auto\"\n                        />\n                    </div>\n                    <div className=\"flex\">\n                        <img\n                            className=\"mx-auto h-7 w-fit dark:invert\"\n                            src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/supabase.svg\"\n                            alt=\"Supabase Logo\"\n                            height=\"28\"\n                            width=\"auto\"\n                        />\n                    </div>\n\n                    <div className=\"flex\">\n                        <img\n                            className=\"mx-auto h-6 w-fit dark:invert\"\n                            src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/anthropic.svg\"\n                            alt=\"Anthropic Logo\"\n                            height=\"24\"\n                            width=\"auto\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/logo-cloud.tsx"
    }
  ]
}