{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-logo-cloud-2","type":"registry:block","title":"Logo Cloud 2","description":"Tailark Dusk logo-cloud variant 2 block","registryDependencies":["@tailark-oss/core-use-media","@tailark-oss/motion-primitives-infinite-slider","@tailark-oss/core-spotify","@tailark-oss/core-vercel","@tailark-oss/core-supabase","@tailark-oss/core-hulu","@tailark-oss/core-bolt","@tailark-oss/core-firebase","@tailark-oss/core-beacon","@tailark-oss/core-claude"],"meta":{"aspect-ratio":"90/8","width":686,"height":61},"files":[{"path":"dusk/blocks/logo-cloud/two.tsx","type":"registry:component","target":"@components/logo-cloud-2.tsx","content":"'use client'\n\nimport { useMedia } from '@/hooks/use-media'\nimport { InfiniteSlider } from '@/components/ui/motion-primitives/infinite-slider'\nimport { Beacon } from '@/components/ui/svgs/beacon'\nimport { Bolt } from '@/components/ui/svgs/bolt'\nimport { Hulu } from '@/components/ui/svgs/hulu'\nimport { Spotify } from '@/components/ui/svgs/spotify'\nimport { SupabaseFull } from '@/components/ui/svgs/supabase'\nimport { VercelFull } from '@/components/ui/svgs/vercel'\n\nexport default function LogoCloud() {\n    const isLarge = useMedia('(min-width: 64rem)')\n\n    const Logos = () => {\n        return (\n            <>\n                <Hulu\n                    height={20}\n                    width={60}\n                />\n\n                <VercelFull\n                    height={24}\n                    width={100}\n                />\n\n                <Bolt\n                    height={24}\n                    width={58}\n                />\n\n                <SupabaseFull className=\"h-7\" />\n\n                <Beacon\n                    height={26}\n                    width={92}\n                />\n\n                <Spotify\n                    height={28}\n                    width={90}\n                />\n            </>\n        )\n    }\n\n    return (\n        <section className=\"bg-background\">\n            <div className=\"**:fill-foreground relative m-auto max-w-7xl\">\n                {isLarge ? (\n                    <div className=\"relative flex items-center justify-between px-6 py-12\">\n                        <Logos />\n                    </div>\n                ) : (\n                    <InfiniteSlider\n                        gap={44}\n                        className=\"mask-x-from-85% mask-x-to-99% *:[&>svg]:scale-80 py-8\"\n                    >\n                        <Logos />\n                    </InfiniteSlider>\n                )}\n            </div>\n        </section>\n    )\n}\n"}]}