{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-features-3","type":"registry:block","title":"Features 3","description":"Tailark Veil features variant 3 block","registryDependencies":["@tailark-oss/veil-button","@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/38","width":686,"height":290},"files":[{"path":"veil/blocks/features/three.tsx","type":"registry:component","target":"@components/features-3.tsx","content":"'use client'\nimport { useState } from 'react'\n\nimport { Cloud, Cpu, Shield, 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 { Button } from '@/components/ui/button'\nimport Link from 'next/link'\nimport { cn } from '@/lib/utils'\n\ntype Feature = 'seamless-integrations' | 'real-time-sync' | 'developer-first' | 'enterprise-ready'\n\nexport default function Features() {\n    const [feature, setFeature] = useState('seamless-integrations')\n    return (\n        <section className=\"bg-background @container py-24\">\n            <div className=\"@2xl:grid-cols-2 mx-auto grid max-w-3xl gap-6 px-6\">\n                <div>\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 mb-6 mt-4 text-balance\">Everything you need to build, connect, and scale your integrations effortlessly.</p>\n                        <Button\n                            variant=\"secondary\"\n                            size=\"sm\"\n                            asChild\n                            className=\"gap-1 pr-1.5\"\n                        >\n                            <Link href=\"#\">\n                                Get started\n                                <ChevronRight />\n                            </Link>\n                        </Button>\n                    </div>\n                    <div className=\"mt-16 *:w-full *:cursor-pointer\">\n                        <button\n                            onClick={() => setFeature('seamless-integrations')}\n                            data-selected={feature === 'seamless-integrations'}\n                            className=\"not-data-[selected=true]:hover:text-foreground not-data-[selected=true]:text-muted-foreground flex items-center gap-3 py-2 text-sm\"\n                        >\n                            <div className=\"flex size-4 items-center -space-x-2\">\n                                <div className=\"size-3 shrink-0 rounded-full border border-current\" />\n                                <div className=\"size-3 shrink-0 rounded-full border border-current\" />\n                            </div>\n                            <span className=\"in-data-[selected=true]:text-shadow-[0.2px_0_0_currentColor]\">Seamless Integrations</span>\n                        </button>\n                        <button\n                            onClick={() => setFeature('real-time-sync')}\n                            data-selected={feature === 'real-time-sync'}\n                            className=\"not-data-[selected=true]:hover:text-foreground not-data-[selected=true]:text-muted-foreground flex items-center gap-3 py-2 text-sm\"\n                        >\n                            <Cloud className=\"size-4\" />\n                            <span className=\"in-data-[selected=true]:text-shadow-[0.2px_0_0_currentColor]\">Real-time Sync</span>\n                        </button>\n                        <button\n                            onClick={() => setFeature('developer-first')}\n                            data-selected={feature === 'developer-first'}\n                            className=\"not-data-[selected=true]:hover:text-foreground not-data-[selected=true]:text-muted-foreground flex items-center gap-3 py-2 text-sm\"\n                        >\n                            <Cpu className=\"size-4\" />\n                            <span className=\"in-data-[selected=true]:text-shadow-[0.2px_0_0_currentColor]\">Developer-first</span>\n                        </button>\n                        <button\n                            onClick={() => setFeature('enterprise-ready')}\n                            data-selected={feature === 'enterprise-ready'}\n                            className=\"not-data-[selected=true]:hover:text-foreground not-data-[selected=true]:text-muted-foreground flex items-center gap-3 py-2 text-sm\"\n                        >\n                            <Shield className=\"size-4\" />\n                            <span className=\"in-data-[selected=true]:text-shadow-[0.2px_0_0_currentColor]\">Enterprise-ready</span>\n                        </button>\n                    </div>\n                </div>\n                <div className=\"@max-xl:-mx-6 not-dark:bg-linear-to-b not-dark:via-muted relative flex items-center overflow-hidden rounded-3xl *:w-full\">\n                    <div\n                        aria-hidden\n                        className={cn('*:bg-linear-to-r not-dark:opacity-50 mask-y-from-65% *:to-muted dark:*:to-foreground/2 absolute inset-0 grid grid-cols-4 duration-300', feature === 'seamless-integrations' && '*:bg-linear-to-t grid-cols-1 grid-rows-12', feature === 'developer-first' && '*:bg-linear-to-l grid-cols-2 dark:opacity-50', feature === 'real-time-sync' && '*:opacity-35')}\n                    >\n                        <div />\n                        <div />\n                        <div />\n                        <div />\n                    </div>\n                    {feature === 'seamless-integrations' && <IntegrationsIllustration />}\n                    {feature === 'real-time-sync' && <RealTimeIllustration />}\n                    {feature === 'developer-first' && <DeveloperIllustration />}\n                    {feature === 'enterprise-ready' && <EnterpriseIllustration />}\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst IntegrationsIllustration = () => {\n    return (\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    )\n}\n\nconst RealTimeIllustration = () => {\n    return (\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    )\n}\n\nconst EnterpriseIllustration = () => {\n    return (\n        <div\n            aria-hidden\n            className=\"relative flex size-44 items-center justify-center\"\n        >\n            <Shield className=\"absolute inset-0 size-full stroke-[0.1px] opacity-15\" />\n            <Shield className=\"fill-card dark:fill-foreground/10 drop-shadow-black/3 stroke-border size-32 stroke-[0.2px] drop-shadow-xl\" />\n        </div>\n    )\n}\n\nconst DeveloperIllustration = () => {\n    return (\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    )\n}\n"}]}