{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-integrations-1","type":"registry:block","title":"Integrations 1","description":"Tailark Dusk integrations variant 1 block","registryDependencies":["@tailark-oss/dusk-button","@tailark-oss/core-gemini","@tailark-oss/core-replit","@tailark-oss/core-magic-ui","@tailark-oss/core-vs-codium","@tailark-oss/core-media-wiki","@tailark-oss/core-google-palm"],"meta":{"aspect-ratio":"60/31","width":686,"height":354},"files":[{"path":"dusk/blocks/integrations/one.tsx","type":"registry:component","target":"@components/integrations-1.tsx","content":"import { Gemini } from '@/components/ui/svgs/gemini'\nimport { Replit } from '@/components/ui/svgs/replit'\nimport { GooglePaLM } from '@/components/ui/svgs/google-palm'\nimport { MagicUI } from '@/components/ui/svgs/magic-ui'\nimport { VSCodium } from '@/components/ui/svgs/vs-codium'\nimport { MediaWiki } from '@/components/ui/svgs/media-wiki'\nimport { Button } from '@/components/ui/button'\nimport Link from 'next/link'\n\nexport default function IntegrationsSection() {\n    return (\n        <section>\n            <div className=\"mx-auto max-w-7xl px-6 py-16 md:py-20\">\n                <div className=\"grid gap-4 md:grid-cols-2 md:gap-6 lg:gap-12\">\n                    <div className=\"flex flex-col justify-between gap-12 pb-6 max-lg:order-last md:mt-6\">\n                        <div>\n                            <h2 className=\"text-balance text-4xl font-medium tracking-tight lg:text-5xl\">Integrate with your favorite Tools</h2>\n                            <p className=\"text-muted-foreground mb-6 mt-4 text-balance text-lg\">Connect seamlessly with popular platforms and services to enhance your workflow.</p>\n                            <Button\n                                variant=\"outline\"\n                                asChild\n                            >\n                                <Link href=\"#\">Get Started</Link>\n                            </Button>\n                        </div>\n\n                        <p className=\"text-muted-foreground max-w-xs text-balance text-lg\">\n                            Tailark CRM integrates with <span className=\"text-foreground font-medium\">over 150 Tools</span> to enhance your workflow.\n                        </p>\n                    </div>\n\n                    <div className=\"mask-radial-at-top-left mask-radial-from-65% mask-radial-[100%_80%] -mx-6 px-6 sm:mx-auto sm:max-w-md md:-mx-6 md:ml-auto md:mr-0\">\n                        <div className=\"bg-card rounded-2xl border p-3 shadow-lg md:pb-12\">\n                            <div className=\"grid grid-cols-2 gap-2\">\n                                <Integration\n                                    icon={<Gemini />}\n                                    name=\"Gemini\"\n                                    description=\"The AI model that powers Google's search engine.\"\n                                />\n                                <Integration\n                                    icon={<Replit />}\n                                    name=\"Replit\"\n                                    description=\"The AI model that powers Google's search engine.\"\n                                />\n                                <Integration\n                                    icon={<GooglePaLM />}\n                                    name=\"GooglePaLM\"\n                                    description=\"The AI model that powers Google's search engine.\"\n                                />\n                                <Integration\n                                    icon={<MagicUI />}\n                                    name=\"MagicUI\"\n                                    description=\"The AI model that powers Google's search engine.\"\n                                />\n                                <Integration\n                                    icon={<VSCodium />}\n                                    name=\"VSCodium\"\n                                    description=\"The AI model that powers Google's search engine.\"\n                                />\n                                <Integration\n                                    icon={<MediaWiki />}\n                                    name=\"MediaWiki\"\n                                    description=\"The AI model that powers Google's search engine.\"\n                                />\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst Integration = ({ icon, name, description }: { icon: React.ReactNode; name: string; description: string }) => {\n    return (\n        <div className=\"hover:bg-foreground/5 cursor-pointer space-y-4 rounded-lg border p-4 transition-colors\">\n            <div className=\"flex size-fit items-center justify-center\">{icon}</div>\n            <div className=\"space-y-1\">\n                <h3 className=\"text-sm font-medium\">{name}</h3>\n                <p className=\"text-muted-foreground line-clamp-1 text-sm md:line-clamp-2\">{description}</p>\n            </div>\n        </div>\n    )\n}\n"}]}