hero-three

1<script>
2	import Button from "$COMPONENTS$/ui/button/button.svelte";
3	import { Marquee } from "$COMPONENTS$/magic/marquee";
4	import { ProgressiveBlur } from "$COMPONENTS$/magic/progressive-blur";
5	// Hero Header Component
6 
7	import { cn } from "$UTILS$";
8	import Menu from "@lucide/svelte/icons/menu";
9	import X from "@lucide/svelte/icons/x";
10	import { scrollY } from "svelte/reactivity/window";
11	import Mail from "@lucide/svelte/icons/mail";
12	import SendHorizonal from "@lucide/svelte/icons/send-horizontal";
13 
14	let menuItems = [
15		{ name: "Features", href: "#a" },
16		{ name: "Solution", href: "#a" },
17		{ name: "Pricing", href: "#a" },
18		{ name: "About", href: "#a" },
19	];
20	let menuState = $state(false);
21	let isScrolled = $derived.by(() => {
22		if (scrollY.current !== undefined && scrollY.current > 50) {
23			return true;
24		}
25		return false;
26	});
27 
28	import {
29		Beacon,
30		Bolt,
31		Cisco,
32		Claude,
33		Figma,
34		FirebaseFull,
35		Hulu,
36		Spotify,
37		SupabaseFull,
38		VercelFull,
39	} from "$LIB$/svgs";
40</script>
41 
42<div>
43	<!-- Scroll below to see the snippet code  -->
44	{@render heroheader()}
45	<main
46		class="overflow-hidden [--color-primary-foreground:var(--color-white)] [--color-primary:var(--color-green-600)]"
47	>
48		<section>
49			<div class="relative mx-auto max-w-6xl px-6 pt-32 pb-20 lg:pt-48">
50				<div class="relative z-10 mx-auto max-w-4xl text-center">
51					<h1 class="text-5xl font-medium text-balance md:text-6xl">
52						Healthier daily routine
53					</h1>
54					<p class="mx-auto mt-6 max-w-2xl text-lg text-pretty">
55						Tailwindcss highly customizable components for building modern websites and
56						applications that look and feel the way you mean it.
57					</p>
58 
59					<div class="mt-12">
60						<form action="" class="mx-auto max-w-sm">
61							<div
62								class="relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.5rem)] border bg-background pr-2 shadow shadow-zinc-950/5 has-[input:focus]:ring-2 has-[input:focus]:ring-muted"
63							>
64								<Mail
65									class="pointer-events-none absolute inset-y-0 left-4 my-auto size-4"
66								/>
67 
68								<input
69									placeholder="Your mail address"
70									class="h-12 w-full bg-transparent pl-12 focus:outline-none"
71									type="email"
72								/>
73 
74								<div class="md:pr-1.5 lg:pr-0">
75									<Button
76										aria-label="submit"
77										size="sm"
78										class="rounded-(--radius)"
79									>
80										<span class="hidden md:block">Get Started</span>
81										<SendHorizonal
82// … truncated