{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-stats-2","type":"registry:block","title":"Stats 2","description":"Tailark Veil stats variant 2 block","meta":{"aspect-ratio":"80/41","width":686,"height":352},"files":[{"path":"veil/blocks/stats/two.tsx","type":"registry:component","target":"@components/stats-2.tsx","content":"import { CSSProperties } from 'react'\n\nexport default function Stats() {\n    return (\n        <section className=\"bg-background @container py-24\">\n            <div className=\"mx-auto max-w-2xl px-6\">\n                <div className=\"space-y-4\">\n                    <h2 className=\"text-balance font-serif text-4xl font-medium\">Trusted by Teams Worldwide</h2>\n                    <p className=\"text-muted-foreground text-balance\">Our platform delivers measurable results that help businesses scale faster and work smarter.</p>\n                </div>\n                <div className=\"@xl:grid-cols-3 mt-12 grid grid-cols-2 gap-6 text-sm\">\n                    <div className=\"border-y py-6\">\n                        <p className=\"text-muted-foreground text-xl\">\n                            <span className=\"text-foreground font-medium\">99.9%</span> Uptime guarantee.\n                        </p>\n                    </div>\n\n                    <div className=\"border-y py-6\">\n                        <p className=\"text-muted-foreground text-xl\">\n                            <span className=\"text-foreground font-medium\">10M+</span> API requests processed daily.\n                        </p>\n                    </div>\n\n                    <div className=\"border-y py-6\">\n                        <p className=\"text-muted-foreground text-xl\">\n                            <span className=\"text-foreground font-medium\">500+</span> Enterprise customers.\n                        </p>\n                    </div>\n                </div>\n            </div>\n            <div\n                aria-hidden\n                className=\"mx-auto flex h-72 max-w-5xl items-end justify-between gap-0.5 px-6\"\n            >\n                {Array.from({ length: 48 }, (_, i) => {\n                    const progress = i / 47\n                    const base = Math.pow(progress, 2.2)\n                    const noise = Math.sin(i * 0.7) * 0.08 + Math.sin(i * 1.3) * 0.05\n                    const height = Math.min(1, Math.max(0.05, base + noise * (0.3 + progress * 0.7)))\n                    return (\n                        <div\n                            key={i}\n                            className=\"after:h-(--line-height) after:bg-foreground/15 hover:after:bg-primary relative h-full w-px rounded-full duration-200 before:absolute before:inset-0 before:-inset-x-6 after:absolute after:inset-0 after:mt-auto hover:mx-2\"\n                            style={{ '--line-height': `${height * 100}%` } as CSSProperties}\n                        />\n                    )\n                })}\n            </div>\n        </section>\n    )\n}\n"}]}