{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-hero-section-6","type":"registry:block","title":"Hero Section 6","description":"Tailark Dusk hero-section variant 6 block","registryDependencies":["@tailark-oss/dusk-button","@tailark-oss/dusk-hero-section-6-header","@tailark-oss/dusk-hero-section-6-logo-cloud"],"meta":{"aspect-ratio":"90/80","width":686,"height":610},"files":[{"path":"dusk/blocks/hero-section/six/hero-section.tsx","type":"registry:component","target":"@components/hero-section-6.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-6-header'\nimport LogoCloud from '@/components/hero-section-6-logo-cloud'\n\nexport default function HeroSection() {\n    return (\n        <>\n            <HeroHeader />\n\n            <main>\n                <section className=\"overflow-hidden\">\n                    <div className=\"relative pt-24 lg:pt-40\">\n                        <div className=\"space-y-12 md:space-y-16\">\n                            <div className=\"relative mx-auto max-w-7xl px-6\">\n                                <Link\n                                    href=\"/\"\n                                    className=\"flex w-fit items-center gap-2 font-medium\">\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=\"mt-8 grid items-end gap-4 md:grid-cols-2 md:gap-6\">\n                                    <h1 className=\"text-balance text-5xl font-medium tracking-tight md:text-6xl xl:text-7xl\">Agentic Creative canvas</h1>\n                                    <div className=\"mx-auto flex max-w-md flex-col gap-6\">\n                                        <p className=\"text-muted-foreground text-balance text-lg\">Modern websites and applications that look and feel the way you mean it.</p>\n\n                                        <Button\n                                            className=\"w-fit\"\n                                            asChild>\n                                            <Link href=\"#\">Get Started</Link>\n                                        </Button>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <div className=\"mx-auto max-w-7xl max-xl:px-2\">\n                                <div className=\"bg-muted md:aspect-5/3 relative aspect-square overflow-hidden rounded-3xl lg:aspect-video\">\n                                    <div className=\"bg-background min-w-4xl lg:min-w-5xl xl:min-w-7xl 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 absolute left-4 top-4 z-10 rounded-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 lg:left-16 lg:top-16\">\n                                        <div className=\"bg-foreground/2 z-1 absolute inset-0 rounded-2xl\"></div>\n                                        <Image\n                                            className=\"bg-background aspect-15/8 relative rounded-2xl\"\n                                            src=\"/mail2.png\"\n                                            alt=\"app screen\"\n                                            width=\"2700\"\n                                            height=\"1440\"\n                                        />\n                                    </div>\n\n                                    <Image\n                                        src=\"https://images.unsplash.com/photo-1772037440088-2ef162671434?q=80&w=1313&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                        alt=\"\"\n                                        width={1313}\n                                        height={1000}\n                                        sizes=\"(max-width: 768px) 100vw, 1280px\"\n                                        className=\"size-full rotate-180 rounded-3xl object-cover object-bottom\"\n                                    />\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </section>\n                <LogoCloud />\n            </main>\n        </>\n    )\n}\n"}]}