{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-pricing-3","type":"registry:block","title":"Pricing 3","description":"Tailark Veil pricing variant 3 block","registryDependencies":["@tailark-oss/veil-button","@tailark-oss/veil-card"],"meta":{"aspect-ratio":"80/41","width":686,"height":352},"files":[{"path":"veil/blocks/pricing/three.tsx","type":"registry:component","target":"@components/pricing-3.tsx","content":"import Link from 'next/link'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { Check, ArrowRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nconst plans = [\n    {\n        name: 'Monthly',\n        price: '$29',\n        period: '/month',\n        description: 'Flexible month-to-month billing',\n        features: ['All features included', 'Cancel anytime', 'No long-term commitment'],\n    },\n    {\n        name: 'Annual',\n        price: '$19',\n        period: '/month',\n        description: 'Save 35% with annual billing',\n        features: ['All features included', '2 months free', 'Priority onboarding'],\n        highlighted: true,\n        badge: 'Best Value',\n    },\n]\n\nexport default function Pricing() {\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\">One Plan, Simple Pricing</h2>\n                    <p className=\"text-muted-foreground mx-auto mt-4 max-w-md text-balance\">Everything you need to build powerful integrations. Choose your billing cycle.</p>\n                </div>\n                <div className=\"@xl:grid-cols-2 @xl:gap-3 mt-12 grid gap-6\">\n                    {plans.map((plan) => (\n                        <Card\n                            key={plan.name}\n                            variant={plan.highlighted ? 'default' : 'mixed'}\n                            className={cn('relative p-6', plan.highlighted && 'ring-primary')}\n                        >\n                            <div className=\"mb-6\">\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>\n                            <div>\n                                <span className=\"font-serif text-5xl font-medium\">{plan.price}</span>\n                                <span className=\"text-muted-foreground\">{plan.period}</span>\n                            </div>\n                            <ul className=\"mt-6 space-y-3\">\n                                {plan.features.map((feature) => (\n                                    <li\n                                        key={feature}\n                                        className=\"text-muted-foreground flex items-center gap-2 text-sm\"\n                                    >\n                                        <Check className=\"text-primary size-4\" />\n                                        {feature}\n                                    </li>\n                                ))}\n                            </ul>\n                            <Button\n                                asChild\n                                variant={plan.highlighted ? 'default' : 'outline'}\n                                className=\"mt-8 w-full gap-2\"\n                            >\n                                <Link href=\"#link\">\n                                    Get Started\n                                    <ArrowRight className=\"size-4\" />\n                                </Link>\n                            </Button>\n                        </Card>\n                    ))}\n                </div>\n                <p className=\"text-muted-foreground mt-8 text-center text-sm\">All plans include a 14-day free trial. No credit card required.</p>\n            </div>\n        </section>\n    )\n}\n"}]}