{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-features-4","type":"registry:block","title":"Features 4","description":"Tailark Dusk features variant 4 block","registryDependencies":["@tailark-oss/dusk-card"],"meta":{"aspect-ratio":"32/21","width":686,"height":450},"files":[{"path":"dusk/blocks/features/four.tsx","type":"registry:component","target":"@components/features-4.tsx","content":"import { Card } from '@/components/ui/card'\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\">Handoffs without reset.</span> <br /> Trust and context carry forward.\n                </h2>\n                <div className=\"mt-8 grid gap-6 md:mt-16 md:grid-cols-2 md:gap-3 lg:grid-cols-3\">\n                    <div className=\"lg:col-span-2\">\n                        <Card className=\"aspect-3/2 after:border-foreground/5 relative overflow-hidden ring-0 after:pointer-events-none after:absolute after:inset-0 after:rounded-xl after:border\">\n                            <div className=\"relative z-10 max-w-md p-8\">\n                                <p className=\"text-foreground/75 text-balance text-lg\">\n                                    <span className=\"text-foreground font-medium\">Seamless handoffs. </span> Ownership changes without resetting the relationship.\n                                </p>\n                            </div>\n\n                            <Image\n                                src=\"https://images.unsplash.com/photo-1630893795974-f4e2fa294391?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                alt=\"hand with an apple watch\"\n                                width={800}\n                                height={800}\n                                className=\"absolute inset-0 size-full object-cover object-[50%_85%] opacity-50\"\n                            />\n                        </Card>\n                    </div>\n\n                    <Card className=\"relative h-full min-h-96 overflow-hidden bg-zinc-100\">\n                        <div className=\"relative z-10 max-w-sm p-8\">\n                            <p className=\"text-balance text-lg text-zinc-950/75 selection:bg-zinc-950 selection:text-white\">\n                                <span className=\"font-medium text-zinc-950\">Proactive alerts. </span> Surface renewals and quiet accounts before they slip.\n                            </p>\n                        </div>\n                        <DynamicIslandIllustration />\n                    </Card>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nfunction DynamicIslandIllustration() {\n    return (\n        <div\n            aria-hidden\n            className=\"z-1 bg-black/2.5 mask-b-from-90% 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=\"shadow-black/6.5 h-full overflow-hidden rounded-t-[3rem] bg-white p-3 shadow-xl 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"}]}