{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-section-9",
  "type": "registry:block",
  "title": "Hero Section 9",
  "description": "Hero with a customer logo strip and a dashboard screenshot below the fold.",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "app/preview/hero-section/nine/page.tsx",
      "content": "'use client'\nimport { Logo } from '@/components/logo'\nimport Link from 'next/link'\nimport { useState } from 'react'\nimport { Button } from '@/components/ui/button'\nimport { Menu, X } from 'lucide-react'\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] = 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                                    <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                <div\n                    aria-hidden\n                    className=\"z-2 absolute inset-0 isolate hidden opacity-50 contain-strict lg:block\">\n                    <div className=\"w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]\" />\n                    <div className=\"h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]\" />\n                    <div className=\"h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]\" />\n                </div>\n\n                <section className=\"overflow-hidden bg-white dark:bg-transparent\">\n                    <div className=\"relative mx-auto max-w-5xl px-6 py-28 lg:py-24\">\n                        <div className=\"relative z-10 mx-auto max-w-2xl text-center\">\n                            <h1 className=\"text-balance text-4xl font-semibold md:text-5xl lg:text-6xl\">Modern Software testing reimagined</h1>\n                            <p className=\"mx-auto my-8 max-w-2xl text-xl\">Catch regressions before your users do with end-to-end tests that run on every commit.</p>\n\n                            <Button\n                                asChild\n                                size=\"lg\">\n                                <Link href=\"#\">\n                                    <span className=\"btn-label\">Start Building</span>\n                                </Link>\n                            </Button>\n                        </div>\n                    </div>\n\n                    <div className=\"mx-auto -mt-16 max-w-7xl\">\n                        <div className=\"perspective-distant -mr-16 pl-16 lg:-mr-56 lg:pl-56\">\n                            <div className=\"[transform:rotateX(20deg);]\">\n                                <div className=\"lg:h-176 relative skew-x-[.36rad]\">\n                                    <div\n                                        aria-hidden\n                                        className=\"bg-linear-to-b from-background to-background z-1 absolute -inset-16 via-transparent sm:-inset-32\"\n                                    />\n                                    <div\n                                        aria-hidden\n                                        className=\"bg-linear-to-r from-background to-background z-1 absolute -inset-16 bg-white/50 via-transparent sm:-inset-32 dark:bg-transparent\"\n                                    />\n\n                                    <div\n                                        aria-hidden\n                                        className=\"absolute -inset-16 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px] [--color-border:var(--color-zinc-400)] sm:-inset-32 dark:[--color-border:color-mix(in_oklab,var(--color-white)_20%,transparent)]\"\n                                    />\n                                    <div\n                                        aria-hidden\n                                        className=\"from-background z-11 absolute inset-0 bg-gradient-to-l\"\n                                    />\n                                    <div\n                                        aria-hidden\n                                        className=\"z-2 absolute inset-0 size-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,transparent_40%,var(--color-background)_100%)]\"\n                                    />\n                                    <div\n                                        aria-hidden\n                                        className=\"z-2 absolute inset-0 size-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,transparent_40%,var(--color-background)_100%)]\"\n                                    />\n\n                                    <Image\n                                        className=\"rounded-(--radius) z-1 relative border dark:hidden\"\n                                        src=\"/card.png\"\n                                        alt=\"Lyra app screenshot\"\n                                        width={2880}\n                                        height={2074}\n                                    />\n                                    <Image\n                                        className=\"rounded-(--radius) z-1 relative hidden border dark:block\"\n                                        src=\"/dark-card.webp\"\n                                        alt=\"Lyra app screenshot\"\n                                        width={2880}\n                                        height={2074}\n                                    />\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </section>\n                <section className=\"bg-background relative z-10 py-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-20 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"
    }
  ]
}