{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-pricing-2","type":"registry:block","title":"Pricing 2","description":"Tailark Veil pricing variant 2 block","registryDependencies":["@tailark-oss/veil-button","@tailark-oss/veil-card"],"meta":{"aspect-ratio":"90/51","width":686,"height":389},"files":[{"path":"veil/blocks/pricing/two.tsx","type":"registry:component","target":"@components/pricing-2.tsx","content":"import Link from 'next/link'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { ArrowRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nconst tiers = [\n    {\n        name: 'Hobby',\n        description: 'For personal projects',\n        price: '$0',\n        period: '/month',\n        limit: '1,000 requests/month',\n    },\n    {\n        name: 'Pro',\n        description: 'For professional use',\n        price: '$20',\n        period: '/month',\n        limit: '50,000 requests/month',\n        highlighted: true,\n    },\n    {\n        name: 'Scale',\n        description: 'For high-volume apps',\n        price: '$100',\n        period: '/month',\n        limit: '500,000 requests/month',\n    },\n    {\n        name: 'Enterprise',\n        description: 'For large organizations',\n        price: 'Custom',\n        period: '',\n        limit: 'Unlimited requests',\n    },\n]\n\nexport default function Pricing() {\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\">Usage-Based Pricing</h2>\n                    <p className=\"text-muted-foreground mx-auto mt-4 max-w-md text-balance\">Pay only for what you use. All plans include the same features.</p>\n                </div>\n                <div className=\"mt-12 space-y-3\">\n                    {tiers.map((tier) => (\n                        <Card\n                            key={tier.name}\n                            variant=\"outline\"\n                            className={cn('@2xl:flex-row @2xl:items-center @2xl:justify-between flex flex-col gap-4 p-4', tier.highlighted && 'ring-primary')}\n                        >\n                            <div className=\"@2xl:flex-row @2xl:items-center @2xl:gap-6 flex flex-col gap-2\">\n                                <div className=\"@2xl:w-44 shrink-0\">\n                                    <h3 className=\"text-foreground font-medium\">{tier.name}</h3>\n                                    <p className=\"text-muted-foreground text-sm\">{tier.description}</p>\n                                </div>\n                                <div className=\"@2xl:border-l @2xl:pl-6\">\n                                    <p className=\"text-muted-foreground text-sm\">{tier.limit}</p>\n                                </div>\n                            </div>\n                            <div className=\"@2xl:flex-row @2xl:items-center flex flex-col gap-4\">\n                                <div className=\"@2xl:text-right\">\n                                    <span className=\"font-serif text-2xl font-medium\">{tier.price}</span>\n                                    {tier.period && <span className=\"text-muted-foreground text-sm\">{tier.period}</span>}\n                                </div>\n                                <Button\n                                    asChild\n                                    variant={tier.highlighted ? 'default' : 'outline'}\n                                    size=\"sm\"\n                                    className=\"gap-1\"\n                                >\n                                    <Link href=\"#link\">\n                                        {tier.price === 'Custom' ? 'Contact Us' : 'Get Started'}\n                                        <ArrowRight className=\"size-3.5\" />\n                                    </Link>\n                                </Button>\n                            </div>\n                        </Card>\n                    ))}\n                </div>\n                <div className=\"bg-muted mt-8 rounded-xl p-6 text-center\">\n                    <p className=\"text-foreground font-medium\">Need more requests?</p>\n                    <p className=\"text-muted-foreground mt-1 text-sm\">Additional requests are billed at $0.001 per request after your plan limit.</p>\n                </div>\n            </div>\n        </section>\n    )\n}\n"}]}