{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-hero-section-9","type":"registry:block","title":"Hero Section 9","description":"Tailark Dusk hero-section variant 9 block","registryDependencies":["@tailark-oss/dusk-button","@tailark-oss/dusk-hero-section-9-header","@tailark-oss/dusk-hero-section-9-logo-cloud"],"meta":{"aspect-ratio":"60/51","width":686,"height":583},"files":[{"path":"dusk/blocks/hero-section/nine/hero-section.tsx","type":"registry:component","target":"@components/hero-section-9.tsx","content":"import { Button } from '@/components/ui/button'\nimport { ArrowRight } from 'lucide-react'\nimport Image from 'next/image'\nimport Link from 'next/link'\nimport { HeroHeader } from '@/components/hero-section-9-header'\nimport LogoCloud from '@/components/hero-section-9-logo-cloud'\n\nexport default function HeroSection() {\n    return (\n        <>\n            <HeroHeader />\n\n            <main>\n                <section className=\"pt-24 lg:pt-40\">\n                    <div className=\"mx-auto max-w-7xl px-6\">\n                        <Link\n                            href=\"/\"\n                            className=\"mx-auto flex w-fit items-center gap-2 font-medium\"\n                        >\n                            <span>New</span>\n                            <span className=\"text-muted-foreground\">Introducing Tailark Dusk 1.0</span>\n\n                            <ArrowRight className=\"size-3.5\" />\n                        </Link>\n\n                        <div className=\"mx-auto mb-12 mt-8 flex max-w-3xl flex-col justify-center gap-6 text-center md:gap-8\">\n                            <h1 className=\"text-balance text-4xl font-medium tracking-tight md:text-5xl\">Next gen CRM: Customer universe, beautifully connected</h1>\n                            <Button\n                                className=\"mx-auto w-fit\"\n                                size=\"lg\"\n                                asChild\n                            >\n                                <Link href=\"#\">Get Started</Link>\n                            </Button>\n                        </div>\n\n                        <div className=\"bg-muted relative overflow-hidden rounded-3xl px-4 pt-4 max-lg:-mx-4 md:px-6 md:pt-6 lg:px-8 lg:pt-8\">\n                            <div className=\"bg-background ring-foreground/6.5 before:mask-radial-at-top-left before:mask-radial-from-65% before:mask-radial-[100%_60%] before:ring-foreground before:border-foreground/10 relative z-10 rounded-t-2xl p-2 shadow-lg ring before:absolute before:-inset-px before:z-10 before:size-56 before:rounded-tl-2xl before:border-l before:border-t\">\n                                <Image\n                                    className=\"bg-background aspect-15/8 relative hidden rounded-t-2xl dark:block\"\n                                    src=\"/mail2.png\"\n                                    alt=\"app screen\"\n                                    width=\"2700\"\n                                    height=\"1440\"\n                                />\n                                <Image\n                                    className=\"z-2 border-border/25 aspect-15/8 relative rounded-t-2xl border dark:hidden\"\n                                    src=\"/mail2-light.png\"\n                                    alt=\"app screen\"\n                                    width=\"2700\"\n                                    height=\"1440\"\n                                />\n                            </div>\n\n                            <Image\n                                src=\"https://images.unsplash.com/photo-1761798979849-ebb267341d50?q=80&w=2215&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                alt=\"background image\"\n                                width={2215}\n                                height={1477}\n                                sizes=\"(max-width: 768px) 100vw, 1280px\"\n                                className=\"absolute inset-0 size-full rounded-3xl object-cover object-bottom\"\n                            />\n                        </div>\n                    </div>\n                </section>\n                <LogoCloud />\n            </main>\n        </>\n    )\n}\n"}]}