hero-one

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