{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-hero-section-4","type":"registry:block","title":"Hero Section 4","description":"Tailark Dusk hero-section variant 4 block","registryDependencies":["@tailark-oss/dusk-button","@tailark-oss/dusk-kdb","@tailark-oss/dusk-hero-section-4-header","@tailark-oss/dusk-hero-section-4-logo-cloud"],"meta":{"aspect-ratio":"72/47","width":686,"height":448},"files":[{"path":"dusk/blocks/hero-section/four/hero-section.tsx","type":"registry:component","target":"@components/hero-section-4.tsx","content":"import { HeroHeader } from '@/components/hero-section-4-header'\n\nimport { ArrowUp, Link, Mic2, Plus } from 'lucide-react'\nimport { Kbd } from '@/components/ui/kdb'\nimport { Button } from '@/components/ui/button'\nimport LogoCloud from '@/components/hero-section-4-logo-cloud'\nimport Image from 'next/image'\n\nexport default function HeroSection() {\n    return (\n        <>\n            <HeroHeader />\n            <main className=\"@container overflow-x-hidden\">\n                <section>\n                    <div className=\"pt-32 lg:pt-16\">\n                        <div className=\"relative mx-auto grid max-w-7xl items-center px-6 md:grid-cols-2 md:gap-12\">\n                            <div className=\"text-center md:text-left\">\n                                <h1 className=\"mb-10 text-balance text-5xl font-medium tracking-tight\">Build Software businesses can rely on</h1>\n\n                                <div className=\"flex gap-2 max-md:justify-center\">\n                                    <Button>Get Started</Button>\n                                    <Button\n                                        variant=\"ghost\"\n                                        aria-label=\"Download App\"\n                                        className=\"hover:bg-transparent\"\n                                    >\n                                        <Kbd>D</Kbd>\n                                        Download App\n                                    </Button>\n                                </div>\n                            </div>\n                            <div className=\"h-100 md:h-180 relative flex items-center\">\n                                <div className=\"absolute inset-0 z-10 m-auto h-fit md:-translate-y-7 md:px-12\">\n                                    <div className=\"relative\">\n                                        <div className=\"bg-card ring-foreground/15 mt-auto h-fit rounded-3xl p-3 shadow-xl shadow-black/25 ring\">\n                                            <div className=\"text-muted-foreground p-2 pb-3 text-sm\">Ask Tailark what you need...</div>\n                                            <div className=\"flex justify-between gap-3\">\n                                                <div className=\"flex items-center gap-1\">\n                                                    <div className=\"hover:bg-muted flex size-7 cursor-pointer rounded-full *:m-auto *:size-4\">\n                                                        <Plus />\n                                                    </div>\n                                                    <div className=\"hover:bg-muted flex size-7 cursor-pointer rounded-full *:m-auto *:size-4\">\n                                                        <Mic2 />\n                                                    </div>\n                                                </div>\n\n                                                <div className=\"bg-foreground text-background flex size-7 cursor-pointer rounded-full *:m-auto *:size-4 hover:brightness-110\">\n                                                    <ArrowUp />\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <Image\n                                    src=\"https://images.unsplash.com/photo-1618003787019-95b65cc875d2?q=80&w=2148&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                    alt=\"flower background\"\n                                    className=\"mask-b-from-65% size-full scale-90 object-cover object-[25%_50%] mix-blend-lighten\"\n                                    width={2148}\n                                    height={1611}\n                                    sizes=\"(max-width: 768px) 100vw, 720px\"\n                                />\n                            </div>\n                        </div>\n                    </div>\n                </section>\n                <LogoCloud />\n            </main>\n        </>\n    )\n}\n"}]}