{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-integrations-3","type":"registry:block","title":"Integrations 3","description":"Tailark Mist integrations variant 3 block","registryDependencies":["@tailark-oss/mist-card","@tailark-oss/core-gemini","@tailark-oss/core-google-palm","@tailark-oss/core-magic-ui","@tailark-oss/core-media-wiki","@tailark-oss/core-replit","@tailark-oss/core-vs-codium"],"meta":{"aspect-ratio":"90/50","width":686,"height":381},"files":[{"path":"mist/blocks/integrations/three.tsx","type":"registry:component","target":"@components/integrations-3.tsx","content":"import * as React from 'react'\nimport { Card } from '@/components/ui/card'\nimport { Gemini } from '@/components/ui/svgs/gemini'\nimport { Replit } from '@/components/ui/svgs/replit'\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 { GooglePaLM } from '@/components/ui/svgs/google-palm'\n\nexport default function Integrations() {\n    return (\n        <section>\n            <div className=\"py-32\">\n                <div className=\"mx-auto max-w-5xl px-6\">\n                    <div>\n                        <h2 className=\"text-balance text-3xl font-semibold md:text-4xl\">Integrate with your favorite tools</h2>\n                        <p className=\"text-muted-foreground mt-3 text-lg\">Connect seamlessly with popular platforms and services to enhance your workflow.</p>\n                    </div>\n\n                    <div className=\"mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n                        <IntegrationCard\n                            title=\"Google Gemini\"\n                            description=\"Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente.\"\n                        >\n                            <Gemini />\n                        </IntegrationCard>\n\n                        <IntegrationCard\n                            title=\"Replit\"\n                            description=\"Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente.\"\n                        >\n                            <Replit />\n                        </IntegrationCard>\n\n                        <IntegrationCard\n                            title=\"Magic UI\"\n                            description=\"Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente.\"\n                        >\n                            <MagicUI />\n                        </IntegrationCard>\n\n                        <IntegrationCard\n                            title=\"VSCodium\"\n                            description=\"Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente.\"\n                        >\n                            <VSCodium />\n                        </IntegrationCard>\n\n                        <IntegrationCard\n                            title=\"MediaWiki\"\n                            description=\"Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente.\"\n                        >\n                            <MediaWiki />\n                        </IntegrationCard>\n\n                        <IntegrationCard\n                            title=\"Google PaLM\"\n                            description=\"Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente.\"\n                        >\n                            <GooglePaLM />\n                        </IntegrationCard>\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst IntegrationCard = ({ title, description, children }: { title: string; description: string; children: React.ReactNode }) => {\n    return (\n        <Card\n            variant=\"soft\"\n            className=\"p-6\"\n        >\n            <div className=\"relative\">\n                <div className=\"*:size-10\">{children}</div>\n\n                <div className=\"mt-6 space-y-1.5\">\n                    <h3 className=\"text-lg font-semibold\">{title}</h3>\n                    <p className=\"text-muted-foreground line-clamp-2\">{description}</p>\n                </div>\n            </div>\n        </Card>\n    )\n}\n"}]}