hero-two

1<script>
2	import ChevronRight from "@lucide/svelte/icons/chevron-right";
3	import Menu from "@lucide/svelte/icons/menu";
4	import X from "@lucide/svelte/icons/x";
5	import Button from "$COMPONENTS$/ui/button/button.svelte";
6 
7	// You can store Hero Header Component in seperate file
8	// I have used snippet for better readability
9 
10	// Hero Header Component
11 
12	import { cn } from "$UTILS$";
13	import { scrollY } from "svelte/reactivity/window";
14 
15	let menuItems = [
16		{ name: "Features", href: "#a" },
17		{ name: "Solution", href: "#a" },
18		{ name: "Pricing", href: "#a" },
19		{ name: "About", href: "#a" },
20	];
21	let menuState = $state(false);
22	let isScrolled = $derived.by(() => {
23		if (scrollY.current !== undefined && scrollY.current > 50) {
24			return true;
25		}
26		return false;
27	});
28 
29	import {
30		Beacon,
31		Bolt,
32		Claude,
33		FirebaseFull,
34		Hulu,
35		Spotify,
36		SupabaseFull,
37		VercelFull,
38	} from "$LIB$/svgs";
39</script>
40 
41<!-- Scroll below to see the snippet code  -->
42{@render heroHeader()}
43 
44<main class="overflow-hidden">
45	<div class="absolute inset-0 isolate hidden contain-strict lg:block">
46		<div
47			class="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%)]"
48		></div>
49		<div
50			class="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%)]"
51		></div>
52		<div
53			class="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%)]"
54		></div>
55	</div>
56	<section>
57		<div class="relative pt-24">
58			<div
59				class="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]"
60			></div>
61			<div class="mx-auto max-w-5xl px-6">
62				<div class="sm:mx-auto lg:mt-0 lg:mr-auto">
63					<h1
64						class="mt-8 max-w-2xl text-5xl font-medium text-balance md:text-6xl lg:mt-16"
65					>
66						Build and Ship 10x faster with NS
67					</h1>
68					<p class="mt-8 max-w-2xl text-lg text-pretty">
69						Tailwindcss highly customizable components for building modern websites and
70						applications that look and feel the way you mean it.
71					</p>
72 
73					<div class="mt-12 flex items-center gap-2">
74						<div
75							class="border bg-foreground/10 p-0.5"
76// … truncated