{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-hero-section-7","type":"registry:block","title":"Hero Section 7","description":"Tailark Dusk hero-section variant 7 block","registryDependencies":["@tailark-oss/dusk-button","@tailark-oss/dusk-hero-section-6-header","@tailark-oss/dusk-hero-section-7-logo-cloud"],"meta":{"aspect-ratio":"90/59","width":686,"height":450},"files":[{"path":"dusk/blocks/hero-section/seven/hero-section.tsx","type":"registry:component","target":"@components/hero-section-7.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-7-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 md:pt-40 lg:pb-20 xl:pt-64\">\n                        <div className=\"relative mx-auto grid max-w-7xl items-center gap-12 px-6 lg:grid-cols-2\">\n                            <div>\n                                <Link\n                                    href=\"/\"\n                                    className=\"flex w-fit items-center gap-2 font-medium\">\n                                    <span className=\"text-sm\">New</span>\n                                    <span className=\"text-muted-foreground text-sm\">Introducing Tailark CRM 1.0</span>\n\n                                    <ArrowRight className=\"size-3.5\" />\n                                </Link>\n\n                                <div className=\"mt-8 flex max-w-md flex-col gap-4\">\n                                    <h1 className=\"text-balance text-5xl font-medium tracking-tight md:text-6xl\">\n                                        One CRM. <span className=\"text-muted-foreground\">Every customer.</span>\n                                    </h1>\n\n                                    <div className=\"flex max-w-md flex-col gap-6\">\n                                        <p className=\"text-muted-foreground\">Leads, deals, tasks, and conversations — all through a single unified CRM. Start selling in seconds.</p>\n\n                                        <div className=\"flex gap-3\">\n                                            <Button\n                                                className=\"w-fit\"\n                                                asChild>\n                                                <Link href=\"#\">Get Started</Link>\n                                            </Button>\n                                            <Button\n                                                className=\"w-fit\"\n                                                variant=\"outline\"\n                                                asChild>\n                                                <Link href=\"#\">Talk to sales</Link>\n                                            </Button>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <div className=\"sm:aspect-5/3 lg:aspect-5/4 relative aspect-square overflow-hidden rounded-3xl lg:ml-auto lg:max-w-xl\">\n                                <div className=\"bg-background min-w-3xl 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-6 top-6 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-8 lg:top-8\">\n                                    <div\n                                        aria-hidden\n                                        className=\"bg-foreground/2 z-1 absolute inset-0 rounded-2xl\"\n                                    />\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=\"background\"\n                                    width={1313}\n                                    height={1000}\n                                    sizes=\"(max-width: 768px) 100vw, 720px\"\n                                    className=\"size-full rotate-180 rounded-3xl object-cover object-bottom\"\n                                />\n                            </div>\n                        </div>\n                    </div>\n                </section>\n                <LogoCloud />\n            </main>\n        </>\n    )\n}\n"}]}