From a5be9f25c5721b039530c036842d776e411db978 Mon Sep 17 00:00:00 2001
From: VDawg <vdawg@tuta.io>
Date: Wed, 8 Nov 2023 15:52:12 +0200
Subject: [PATCH] update Hero

---
 src/routes/Hero.svelte | 45 +++++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte
index 1d360eb..3683ca5 100755
--- a/src/routes/Hero.svelte
+++ b/src/routes/Hero.svelte
@@ -36,15 +36,18 @@
 				loading="eager"
 				decoding="async"
 			/>
-			<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
-				<h1 class="hyprgradient title">Hyprland</h1>
-			</div>
 		</div>
-		<h2
-			class="ani-in pointer-events-auto mb-10 max-w-[30ch] text-center text-lg font-medium leading-9 text-blue-200/80 fill-mode-backwards [animation-delay:944ms] sm:text-2xl"
+		<h1
+			class="ani-in title pointer-events-auto mb-4 max-w-[20ch] text-center text-lg font-medium fill-mode-backwards [animation-delay:384ms] sm:text-2xl"
 		>
-			Dynamic tiling Wayland compositor with the looks
-		</h2>
+			Tiling compositor <br /><span class="hyprgradient title-gradient">with the looks</span>
+		</h1>
+		<p
+			class="ani-in mb-8 text-center text-xl font-medium text-slate-300 fill-mode-backwards [animation-delay:794ms] sm:max-w-md sm:px-0 md:max-w-lg"
+		>
+			Hyprland provides the latest Wayland features, dynamic tiling, all the eyecandy, powerful
+			plugins<br /> and much more.
+		</p>
 
 		<div
 			class="pointer-events-auto flex items-center gap-7 duration-500 animate-in fade-in-0 slide-in-from-bottom-4 fill-mode-backwards [animation-delay:1390ms]"
@@ -61,27 +64,25 @@
 	<div class="absolute inset-0">
 		<HeroBackground {backgroundData} />
 	</div>
-
-	<!-- Fireflies -->
-	<!-- {#if isVisible}
-		<div
-			class="max-w-screen pointer-events-none absolute inset-0 -z-10 overflow-hidden animate-in fade-in-0 fill-mode-backwards [animation-delay:900ms] [animation-duration:4500ms]"
-		>
-			<div class="absolute bottom-0 z-10 h-52 w-full bg-gradient-to-t from-black" />
-
-			{#each { length: 40 } as _}
-				<Firefly />
-			{/each}
-		</div>
-	{/if} -->
 </section>
 
 <style lang="postcss">
 	.title {
-		background-clip: text;
 		padding: 0.5rem;
 		pointer-events: auto;
-		@apply font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest;
+		color: transparent;
+		background: linear-gradient(
+			to bottom right,
+			theme(colors.white) 40%,
+			theme(colors.cyan.500 / 0%)
+		);
+		background-clip: text;
+		@apply text-6xl font-bold tracking-tight  md:text-7xl;
+	}
+
+	.title-gradient {
+		background-clip: text;
+		@apply text-transparent;
 	}
 
 	@keyframes slidein {