{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "hero-one",
	"type": "registry:block",
	"description": "Classic centered hero with headline and CTA",
	"devDependencies": [
		"@lucide/svelte"
	],
	"registryDependencies": [
		"button",
		"./svgs.json"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\t// Shadcn Svelte UI Button Component\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\timport { cn } from \"$UTILS$\";\n\timport Menu from \"@lucide/svelte/icons/menu\";\n\timport X from \"@lucide/svelte/icons/x\";\n\timport ArrowRight from \"@lucide/svelte/icons/arrow-right\";\n\timport ChevronRight from \"@lucide/svelte/icons/chevron-right\";\n\timport { scrollY } from \"svelte/reactivity/window\";\n\n\ttype MenuItem = {\n\t\tname: string;\n\t\thref: string;\n\t};\n\n\tlet menuItems: MenuItem[] = [\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<div>\n\t<!-- Scroll below to see the snippet code  -->\n\t{@render heroheader()}\n\n\t<main class=\"overflow-hidden\">\n\t\t<div class=\"absolute inset-0 isolate hidden opacity-65 contain-strict lg:block\">\n\t\t\t<div\n\t\t\t\tclass=\"absolute top-0 left-0 h-320 w-140 -translate-y-87.5 -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\t\t\t></div>\n\t\t\t<div\n\t\t\t\tclass=\"absolute top-0 left-0 h-320 w-60 [translate:5%_-50%] -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%)]\"\n\t\t\t></div>\n\t\t\t<div\n\t\t\t\tclass=\"absolute top-0 left-0 h-320 w-60 -translate-y-87.5 -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\t\t\t></div>\n\t\t</div>\n\t\t<section>\n\t\t\t<div class=\"relative pt-24 md:pt-36\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]\"\n\t\t\t\t></div>\n\t\t\t\t<div class=\"mx-auto max-w-7xl px-6\">\n\t\t\t\t\t<div class=\"text-center sm:mx-auto lg:mt-0 lg:mr-auto\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"#link\"\n\t\t\t\t\t\t\t\tclass=\"group mx-auto flex w-fit items-center gap-4 rounded-full border bg-muted p-1 pl-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 hover:bg-background dark:border-t-white/5 dark:shadow-zinc-950 dark:hover:border-t-border\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span class=\"text-sm text-foreground\"\n\t\t\t\t\t\t\t\t\t>Introducing Support for AI Models</span\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"block h-4 w-0.5 border-l bg-white dark:border-background dark:bg-zinc-700\"\n\t\t\t\t\t\t\t\t></span>\n\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclass=\"size-6 overflow-hidden rounded-full bg-background duration-500 group-hover:bg-muted\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclass=\"flex w-12 -translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span class=\"flex size-6\">\n\t\t\t\t\t\t\t\t\t\t\t<ArrowRight class=\"m-auto size-3\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"flex size-6\">\n\t\t\t\t\t\t\t\t\t\t\t<ArrowRight class=\"m-auto size-3\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\tclass=\"mt-8 text-6xl text-balance md:text-7xl lg:mt-16 xl:text-[5.25rem]\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tModern Solutions for Customer Engagement\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t<p class=\"mx-auto mt-8 max-w-2xl text-lg text-balance\">\n\t\t\t\t\t\t\tHighly customizable components for building modern websites and\n\t\t\t\t\t\t\tapplications that look and feel the way you mean it.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"mt-12 flex flex-col items-center justify-center gap-2 md:flex-row\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"border bg-foreground/10 p-0.5\"\n\t\t\t\t\t\t\t\tstyle=\"border-radius: calc(0.5rem + 0.125rem + 4px);\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Button href=\"/\" size=\"lg\" class=\"rounded-xl px-5 text-base\">\n\t\t\t\t\t\t\t\t\tStart Building\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Button size=\"lg\" variant=\"ghost\" class=\"rounded-xl px-5\">\n\t\t\t\t\t\t\t\tRequest a demo\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\n\t\t\t\t<div class=\"relative mt-8 -mr-56 overflow-hidden px-2 sm:mt-12 sm:mr-0 md:mt-20\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"absolute inset-0 z-10 bg-linear-to-b from-transparent from-35% to-background\"\n\t\t\t\t\t></div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"relative mx-auto max-w-6xl overflow-hidden rounded-2xl border bg-background p-4 shadow-lg inset-shadow-2xs shadow-zinc-950/15 ring-background dark:inset-shadow-white/20\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclass=\"relative hidden aspect-15/8 rounded-2xl bg-background dark:block\"\n\t\t\t\t\t\t\tsrc=\"/mail2.png\"\n\t\t\t\t\t\t\talt=\"app screen\"\n\t\t\t\t\t\t\twidth=\"2700\"\n\t\t\t\t\t\t\theight=\"1440\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclass=\"relative z-2 aspect-15/8 rounded-2xl border border-border/25 dark:hidden\"\n\t\t\t\t\t\t\tsrc=\"/mail2-light.png\"\n\t\t\t\t\t\t\talt=\"app screen\"\n\t\t\t\t\t\t\twidth=\"2700\"\n\t\t\t\t\t\t\theight=\"1440\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t\t<section class=\"bg-background pt-16 pb-16 md:pb-32\">\n\t\t\t<div class=\"group relative m-auto max-w-5xl px-6\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"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\t\t\t\t>\n\t\t\t\t\t<a href=\"/\" class=\"block text-sm duration-150 hover:opacity-75\">\n\t\t\t\t\t\t<span> Meet Our Customers</span>\n\n\t\t\t\t\t\t<ChevronRight class=\"ml-1 inline-block size-3\" />\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"mx-auto mt-12 grid max-w-2xl grid-cols-3 gap-x-12 gap-y-8 transition-all duration-500 **:fill-foreground group-hover:opacity-50 group-hover:blur-xs sm:gap-x-16 sm:gap-y-14 md:grid-cols-4\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t<Bolt class=\"mx-auto h-5 w-full\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t<VercelFull class=\"mx-auto h-4 w-full\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t<SupabaseFull class=\"mx-auto h-6\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t<Hulu class=\"mx-auto h-4 w-full\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t<Spotify class=\"mx-auto h-6 w-full\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t<FirebaseFull class=\"mx-auto h-6 w-full\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t<Beacon class=\"mx-auto h-4 w-full\" />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t<Claude class=\"mx-auto h-5 w-full\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t</main>\n</div>\n\n{#snippet heroheader()}\n\t<header>\n\t\t<!-- Add `fixed` class to component to make it fixed on top -->\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 mt-2 max-w-6xl rounded-2xl px-6 transition-all duration-300 lg:px-12\",\n\t\t\t\t\tisScrolled &&\n\t\t\t\t\t\t\"max-w-4xl rounded-2xl border bg-background/50 backdrop-blur-lg lg:px-5\",\n\t\t\t\t]}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"flex w-full 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 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-one.svelte"
		}
	]
}