hero-five

1<script>
2	import { Marquee } from "$COMPONENTS$/magic/marquee";
3	import { ProgressiveBlur } from "$COMPONENTS$/magic/progressive-blur";
4	import Button from "$COMPONENTS$/ui/button/button.svelte";
5 
6	// You can store Hero Header Component in seperate file
7	// I have used snippet for better readability
8 
9	// Hero Header Component
10 
11	import { cn } from "$UTILS$";
12	import ChevronRight from "@lucide/svelte/icons/chevron-right";
13	import Menu from "@lucide/svelte/icons/menu";
14	import X from "@lucide/svelte/icons/x";
15	import { scrollY } from "svelte/reactivity/window";
16 
17	let menuItems = [
18		{ name: "Features", href: "#a" },
19		{ name: "Solution", href: "#a" },
20		{ name: "Pricing", href: "#a" },
21		{ name: "About", href: "#a" },
22	];
23 
24	let menuState = $state(false);
25	let isScrolled = $derived.by(() => {
26		if (scrollY.current !== undefined && scrollY.current > 50) {
27			return true;
28		}
29		return false;
30	});
31 
32	import {
33		Beacon,
34		Bolt,
35		Cisco,
36		Claude,
37		Figma,
38		FirebaseFull,
39		Hulu,
40		Spotify,
41		SupabaseFull,
42		VercelFull,
43	} from "$LIB$/svgs";
44</script>
45 
46<!-- Scroll below to see the snippet code  -->
47{@render heroHeader()}
48 
49<main class="overflow-x-hidden">
50	<section>
51		<div class="py-24 md:pb-32 lg:pt-72 lg:pb-36">
52			<div class="relative mx-auto flex max-w-7xl flex-col px-6 lg:block lg:px-12">
53				<div class="mx-auto max-w-lg text-center lg:ml-0 lg:max-w-full lg:text-left">
54					<h1
55						class="mt-8 max-w-2xl text-5xl text-balance md:text-6xl lg:mt-16 xl:text-7xl"
56					>
57						Build 10x Faster with NS
58					</h1>
59					<p class="mt-8 max-w-2xl text-lg text-balance">
60						Highly customizable components for building modern websites and applications
61						you mean it.
62					</p>
63 
64					<div
65						class="mt-12 flex flex-col items-center justify-center gap-2 sm:flex-row lg:justify-start"
66					>
67						<Button size="lg" href="/" class="h-12 rounded-full pr-3 pl-5 text-base">
68							Start Building
69							<ChevronRight class="ml-1" />
70						</Button>
71						<Button
72							size="lg"
73							variant="ghost"
74							href="/"
75							class="h-12 rounded-full px-5 text-base hover:bg-zinc-950/5 dark:hover:bg-white/5"
76						>
77							Request a demo
78						</Button>
79					</div>
80				</div>
81			</div>
82			<!-- <div
83        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"
84      >
85        <video
86          autoPlay
87          loop
88// … truncated