{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-comparator-1","type":"registry:block","title":"Comparator 1","description":"Tailark Veil comparator variant 1 block","registryDependencies":["@tailark-oss/veil-button","@tailark-oss/veil-card"],"meta":{"aspect-ratio":"90/57","width":686,"height":434},"files":[{"path":"veil/blocks/comparator/one.tsx","type":"registry:component","target":"@components/comparator-1.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 plans = [\n    {\n        name: 'Basic',\n        price: '$9',\n        period: '/month',\n        cta: 'Get Started',\n    },\n    {\n        name: 'Pro',\n        price: '$29',\n        period: '/month',\n        cta: 'Start Free Trial',\n        highlighted: true,\n    },\n    {\n        name: 'Team',\n        price: '$79',\n        period: '/month',\n        cta: 'Start Free Trial',\n    },\n]\n\nconst features = [\n    { name: 'Integrations', basic: '5', pro: 'Unlimited', team: 'Unlimited' },\n    { name: 'API Calls', basic: '10K/mo', pro: '100K/mo', team: '1M/mo' },\n    { name: 'Team Members', basic: '1', pro: '5', team: 'Unlimited' },\n    { name: 'Support', basic: 'Email', pro: 'Priority', team: 'Dedicated' },\n    { name: 'Analytics', basic: true, pro: true, team: true },\n    { name: 'Custom Webhooks', basic: false, pro: true, team: true },\n    { name: 'SSO', basic: false, pro: false, team: true },\n    { name: 'Audit Logs', basic: false, pro: false, team: true },\n]\n\nexport default function Comparator() {\n    return (\n        <section className=\"bg-background @container py-24\">\n            <div className=\"mx-auto max-w-3xl px-6\">\n                <div className=\"text-center\">\n                    <h2 className=\"text-balance font-serif text-4xl font-medium\">Compare Plans</h2>\n                    <p className=\"text-muted-foreground mx-auto mt-4 max-w-md text-balance\">Find the perfect plan for your team's needs.</p>\n                </div>\n                <Card\n                    variant=\"outline\"\n                    className=\"*:min-w-xl mt-12 overflow-auto\"\n                >\n                    <div className=\"grid grid-cols-4 border-b\">\n                        <div className=\"p-4\"></div>\n                        {plans.map((plan) => (\n                            <div\n                                key={plan.name}\n                                className={`border-l p-4 text-center ${plan.highlighted ? 'bg-primary/5' : ''}`}\n                            >\n                                <p className=\"text-foreground font-medium\">{plan.name}</p>\n                                <p className=\"mt-1\">\n                                    <span className=\"font-serif text-2xl font-medium\">{plan.price}</span>\n                                    <span className=\"text-muted-foreground text-sm\">{plan.period}</span>\n                                </p>\n                            </div>\n                        ))}\n                    </div>\n                    {features.map((feature) => (\n                        <div\n                            key={feature.name}\n                            className=\"grid grid-cols-4 border-b last:border-b-0\"\n                        >\n                            <div className=\"text-muted-foreground p-4 text-sm\">{feature.name}</div>\n                            {['basic', 'pro', 'team'].map((plan, idx) => {\n                                const value = feature[plan as keyof typeof feature]\n                                return (\n                                    <div\n                                        key={plan}\n                                        className={`flex items-center justify-center border-l p-4 text-sm ${idx === 1 ? 'bg-primary/5' : ''}`}\n                                    >\n                                        {typeof value === 'boolean' ? value ? <Check className=\"text-primary size-4\" /> : <Minus className=\"text-muted-foreground size-4\" /> : <span className=\"text-foreground\">{value}</span>}\n                                    </div>\n                                )\n                            })}\n                        </div>\n                    ))}\n                    <div className=\"grid grid-cols-4 border-t\">\n                        <div className=\"p-4\"></div>\n                        {plans.map((plan) => (\n                            <div\n                                key={plan.name}\n                                className={`border-l p-4 ${plan.highlighted ? 'bg-primary/5' : ''}`}\n                            >\n                                <Button\n                                    asChild\n                                    variant={plan.highlighted ? 'default' : 'outline'}\n                                    size=\"sm\"\n                                    className=\"w-full\"\n                                >\n                                    <Link href=\"#link\">{plan.cta}</Link>\n                                </Button>\n                            </div>\n                        ))}\n                    </div>\n                </Card>\n            </div>\n        </section>\n    )\n}\n"}]}