{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-integrations-1","type":"registry:block","title":"Integrations 1","description":"Tailark Veil integrations variant 1 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":"90/36","width":686,"height":274},"files":[{"path":"veil/blocks/integrations/one.tsx","type":"registry:component","target":"@components/integrations-1.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 { Logo } 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 px-6\">\n                <IntegrationsIllustration />\n                <div className=\"mx-auto mt-12 max-w-md text-balance 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 mx-auto flex h-44 max-w-lg flex-col justify-between\"\n        >\n            <div className=\"@lg:px-6 relative flex h-10 items-center justify-between gap-12\">\n                <div className=\"bg-border absolute inset-0 my-auto h-px\"></div>\n\n                <div className=\"bg-card shadow-black/6.5 ring-border relative flex h-8 items-center rounded-full px-3 shadow-sm ring\">\n                    <Vercel className=\"size-3.5\" />\n                </div>\n                <div className=\"bg-card shadow-black/6.5 ring-border relative flex h-8 items-center rounded-full px-3 shadow-sm ring\">\n                    <Slack className=\"size-3.5\" />\n                </div>\n            </div>\n            <div className=\"@lg:px-24 relative flex h-10 items-center justify-between px-12\">\n                <div className=\"bg-border absolute inset-0 my-auto h-px\"></div>\n                <div className=\"bg-linear-to-r mask-l-from-15% mask-l-to-40% mask-r-from-75% mask-r-to-75% from-primary absolute inset-0 my-auto h-px w-1/2 via-amber-500 to-pink-400\"></div>\n                <div className=\"bg-linear-to-r mask-r-from-15% mask-r-to-40% mask-l-from-75% mask-l-to-75% absolute inset-0 my-auto ml-auto h-px w-1/2 from-indigo-500 via-emerald-500 to-blue-400\"></div>\n\n                <div className=\"bg-card shadow-black/6.5 ring-border relative flex h-8 items-center rounded-full px-3 shadow-sm ring\">\n                    <Clerk className=\"size-3.5\" />\n                </div>\n                <div className=\"border-foreground/15 rounded-full border border-dashed p-2\">\n                    <div className=\"bg-card shadow-black/6.5 ring-border relative flex h-8 items-center rounded-full px-3 shadow-sm ring\">\n                        <Logo className=\"h-4\" />\n                    </div>\n                </div>\n                <div className=\"bg-card shadow-black/6.5 ring-border relative flex h-8 items-center rounded-full px-3 shadow-sm ring\">\n                    <Linear className=\"size-3.5\" />\n                </div>\n            </div>\n            <div className=\"@lg:px-6 relative flex h-10 items-center justify-between gap-12\">\n                <div className=\"bg-border absolute inset-0 my-auto h-px\"></div>\n\n                <div className=\"bg-card shadow-black/6.5 ring-border relative flex h-8 items-center rounded-full px-3 shadow-sm ring\">\n                    <Supabase className=\"size-3.5\" />\n                </div>\n                <div className=\"bg-card shadow-black/6.5 ring-border relative flex h-8 items-center rounded-full px-3 shadow-sm ring\">\n                    <Firebase className=\"size-3.5\" />\n                </div>\n            </div>\n        </div>\n    )\n}\n"}]}