{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mist-hero-section-4",
  "type": "registry:block",
  "title": "Hero Section Four",
  "description": "Mist Kit Hero Section block, variant four",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "../../packages/mist-kit/blocks/hero-section/four/index.tsx",
      "content": "import React from 'react'\nimport Link from 'next/link'\nimport { Button } from '@/components/ui/button'\nimport { HeroHeader } from './header'\nimport { ArrowUp, Globe, Plus, Sparkle } from 'lucide-react'\nimport Image from 'next/image'\n\nexport default function HeroSection() {\n    return (\n        <>\n            <HeroHeader />\n            <main className=\"[--color-primary:var(--color-indigo-500)]\">\n                <section className=\"overflow-hidden\">\n                    <div className=\"py-20 md:py-36\">\n                        <div className=\"relative z-10 mx-auto max-w-5xl px-6\">\n                            <div className=\"relative text-center\">\n                                <h1 className=\"mx-auto max-w-2xl text-balance text-4xl font-bold md:text-5xl\">Build Stunning Websites That Drive Results</h1>\n\n                                <p className=\"text-muted-foreground mx-auto my-6 max-w-2xl text-balance text-xl\">Craft. Build. Ship Modern Websites With AI Support.</p>\n\n                                <div className=\"flex flex-col items-center justify-center gap-3 *:w-full sm:flex-row sm:*:w-auto\">\n                                    <Button\n                                        asChild\n                                        size=\"lg\">\n                                        <Link href=\"#link\">\n                                            <span className=\"text-nowrap\">Get Started</span>\n                                        </Link>\n                                    </Button>\n                                    <Button\n                                        key={2}\n                                        asChild\n                                        size=\"lg\"\n                                        variant=\"outline\">\n                                        <Link href=\"#link\">\n                                            <span className=\"text-nowrap\">View Demo</span>\n                                        </Link>\n                                    </Button>\n                                </div>\n                            </div>\n\n                            <div className=\"relative mx-auto mt-12 max-w-5xl overflow-hidden rounded-3xl bg-black/10 md:mt-20\">\n                                <img\n                                    src=\"https://images.unsplash.com/photo-1637055972140-64608c1abe53?q=80&w=2942&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                    alt=\"\"\n                                    className=\"absolute inset-0 size-full object-cover\"\n                                />\n\n                                <div className=\"bg-background rounded-(--radius) relative m-4 overflow-hidden border border-transparent shadow-xl shadow-black/15 ring-1 ring-black/10 sm:m-8 md:m-12\">\n                                    <Image\n                                        src=\"/mist/Vengeance UI-2.png\"\n                                        alt=\"app screen\"\n                                        width=\"2880\"\n                                        height=\"1842\"\n                                        className=\"object-top-left size-full object-cover\"\n                                    />\n                                </div>\n                            </div>\n\n                            <div className=\"mt-8\">\n                                <p className=\"text-muted-foreground text-center\">Trusted by teams at :</p>\n                                <div className=\"mt-4 flex items-center justify-center gap-12\">\n                                    <div className=\"flex\">\n                                        <img\n                                            className=\"mx-auto h-5 w-fit\"\n                                            src=\"https://html.tailus.io/blocks/customers/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\"\n                                            src=\"https://html.tailus.io/blocks/customers/column.svg\"\n                                            alt=\"Column Logo\"\n                                            height=\"16\"\n                                            width=\"auto\"\n                                        />\n                                    </div>\n                                    <div className=\"flex\">\n                                        <img\n                                            className=\"mx-auto h-4 w-fit\"\n                                            src=\"https://html.tailus.io/blocks/customers/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\"\n                                            src=\"https://html.tailus.io/blocks/customers/nike.svg\"\n                                            alt=\"Nike Logo\"\n                                            height=\"20\"\n                                            width=\"auto\"\n                                        />\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </section>\n            </main>\n        </>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/hero-section-four.tsx"
    },
    {
      "path": "../../packages/mist-kit/blocks/hero-section/four/header.tsx",
      "content": "'use client'\nimport Link from 'next/link'\nimport { Logo } from '@/components/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: '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={cn('fixed z-20 w-full transition-all duration-300', isScrolled && 'bg-background/75 border-b border-black/5 backdrop-blur-lg')}>\n                <div className=\"mx-auto max-w-5xl px-6\">\n                    <div className=\"relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0\">\n                        <div className=\"flex w-full justify-between gap-6 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=\"m-auto hidden size-fit lg:block\">\n                                <ul className=\"flex gap-1\">\n                                    {menuItems.map((item, index) => (\n                                        <li key={index}>\n                                            <Button\n                                                asChild\n                                                variant=\"ghost\"\n                                                size=\"sm\">\n                                                <Link\n                                                    href={item.href}\n                                                    className=\"text-base\">\n                                                    <span>{item.name}</span>\n                                                </Link>\n                                            </Button>\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=\"ghost\"\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",
      "target": "components/header.tsx"
    },
    {
      "path": "../../packages/core/src/components/logo.tsx",
      "content": "import { cn } from '@/lib/utils'\n\nexport const Logo = ({ className, uniColor }: { className?: string; uniColor?: boolean }) => {\n    return (\n        <svg\n            viewBox=\"0 0 78 18\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={cn('text-foreground h-5 w-auto', className)}>\n            <path\n                d=\"M3 0H5V18H3V0ZM13 0H15V18H13V0ZM18 3V5H0V3H18ZM0 15V13H18V15H0Z\"\n                fill={uniColor ? 'currentColor' : 'url(#logo-gradient)'}\n            />\n            <path\n                d=\"M27.06 7.054V12.239C27.06 12.5903 27.1393 12.8453 27.298 13.004C27.468 13.1513 27.7513 13.225 28.148 13.225H29.338V14.84H27.808C26.9353 14.84 26.2667 14.636 25.802 14.228C25.3373 13.82 25.105 13.157 25.105 12.239V7.054H24V5.473H25.105V3.144H27.06V5.473H29.338V7.054H27.06ZM30.4782 10.114C30.4782 9.17333 30.6709 8.34033 31.0562 7.615C31.4529 6.88967 31.9855 6.32867 32.6542 5.932C33.3342 5.524 34.0822 5.32 34.8982 5.32C35.6349 5.32 36.2752 5.46733 36.8192 5.762C37.3745 6.04533 37.8165 6.40233 38.1452 6.833V5.473H40.1002V14.84H38.1452V13.446C37.8165 13.888 37.3689 14.2563 36.8022 14.551C36.2355 14.8457 35.5895 14.993 34.8642 14.993C34.0595 14.993 33.3229 14.789 32.6542 14.381C31.9855 13.9617 31.4529 13.3837 31.0562 12.647C30.6709 11.899 30.4782 11.0547 30.4782 10.114ZM38.1452 10.148C38.1452 9.502 38.0092 8.941 37.7372 8.465C37.4765 7.989 37.1309 7.62633 36.7002 7.377C36.2695 7.12767 35.8049 7.003 35.3062 7.003C34.8075 7.003 34.3429 7.12767 33.9122 7.377C33.4815 7.615 33.1302 7.972 32.8582 8.448C32.5975 8.91267 32.4672 9.468 32.4672 10.114C32.4672 10.76 32.5975 11.3267 32.8582 11.814C33.1302 12.3013 33.4815 12.6753 33.9122 12.936C34.3542 13.1853 34.8189 13.31 35.3062 13.31C35.8049 13.31 36.2695 13.1853 36.7002 12.936C37.1309 12.6867 37.4765 12.324 37.7372 11.848C38.0092 11.3607 38.1452 10.794 38.1452 10.148ZM43.6317 4.232C43.2803 4.232 42.9857 4.113 42.7477 3.875C42.5097 3.637 42.3907 3.34233 42.3907 2.991C42.3907 2.63967 42.5097 2.345 42.7477 2.107C42.9857 1.869 43.2803 1.75 43.6317 1.75C43.9717 1.75 44.2607 1.869 44.4987 2.107C44.7367 2.345 44.8557 2.63967 44.8557 2.991C44.8557 3.34233 44.7367 3.637 44.4987 3.875C44.2607 4.113 43.9717 4.232 43.6317 4.232ZM44.5837 5.473V14.84H42.6457V5.473H44.5837ZM49.0661 2.26V14.84H47.1281V2.26H49.0661ZM50.9645 10.114C50.9645 9.17333 51.1572 8.34033 51.5425 7.615C51.9392 6.88967 52.4719 6.32867 53.1405 5.932C53.8205 5.524 54.5685 5.32 55.3845 5.32C56.1212 5.32 56.7615 5.46733 57.3055 5.762C57.8609 6.04533 58.3029 6.40233 58.6315 6.833V5.473H60.5865V14.84H58.6315V13.446C58.3029 13.888 57.8552 14.2563 57.2885 14.551C56.7219 14.8457 56.0759 14.993 55.3505 14.993C54.5459 14.993 53.8092 14.789 53.1405 14.381C52.4719 13.9617 51.9392 13.3837 51.5425 12.647C51.1572 11.899 50.9645 11.0547 50.9645 10.114ZM58.6315 10.148C58.6315 9.502 58.4955 8.941 58.2235 8.465C57.9629 7.989 57.6172 7.62633 57.1865 7.377C56.7559 7.12767 56.2912 7.003 55.7925 7.003C55.2939 7.003 54.8292 7.12767 54.3985 7.377C53.9679 7.615 53.6165 7.972 53.3445 8.448C53.0839 8.91267 52.9535 9.468 52.9535 10.114C52.9535 10.76 53.0839 11.3267 53.3445 11.814C53.6165 12.3013 53.9679 12.6753 54.3985 12.936C54.8405 13.1853 55.3052 13.31 55.7925 13.31C56.2912 13.31 56.7559 13.1853 57.1865 12.936C57.6172 12.6867 57.9629 12.324 58.2235 11.848C58.4955 11.3607 58.6315 10.794 58.6315 10.148ZM65.07 6.833C65.3533 6.357 65.7273 5.98867 66.192 5.728C66.668 5.456 67.229 5.32 67.875 5.32V7.326H67.382C66.6227 7.326 66.0447 7.51867 65.648 7.904C65.2627 8.28933 65.07 8.958 65.07 9.91V14.84H63.132V5.473H65.07V6.833ZM73.3624 10.165L77.6804 14.84H75.0624L71.5944 10.811V14.84H69.6564V2.26H71.5944V9.57L74.9944 5.473H77.6804L73.3624 10.165Z\"\n                fill=\"currentColor\"\n            />\n            <defs>\n                <linearGradient\n                    id=\"logo-gradient\"\n                    x1=\"10\"\n                    y1=\"0\"\n                    x2=\"10\"\n                    y2=\"20\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop stopColor=\"#9B99FE\" />\n                    <stop\n                        offset=\"1\"\n                        stopColor=\"#2BC8B7\"\n                    />\n                </linearGradient>\n            </defs>\n        </svg>\n    )\n}\n\nexport const LogoIcon = ({ className, uniColor }: { className?: string; uniColor?: boolean }) => {\n    return (\n        <svg\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 18 18\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={cn('size-5', className)}>\n            <path\n                d=\"M3 0H5V18H3V0ZM13 0H15V18H13V0ZM18 3V5H0V3H18ZM0 15V13H18V15H0Z\"\n                fill={uniColor ? 'currentColor' : 'url(#logo-gradient)'}\n            />\n            <defs>\n                <linearGradient\n                    id=\"logo-gradient\"\n                    x1=\"10\"\n                    y1=\"0\"\n                    x2=\"10\"\n                    y2=\"20\"\n                    gradientUnits=\"userSpaceOnUse\">\n                    <stop stopColor=\"#9B99FE\" />\n                    <stop\n                        offset=\"1\"\n                        stopColor=\"#2BC8B7\"\n                    />\n                </linearGradient>\n            </defs>\n        </svg>\n    )\n}\n\nexport const LogoStroke = ({ className }: { className?: string }) => {\n    return (\n        <svg\n            className={cn('size-7 w-7', className)}\n            viewBox=\"0 0 71 25\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M61.25 1.625L70.75 1.5625C70.75 4.77083 70.25 7.79167 69.25 10.625C68.2917 13.4583 66.8958 15.9583 65.0625 18.125C63.2708 20.25 61.125 21.9375 58.625 23.1875C56.1667 24.3958 53.4583 25 50.5 25C46.875 25 43.6667 24.2708 40.875 22.8125C38.125 21.3542 35.125 19.2083 31.875 16.375C29.75 14.4167 27.7917 12.8958 26 11.8125C24.2083 10.7292 22.2708 10.1875 20.1875 10.1875C18.0625 10.1875 16.25 10.7083 14.75 11.75C13.25 12.75 12.0833 14.1875 11.25 16.0625C10.4583 17.9375 10.0625 20.1875 10.0625 22.8125L0 22.9375C0 19.6875 0.479167 16.6667 1.4375 13.875C2.4375 11.0833 3.83333 8.64583 5.625 6.5625C7.41667 4.47917 9.54167 2.875 12 1.75C14.5 0.583333 17.2292 0 20.1875 0C23.8542 0 27.1042 0.770833 29.9375 2.3125C32.8125 3.85417 35.7708 5.97917 38.8125 8.6875C41.1042 10.7708 43.1042 12.3333 44.8125 13.375C46.5625 14.375 48.4583 14.875 50.5 14.875C52.6667 14.875 54.5417 14.3125 56.125 13.1875C57.75 12.0625 59 10.5 59.875 8.5C60.7917 6.5 61.25 4.20833 61.25 1.625Z\"\n                fill=\"none\"\n                strokeWidth={0.5}\n                stroke=\"currentColor\"\n            />\n        </svg>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/logo.tsx"
    }
  ]
}