{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["button"],"name":"integrations-5","description":"Horizontal scrolling row of overlapping circular integration logos with mask.","categories":["integrations"],"files":[{"path":"registry/blocks/integrations/5/integrations.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\ntype Integration = {\n\tsrc?: string;\n\tname: string;\n\tisInvertable?: boolean;\n};\n\nconst data: Integration[] = [\n\t{\n\t\tname: \"Empty 1\",\n\t},\n\t{\n\t\tname: \"Vercel\",\n\t\tsrc: \"https://storage.efferd.com/logo/vercel.svg\",\n\t\tisInvertable: true,\n\t},\n\t{\n\t\tname: \"OpenAI\",\n\t\tsrc: \"https://storage.efferd.com/logo/openai.svg\",\n\t\tisInvertable: true,\n\t},\n\t{\n\t\tsrc: \"https://storage.efferd.com/logo/supabase.svg\",\n\t\tname: \"Supabase\",\n\t},\n\t{\n\t\tname: \"GitHub\",\n\t\tsrc: \"https://storage.efferd.com/logo/github.svg\",\n\t\tisInvertable: true,\n\t},\n\t{\n\t\tname: \"Notion\",\n\t\tsrc: \"https://storage.efferd.com/logo/notion.svg\",\n\t},\n\t{\n\t\tname: \"Gmail\",\n\t\tsrc: \"https://storage.efferd.com/logo/gmail.svg\",\n\t},\n\t{\n\t\tname: \"Google Maps\",\n\t\tsrc: \"https://storage.efferd.com/logo/google-maps.svg\",\n\t},\n\t{\n\t\tname: \"Neon\",\n\t\tsrc: \"https://storage.efferd.com/logo/neon.svg\",\n\t},\n\t{\n\t\tname: \"Empty 2\",\n\t},\n];\n\nexport function Integrations() {\n\treturn (\n\t\t<div className=\"flex flex-col items-center justify-center gap-6 py-24\">\n\t\t\t<div className=\"max-w-xl space-y-2 px-4 text-center\">\n\t\t\t\t<h2 className=\"font-semibold text-4xl tracking-tight\">\n\t\t\t\t\tAll types of integration\n\t\t\t\t</h2>\n\t\t\t\t<p className=\"text-base text-muted-foreground md:text-lg\">\n\t\t\t\t\tConnect your favourite apps and services easily\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"flex flex-col justify-center rounded-full border bg-secondary dark:bg-secondary/10\">\n\t\t\t\t<div className=\"mask-l-from-90 mask-r-from-90 flex items-center justify-center -space-x-4 p-1\">\n\t\t\t\t\t{data.map((item) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"relative z-0 transition-transform\",\n\t\t\t\t\t\t\t\titem.src ? \"hover:z-10 hover:scale-110\" : \"\"\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tkey={item.name}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"flex size-12 items-center justify-center overflow-hidden rounded-full border bg-card shadow-sm md:size-16\">\n\t\t\t\t\t\t\t\t{item.src && (\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\talt={item.name}\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\"pointer-events-auto size-5 select-none object-contain md:size-6\",\n\t\t\t\t\t\t\t\t\t\t\titem.isInvertable && \"dark:invert\"\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\theight=\"auto\"\n\t\t\t\t\t\t\t\t\t\tsrc={item.src}\n\t\t\t\t\t\t\t\t\t\twidth=\"auto\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<Button className=\"rounded-full px-5!\">\n\t\t\t\tSee all integration{\" \"}\n\t\t\t\t<IconPlaceholder\n\t\t\t\t\tdata-icon=\"inline-end\"\n\t\t\t\t\thugeicons=\"ArrowUpRight01Icon\"\n\t\t\t\t\tlucide=\"ArrowUpRightIcon\"\n\t\t\t\t\tphosphor=\"ArrowUpRightIcon\"\n\t\t\t\t\tremixicon=\"RiArrowRightUpLine\"\n\t\t\t\t\ttabler=\"IconArrowUpRight\"\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"}]}