hero-four

1<script lang="ts">
2	import Button from "$COMPONENTS$/ui/button/button.svelte";
3	import { ProgressiveBlur } from "$COMPONENTS$/magic/progressive-blur";
4	// Hero Header Component
5 
6	import { cn } from "$UTILS$";
7	import Menu from "@lucide/svelte/icons/menu";
8	import X from "@lucide/svelte/icons/x";
9	import { scrollY } from "svelte/reactivity/window";
10	import { Marquee } from "$COMPONENTS$/magic/marquee";
11 
12	let menuItems = [
13		{ name: "Features", href: "#a" },
14		{ name: "Solution", href: "#a" },
15		{ name: "Pricing", href: "#a" },
16		{ name: "About", href: "#a" },
17	];
18	let menuState = $state(false);
19	let isScrolled = $derived.by(() => {
20		if (scrollY.current !== undefined && scrollY.current > 50) {
21			return true;
22		}
23		return false;
24	});
25 
26	export const GRADIENT_ANGLES = {
27		top: 0,
28		right: 90,
29		bottom: 180,
30		left: 270,
31	};
32 
33	type ProgressiveBlurProps = {
34		direction?: keyof typeof GRADIENT_ANGLES;
35		blurLayers?: number;
36		class?: string;
37		blurIntensity?: number;
38	};
39 
40	import {
41		Beacon,
42		Bolt,
43		Cisco,
44		Claude,
45		Figma,
46		FirebaseFull,
47		Hulu,
48		Spotify,
49		SupabaseFull,
50		VercelFull,
51	} from "$LIB$/svgs";
52</script>
53 
54{@render header()}
55<main class="overflow-x-hidden">
56	<section>
57		<div class="pt-12 pb-24 md:pb-32 lg:pt-44 lg:pb-56">
58			<div class="relative mx-auto flex max-w-6xl flex-col px-6 lg:block">
59				<div class="mx-auto max-w-lg text-center lg:ml-0 lg:w-1/2 lg:text-left">
60					<h1
61						class="mt-8 max-w-2xl text-5xl font-medium text-balance md:text-6xl lg:mt-16 xl:text-7xl"
62					>
63						Ship 10x Faster with NS
64					</h1>
65					<p class="mt-8 max-w-2xl text-lg text-pretty">
66						Highly customizable components for building modern websites and applications
67						that look and feel the way you mean it.
68					</p>
69 
70					<div
71						class="mt-12 flex flex-col items-center justify-center gap-2 sm:flex-row lg:justify-start"
72					>
73						<Button href="/" size="lg" class="px-5 text-base">Start Building</Button>
74						<Button size="lg" variant="ghost" class="px-5 text-base" href="/">
75							Request a demo
76						</Button>
77					</div>
78				</div>
79			</div>
80		</div>
81	</section>
82	<section class="border-t bg-background pt-4 pb-16 md:pb-32">
83		<div class="group relative m-auto max-w-6xl px-6">
84			<div class="flex flex-col items-center md:flex-row">
85				<div class="md:max-w-44 md:border-r md:pr-6">
86					<p class="text-end text-sm">Powering the best teams</p>
87				</div>
88				<div class="relative py-6 **:fill-foreground md:w-[calc(100%-11rem)]">
89					<Marquee>
90// … truncated