{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-section-3",
  "type": "registry:block",
  "title": "Hero Section 3",
  "description": "Minimal hero with an email capture form, animated copy and a customer logo cloud.",
  "registryDependencies": [
    "button",
    "https://motion-primitives.com/c/text-effect.json",
    "https://motion-primitives.com/c/animated-group.json"
  ],
  "files": [
    {
      "path": "app/preview/hero-section/three/page.tsx",
      "content": "import React from 'react'\nimport { Mail, SendHorizonal } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { TextEffect } from '@/components/motion-primitives/text-effect'\nimport { AnimatedGroup } from '@/components/motion-primitives/animated-group'\nimport { HeroHeader } from '@/components/hero5-header'\nimport { LogoCloud } from '@/components/logo-cloud'\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\n            <main className=\"overflow-hidden [--color-primary-foreground:var(--color-white)] [--color-primary:var(--color-green-600)]\">\n                <section>\n                    <div className=\"relative mx-auto max-w-6xl px-6 pb-20 pt-32 lg:pt-48\">\n                        <div className=\"relative z-10 mx-auto max-w-4xl text-center\">\n                            <TextEffect\n                                preset=\"fade-in-blur\"\n                                speedSegment={0.3}\n                                as=\"h1\"\n                                className=\"text-balance text-5xl font-medium md:text-6xl\">\n                                Healthier daily routine\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-6 max-w-2xl text-pretty text-lg\">\n                                Tailwindcss 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\">\n                                <form\n                                    action=\"\"\n                                    className=\"mx-auto max-w-sm\">\n                                    <div className=\"bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.5rem)] border pr-2 shadow shadow-zinc-950/5 has-[input:focus]:ring-2\">\n                                        <Mail className=\"pointer-events-none absolute inset-y-0 left-4 my-auto size-4\" />\n\n                                        <input\n                                            placeholder=\"Your mail address\"\n                                            className=\"h-12 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                                                size=\"sm\"\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                                <div\n                                    aria-hidden\n                                    className=\"bg-radial from-primary/50 dark:from-primary/25 relative mx-auto mt-32 max-w-2xl to-transparent to-55% text-left\">\n                                    <div className=\"bg-background border-border/50 absolute inset-0 mx-auto w-80 -translate-x-3 -translate-y-12 rounded-[2rem] border p-2 [mask-image:linear-gradient(to_bottom,#000_50%,transparent_90%)] sm:-translate-x-6\">\n                                        <div className=\"relative h-96 overflow-hidden rounded-[1.5rem] border p-2 pb-12 before:absolute before:inset-0 before:bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_6px)] before:opacity-50\"></div>\n                                    </div>\n                                    <div className=\"bg-muted dark:bg-background/50 border-border/50 mx-auto w-80 translate-x-4 rounded-[2rem] border p-2 backdrop-blur-3xl [mask-image:linear-gradient(to_bottom,#000_50%,transparent_90%)] sm:translate-x-8\">\n                                        <div className=\"bg-background space-y-2 overflow-hidden rounded-[1.5rem] border p-2 shadow-xl dark:bg-white/5 dark:shadow-black dark:backdrop-blur-3xl\">\n                                            <AppComponent />\n\n                                            <div className=\"bg-muted rounded-[1rem] p-4 pb-16 dark:bg-white/5\"></div>\n                                        </div>\n                                    </div>\n                                    <div className=\"absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] mix-blend-overlay [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] dark:opacity-5\"></div>\n                                </div>\n                            </AnimatedGroup>\n                        </div>\n                    </div>\n                </section>\n                <LogoCloud />\n            </main>\n        </>\n    )\n}\n\nconst AppComponent = () => {\n    return (\n        <div className=\"relative space-y-3 rounded-[1rem] bg-white/5 p-4\">\n            <div className=\"flex items-center gap-1.5 text-orange-400\">\n                <svg\n                    className=\"size-5\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"1em\"\n                    height=\"1em\"\n                    viewBox=\"0 0 32 32\">\n                    <g fill=\"none\">\n                        <path\n                            fill=\"#ff6723\"\n                            d=\"M26 19.34c0 6.1-5.05 11.005-11.15 10.641c-6.269-.374-10.56-6.403-9.752-12.705c.489-3.833 2.286-7.12 4.242-9.67c.34-.445.689 3.136 1.038 2.742c.35-.405 3.594-6.019 4.722-7.991a.694.694 0 0 1 1.028-.213C18.394 3.854 26 10.277 26 19.34\"></path>\n                        <path\n                            fill=\"#ffb02e\"\n                            d=\"M23 21.851c0 4.042-3.519 7.291-7.799 7.144c-4.62-.156-7.788-4.384-7.11-8.739C9.07 14.012 15.48 10 15.48 10S23 14.707 23 21.851\"></path>\n                    </g>\n                </svg>\n                <div className=\"text-sm font-medium\">Steps</div>\n            </div>\n            <div className=\"space-y-3\">\n                <div className=\"text-foreground border-b border-white/10 pb-3 text-sm font-medium\">This year, you're walking more on average than you did in 2023.</div>\n                <div className=\"space-y-3\">\n                    <div className=\"space-y-1\">\n                        <div className=\"space-x-1\">\n                            <span className=\"text-foreground align-baseline text-xl font-medium\">8,081</span>\n                            <span className=\"text-muted-foreground text-xs\">Steps/day</span>\n                        </div>\n                        <div className=\"flex h-5 items-center rounded bg-gradient-to-l from-emerald-400 to-indigo-600 px-2 text-xs text-white\">2024</div>\n                    </div>\n                    <div className=\"space-y-1\">\n                        <div className=\"space-x-1\">\n                            <span className=\"text-foreground align-baseline text-xl font-medium\">5,412</span>\n                            <span className=\"text-muted-foreground text-xs\">Steps/day</span>\n                        </div>\n                        <div className=\"text-foreground bg-muted flex h-5 w-2/3 items-center rounded px-2 text-xs dark:bg-white/20\">2023</div>\n                    </div>\n                </div>\n            </div>\n        </div>\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"
    },
    {
      "path": "components/logo-cloud.tsx",
      "content": "import { InfiniteSlider } from '@/components/motion-primitives/infinite-slider'\nimport { ProgressiveBlur } from './motion-primitives/progressive-blur'\n\nexport const LogoCloud = () => {\n    return (\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=\"inline 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    )\n}\n",
      "type": "registry:component"
    }
  ]
}