{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-integrations-2","type":"registry:block","title":"Integrations 2","description":"Tailark Veil integrations variant 2 block","registryDependencies":["@tailark-oss/veil-button","@tailark-oss/veil-logo","@tailark-oss/core-clerk","@tailark-oss/core-firebase","@tailark-oss/core-linear","@tailark-oss/core-slack","@tailark-oss/core-supabase","@tailark-oss/core-vercel"],"meta":{"aspect-ratio":"72/41","width":686,"height":391},"files":[{"path":"veil/blocks/integrations/two.tsx","type":"registry:component","target":"@components/integrations-2.tsx","content":"import { ChevronRight } from 'lucide-react'\nimport { Vercel } from '@/components/ui/svgs/vercel'\nimport { Supabase } from '@/components/ui/svgs/supabase'\nimport { Linear } from '@/components/ui/svgs/linear'\nimport { Slack } from '@/components/ui/svgs/slack'\nimport { Firebase } from '@/components/ui/svgs/firebase'\nimport { ClerkIconDark as Clerk } from '@/components/ui/svgs/clerk'\nimport { LogoIcon } from '@/components/logo'\n\nimport { Button } from '@/components/ui/button'\nimport Link from 'next/link'\n\nexport default function Integrations() {\n    return (\n        <section className=\"bg-background @container py-24\">\n            <div className=\"mx-auto max-w-2xl\">\n                <IntegrationsIllustration />\n                <div className=\"mx-auto mt-12 max-w-md text-balance px-6 text-center\">\n                    <h2 className=\"font-serif text-4xl font-medium\">Connect Your Favorite Tools</h2>\n                    <p className=\"text-muted-foreground mb-6 mt-4\">Seamlessly integrate with the services you already use. Set up in minutes, not days.</p>\n                    <Button\n                        variant=\"secondary\"\n                        size=\"sm\"\n                        asChild\n                        className=\"gap-1 pr-1.5\"\n                    >\n                        <Link href=\"#\">\n                            Learn more\n                            <ChevronRight />\n                        </Link>\n                    </Button>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst IntegrationsIllustration = () => {\n    return (\n        <div\n            aria-hidden\n            className=\"**:fill-foreground @max-md:scale-85 relative mx-auto flex size-96\"\n        >\n            <div className=\"bg-card shadow-black/6.5 ring-border absolute inset-0 m-auto flex size-12 items-center rounded-full shadow-sm ring *:m-auto\">\n                <LogoIcon className=\"size-5\" />\n            </div>\n            <div className=\"rotate-120 *:-rotate-120 absolute inset-0 flex items-center justify-between gap-12\">\n                <div className=\"border-foreground/10 absolute inset-4 rounded-full border border-dashed\" />\n\n                <div className=\"bg-muted relative flex size-9 items-center rounded-full border backdrop-blur *:m-auto\">\n                    <Firebase className=\"size-3.5\" />\n                </div>\n                <div className=\"bg-card shadow-black/6.5 ring-border relative flex size-9 items-center rounded-full shadow-sm ring *:m-auto\">\n                    <Supabase className=\"size-3.5\" />\n                </div>\n            </div>\n            <div className=\"absolute inset-12 flex items-center justify-between gap-12\">\n                <div className=\"border-foreground/10 absolute inset-4 rounded-full border border-dashed\" />\n\n                <div className=\"bg-muted relative flex size-9 items-center rounded-full border backdrop-blur *:m-auto\">\n                    <Vercel className=\"size-3.5\" />\n                </div>\n                <div className=\"bg-card shadow-black/6.5 ring-border relative flex size-9 items-center rounded-full shadow-sm ring *:m-auto\">\n                    <Slack className=\"size-3.5\" />\n                </div>\n            </div>\n            <div className=\"absolute inset-24 flex rotate-45 items-center justify-between gap-12 *:-rotate-45\">\n                <div className=\"border-foreground/10 absolute inset-4 rounded-full border border-dashed\" />\n\n                <div className=\"bg-card shadow-black/6.5 ring-border relative flex size-9 items-center rounded-full shadow-sm ring *:m-auto\">\n                    <Clerk className=\"size-3.5\" />\n                </div>\n                <div className=\"bg-muted relative flex size-9 items-center rounded-full border backdrop-blur *:m-auto\">\n                    <Linear className=\"size-3.5\" />\n                </div>\n            </div>\n        </div>\n    )\n}\n"}]}