{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "hero-four",
	"type": "registry:block",
	"description": "Split hero with image on right side",
	"devDependencies": [
		"@lucide/svelte"
	],
	"registryDependencies": [
		"button",
		"./marquee.json",
		"./progressive-blur.json",
		"./svgs.json"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport Button from \"$COMPONENTS$/ui/button/button.svelte\";\n\timport { ProgressiveBlur } from \"$COMPONENTS$/magic/progressive-blur\";\n\t// Hero Header Component\n\n\timport { cn } from \"$UTILS$\";\n\timport Menu from \"@lucide/svelte/icons/menu\";\n\timport X from \"@lucide/svelte/icons/x\";\n\timport { scrollY } from \"svelte/reactivity/window\";\n\timport { Marquee } from \"$COMPONENTS$/magic/marquee\";\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\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\texport const GRADIENT_ANGLES = {\n\t\ttop: 0,\n\t\tright: 90,\n\t\tbottom: 180,\n\t\tleft: 270,\n\t};\n\n\ttype ProgressiveBlurProps = {\n\t\tdirection?: keyof typeof GRADIENT_ANGLES;\n\t\tblurLayers?: number;\n\t\tclass?: string;\n\t\tblurIntensity?: number;\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{@render header()}\n<main class=\"overflow-x-hidden\">\n\t<section>\n\t\t<div class=\"pt-12 pb-24 md:pb-32 lg:pt-44 lg:pb-56\">\n\t\t\t<div class=\"relative mx-auto flex max-w-6xl flex-col px-6 lg:block\">\n\t\t\t\t<div class=\"mx-auto max-w-lg text-center lg:ml-0 lg:w-1/2 lg:text-left\">\n\t\t\t\t\t<h1\n\t\t\t\t\t\tclass=\"mt-8 max-w-2xl text-5xl font-medium text-balance md:text-6xl lg:mt-16 xl:text-7xl\"\n\t\t\t\t\t>\n\t\t\t\t\t\tShip 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-pretty\">\n\t\t\t\t\t\tHighly customizable components for building modern websites and applications\n\t\t\t\t\t\tthat look and feel the way you 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 href=\"/\" size=\"lg\" class=\"px-5 text-base\">Start Building</Button>\n\t\t\t\t\t\t<Button size=\"lg\" variant=\"ghost\" class=\"px-5 text-base\" href=\"/\">\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</div>\n\t</section>\n\t<section class=\"border-t bg-background pt-4 pb-16 md:pb-32\">\n\t\t<div class=\"group relative m-auto max-w-6xl 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\taria-hidden={true}\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\taria-hidden={true}\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\tdirection=\"left\"\n\t\t\t\t\t\tblurIntensity={1}\n\t\t\t\t\t\tclass=\"pointer-events-none absolute top-0 left-0 h-full w-20\"\n\t\t\t\t\t/>\n\t\t\t\t\t<ProgressiveBlur\n\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\tblurIntensity={1}\n\t\t\t\t\t\tclass=\"pointer-events-none absolute top-0 right-0 h-full w-20\"\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 header()}\n\t<header>\n\t\t<nav class=\"fixed z-20 w-full border-b bg-background/50 backdrop-blur-3xl\">\n\t\t\t<div class=\"mx-auto max-w-5xl px-6 transition-all duration-300\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"flex flex-wrap items-center justify-between gap-6 py-3 lg:flex-nowrap lg:gap-6 lg:py-4\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"flex w-full items-center justify-between 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\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 sm:justify-between md:flex-nowrap lg:m-0 lg:flex  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\",\n\t\t\t\t\t\t]}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div class=\"lg:pr-4\">\n\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\tclass=\"space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm\"\n\t\t\t\t\t\t\t>\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\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 variant=\"outline\" size=\"sm\">Login</Button>\n\t\t\t\t\t\t\t<Button size=\"sm\">Sign Up</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-four.svelte"
		}
	]
}