{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "hero-five",
	"type": "registry:block",
	"description": "Hero section with app mockup image",
	"devDependencies": [
		"@lucide/svelte"
	],
	"registryDependencies": [
		"button",
		"./marquee.json",
		"./progressive-blur.json",
		"./svgs.json"
	],
	"files": [
		{
			"content": "<script>\n\timport { Marquee } from \"$COMPONENTS$/magic/marquee\";\n\timport { ProgressiveBlur } from \"$COMPONENTS$/magic/progressive-blur\";\n\timport Button from \"$COMPONENTS$/ui/button/button.svelte\";\n\n\t// You can store Hero Header Component in seperate file\n\t// I have used snippet for better readability\n\n\t// Hero Header Component\n\n\timport { cn } from \"$UTILS$\";\n\timport ChevronRight from \"@lucide/svelte/icons/chevron-right\";\n\timport Menu from \"@lucide/svelte/icons/menu\";\n\timport X from \"@lucide/svelte/icons/x\";\n\timport { scrollY } from \"svelte/reactivity/window\";\n\n\tlet menuItems = [\n\t\t{ name: \"Features\", href: \"#a\" },\n\t\t{ name: \"Solution\", href: \"#a\" },\n\t\t{ name: \"Pricing\", href: \"#a\" },\n\t\t{ name: \"About\", href: \"#a\" },\n\t];\n\n\tlet menuState = $state(false);\n\tlet isScrolled = $derived.by(() => {\n\t\tif (scrollY.current !== undefined && scrollY.current > 50) {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t});\n\n\timport {\n\t\tBeacon,\n\t\tBolt,\n\t\tCisco,\n\t\tClaude,\n\t\tFigma,\n\t\tFirebaseFull,\n\t\tHulu,\n\t\tSpotify,\n\t\tSupabaseFull,\n\t\tVercelFull,\n\t} from \"$LIB$/svgs\";\n</script>\n\n<!-- Scroll below to see the snippet code  -->\n{@render heroHeader()}\n\n<main class=\"overflow-x-hidden\">\n\t<section>\n\t\t<div class=\"py-24 md:pb-32 lg:pt-72 lg:pb-36\">\n\t\t\t<div class=\"relative mx-auto flex max-w-7xl flex-col px-6 lg:block lg:px-12\">\n\t\t\t\t<div class=\"mx-auto max-w-lg text-center lg:ml-0 lg:max-w-full lg:text-left\">\n\t\t\t\t\t<h1\n\t\t\t\t\t\tclass=\"mt-8 max-w-2xl text-5xl text-balance md:text-6xl lg:mt-16 xl:text-7xl\"\n\t\t\t\t\t>\n\t\t\t\t\t\tBuild 10x Faster with NS\n\t\t\t\t\t</h1>\n\t\t\t\t\t<p class=\"mt-8 max-w-2xl text-lg text-balance\">\n\t\t\t\t\t\tHighly customizable components for building modern websites and applications\n\t\t\t\t\t\tyou mean it.\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"mt-12 flex flex-col items-center justify-center gap-2 sm:flex-row lg:justify-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button size=\"lg\" href=\"/\" class=\"h-12 rounded-full pr-3 pl-5 text-base\">\n\t\t\t\t\t\t\tStart Building\n\t\t\t\t\t\t\t<ChevronRight class=\"ml-1\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"lg\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\thref=\"/\"\n\t\t\t\t\t\t\tclass=\"h-12 rounded-full px-5 text-base hover:bg-zinc-950/5 dark:hover:bg-white/5\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tRequest a demo\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- <div\n        class=\"aspect-2/3 absolute inset-1 -z-10 overflow-hidden rounded-3xl border border-black/10 lg:aspect-video lg:rounded-[3rem] dark:border-white/5\"\n      >\n        <video\n          autoPlay\n          loop\n          class=\"size-full -scale-x-100 object-cover opacity-50 invert dark:opacity-35 dark:invert-0 dark:lg:opacity-75\"\n          src=\"https://res.cloudinary.com/dg4jhba5c/video/upload/v1741605033/dna_ttplyu.mp4\"\n        ></video>\n      </div> -->\n\t\t</div>\n\t</section>\n\t<section class=\"bg-background py-6\">\n\t\t<div class=\"group relative m-auto max-w-7xl px-6\">\n\t\t\t<div class=\"flex flex-col items-center md:flex-row\">\n\t\t\t\t<div class=\"md:max-w-44 md:border-r md:pr-6\">\n\t\t\t\t\t<p class=\"text-end text-sm\">Powering the best teams</p>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"relative py-6 **:fill-foreground md:w-[calc(100%-11rem)]\">\n\t\t\t\t\t<Marquee>\n\t\t\t\t\t\t<Bolt height={22} width={56} />\n\t\t\t\t\t\t<VercelFull height={22} width={84} />\n\t\t\t\t\t\t<SupabaseFull class=\"h-6\" />\n\t\t\t\t\t\t<Hulu height={18} width={56} />\n\t\t\t\t\t\t<Spotify height={24} width={80} />\n\t\t\t\t\t\t<FirebaseFull height={24} width={80} />\n\t\t\t\t\t\t<Beacon height={24} width={80} />\n\t\t\t\t\t\t<Claude height={26} width={90} />\n\t\t\t\t\t\t<Figma height={24} width={24} />\n\t\t\t\t\t\t<Cisco height={30} width={60} />\n\t\t\t\t\t</Marquee>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"absolute inset-y-0 left-0 w-20 bg-linear-to-r from-background\"\n\t\t\t\t\t></div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"absolute inset-y-0 right-0 w-20 bg-linear-to-l from-background\"\n\t\t\t\t\t></div>\n\t\t\t\t\t<ProgressiveBlur\n\t\t\t\t\t\tclass=\"pointer-events-none absolute top-0 left-0 z-50 h-full w-20\"\n\t\t\t\t\t\tdirection=\"left\"\n\t\t\t\t\t\tblurIntensity={1}\n\t\t\t\t\t/>\n\t\t\t\t\t<ProgressiveBlur\n\t\t\t\t\t\tclass=\"pointer-events-none absolute top-0 right-0 z-50 h-full w-20\"\n\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\tblurIntensity={1}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</section>\n</main>\n\n{#snippet heroHeader()}\n\t<header>\n\t\t<nav class=\"fixed z-20 w-full px-2\">\n\t\t\t<div\n\t\t\t\tclass={[\n\t\t\t\t\t\"mx-auto max-w-7xl rounded-3xl px-6 transition-all duration-300 lg:px-12\",\n\t\t\t\t\tisScrolled && \"bg-background/50 backdrop-blur-2xl\",\n\t\t\t\t]}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass={[\n\t\t\t\t\t\t\"relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4\",\n\t\t\t\t\t\tisScrolled && \"lg:py-4\",\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"flex w-full items-center justify-between gap-12 lg:w-auto\">\n\t\t\t\t\t\t<a href=\"/\" aria-label=\"home\" class=\"flex items-center space-x-2\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"22\"\n\t\t\t\t\t\t\t\theight=\"22\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\tcolor=\"currentColor\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M22 18C22 19.4001 22 20.1002 21.7275 20.635C21.4878 21.1054 21.1054 21.4878 20.635 21.7275C20.1002 22 19.4001 22 18 22C16.5999 22 15.8998 22 15.365 21.7275C14.8946 21.4878 14.5122 21.1054 14.2725 20.635C14 20.1002 14 19.4001 14 18C14 16.5999 14 15.8998 14.2725 15.365C14.5122 14.8946 14.8946 14.5122 15.365 14.2725C15.8998 14 16.5999 14 18 14C19.4001 14 20.1002 14 20.635 14.2725C21.1054 14.5122 21.4878 14.8946 21.7275 15.365C22 15.8998 22 16.5999 22 18Z\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"1.5\"\n\t\t\t\t\t\t\t\t></path>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M22 10C22 11.4001 22 12.1002 21.7275 12.635C21.4878 13.1054 21.1054 13.4878 20.635 13.7275C20.1002 14 19.4001 14 18 14C16.5999 14 15.8998 14 15.365 13.7275C14.8946 13.4878 14.5122 13.1054 14.2725 12.635C14 12.1002 14 11.4001 14 10C14 8.59987 14 7.8998 14.2725 7.36502C14.5122 6.89462 14.8946 6.51217 15.365 6.27248C15.8998 6 16.5999 6 18 6C19.4001 6 20.1002 6 20.635 6.27248C21.1054 6.51217 21.4878 6.89462 21.7275 7.36502C22 7.8998 22 8.59987 22 10Z\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"1.5\"\n\t\t\t\t\t\t\t\t></path>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M14 18C14 19.4001 14 20.1002 13.7275 20.635C13.4878 21.1054 13.1054 21.4878 12.635 21.7275C12.1002 22 11.4001 22 10 22C8.59987 22 7.8998 22 7.36502 21.7275C6.89462 21.4878 6.51217 21.1054 6.27248 20.635C6 20.1002 6 19.4001 6 18C6 16.5999 6 15.8998 6.27248 15.365C6.51217 14.8946 6.89462 14.5122 7.36502 14.2725C7.8998 14 8.59987 14 10 14C11.4001 14 12.1002 14 12.635 14.2725C13.1054 14.5122 13.4878 14.8946 13.7275 15.365C14 15.8998 14 16.5999 14 18Z\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"1.5\"\n\t\t\t\t\t\t\t\t></path>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\topacity=\"0.4\"\n\t\t\t\t\t\t\t\t\td=\"M10 6C10 7.40013 10 8.1002 9.72752 8.63497C9.48783 9.10538 9.10538 9.48783 8.63498 9.72752C8.1002 10 7.40013 10 6 10C4.59987 10 3.8998 10 3.36502 9.72751C2.89462 9.48783 2.51217 9.10538 2.27248 8.63497C2 8.10019 2 7.40013 2 6C2 4.59987 2 3.8998 2.27248 3.36502C2.51217 2.89462 2.89462 2.51217 3.36502 2.27248C3.8998 2 4.59987 2 6 2C7.40013 2 8.1002 2 8.63498 2.27248C9.10538 2.51217 9.48783 2.89462 9.72752 3.36502C10 3.8998 10 4.59987 10 6Z\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"1.5\"\n\t\t\t\t\t\t\t\t></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</a>\n\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonclick={() => (menuState = !menuState)}\n\t\t\t\t\t\t\taria-label={menuState == true ? \"Close Menu\" : \"Open Menu\"}\n\t\t\t\t\t\t\tclass=\"relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Menu\n\t\t\t\t\t\t\t\tclass={[\n\t\t\t\t\t\t\t\t\t\"m-auto size-6 duration-200\",\n\t\t\t\t\t\t\t\t\tmenuState && \"scale-0 rotate-180 opacity-0\",\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<X\n\t\t\t\t\t\t\t\tclass={[\n\t\t\t\t\t\t\t\t\t\"absolute inset-0 m-auto size-6 scale-0 -rotate-180 opacity-0 duration-200\",\n\t\t\t\t\t\t\t\t\tmenuState && \"scale-100 rotate-0 opacity-100\",\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"absolute inset-0 m-auto hidden size-fit lg:block\">\n\t\t\t\t\t\t<ul class=\"flex gap-8 text-sm\">\n\t\t\t\t\t\t\t{#each menuItems as item, index}\n\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\thref={item.href}\n\t\t\t\t\t\t\t\t\t\tclass=\"block text-muted-foreground duration-150 hover:text-accent-foreground\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>{item.name}</span>\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t{/each}\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={[\n\t\t\t\t\t\t\t\"mb-6 w-full  flex-wrap items-center justify-end space-y-8 rounded-3xl border bg-background 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\t\t\t\t\t\t\tmenuState ? \"block lg:flex\" : \"hidden lg:flex\",\n\t\t\t\t\t\t]}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div class=\"lg:hidden\">\n\t\t\t\t\t\t\t<ul class=\"space-y-6 text-base\">\n\t\t\t\t\t\t\t\t{#each menuItems as item, index}\n\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\thref={item.href}\n\t\t\t\t\t\t\t\t\t\t\tclass=\"block text-muted-foreground duration-150 hover:text-accent-foreground\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span>{item.name}</span>\n\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t{/each}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tclass={cn(isScrolled && \"lg:hidden\")}\n\t\t\t\t\t\t\t\thref=\"/\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tLogin\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button href=\"/\" size=\"sm\" class={cn(isScrolled && \"lg:hidden\")}\n\t\t\t\t\t\t\t\t>Sign Up</Button\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\thref=\"/\"\n\t\t\t\t\t\t\t\tclass={cn(isScrolled ? \"lg:inline-flex\" : \"hidden\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tGet Strated\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</nav>\n\t</header>\n{/snippet}\n",
			"type": "registry:component",
			"target": "blocks/hero/hero-five.svelte"
		}
	]
}