{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-section-4",
  "type": "registry:block",
  "title": "Hero Section 4",
  "description": "Split hero with a bold headline, abstract artwork and an infinite logo slider.",
  "registryDependencies": [
    "button",
    "https://motion-primitives.com/c/infinite-slider.json",
    "https://motion-primitives.com/c/progressive-blur.json"
  ],
  "files": [
    {
      "path": "app/preview/hero-section/four/page.tsx",
      "content": "import React from 'react'\nimport Link from 'next/link'\nimport { Button } from '@/components/ui/button'\nimport Image from 'next/image'\nimport { HeroHeader } from '@/components/hero8-header'\nimport { InfiniteSlider } from '@/components/motion-primitives/infinite-slider'\nimport { ProgressiveBlur } from '@/components/motion-primitives/progressive-blur'\n\nexport default function HeroSection() {\n    return (\n        <>\n            <HeroHeader />\n            <main className=\"overflow-x-hidden\">\n                <section>\n                    <div className=\"pb-24 pt-12 md:pb-32 lg:pb-56 lg:pt-44\">\n                        <div className=\"relative mx-auto flex max-w-6xl flex-col px-6 lg:block\">\n                            <div className=\"mx-auto max-w-lg text-center lg:ml-0 lg:w-1/2 lg:text-left\">\n                                <h1 className=\"mt-8 max-w-2xl text-balance text-5xl font-medium md:text-6xl lg:mt-16 xl:text-7xl\">Ship faster with Lyra</h1>\n                                <p className=\"mt-8 max-w-2xl text-pretty text-lg\">Highly customizable components for building modern websites and applications that look and feel the way you mean it.</p>\n\n                                <div className=\"mt-12 flex flex-col items-center justify-center gap-2 sm:flex-row lg:justify-start\">\n                                    <Button\n                                        asChild\n                                        size=\"lg\"\n                                        className=\"px-5 text-base\">\n                                        <Link href=\"#link\">\n                                            <span className=\"text-nowrap\">Start Building</span>\n                                        </Link>\n                                    </Button>\n                                    <Button\n                                        key={2}\n                                        asChild\n                                        size=\"lg\"\n                                        variant=\"ghost\"\n                                        className=\"px-5 text-base\">\n                                        <Link href=\"#link\">\n                                            <span className=\"text-nowrap\">Request a demo</span>\n                                        </Link>\n                                    </Button>\n                                </div>\n                            </div>\n                            <Image\n                                className=\"-z-10 order-first ml-auto h-56 w-full object-cover invert sm:h-96 lg:absolute lg:inset-0 lg:-right-20 lg:-top-96 lg:order-last lg:h-max lg:w-2/3 lg:object-contain dark:mix-blend-lighten dark:invert-0\"\n                                src=\"/images/abstract-bg.jpg\"\n                                alt=\"Abstract Object\"\n                                height=\"2400\"\n                                width=\"1800\"\n                            />\n                        </div>\n                    </div>\n                </section>\n                <section className=\"bg-background pb-16 md:pb-32\">\n                    <div className=\"group relative m-auto max-w-6xl px-6\">\n                        <div className=\"flex flex-col items-center md:flex-row\">\n                            <div className=\"md:max-w-44 md:border-r md:pr-6\">\n                                <p className=\"text-end text-sm\">Powering the best teams</p>\n                            </div>\n                            <div className=\"relative py-6 md:w-[calc(100%-11rem)]\">\n                                <InfiniteSlider\n                                    speedOnHover={20}\n                                    speed={40}\n                                    gap={112}>\n                                    <div className=\"flex\">\n                                        <img\n                                            className=\"mx-auto 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                                    </div>\n\n                                    <div className=\"flex\">\n                                        <img\n                                            className=\"mx-auto 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                                    </div>\n                                    <div className=\"flex\">\n                                        <img\n                                            className=\"mx-auto 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                                    </div>\n                                    <div className=\"flex\">\n                                        <img\n                                            className=\"mx-auto 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                                    </div>\n                                    <div className=\"flex\">\n                                        <img\n                                            className=\"mx-auto 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                                    </div>\n                                    <div className=\"flex\">\n                                        <img\n                                            className=\"mx-auto 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                                    </div>\n                                    <div className=\"flex\">\n                                        <img\n                                            className=\"mx-auto 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                                    </div>\n\n                                    <div className=\"flex\">\n                                        <img\n                                            className=\"mx-auto 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                                    </div>\n                                </InfiniteSlider>\n\n                                <div className=\"bg-linear-to-r from-background absolute inset-y-0 left-0 w-20\"></div>\n                                <div className=\"bg-linear-to-l from-background absolute inset-y-0 right-0 w-20\"></div>\n                                <ProgressiveBlur\n                                    className=\"pointer-events-none absolute left-0 top-0 h-full w-20\"\n                                    direction=\"left\"\n                                    blurIntensity={1}\n                                />\n                                <ProgressiveBlur\n                                    className=\"pointer-events-none absolute right-0 top-0 h-full w-20\"\n                                    direction=\"right\"\n                                    blurIntensity={1}\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"
    },
    {
      "path": "components/hero8-header.tsx",
      "content": "'use client'\nimport Link from 'next/link'\nimport { Logo } from './logo'\nimport { Menu, X } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport React from 'react'\n\nconst menuItems = [\n    { name: 'Features', href: '#link' },\n    { name: 'Solution', href: '#link' },\n    { name: 'Pricing', href: '#link' },\n    { name: 'About', href: '#link' },\n]\n\nexport const HeroHeader = () => {\n    const [menuState, setMenuState] = React.useState(false)\n    return (\n        <header>\n            <nav\n                data-state={menuState && 'active'}\n                className=\"bg-background/50 fixed z-20 w-full border-b backdrop-blur-3xl\">\n                <div className=\"mx-auto max-w-6xl px-6 transition-all duration-300\">\n                    <div className=\"relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4\">\n                        <div className=\"flex w-full items-center justify-between gap-12 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\n                            <div className=\"hidden lg:block\">\n                                <ul className=\"flex gap-8 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                        </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:hidden\">\n                                <ul className=\"space-y-6 text-base\">\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                            <div className=\"flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit\">\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>Sign Up</span>\n                                    </Link>\n                                </Button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </nav>\n        </header>\n    )\n}\n",
      "type": "registry:component"
    }
  ]
}