{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-section-6",
  "type": "registry:block",
  "title": "Hero Section 6",
  "description": "Product hero with a newsletter input, announcement link and an app screenshot.",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "app/preview/hero-section/six/page.tsx",
      "content": "'use client'\nimport { Logo } from '@/components/logo'\nimport { Button } from '@/components/ui/button'\nimport { ArrowRight, Mail, Menu, SendHorizonal, X } from 'lucide-react'\nimport Image from 'next/image'\nimport Link from 'next/link'\nimport { useState } from 'react'\n\nconst menuItems = [\n    { name: 'Features', href: '#' },\n    { name: 'Solution', href: '#' },\n    { name: 'Pricing', href: '#' },\n    { name: 'About', href: '#' },\n]\n\nexport default function HeroSection() {\n    const [menuState, setMenuState] = useState(false)\n    return (\n        <>\n            <header>\n                <nav\n                    data-state={menuState && 'active'}\n                    className=\"fixed z-20 w-full border-b border-dashed bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent\">\n                    <div className=\"m-auto max-w-5xl px-6\">\n                        <div className=\"flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4\">\n                            <div className=\"flex w-full justify-between lg:w-auto\">\n                                <Link\n                                    href=\"/\"\n                                    aria-label=\"home\"\n                                    className=\"flex items-center space-x-2\">\n                                    <Logo />\n                                </Link>\n\n                                <button\n                                    onClick={() => setMenuState(!menuState)}\n                                    aria-label={menuState == true ? 'Close Menu' : 'Open Menu'}\n                                    className=\"relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden\">\n                                    <Menu className=\"in-data-[state=active]:rotate-180 in-data-[state=active]:scale-0 in-data-[state=active]:opacity-0 m-auto size-6 duration-200\" />\n                                    <X className=\"in-data-[state=active]:rotate-0 in-data-[state=active]:scale-100 in-data-[state=active]:opacity-100 absolute inset-0 m-auto size-6 -rotate-180 scale-0 opacity-0 duration-200\" />\n                                </button>\n                            </div>\n\n                            <div className=\"bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent\">\n                                <div className=\"lg:pr-4\">\n                                    <ul className=\"space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm\">\n                                        {menuItems.map((item, index) => (\n                                            <li key={index}>\n                                                <Link\n                                                    href={item.href}\n                                                    className=\"text-muted-foreground hover:text-accent-foreground block duration-150\">\n                                                    <span>{item.name}</span>\n                                                </Link>\n                                            </li>\n                                        ))}\n                                    </ul>\n                                </div>\n\n                                <div className=\"flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit lg:border-l lg:pl-6\">\n                                    <Button\n                                        asChild\n                                        variant=\"outline\"\n                                        size=\"sm\">\n                                        <Link href=\"#\">\n                                            <span>Login</span>\n                                        </Link>\n                                    </Button>\n\n                                    <Button\n                                        asChild\n                                        size=\"sm\">\n                                        <Link href=\"#\">\n                                            <span>Login</span>\n                                        </Link>\n                                    </Button>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </nav>\n            </header>\n\n            <main>\n                <section className=\"overflow-hidden\">\n                    <div className=\"relative mx-auto max-w-5xl px-6 py-28 lg:py-20\">\n                        <div className=\"lg:flex lg:items-center lg:gap-12\">\n                            <div className=\"relative z-10 mx-auto max-w-xl text-center lg:ml-0 lg:w-1/2 lg:text-left\">\n                                <Link\n                                    href=\"/\"\n                                    className=\"rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3 lg:ml-0\">\n                                    <span className=\"bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs\">New</span>\n                                    <span className=\"text-sm\">Introducing Lyra 2.0</span>\n                                    <span className=\"bg-(--color-border) block h-4 w-px\"></span>\n\n                                    <ArrowRight className=\"size-4\" />\n                                </Link>\n\n                                <h1 className=\"mt-10 text-balance text-4xl font-bold md:text-5xl xl:text-5xl\">Production Ready Digital Marketing blocks</h1>\n                                <p className=\"mt-8\">Responsive, accessible sections you can drop into any Next.js project and make your own.</p>\n\n                                <div>\n                                    <form\n                                        action=\"\"\n                                        className=\"mx-auto my-10 max-w-sm lg:my-12 lg:ml-0 lg:mr-auto\">\n                                        <div className=\"bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2\">\n                                            <Mail className=\"text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5\" />\n\n                                            <input\n                                                placeholder=\"Your mail address\"\n                                                className=\"h-14 w-full bg-transparent pl-12 focus:outline-none\"\n                                                type=\"email\"\n                                            />\n\n                                            <div className=\"md:pr-1.5 lg:pr-0\">\n                                                <Button\n                                                    aria-label=\"submit\"\n                                                    className=\"rounded-(--radius)\">\n                                                    <span className=\"hidden md:block\">Get Started</span>\n                                                    <SendHorizonal\n                                                        className=\"relative mx-auto size-5 md:hidden\"\n                                                        strokeWidth={2}\n                                                    />\n                                                </Button>\n                                            </div>\n                                        </div>\n                                    </form>\n\n                                    <ul className=\"list-inside list-disc space-y-2\">\n                                        <li>Faster</li>\n                                        <li>Modern</li>\n                                        <li>100% Customizable</li>\n                                    </ul>\n                                </div>\n                            </div>\n                        </div>\n                        <div className=\"absolute inset-0 -mx-4 rounded-3xl p-3 lg:col-span-3\">\n                            <div className=\"relative\">\n                                <div className=\"bg-radial-[at_65%_25%] to-background z-1 -inset-17 absolute from-transparent to-40%\"></div>\n                                <Image\n                                    className=\"hidden dark:block\"\n                                    src=\"/music.png\"\n                                    alt=\"app illustration\"\n                                    width={2796}\n                                    height={2008}\n                                />\n                                <Image\n                                    className=\"dark:hidden\"\n                                    src=\"/music-light.png\"\n                                    alt=\"app illustration\"\n                                    width={2796}\n                                    height={2008}\n                                />\n                            </div>\n                        </div>\n                    </div>\n                </section>\n            </main>\n        </>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/hero-section.tsx"
    },
    {
      "path": "components/logo.tsx",
      "content": "import { cn } from '@/lib/utils'\n\n/**\n * Brand mark: four blocks, two squared and two rounded, stacked on a grid.\n * Purely presentational — wrap it in your own <Link> where it should navigate.\n */\nexport function Logo({ className }: { className?: string }) {\n    return (\n        <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n            className={cn('size-6 text-foreground', className)}>\n            <rect\n                x=\"2\"\n                y=\"2\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"2.25\"\n                fill=\"currentColor\"\n            />\n            <rect\n                x=\"13\"\n                y=\"2\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"4.5\"\n                fill=\"currentColor\"\n                fillOpacity=\".3\"\n            />\n            <rect\n                x=\"2\"\n                y=\"13\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"4.5\"\n                fill=\"currentColor\"\n                fillOpacity=\".3\"\n            />\n            <rect\n                x=\"13\"\n                y=\"13\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"2.25\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n",
      "type": "registry:component"
    }
  ]
}