{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-features-5","type":"registry:block","title":"Features 5","description":"Tailark Dusk features variant 5 block","registryDependencies":["@tailark-oss/dusk-button"],"meta":{"aspect-ratio":"90/83","width":686,"height":633,"category-media":true},"files":[{"path":"dusk/blocks/features/five.tsx","type":"registry:component","target":"@components/features-5.tsx","content":"'use client'\n\nimport { Activity, ArrowRightLeft, ArrowUp, Bell, Calendar, ChevronDown, Clock, CloudDownload, HardDriveDownload, History, Link2, ListChecks, Mail, Mic2, MonitorDown, Plug, Plus, Users, Zap, type LucideIcon } from 'lucide-react'\nimport Image from 'next/image'\nimport { useEffect, useRef, useState } from 'react'\nimport { Button } from '@/components/ui/button'\n\nconst features = [\n    { id: 'workflow-agents', label: 'Workflow agents' },\n    { id: 'alerts', label: 'Alerts' },\n    { id: 'timeline', label: 'Timeline' },\n    { id: 'integrations', label: 'Integrations' },\n] as const\n\ntype FeatureId = (typeof features)[number]['id']\n\nconst featureHighlights: Record<FeatureId, { icon: LucideIcon; label: string }[]> = {\n    'workflow-agents': [\n        { icon: ArrowRightLeft, label: 'Automated handoff routing' },\n        { icon: ListChecks, label: 'Account playbooks' },\n        { icon: Zap, label: 'Follow-up task agents' },\n    ],\n    alerts: [\n        { icon: Bell, label: 'Renewal reminders' },\n        { icon: Clock, label: 'Stalled deal signals' },\n        { icon: Activity, label: 'Quiet account alerts' },\n    ],\n    timeline: [\n        { icon: History, label: 'Full activity history' },\n        { icon: Users, label: 'Team-visible notes' },\n        { icon: Mail, label: 'Cross-channel threads' },\n    ],\n    integrations: [\n        { icon: Plug, label: 'Gmail and Outlook sync' },\n        { icon: Calendar, label: 'Calendar availability' },\n        { icon: Link2, label: 'Billing and Stripe data' },\n    ],\n}\n\nfunction FeatureList({ items }: { items: { icon: LucideIcon; label: string }[] }) {\n    return (\n        <ul className=\"text-muted-foreground mt-8 divide-y *:flex *:items-center *:gap-3 *:py-3\">\n            {items.map(({ icon: Icon, label }) => (\n                <li key={label}>\n                    <Icon className=\"size-4\" />\n                    {label}\n                </li>\n            ))}\n        </ul>\n    )\n}\n\nexport default function FeaturesSection() {\n    const [activeId, setActiveId] = useState<FeatureId>('workflow-agents')\n    const sectionRefs = useRef<Partial<Record<FeatureId, HTMLDivElement | null>>>({})\n\n    const scrollToFeature = (id: FeatureId) => {\n        sectionRefs.current[id]?.scrollIntoView({ behavior: 'smooth', block: 'start' })\n        setActiveId(id)\n    }\n\n    useEffect(() => {\n        const sections = features.map((feature) => sectionRefs.current[feature.id]).filter((section): section is HTMLDivElement => section != null)\n\n        const observer = new IntersectionObserver(\n            (entries) => {\n                const visible = entries.filter((entry) => entry.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)\n\n                const nextId = visible[0]?.target.id as FeatureId | undefined\n                if (nextId) setActiveId(nextId)\n            },\n            { rootMargin: '-25% 0px -55% 0px', threshold: [0.15, 0.35, 0.55, 0.75] }\n        )\n\n        sections.forEach((section) => observer.observe(section))\n\n        return () => observer.disconnect()\n    }, [])\n\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\">Built for the full workflow.</span> <br /> One connected revenue product.\n                </h2>\n                <div className=\"mt-16 grid gap-6 md:mt-32 lg:grid-cols-[auto_1fr]\">\n                    <div className=\"sticky top-24 h-fit w-56 max-lg:hidden\">\n                        <div className=\"text-muted-foreground text-sm\">Product</div>\n                        <div className=\"-ml-4 mt-4 flex flex-col *:justify-start\">\n                            {features.map((feature) => (\n                                <Button\n                                    key={feature.id}\n                                    type=\"button\"\n                                    variant=\"ghost\"\n                                    data-state={activeId === feature.id ? 'active' : undefined}\n                                    onClick={() => scrollToFeature(feature.id)}\n                                    className=\"not-data-[state=active]:text-muted-foreground hover:bg-transparent\">\n                                    {feature.label}\n                                </Button>\n                            ))}\n                        </div>\n                    </div>\n                    <div className=\"flex flex-col gap-16 md:gap-32\">\n                        <div\n                            ref={(element) => {\n                                sectionRefs.current['workflow-agents'] = element\n                            }}\n                            id=\"workflow-agents\"\n                            className=\"grid scroll-mt-32 gap-6 sm:grid-cols-2 md:grid-cols-5 lg:gap-12\">\n                            <div className=\"flex flex-col justify-between pb-4 md:col-span-2\">\n                                <div className=\"md:pr-6 lg:pr-0\">\n                                    <h3 className=\"text-muted-foreground mb-6 text-sm font-medium\">Workflow agents</h3>\n                                    <p className=\"text-muted-foreground text-balance text-lg font-medium\">\n                                        <span className=\"text-foreground\">Seamless handoffs.</span> Email, chat, and support history stay on the account so nobody works from memory.\n                                    </p>\n                                </div>\n                                <FeatureList items={featureHighlights['workflow-agents']} />\n                            </div>\n                            <div className=\"border-border/50 bg-foreground/2 relative flex aspect-square rounded-3xl border p-3 md:col-span-3\">\n                                <div className=\"bg-linear-to-b aspect-76/59 relative m-auto max-w-sm rounded-2xl from-zinc-300 to-transparent p-px dark:from-zinc-700\">\n                                    <Image\n                                        src=\"/payments.png\"\n                                        className=\"hidden rounded-[15px] dark:block\"\n                                        alt=\"payments illustration dark\"\n                                        width={1207}\n                                        height={929}\n                                    />\n                                </div>\n                            </div>\n                        </div>\n\n                        <div\n                            ref={(element) => {\n                                sectionRefs.current.alerts = element\n                            }}\n                            id=\"alerts\"\n                            className=\"grid scroll-mt-32 gap-6 sm:grid-cols-2 md:grid-cols-5 lg:gap-12\">\n                            <div className=\"flex flex-col justify-between pb-4 md:col-span-2\">\n                                <div className=\"md:pr-6 lg:pr-0\">\n                                    <h3 className=\"text-muted-foreground mb-6 text-sm font-medium\">Alerts</h3>\n                                    <p className=\"text-muted-foreground text-balance text-lg font-medium\">\n                                        <span className=\"text-foreground\">Proactive alerts.</span> Surface renewals, quiet accounts, and stalled deals before they slip past quarter end.\n                                    </p>\n                                </div>\n                                <FeatureList items={featureHighlights.alerts} />\n                            </div>\n                            <div className=\"border-border/50 bg-foreground/2 relative flex aspect-square rounded-3xl border p-3 md:col-span-3\">\n                                <AIInputIllustration />\n                            </div>\n                        </div>\n\n                        <div\n                            ref={(element) => {\n                                sectionRefs.current.timeline = element\n                            }}\n                            id=\"timeline\"\n                            className=\"grid scroll-mt-32 gap-6 sm:grid-cols-2 md:grid-cols-5 lg:gap-12\">\n                            <div className=\"flex flex-col justify-between pb-4 md:col-span-2\">\n                                <div className=\"md:pr-6 lg:pr-0\">\n                                    <h3 className=\"text-muted-foreground mb-6 text-sm font-medium\">Timeline</h3>\n                                    <p className=\"text-muted-foreground text-balance text-lg font-medium\">\n                                        <span className=\"text-foreground\">Shared timeline.</span> Sales, success, and support work from one account view so <span className=\"rounded bg-emerald-500/10 px-1.5 text-emerald-500\">every handoff keeps context</span>.\n                                    </p>\n                                </div>\n                                <FeatureList items={featureHighlights.timeline} />\n                            </div>\n                            <div className=\"border-border/50 bg-foreground/2 relative flex aspect-square rounded-3xl border p-3 md:col-span-3\">\n                                <DynamicIslandIllustration />\n                            </div>\n                        </div>\n\n                        <div\n                            ref={(element) => {\n                                sectionRefs.current.integrations = element\n                            }}\n                            id=\"integrations\"\n                            className=\"grid scroll-mt-32 gap-6 sm:grid-cols-2 md:grid-cols-5 lg:gap-12\">\n                            <div className=\"flex flex-col justify-between pb-4 md:col-span-2\">\n                                <div className=\"md:pr-6 lg:pr-0\">\n                                    <h3 className=\"text-muted-foreground mb-6 text-sm font-medium\">Integrations</h3>\n                                    <p className=\"text-muted-foreground text-balance text-lg font-medium\">\n                                        <span className=\"text-foreground\">Connected stack.</span> Sync email, calendar, and billing tools so customer data stays current across your workflow.\n                                    </p>\n                                </div>\n                                <FeatureList items={featureHighlights.integrations} />\n                            </div>\n                            <div className=\"border-border/50 relative flex aspect-square rounded-3xl border bg-zinc-100 p-3 md:col-span-3\">\n                                <DownloadIllustration />\n                            </div>\n                        </div>\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                <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=\"shadow-black/6.5 ring-black/6.5 mt-3 min-w-52 rounded-2xl bg-white p-1 shadow-xl ring *: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 max-w-sm scale-95\">\n            <div className=\"bg-card ring-foreground/15 mt-auto h-fit rounded-3xl p-3 shadow-xl shadow-black/15 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 mask-b-from-background border-border/50 absolute inset-x-8 bottom-0 mx-auto mt-auto h-2/3 w-10/12 max-w-96 origin-bottom scale-95 rounded-t-[4rem] border px-4 pt-4\">\n            <div className=\"bg-foreground/2 ring-foreground/10 h-full overflow-hidden rounded-t-[3rem] p-3 shadow-lg shadow-black/15 ring\">\n                <div className=\"relative\">\n                    <div className=\"shadow-black/6.5 bg-card ring-foreground/10 relative rounded-[2.25rem] p-2 shadow-xl ring\">\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\">Théo Balick</div>\n                                <div className=\"mt-1.5 flex items-center gap-3\">\n                                    <div>\n                                        <div className=\"text-foreground/50 text-xs\">Expenses</div>\n                                        <div className=\"mt-0.5 text-sm font-semibold\">$32.65k</div>\n                                    </div>\n                                    <div className=\"bg-border h-7 w-px\" />\n                                    <div>\n                                        <div className=\"text-foreground/50 text-xs\">Income</div>\n                                        <div className=\"mt-0.5 text-sm font-semibold\">$2.65k</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    )\n}\n"}]}