{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-call-to-action-4","type":"registry:block","title":"Call To Action 4","description":"Tailark Veil call-to-action variant 4 block","registryDependencies":["@tailark-oss/veil-button","@tailark-oss/veil-card"],"meta":{"aspect-ratio":"8/3","width":686,"height":257},"files":[{"path":"veil/blocks/call-to-action/four.tsx","type":"registry:component","target":"@components/call-to-action-4.tsx","content":"import Link from 'next/link'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { ArrowRight, Check } from 'lucide-react'\n\nconst benefits = ['14-day free trial', 'No credit card required', 'Cancel anytime', '24/7 support']\n\nexport default function CallToAction() {\n    return (\n        <section className=\"bg-background @container py-24\">\n            <div className=\"mx-auto max-w-2xl px-6\">\n                <Card\n                    variant=\"outline\"\n                    className=\"@xl:grid-cols-2 grid gap-8 p-6 md:p-8\"\n                >\n                    <div>\n                        <h2 className=\"text-balance font-serif text-3xl font-medium\">Transform Your Workflow</h2>\n                        <p className=\"text-muted-foreground mt-3 text-balance\">Experience the power of seamless integrations and watch your productivity soar.</p>\n                        <ul className=\"mt-6 space-y-2\">\n                            {benefits.map((benefit, index) => (\n                                <li\n                                    key={index}\n                                    className=\"text-muted-foreground flex items-center gap-2 text-sm\"\n                                >\n                                    <Check className=\"text-primary size-4\" />\n                                    {benefit}\n                                </li>\n                            ))}\n                        </ul>\n                    </div>\n                    <div className=\"bg-muted/50 flex flex-col justify-center rounded-xl border p-6\">\n                        <p className=\"text-muted-foreground text-sm\">Starting at</p>\n                        <p className=\"mt-1 font-serif text-4xl font-medium\">\n                            $0<span className=\"text-muted-foreground text-lg font-normal\">/month</span>\n                        </p>\n                        <p className=\"text-muted-foreground mt-1 text-sm\">Free forever for individuals</p>\n                        <Button\n                            asChild\n                            className=\"mt-6 gap-2\"\n                        >\n                            <Link href=\"#link\">\n                                Get Started Free\n                                <ArrowRight className=\"size-4\" />\n                            </Link>\n                        </Button>\n                    </div>\n                </Card>\n            </div>\n        </section>\n    )\n}\n"}]}