{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-hero-section-6","type":"registry:block","title":"Hero Section 6","description":"Tailark Mist hero-section variant 6 block","registryDependencies":["@tailark-oss/mist-button","@tailark-oss/core-hulu","@tailark-oss/core-spotify","@tailark-oss/core-supabase","@tailark-oss/core-vercel"],"meta":{"aspect-ratio":"60/42","width":686,"height":480},"files":[{"path":"mist/blocks/hero-section/six.tsx","type":"registry:component","target":"@components/hero-section-6.tsx","content":"import React from 'react'\nimport Link from 'next/link'\nimport { Button } from '@/components/ui/button'\nimport Image from 'next/image'\nimport { BookOpen } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Spotify } from '@/components/ui/svgs/spotify'\nimport { VercelFull } from '@/components/ui/svgs/vercel'\nimport { SupabaseFull } from '@/components/ui/svgs/supabase'\nimport { Hulu } from '@/components/ui/svgs/hulu'\n\nexport default function HeroSection() {\n    return (\n        <section className=\"py-20\">\n            <div className=\"relative z-10 mx-auto w-full max-w-2xl px-6 lg:px-0\">\n                <div className=\"relative\">\n                    <MistKitLogo />\n                    <h1 className=\"mt-16 max-w-xl text-balance text-5xl font-medium\">The Note App</h1>\n\n                    <p className=\"text-muted-foreground mb-6 mt-4 text-balance text-xl\">The Note App is a simple note app that allows you to create and manage your notes.</p>\n\n                    <div className=\"flex flex-col items-center gap-2 *:w-full sm:flex-row sm:*:w-auto\">\n                        <Button\n                            asChild\n                            variant=\"neutral\"\n                        >\n                            <Link href=\"#link\">\n                                <span className=\"text-nowrap\">Get Started</span>\n                            </Link>\n                        </Button>\n                        <Button\n                            asChild\n                            variant=\"ghost\"\n                        >\n                            <Link href=\"#link\">\n                                <span className=\"text-nowrap\">View Demo</span>\n                            </Link>\n                        </Button>\n                    </div>\n                </div>\n\n                <div className=\"relative mt-12 overflow-hidden rounded-3xl bg-black/10 md:mt-16\">\n                    <img\n                        src=\"https://images.unsplash.com/photo-1547623641-d2c56c03e2a7?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                        alt=\"\"\n                        className=\"absolute inset-0 size-full object-cover\"\n                    />\n\n                    <div className=\"bg-background rounded-(--radius) relative m-4 overflow-hidden border border-transparent shadow-xl shadow-black/15 ring-1 ring-black/10 sm:m-8 md:m-12\">\n                        <Image\n                            src=\"/mist/tailark-2.png\"\n                            alt=\"app screen\"\n                            width=\"2880\"\n                            height=\"1842\"\n                            className=\"object-top-left size-full object-cover\"\n                        />\n                    </div>\n                </div>\n\n                <div className=\"mt-8 flex flex-wrap items-center gap-4\">\n                    <p className=\"text-muted-foreground text-center\">Trusted by teams at :</p>\n                    <div className=\"**:fill-foreground flex items-center justify-center gap-8\">\n                        <Spotify\n                            height={22}\n                            width={73}\n                        />\n                        <VercelFull\n                            height={20}\n                            width={76}\n                        />\n                        <SupabaseFull className=\"h-[22px]\" />\n                        <Hulu\n                            height={16}\n                            width={50}\n                        />\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst MistKitLogo = ({ className }: { className?: string }) => (\n    <div\n        aria-hidden\n        className={cn('border-background bg-linear-to-b rounded-(--radius) relative flex size-9 translate-y-0.5 items-center justify-center border from-yellow-300 to-orange-600 shadow-lg shadow-black/20 ring-1 ring-black/10', className)}\n    >\n        <BookOpen className=\"mask-b-from-25% size-6 fill-white stroke-white drop-shadow-sm\" />\n        <BookOpen className=\"absolute inset-0 m-auto size-6 fill-white stroke-white opacity-65 drop-shadow-sm\" />\n        <div className=\"z-1 h-4.5 absolute inset-2 m-auto w-px translate-y-px rounded-full bg-black/10\"></div>\n    </div>\n)\n"}]}