{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-hero-section-1","type":"registry:block","title":"Hero Section 1","description":"Tailark Dusk hero-section variant 1 block","registryDependencies":["@tailark-oss/dusk-button","@tailark-oss/dusk-hero-section-1-header","@tailark-oss/core-spotify","@tailark-oss/core-supabase","@tailark-oss/core-hulu","@tailark-oss/core-bolt","@tailark-oss/core-firebase","@tailark-oss/core-beacon","@tailark-oss/core-claude","@tailark-oss/core-vercel"],"meta":{"aspect-ratio":"60/66","width":686,"height":755},"files":[{"path":"dusk/blocks/hero-section/one/hero-section.tsx","type":"registry:component","target":"@components/hero-section-1.tsx","content":"import React from 'react'\nimport Link from 'next/link'\nimport { ArrowRight, ChevronRight } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport Image from 'next/image'\nimport { HeroHeader } from '@/components/hero-section-1-header'\nimport { Spotify } from '@/components/ui/svgs/spotify'\nimport { SupabaseFull } from '@/components/ui/svgs/supabase'\nimport { Hulu } from '@/components/ui/svgs/hulu'\nimport { Bolt } from '@/components/ui/svgs/bolt'\nimport { FirebaseFull } from '@/components/ui/svgs/firebase'\nimport { Beacon } from '@/components/ui/svgs/beacon'\nimport { Claude } from '@/components/ui/svgs/claude'\nimport { VercelFull } from '@/components/ui/svgs/vercel'\n\nexport default function HeroSection() {\n    return (\n        <>\n            <HeroHeader />\n            <main className=\"overflow-hidden\">\n                <section>\n                    <div className=\"relative pt-24 md:pt-36\">\n                        <div className=\"mx-auto max-w-7xl\">\n                            <div className=\"px-6 text-center sm:mx-auto lg:mr-auto lg:mt-0\">\n                                <Link\n                                    href=\"#link\"\n                                    className=\"group mx-auto flex w-fit items-center gap-3 rounded-full p-1 pl-4 transition-colors duration-300\">\n                                    <span className=\"text-sm font-medium\">New:</span>\n                                    <span className=\"text-muted-foreground text-sm\">Introducing the living customer graph</span>\n\n                                    <div className=\"size-6 overflow-hidden rounded-full duration-500\">\n                                        <div className=\"flex w-12 -translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0\">\n                                            <span className=\"flex size-6\">\n                                                <ArrowRight className=\"m-auto size-3\" />\n                                            </span>\n                                            <span className=\"flex size-6\">\n                                                <ArrowRight className=\"m-auto size-3\" />\n                                            </span>\n                                        </div>\n                                    </div>\n                                </Link>\n\n                                <h1 className=\"mx-auto mt-8 max-w-4xl text-balance text-5xl font-medium tracking-tight md:text-6xl lg:mt-12 xl:text-7xl\">Customer universe, beautifully connected</h1>\n                                <p className=\"text-muted-foreground mx-auto mt-4 max-w-2xl text-balance md:text-lg\">Every account, signal, conversation, and next move in one living workspace that helps teams turn momentum into revenue.</p>\n\n                                <div className=\"mt-6 flex flex-col items-center justify-center gap-2 md:flex-row\">\n                                    <Button\n                                        key={1}\n                                        asChild>\n                                        <Link href=\"#\">\n                                            <span className=\"text-nowrap\">Explore the graph</span>\n                                        </Link>\n                                    </Button>\n\n                                    <Button\n                                        key={2}\n                                        asChild\n                                        variant=\"ghost\">\n                                        <Link href=\"#\">\n                                            <span className=\"text-nowrap\">Watch the flow</span>\n                                        </Link>\n                                    </Button>\n                                </div>\n                            </div>\n\n                            <div className=\"relative mt-8 overflow-hidden p-6 max-sm:-mr-56 sm:mt-16\">\n                                <div className=\"rounded-4xl mask-t-from-25% mask-t-to-65% bg-linear-to-b absolute inset-0 border to-zinc-600\"></div>\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 rounded-2xl p-2 shadow-xl shadow-black/50 ring before:absolute before:-inset-px before:z-10 before:size-56 before:rounded-tl-2xl before:border-l before:border-t\">\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                            </div>\n                        </div>\n                    </div>\n                </section>\n\n                <section className=\"bg-background pb-16 pt-6 md:pb-32\">\n                    <div className=\"group relative m-auto max-w-5xl px-6\">\n                        <div className=\"absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 duration-500 group-hover:scale-100 group-hover:opacity-100\">\n                            <Link\n                                href=\"/\"\n                                className=\"block text-sm duration-150 hover:opacity-75\">\n                                <span> See the network</span>\n\n                                <ChevronRight className=\"ml-1 inline-block size-3\" />\n                            </Link>\n                        </div>\n                        <div className=\"group-hover:blur-xs **:fill-foreground mx-auto mt-12 grid max-w-2xl grid-cols-3 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14 md:grid-cols-4\">\n                            <div className=\"flex items-center\">\n                                <Bolt className=\"mx-auto h-5 w-full\" />\n                            </div>\n                            <div className=\"flex items-center\">\n                                <VercelFull className=\"mx-auto h-4 w-full\" />\n                            </div>\n                            <div className=\"flex items-center\">\n                                <SupabaseFull className=\"mx-auto h-6\" />\n                            </div>\n                            <div className=\"flex items-center\">\n                                <Hulu className=\"mx-auto h-4 w-full\" />\n                            </div>\n                            <div className=\"flex items-center\">\n                                <Spotify className=\"mx-auto h-6 w-full\" />\n                            </div>\n                            <div className=\"flex items-center\">\n                                <FirebaseFull className=\"mx-auto h-6 w-full\" />\n                            </div>\n                            <div className=\"hidden items-center sm:flex\">\n                                <Beacon className=\"mx-auto h-4 w-full\" />\n                            </div>\n\n                            <div className=\"hidden items-center sm:flex\">\n                                <Claude className=\"mx-auto h-5 w-full\" />\n                            </div>\n                        </div>\n                    </div>\n                </section>\n            </main>\n        </>\n    )\n}\n"}]}