{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-features-3","type":"registry:block","title":"Features 3","description":"Tailark Dusk features variant 3 block","registryDependencies":["@tailark-oss/dusk-card","@tailark-oss/dusk-button"],"meta":{"aspect-ratio":"90/63","width":686,"height":480},"files":[{"path":"dusk/blocks/features/three.tsx","type":"registry:component","target":"@components/features-3.tsx","content":"import { Card } from '@/components/ui/card'\nimport { Button } from '@/components/ui/button'\nimport { ArrowUp, ChevronDown, CloudDownload, HardDriveDownload, Mic2, MonitorDown, Plus } from 'lucide-react'\nimport Image from 'next/image'\n\nexport default function Features() {\n    return (\n        <section className=\"py-16 md:py-20\">\n            <div className=\"mx-auto max-w-7xl px-6\">\n                <h2 className=\"text-muted-foreground max-w-4xl text-balance text-4xl font-medium tracking-tight\">\n                    <span className=\"text-foreground\">Context before every reply.</span> <br /> Grounded in real account history.\n                </h2>\n                <div className=\"**:data-[slot=card]:bg-background mt-8 grid gap-x-3 gap-y-6 md:mt-16 md:grid-cols-2 lg:grid-cols-3\">\n                    <div className=\"row-span-2 grid grid-cols-subgrid gap-4\">\n                        <Card className=\"aspect-9/12 relative overflow-hidden\">\n                            <AIInputIllustration />\n                            <Image\n                                src=\"https://images.unsplash.com/photo-1656012710277-e103fe942e30?q=80&w=2342&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                alt=\"abstract background\"\n                                width={670}\n                                height={670}\n                                className=\"absolute inset-0 size-full object-cover\"\n                            />\n                        </Card>\n\n                        <p className=\"text-muted-foreground text-balance\">\n                            <span className=\"text-foreground\">Seamless handoffs. </span> Ownership changes without resetting the relationship.\n                        </p>\n                    </div>\n\n                    <div className=\"row-span-2 grid grid-cols-subgrid gap-4\">\n                        <Card className=\"aspect-9/12 bg-zinc-200! relative overflow-hidden\">\n                            <DynamicIslandIllustration />\n                        </Card>\n\n                        <p className=\"text-muted-foreground text-balance\">\n                            <span className=\"text-foreground\">Proactive alerts. </span> Surface renewals and quiet accounts before they slip.\n                        </p>\n                    </div>\n\n                    <div className=\"row-span-2 grid grid-cols-subgrid gap-4\">\n                        <Card className=\"aspect-9/12 relative overflow-hidden\">\n                            <DownloadIllustration />\n\n                            <video\n                                autoPlay\n                                loop\n                                preload=\"none\"\n                                src=\"https://videos.pexels.com/video-files/37957431/16106725_1440_2560_24fps.mp4\"\n                                className=\"absolute inset-0 size-full object-cover\"\n                                width=\"2700\"\n                                height=\"1440\"\n                            />\n                        </Card>\n\n                        <p className=\"text-muted-foreground text-balance\">\n                            <span className=\"text-foreground\">Shared timeline. </span> Sales, success, and support work from one account view.\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nfunction DownloadIllustration() {\n    return (\n        <div className=\"z-1 absolute inset-0 m-auto size-fit scale-95\">\n            <Button\n                variant=\"secondary\"\n                asChild\n                className=\"bg-background/25 inset-ring inset-ring-foreground/25 ml-1 backdrop-blur\"\n                size=\"sm\"\n            >\n                <div>\n                    <HardDriveDownload className=\"opacity-75\" />\n                    <span className=\"border-r pr-2\">Download</span>\n                    <ChevronDown className=\"opacity-50\" />\n                </div>\n            </Button>\n\n            <div className=\"mt-3 min-w-52 rounded-2xl bg-white p-1 shadow-xl shadow-black/25 ring ring-black/10 *:cursor-pointer\">\n                <div className=\"peer flex gap-2 rounded-xl px-3 py-1.5 hover:bg-black/5\">\n                    <MonitorDown className=\"size-4 translate-y-0.5 text-black\" />\n                    <div className=\"space-y-0.5\">\n                        <div className=\"text-xs font-medium text-black\">Computer</div>\n                        <div className=\"text-xs text-black/50\">16.1MB left</div>\n                    </div>\n                </div>\n\n                <div className=\"not-peer-hover:bg-black/5 flex gap-2 rounded-xl px-3 py-1.5\">\n                    <CloudDownload className=\"size-4 translate-y-0.5 text-black\" />\n                    <div className=\"space-y-0.5\">\n                        <div className=\"text-xs font-medium text-black\">Cloud</div>\n                        <div className=\"text-xs text-black/50\">Unlimited</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    )\n}\n\nfunction AIInputIllustration() {\n    return (\n        <div\n            aria-hidden\n            className=\"z-1 absolute inset-8 m-auto h-fit scale-95\"\n        >\n            <div className=\"bg-card ring-foreground/15 mt-auto h-fit rounded-3xl p-3 shadow-xl shadow-black/25 ring\">\n                <div className=\"text-muted-foreground p-2 pb-3 text-sm\">Ask Tailark what you need...</div>\n                <div className=\"flex justify-between gap-3\">\n                    <div className=\"flex items-center gap-1\">\n                        <div className=\"hover:bg-muted flex size-7 cursor-pointer rounded-full *:m-auto *:size-4\">\n                            <Plus />\n                        </div>\n                        <div className=\"hover:bg-muted flex size-7 cursor-pointer rounded-full *:m-auto *:size-4\">\n                            <Mic2 />\n                        </div>\n                    </div>\n\n                    <div className=\"bg-foreground text-background flex size-7 cursor-pointer rounded-full *:m-auto *:size-4 hover:brightness-110\">\n                        <ArrowUp />\n                    </div>\n                </div>\n            </div>\n        </div>\n    )\n}\n\nfunction DynamicIslandIllustration() {\n    return (\n        <div\n            aria-hidden\n            className=\"z-1 bg-black/2.5 absolute inset-x-8 bottom-0 mx-auto mt-auto h-2/3 w-10/12 origin-bottom scale-95 rounded-t-[4rem] border border-black/5 px-4 pt-4\"\n        >\n            <div className=\"h-full overflow-hidden rounded-t-[3rem] bg-white p-3 shadow-lg shadow-black/15 ring ring-black/10\">\n                <div className=\"relative\">\n                    <Image\n                        src=\"https://images.unsplash.com/photo-1782366951390-d6798e902db7?q=80&w=1015&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                        alt=\"Théo Balick\"\n                        width={500}\n                        height={500}\n                        className=\"absolute inset-0 top-0 size-full object-cover opacity-45 blur-xl contrast-200\"\n                    />\n                    <div className=\"shadow-black/6.5 relative rounded-[2.25rem] bg-white p-2 shadow-xl ring ring-black/10\">\n                        <div className=\"flex gap-2\">\n                            <div className=\"size-18 relative overflow-hidden rounded-[1.75rem] shadow-md before:absolute before:inset-0 before:rounded-[1.75rem] before:border before:border-black/20\">\n                                <Image\n                                    src=\"https://images.unsplash.com/photo-1782366951390-d6798e902db7?q=80&w=1015&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                    alt=\"Théo Balick\"\n                                    width={136}\n                                    height={136}\n                                />\n                            </div>\n                            <div className=\"py-1 pr-4\">\n                                <div className=\"text-sm font-medium text-black\">Théo Balick</div>\n                                <div className=\"mt-1.5 flex items-center gap-3\">\n                                    <div>\n                                        <div className=\"text-xs text-black/50\">Expenses</div>\n                                        <div className=\"mt-0.5 text-sm font-semibold text-black\">$32.65k</div>\n                                    </div>\n                                    <div className=\"bg-border h-7 w-px\" />\n                                    <div>\n                                        <div className=\"text-xs text-black/50\">Income</div>\n                                        <div className=\"mt-0.5 text-sm font-semibold text-black\">$2.65k</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    )\n}\n"}]}