{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-comparator-3","type":"registry:block","title":"Comparator 3","description":"Tailark Veil comparator variant 3 block","registryDependencies":["@tailark-oss/veil-button","@tailark-oss/veil-card"],"meta":{"aspect-ratio":"90/82","width":686,"height":625},"files":[{"path":"veil/blocks/comparator/three.tsx","type":"registry:component","target":"@components/comparator-3.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'\nimport { cn } from '@/lib/utils'\n\nconst plans = [\n    {\n        name: 'Starter',\n        price: '$0',\n        period: '/month',\n        description: 'For individuals and small projects',\n        cta: 'Get Started',\n        features: {\n            integrations: '3',\n            apiCalls: '1,000/mo',\n            support: 'Community',\n            analytics: false,\n            webhooks: false,\n            sso: false,\n        },\n    },\n    {\n        name: 'Pro',\n        price: '$29',\n        period: '/month',\n        description: 'For growing teams',\n        cta: 'Start Free Trial',\n        highlighted: true,\n        features: {\n            integrations: 'Unlimited',\n            apiCalls: '100,000/mo',\n            support: 'Priority',\n            analytics: true,\n            webhooks: true,\n            sso: false,\n        },\n    },\n    {\n        name: 'Enterprise',\n        price: 'Custom',\n        period: '',\n        description: 'For large organizations',\n        cta: 'Contact Sales',\n        features: {\n            integrations: 'Unlimited',\n            apiCalls: 'Unlimited',\n            support: 'Dedicated',\n            analytics: true,\n            webhooks: true,\n            sso: true,\n        },\n    },\n]\n\nconst featureLabels = {\n    integrations: 'Integrations',\n    apiCalls: 'API Calls',\n    support: 'Support',\n    analytics: 'Analytics',\n    webhooks: 'Custom Webhooks',\n    sso: 'SSO / SAML',\n}\n\nconst FeatureRow = ({ label, value }: { label: string; value: boolean | string }) => (\n    <div className=\"flex items-center justify-between border-b py-3 text-sm last:border-b-0\">\n        <span className=\"text-muted-foreground\">{label}</span>\n        {typeof value === 'boolean' ? value ? <Check className=\"text-primary size-4\" /> : <Minus className=\"text-muted-foreground/50 size-4\" /> : <span className=\"text-foreground font-medium\">{value}</span>}\n    </div>\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\">Choose Your Plan</h2>\n                    <p className=\"text-muted-foreground mx-auto mt-4 max-w-md text-balance\">Start free and scale as you grow.</p>\n                </div>\n                <div className=\"mt-12 space-y-4\">\n                    {plans.map((plan) => (\n                        <Card\n                            key={plan.name}\n                            variant={plan.highlighted ? 'default' : 'mixed'}\n                            className={cn('p-6', plan.highlighted && 'ring-primary')}\n                        >\n                            <div className=\"@lg:flex-row @lg:items-start @lg:justify-between flex flex-col gap-6\">\n                                <div className=\"@lg:max-w-xs\">\n                                    <h3 className=\"text-foreground font-medium\">{plan.name}</h3>\n                                    <p className=\"text-muted-foreground mt-1 text-sm\">{plan.description}</p>\n                                    <div className=\"mt-4\">\n                                        <span className=\"font-serif text-3xl font-medium\">{plan.price}</span>\n                                        {plan.period && <span className=\"text-muted-foreground\">{plan.period}</span>}\n                                    </div>\n                                    <Button\n                                        asChild\n                                        variant={plan.highlighted ? 'default' : 'outline'}\n                                        size=\"sm\"\n                                        className=\"mt-4\"\n                                    >\n                                        <Link href=\"#link\">{plan.cta}</Link>\n                                    </Button>\n                                </div>\n                                <div className=\"@lg:w-64 w-full shrink-0\">\n                                    {Object.entries(plan.features).map(([key, value]) => (\n                                        <FeatureRow\n                                            key={key}\n                                            label={featureLabels[key as keyof typeof featureLabels]}\n                                            value={value}\n                                        />\n                                    ))}\n                                </div>\n                            </div>\n                        </Card>\n                    ))}\n                </div>\n            </div>\n        </section>\n    )\n}\n"}]}