{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-features-2","type":"registry:block","title":"Features 2","description":"Tailark Veil features variant 2 block","registryDependencies":["@tailark-oss/veil-card","@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/60","width":686,"height":457},"files":[{"path":"veil/blocks/features/two.tsx","type":"registry:component","target":"@components/features-2.tsx","content":"import { Card } from '@/components/ui/card'\nimport { Shield } 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'\n\nexport default function Features() {\n    return (\n        <section className=\"bg-background @container py-24\">\n            <div className=\"mx-auto max-w-2xl px-6\">\n                <div>\n                    <h2 className=\"text-balance font-serif text-4xl font-medium\">Powerful Features for Modern Teams</h2>\n                    <p className=\"text-muted-foreground mt-4 text-balance\">Everything you need to build, connect, and scale your integrations effortlessly.</p>\n                </div>\n                <div className=\"@xl:grid-cols-2 mt-12 grid gap-3 *:p-6\">\n                    <Card\n                        variant=\"mixed\"\n                        className=\"row-span-2 grid grid-rows-subgrid\"\n                    >\n                        <div className=\"space-y-2\">\n                            <h3 className=\"text-foreground font-medium\">Seamless Integrations</h3>\n                            <p className=\"text-muted-foreground text-sm\">Connect your favorite tools and services with just a few clicks.</p>\n                        </div>\n                        <div\n                            aria-hidden\n                            className=\"**:fill-foreground flex h-44 flex-col justify-between pt-8\"\n                        >\n                            <div className=\"relative flex h-10 items-center gap-12 px-6\">\n                                <div className=\"bg-border absolute inset-0 my-auto h-px\" />\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=\"pl-17 relative flex h-10 items-center justify-between gap-12 pr-6\">\n                                <div className=\"bg-border absolute inset-0 my-auto h-px\" />\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=\"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=\"relative flex h-10 items-center gap-20 px-8\">\n                                <div className=\"bg-border absolute inset-0 my-auto h-px\" />\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                    </Card>\n                    <Card\n                        variant=\"mixed\"\n                        className=\"row-span-2 grid grid-rows-subgrid overflow-hidden\"\n                    >\n                        <div className=\"space-y-2\">\n                            <h3 className=\"text-foreground font-medium\">Real-time Sync</h3>\n                            <p className=\"text-muted-foreground text-sm\">Keep your data synchronized across all platforms automatically.</p>\n                        </div>\n                        <div\n                            aria-hidden\n                            className=\"relative h-44 translate-y-6\"\n                        >\n                            <div className=\"bg-foreground/15 absolute inset-0 mx-auto w-px\" />\n                            <div className=\"absolute -inset-x-16 top-6 aspect-square rounded-full border\" />\n                            <div className=\"border-primary mask-l-from-50% mask-l-to-90% mask-r-from-50% mask-r-to-50% absolute -inset-x-16 top-6 aspect-square rounded-full border\"></div>\n                            <div className=\"absolute -inset-x-8 top-24 aspect-square rounded-full border\" />\n                            <div className=\"mask-r-from-50% mask-r-to-90% mask-l-from-50% mask-l-to-50% absolute -inset-x-8 top-24 aspect-square rounded-full border border-lime-500\"></div>\n                        </div>\n                    </Card>\n                    <Card\n                        variant=\"mixed\"\n                        className=\"row-span-2 grid grid-rows-subgrid overflow-hidden\"\n                    >\n                        <div className=\"space-y-2\">\n                            <h3 className=\"text-foreground font-medium\">Developer First</h3>\n                            <p className=\"text-muted-foreground mt-2 text-sm\">Built with developers in mind, featuring comprehensive APIs and SDKs.</p>\n                        </div>\n                        <div\n                            aria-hidden\n                            className=\"*:bg-foreground/15 flex h-44 justify-between pb-6 pt-12 *:h-full *:w-px\"\n                        >\n                            <div />\n                            <div />\n                            <div />\n                            <div />\n                            <div className=\"bg-primary!\" />\n                            <div />\n                            <div />\n                            <div />\n                            <div />\n                            <div className=\"bg-primary!\" />\n                            <div />\n                            <div />\n                            <div />\n                            <div className=\"bg-primary!\" />\n                            <div />\n                            <div />\n                            <div />\n                            <div />\n                            <div className=\"bg-primary!\" />\n                            <div />\n                            <div />\n                            <div />\n                            <div />\n                            <div className=\"bg-primary!\" />\n                            <div />\n                            <div />\n                            <div />\n                            <div />\n                            <div />\n                            <div />\n                            <div />\n                            <div className=\"bg-primary!\" />\n                        </div>\n                    </Card>\n                    <Card\n                        variant=\"mixed\"\n                        className=\"row-span-2 grid grid-rows-subgrid\"\n                    >\n                        <div className=\"space-y-2\">\n                            <h3 className=\"font-medium\">Enterprise Ready</h3>\n                            <p className=\"text-muted-foreground text-sm\">Scale confidently with enterprise-grade security and reliability.</p>\n                        </div>\n\n                        <div className=\"pointer-events-none relative -ml-7 flex size-44 items-center justify-center pt-5\">\n                            <Shield className=\"absolute inset-0 top-2.5 size-full stroke-[0.1px] opacity-15\" />\n                            <Shield className=\"size-32 stroke-[0.1px]\" />\n                        </div>\n                    </Card>\n                </div>\n            </div>\n        </section>\n    )\n}\n"}]}