{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-section-1",
  "type": "registry:block",
  "title": "Hero Section 1",
  "description": "Dark hero with an animated headline, announcement pill, dual CTAs, a product screenshot and a logo strip.",
  "registryDependencies": [
    "button",
    "https://motion-primitives.com/c/text-effect.json",
    "https://motion-primitives.com/c/animated-group.json"
  ],
  "files": [
    {
      "path": "app/preview/hero-section/one/page.tsx",
      "content": "import React from 'react'\nimport Link from 'next/link'\nimport { ArrowRight, ChevronRight } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport Image from 'next/image'\nimport { TextEffect } from '@/components/motion-primitives/text-effect'\nimport { AnimatedGroup } from '@/components/motion-primitives/animated-group'\nimport { HeroHeader } from '@/components/hero5-header'\n\nconst transitionVariants = {\n    item: {\n        hidden: {\n            opacity: 0,\n            filter: 'blur(12px)',\n            y: 12,\n        },\n        visible: {\n            opacity: 1,\n            filter: 'blur(0px)',\n            y: 0,\n            transition: {\n                type: 'spring',\n                bounce: 0.3,\n                duration: 1.5,\n                // A spring overshoots below 0, and negative blur() is invalid.\n                filter: { type: 'tween', ease: 'easeOut', duration: 1 },\n            },\n        },\n    },\n}\n\nexport default function HeroSection() {\n    return (\n        <>\n            <HeroHeader />\n            <main className=\"overflow-hidden\">\n                <div\n                    aria-hidden\n                    className=\"absolute inset-0 isolate hidden opacity-65 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                <section>\n                    <div className=\"relative pt-24 md:pt-36\">\n                        <AnimatedGroup\n                            variants={{\n                                container: {\n                                    visible: {\n                                        transition: {\n                                            delayChildren: 1,\n                                        },\n                                    },\n                                },\n                                item: {\n                                    hidden: {\n                                        opacity: 0,\n                                        y: 20,\n                                    },\n                                    visible: {\n                                        opacity: 1,\n                                        y: 0,\n                                        transition: {\n                                            type: 'spring',\n                                            bounce: 0.3,\n                                            duration: 2,\n                                        },\n                                    },\n                                },\n                            }}\n                            className=\"absolute inset-0 -z-20\">\n                            <Image\n                                src=\"/images/night-background.jpg\"\n                                alt=\"background\"\n                                className=\"absolute inset-x-0 top-56 -z-20 hidden lg:top-32 dark:block\"\n                                width=\"2400\"\n                                height=\"3000\"\n                            />\n                        </AnimatedGroup>\n                        <div className=\"absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]\"></div>\n                        <div className=\"mx-auto max-w-7xl px-6\">\n                            <div className=\"text-center sm:mx-auto lg:mr-auto lg:mt-0\">\n                                <AnimatedGroup variants={transitionVariants}>\n                                    <Link\n                                        href=\"#link\"\n                                        className=\"hover:bg-background dark:hover:border-t-border bg-muted group mx-auto flex w-fit items-center gap-4 rounded-full border p-1 pl-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 dark:border-t-white/5 dark:shadow-zinc-950\">\n                                        <span className=\"text-foreground text-sm\">Introducing Support for AI Models</span>\n                                        <span className=\"dark:border-background block h-4 w-0.5 border-l bg-white dark:bg-zinc-700\"></span>\n\n                                        <div className=\"bg-background group-hover:bg-muted size-6 overflow-hidden rounded-full duration-500\">\n                                            <div className=\"flex w-12 -translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0\">\n                                                <span className=\"flex size-6\">\n                                                    <ArrowRight className=\"m-auto size-3\" />\n                                                </span>\n                                                <span className=\"flex size-6\">\n                                                    <ArrowRight className=\"m-auto size-3\" />\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </Link>\n                                </AnimatedGroup>\n\n                                <TextEffect\n                                    preset=\"fade-in-blur\"\n                                    speedSegment={0.3}\n                                    as=\"h1\"\n                                    className=\"mt-8 text-balance text-6xl md:text-7xl lg:mt-16 xl:text-[5.25rem]\">\n                                    Modern Solutions for Customer Engagement\n                                </TextEffect>\n                                <TextEffect\n                                    per=\"line\"\n                                    preset=\"fade-in-blur\"\n                                    speedSegment={0.3}\n                                    delay={0.5}\n                                    as=\"p\"\n                                    className=\"mx-auto mt-8 max-w-2xl text-balance text-lg\">\n                                    Highly customizable components for building modern websites and applications that look and feel the way you mean it.\n                                </TextEffect>\n\n                                <AnimatedGroup\n                                    variants={{\n                                        container: {\n                                            visible: {\n                                                transition: {\n                                                    staggerChildren: 0.05,\n                                                    delayChildren: 0.75,\n                                                },\n                                            },\n                                        },\n                                        ...transitionVariants,\n                                    }}\n                                    className=\"mt-12 flex flex-col items-center justify-center gap-2 md:flex-row\">\n                                    <div\n                                        key={1}\n                                        className=\"bg-foreground/10 rounded-[calc(var(--radius-xl)+0.125rem)] border p-0.5\">\n                                        <Button\n                                            asChild\n                                            size=\"lg\"\n                                            className=\"rounded-xl px-5 text-base\">\n                                            <Link href=\"#link\">\n                                                <span className=\"text-nowrap\">Start Building</span>\n                                            </Link>\n                                        </Button>\n                                    </div>\n                                    <Button\n                                        key={2}\n                                        asChild\n                                        size=\"lg\"\n                                        variant=\"ghost\"\n                                        className=\"h-10.5 rounded-xl px-5\">\n                                        <Link href=\"#link\">\n                                            <span className=\"text-nowrap\">Request a demo</span>\n                                        </Link>\n                                    </Button>\n                                </AnimatedGroup>\n                            </div>\n                        </div>\n\n                        <AnimatedGroup\n                            variants={{\n                                container: {\n                                    visible: {\n                                        transition: {\n                                            staggerChildren: 0.05,\n                                            delayChildren: 0.75,\n                                        },\n                                    },\n                                },\n                                ...transitionVariants,\n                            }}>\n                            <div className=\"relative -mr-56 mt-8 overflow-hidden px-2 sm:mr-0 sm:mt-12 md:mt-20\">\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=\"inset-shadow-2xs ring-background dark:inset-shadow-white/20 bg-background relative mx-auto max-w-6xl overflow-hidden rounded-2xl border p-4 shadow-lg shadow-zinc-950/15 ring-1\">\n                                    <Image\n                                        className=\"bg-background aspect-15/8 relative hidden rounded-2xl dark:block\"\n                                        src=\"/mail2.png\"\n                                        alt=\"app screen\"\n                                        width=\"2700\"\n                                        height=\"1440\"\n                                    />\n                                    <Image\n                                        className=\"z-2 border-border/25 aspect-15/8 relative rounded-2xl border dark:hidden\"\n                                        src=\"/mail2-light.png\"\n                                        alt=\"app screen\"\n                                        width=\"2700\"\n                                        height=\"1440\"\n                                    />\n                                </div>\n                            </div>\n                        </AnimatedGroup>\n                    </div>\n                </section>\n                <section className=\"bg-background pb-16 pt-16 md:pb-32\">\n                    <div className=\"group relative m-auto max-w-5xl px-6\">\n                        <div className=\"absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 duration-500 group-hover:scale-100 group-hover:opacity-100\">\n                            <Link\n                                href=\"/\"\n                                className=\"block text-sm duration-150 hover:opacity-75\">\n                                <span> Meet Our Customers</span>\n\n                                <ChevronRight className=\"ml-1 inline-block size-3\" />\n                            </Link>\n                        </div>\n                        <div className=\"group-hover:blur-xs mx-auto mt-12 grid max-w-2xl grid-cols-4 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14\">\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                        </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/hero5-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'\nimport { cn } from '@/lib/utils'\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    const [isScrolled, setIsScrolled] = React.useState(false)\n\n    React.useEffect(() => {\n        const handleScroll = () => {\n            setIsScrolled(window.scrollY > 50)\n        }\n        window.addEventListener('scroll', handleScroll)\n        return () => window.removeEventListener('scroll', handleScroll)\n    }, [])\n    return (\n        <header>\n            <nav\n                data-state={menuState && 'active'}\n                className=\"fixed z-20 w-full px-2\">\n                <div className={cn('mx-auto mt-2 max-w-6xl px-6 transition-all duration-300 lg:px-12', isScrolled && 'bg-background/50 max-w-4xl rounded-2xl border backdrop-blur-lg lg:px-5')}>\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 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=\"absolute inset-0 m-auto hidden size-fit 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\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                                    className={cn(isScrolled && 'lg:hidden')}>\n                                    <Link href=\"#\">\n                                        <span>Login</span>\n                                    </Link>\n                                </Button>\n                                <Button\n                                    asChild\n                                    size=\"sm\"\n                                    className={cn(isScrolled && 'lg:hidden')}>\n                                    <Link href=\"#\">\n                                        <span>Sign Up</span>\n                                    </Link>\n                                </Button>\n                                <Button\n                                    asChild\n                                    size=\"sm\"\n                                    className={cn(isScrolled ? 'lg:inline-flex' : 'hidden')}>\n                                    <Link href=\"#\">\n                                        <span>Get Started</span>\n                                    </Link>\n                                </Button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </nav>\n        </header>\n    )\n}\n",
      "type": "registry:component"
    }
  ]
}