{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-features-7","type":"registry:block","title":"Features 7","description":"Tailark Dusk features variant 7 block","dependencies":["dotted-map","recharts"],"registryDependencies":["@tailark-oss/dusk-chart"],"meta":{"aspect-ratio":"90/95","width":686,"height":724},"files":[{"path":"dusk/blocks/features/seven.tsx","type":"registry:component","target":"@components/features-7.tsx","content":"'use client'\nimport DottedMap from 'dotted-map'\nimport { Area, AreaChart, CartesianGrid } from 'recharts'\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'\n\nexport default function FeaturesSection() {\n    return (\n        <section className=\"overflow-hidden px-4 py-16 md:py-20\">\n            <div className=\"mx-auto max-w-7xl px-2 lg:px-6\">\n                <h2 className=\"text-muted-foreground max-w-4xl text-balance text-4xl font-medium tracking-tight\">\n                    <span className=\"text-foreground\">See the whole pipeline.</span> <br /> Activity and health in one view.\n                </h2>\n                <div className=\"mt-8 grid rounded-xl border md:mt-16 md:grid-cols-2\">\n                    <div className=\"row-span-2 grid grid-rows-subgrid gap-6 md:gap-0\">\n                        <div className=\"p-6 sm:p-12\">\n                            <p className=\"text-muted-foreground text-balance text-lg font-medium\">\n                                <span className=\"text-foreground\">Account activity, mapped globally.</span> See where deals are moving and which regions your team should prioritize next.\n                            </p>\n                        </div>\n\n                        <div\n                            aria-hidden\n                            className=\"relative\"\n                        >\n                            <div className=\"absolute inset-0 z-10 m-auto size-fit -translate-y-full\">\n                                <div className=\"rounded-(--radius) text-muted-foreground z-1 ring-foreground/6.5 shadow-black/6.5 relative flex size-fit w-fit items-center gap-2 bg-zinc-900/75 px-3 py-1 text-xs font-medium shadow-lg ring backdrop-blur\">\n                                    <span className=\"text-lg\">🇨🇩</span> Last connection from <span className=\"text-foreground\">DR Congo</span>\n                                </div>\n                                <div className=\"rounded-(--radius) bg-background ring-foreground/6.5 absolute inset-2 -bottom-2 mx-auto px-3 py-4 text-xs font-medium shadow-md shadow-black/5 ring\"></div>\n                            </div>\n\n                            <div className=\"mask-radial-at-center mask-radial-from-25% mask-radial-[50%_50%] relative overflow-hidden opacity-25\">\n                                <Map />\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"row-span-2 grid grid-rows-subgrid gap-6 overflow-hidden border-t p-6 sm:p-12 md:gap-0 md:border-0 md:border-l dark:bg-transparent\">\n                        <div className=\"relative z-10\">\n                            <p className=\"text-muted-foreground text-balance text-lg font-medium\">\n                                <span className=\"text-foreground\">Every conversation in one thread.</span> Email, chat, and support history stay on the account so nobody works from memory.\n                            </p>\n                        </div>\n                        <div\n                            aria-hidden\n                            className=\"mask-radial-at-top-left mask-radial-[90%_80%] mask-radial-from-75%\"\n                        >\n                            <div className=\"bg-card relative mx-auto flex aspect-video flex-col justify-between rounded-xl border pb-6\">\n                                <div className=\"mb-6 flex gap-1.5 border-b p-3\">\n                                    <div className=\"bg-foreground/10 size-1.5 rounded-full\"></div>\n                                    <div className=\"bg-foreground/10 size-1.5 rounded-full\"></div>\n                                    <div className=\"bg-foreground/10 size-1.5 rounded-full\"></div>\n                                </div>\n\n                                <div className=\"bg-foreground/2 ring-foreground/6.5 mx-6 mt-auto h-32 rounded-xl shadow-xl ring\" />\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"col-span-full border-y p-12 lg:py-20\">\n                        <p className=\"text-center text-4xl font-semibold lg:text-7xl\">\n                            99.99% <span className=\"text-muted-foreground\">Uptime</span>\n                        </p>\n                    </div>\n                    <div className=\"relative col-span-full\">\n                        <div className=\"absolute z-10 max-w-lg px-6 pr-12 pt-6 md:px-12 md:pt-12\">\n                            <p className=\"mb-8 text-balance text-lg font-medium\">\n                                Pipeline health, updated in real time. <span className=\"text-muted-foreground\">Spot stalled deals and weak engagement before they slip past quarter end.</span>\n                            </p>\n                        </div>\n                        <MonitoringChart />\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst map = new DottedMap({ height: 55, grid: 'diagonal' })\n\nconst points = map.getPoints()\n\nconst svgOptions = {\n    backgroundColor: 'var(--color-background)',\n    color: 'currentColor',\n    radius: 0.15,\n}\n\nconst Map = () => {\n    const viewBox = `0 0 120 60`\n    return (\n        <svg\n            viewBox={viewBox}\n            style={{ background: svgOptions.backgroundColor }}\n        >\n            {points.map((point, index) => (\n                <circle\n                    key={index}\n                    cx={point.x}\n                    cy={point.y}\n                    r={svgOptions.radius}\n                    fill={svgOptions.color}\n                />\n            ))}\n        </svg>\n    )\n}\n\nconst chartConfig = {\n    desktop: {\n        label: 'Desktop',\n        color: '#2563eb',\n    },\n    mobile: {\n        label: 'Mobile',\n        color: '#60a5fa',\n    },\n} satisfies ChartConfig\n\nconst chartData = [\n    { month: 'May', desktop: 56, mobile: 224 },\n    { month: 'June', desktop: 56, mobile: 224 },\n    { month: 'January', desktop: 126, mobile: 252 },\n    { month: 'February', desktop: 205, mobile: 410 },\n    { month: 'March', desktop: 200, mobile: 126 },\n    { month: 'April', desktop: 400, mobile: 800 },\n]\n\nconst MonitoringChart = () => {\n    return (\n        <ChartContainer\n            className=\"h-120 aspect-auto md:h-96\"\n            config={chartConfig}\n        >\n            <AreaChart\n                accessibilityLayer\n                data={chartData}\n                margin={{\n                    left: 0,\n                    right: 0,\n                }}\n            >\n                <defs>\n                    <linearGradient\n                        id=\"fillDesktop\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                    >\n                        <stop\n                            offset=\"0%\"\n                            stopColor=\"var(--color-desktop)\"\n                            stopOpacity={0.8}\n                        />\n                        <stop\n                            offset=\"55%\"\n                            stopColor=\"var(--color-desktop)\"\n                            stopOpacity={0.1}\n                        />\n                    </linearGradient>\n                    <linearGradient\n                        id=\"fillMobile\"\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                    >\n                        <stop\n                            offset=\"0%\"\n                            stopColor=\"var(--color-mobile)\"\n                            stopOpacity={0.8}\n                        />\n                        <stop\n                            offset=\"55%\"\n                            stopColor=\"var(--color-mobile)\"\n                            stopOpacity={0.1}\n                        />\n                    </linearGradient>\n                </defs>\n                <CartesianGrid vertical={false} />\n                <ChartTooltip\n                    active\n                    cursor={false}\n                    content={<ChartTooltipContent className=\"dark:bg-muted\" />}\n                />\n                <Area\n                    strokeWidth={2}\n                    dataKey=\"mobile\"\n                    type=\"stepBefore\"\n                    fill=\"url(#fillMobile)\"\n                    fillOpacity={0.1}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                />\n                <Area\n                    strokeWidth={2}\n                    dataKey=\"desktop\"\n                    type=\"stepBefore\"\n                    fill=\"url(#fillDesktop)\"\n                    fillOpacity={0.1}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                />\n            </AreaChart>\n        </ChartContainer>\n    )\n}\n"}]}