{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-comparator-2","type":"registry:block","title":"Comparator 2","description":"Tailark Veil comparator variant 2 block","registryDependencies":["@tailark-oss/veil-button","@tailark-oss/veil-card"],"meta":{"aspect-ratio":"90/56","width":686,"height":427},"files":[{"path":"veil/blocks/comparator/two.tsx","type":"registry:component","target":"@components/comparator-2.tsx","content":"import Link from 'next/link'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { Check, Minus } from 'lucide-react'\n\nconst features = [\n    { name: 'Integrations', free: '5', pro: 'Unlimited' },\n    { name: 'API Calls', free: '10K/mo', pro: '500K/mo' },\n    { name: 'Team Members', free: '2', pro: '20' },\n    { name: 'Support', free: 'Email', pro: 'Priority' },\n    { name: 'Analytics Dashboard', free: false, pro: true },\n    { name: 'Custom Webhooks', free: false, pro: true },\n    { name: 'Advanced Security', free: false, pro: true },\n    { name: 'API Access', free: false, pro: true },\n]\n\nexport default function Comparator() {\n    return (\n        <section className=\"bg-background @container py-24\">\n            <div className=\"mx-auto max-w-2xl px-6\">\n                <div className=\"text-center\">\n                    <h2 className=\"text-balance font-serif text-4xl font-medium\">Free vs Pro</h2>\n                    <p className=\"text-muted-foreground mx-auto mt-4 max-w-md text-balance\">See what you get with each plan.</p>\n                </div>\n                <Card\n                    variant=\"outline\"\n                    className=\"@max-md:*:min-w-md mt-12 overflow-auto\"\n                >\n                    <div className=\"grid grid-cols-3\">\n                        <div className=\"p-4\"></div>\n                        <div className=\"min-w-32 border-l p-4 text-center\">\n                            <p className=\"text-foreground font-medium\">Free</p>\n                            <p className=\"font-serif text-2xl font-medium\">$0</p>\n                        </div>\n                        <div className=\"bg-primary/5 min-w-32 border-l p-4 text-center\">\n                            <p className=\"text-foreground font-medium\">Pro</p>\n                            <p className=\"font-serif text-2xl font-medium\">$29</p>\n                        </div>\n                    </div>\n                    {features.map((feature) => (\n                        <div\n                            key={feature.name}\n                            className=\"grid grid-cols-3 border-t\"\n                        >\n                            <div className=\"text-muted-foreground p-4 text-sm\">{feature.name}</div>\n                            <div className=\"flex min-w-32 items-center justify-center border-l p-4 text-sm\">{typeof feature.free === 'boolean' ? feature.free ? <Check className=\"text-primary size-4\" /> : <Minus className=\"text-muted-foreground/50 size-4\" /> : <span className=\"text-foreground\">{feature.free}</span>}</div>\n                            <div className=\"bg-primary/5 flex min-w-32 items-center justify-center border-l p-4 text-sm\">{typeof feature.pro === 'boolean' ? feature.pro ? <Check className=\"text-primary size-4\" /> : <Minus className=\"text-muted-foreground/50 size-4\" /> : <span className=\"text-foreground font-medium\">{feature.pro}</span>}</div>\n                        </div>\n                    ))}\n                    <div className=\"grid grid-cols-3 border-t\">\n                        <div className=\"p-4\"></div>\n                        <div className=\"min-w-32 border-l p-4\">\n                            <Button\n                                asChild\n                                variant=\"outline\"\n                                size=\"sm\"\n                                className=\"w-full\"\n                            >\n                                <Link href=\"#link\">Get Started</Link>\n                            </Button>\n                        </div>\n                        <div className=\"bg-primary/5 min-w-32 border-l p-4\">\n                            <Button\n                                asChild\n                                size=\"sm\"\n                                className=\"w-full\"\n                            >\n                                <Link href=\"#link\">Upgrade</Link>\n                            </Button>\n                        </div>\n                    </div>\n                </Card>\n            </div>\n        </section>\n    )\n}\n"}]}