{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"veil-hero-section-5","type":"registry:block","title":"Hero Section 5","description":"Tailark Veil hero-section variant 5 block","registryDependencies":["@tailark-oss/veil-button","@tailark-oss/veil-logo"],"meta":{"aspect-ratio":"30/17","width":686,"height":389},"files":[{"path":"veil/blocks/hero-section/five.tsx","type":"registry:component","target":"@components/hero-section-5.tsx","content":"import React from 'react'\nimport Link from 'next/link'\nimport { Button } from '@/components/ui/button'\nimport { ChevronRight } from 'lucide-react'\nimport { Logo } from '@/components/logo'\nimport Image from 'next/image'\n\nexport default function HeroSection() {\n    return (\n        <>\n            <header className=\"fixed inset-x-0 top-4 z-50 mx-auto w-fit\">\n                <div className=\"bg-foreground/5 flex items-center gap-6 rounded-full py-2 pl-5 pr-2 backdrop-blur\">\n                    <Logo className=\"h-5\" />\n                    <Button\n                        asChild\n                        className=\"pr-1.5\"\n                        variant=\"outline\"\n                        size=\"sm\"\n                    >\n                        <Link href=\"#link\">\n                            <span className=\"text-nowrap\">Get started</span>\n                            <ChevronRight className=\"opacity-50\" />\n                        </Link>\n                    </Button>\n                </div>\n            </header>\n            <main className=\"overflow-hidden\">\n                <section className=\"bg-background\">\n                    <div className=\"relative pb-32 pt-16\">\n                        <div className=\"relative z-10 mx-auto w-full max-w-5xl px-6\">\n                            <div className=\"mask-radial-from-35% aspect-3/2 mask-radial-to-75% pointer-events-none relative mx-auto max-w-xl opacity-75 mix-blend-darken\">\n                                <div className=\"bg-background absolute inset-0 mix-blend-overlay\"></div>\n                                <Image\n                                    src=\"https://images.unsplash.com/photo-1634595947394-87012e7b12ba?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                    alt=\"watch in dark\"\n                                    className=\"not-dark:invert dark:mix-blend-lighten\"\n                                    width={1340}\n                                    height={560}\n                                />\n                            </div>\n                            <div className=\"mx-auto mt-6 max-w-md text-center\">\n                                <h1 className=\"text-balance font-serif text-4xl font-medium sm:text-5xl\">Ship faster. Integrate smarter.</h1>\n                                <p className=\"text-muted-foreground mt-4 text-balance\">Veil is your all-in-one engine for adding seamless integrations to your app.</p>\n\n                                <Button\n                                    asChild\n                                    className=\"mt-6 pr-1.5\"\n                                >\n                                    <Link href=\"#link\">\n                                        <span className=\"text-nowrap\">Start Building</span>\n                                        <ChevronRight className=\"opacity-50\" />\n                                    </Link>\n                                </Button>\n                            </div>\n                        </div>\n                    </div>\n                </section>\n            </main>\n        </>\n    )\n}\n"}]}