{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-section-8",
  "type": "registry:block",
  "title": "Hero Section 8",
  "description": "Centered hero with an announcement link, gradient backdrop and a large app screenshot.",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "app/preview/hero-section/eight/page.tsx",
      "content": "'use client'\nimport React from 'react'\nimport Link from 'next/link'\nimport { Logo } from '@/components/logo'\nimport { ArrowRight, Menu, Rocket, X } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport Image from 'next/image'\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] = React.useState(false)\n\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                                    <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            <main className=\"overflow-hidden\">\n                <section>\n                    <div className=\"relative pt-24\">\n                        <div className=\"mx-auto max-w-7xl px-6\">\n                            <div className=\"max-w-3xl text-center sm:mx-auto lg:mr-auto lg:mt-0 lg:w-4/5\">\n                                <Link\n                                    href=\"/\"\n                                    className=\"rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3\">\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-8 text-balance text-4xl font-semibold md:text-5xl xl:text-6xl xl:[line-height:1.125]\">Modern Software testing reimagined</h1>\n                                <p className=\"mx-auto mt-8 hidden max-w-2xl text-wrap text-lg sm:block\">Tailwindcss highly customizable components for building modern websites and applications that look and feel the way you mean it.</p>\n                                <p className=\"mx-auto mt-6 max-w-2xl text-wrap sm:hidden\">Highly customizable components for building modern websites and applications, with your personal spark.</p>\n\n                                <div className=\"mt-8\">\n                                    <Button\n                                        size=\"lg\"\n                                        asChild>\n                                        <Link href=\"#\">\n                                            <Rocket className=\"relative size-4\" />\n                                            <span className=\"text-nowrap\">Start Building</span>\n                                        </Link>\n                                    </Button>\n                                </div>\n                            </div>\n                        </div>\n                        <div className=\"relative mt-16\">\n                            <div\n                                aria-hidden\n                                className=\"bg-linear-to-b to-background absolute inset-0 z-10 from-transparent from-35%\"\n                            />\n                            <div className=\"relative mx-auto max-w-6xl overflow-hidden px-4\">\n                                <Image\n                                    className=\"z-2 border-border/25 relative hidden rounded-2xl border dark:block\"\n                                    src=\"/music.png\"\n                                    alt=\"app screen\"\n                                    width={2796}\n                                    height={2008}\n                                />\n                                <Image\n                                    className=\"z-2 border-border/25 relative rounded-2xl border dark:hidden\"\n                                    src=\"/music-light.png\"\n                                    alt=\"app screen\"\n                                    width={2796}\n                                    height={2008}\n                                />\n                            </div>\n                        </div>\n                    </div>\n                </section>\n                <section className=\"bg-background relative z-10 pb-16\">\n                    <div className=\"m-auto max-w-5xl px-6\">\n                        <h2 className=\"text-center text-lg font-medium\">Your favorite companies are our partners.</h2>\n                        <div className=\"mx-auto mt-12 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12\">\n                            <img\n                                className=\"h-5 w-fit dark:invert\"\n                                src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/nvidia.svg\"\n                                alt=\"Nvidia Logo\"\n                                height=\"20\"\n                                width=\"auto\"\n                            />\n                            <img\n                                className=\"h-4 w-fit dark:invert\"\n                                src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/stripe.svg\"\n                                alt=\"Stripe Logo\"\n                                height=\"16\"\n                                width=\"auto\"\n                            />\n                            <img\n                                className=\"h-4 w-fit dark:invert\"\n                                src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/github.svg\"\n                                alt=\"GitHub Logo\"\n                                height=\"16\"\n                                width=\"auto\"\n                            />\n                            <img\n                                className=\"h-5 w-fit dark:invert\"\n                                src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/nike.svg\"\n                                alt=\"Nike Logo\"\n                                height=\"20\"\n                                width=\"auto\"\n                            />\n                            <img\n                                className=\"h-4 w-fit dark:invert\"\n                                src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/laravel.svg\"\n                                alt=\"Laravel Logo\"\n                                height=\"16\"\n                                width=\"auto\"\n                            />\n                            <img\n                                className=\"h-7 w-fit dark:invert\"\n                                src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/supabase.svg\"\n                                alt=\"Supabase Logo\"\n                                height=\"28\"\n                                width=\"auto\"\n                            />\n                            <img\n                                className=\"h-5 w-fit dark:invert\"\n                                src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/lemonsqueezy.svg\"\n                                alt=\"Lemon Squeezy Logo\"\n                                height=\"20\"\n                                width=\"auto\"\n                            />\n                            <img\n                                className=\"h-6 w-fit dark:invert\"\n                                src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/anthropic.svg\"\n                                alt=\"Anthropic Logo\"\n                                height=\"24\"\n                                width=\"auto\"\n                            />\n                            <img\n                                className=\"h-4 w-fit dark:invert\"\n                                src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/tailwindcss.svg\"\n                                alt=\"Tailwind CSS Logo\"\n                                height=\"16\"\n                                width=\"auto\"\n                            />\n                            <img\n                                className=\"h-5 w-fit dark:invert\"\n                                src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/vercel.svg\"\n                                alt=\"Vercel Logo\"\n                                height=\"20\"\n                                width=\"auto\"\n                            />\n                            <img\n                                className=\"h-5 w-fit dark:invert\"\n                                src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/zapier.svg\"\n                                alt=\"Zapier Logo\"\n                                height=\"20\"\n                                width=\"auto\"\n                            />\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"
    }
  ]
}