From 833bb2805e13eb52a6f5113cb7963380cf81d7e9 Mon Sep 17 00:00:00 2001
From: Visual-Dawg <vdawg@tuta.io>
Date: Fri, 2 Aug 2024 01:10:58 +0300
Subject: [PATCH] Improve hero design (#66)

* improve hero design

* navbar: smaller font
Looks better
---
 src/lib/components/Button.svelte   |  6 +++---
 src/routes/Navbar.svelte           | 16 ++++++++++------
 src/routes/home-slices/Hero.svelte | 18 ++++++------------
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index b870b5f..5eef4d8 100755
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -7,13 +7,13 @@
 	export let type = 'primary'
 
 	$: classes = clsx(
-		'animate  rounded text-sm font-bold hover:scale-[1.01] active:scale-100',
+		'animate rounded text-sm font-bold hover:scale-[1.01] active:scale-100',
 		'primary' == type && 'bg-slate-200 text-black',
 		'outline' == type && 'bg-transparent text-white outline outline-2 outline-slate-200',
 		'fancyOutline' == type && 'fancy',
 		'md' == size && 'min-w-[5.5rem] px-4 py-2.5',
-		'lg' == size && 'min-w-[5.5rem] px-6 py-3 ',
-		'xl' == size && 'min-w-[5.5rem] px-8 py-4 ',
+		'lg' == size && 'min-w-[5.5rem] px-6 py-3',
+		'xl' == size && 'min-w-[5.5rem] px-8 py-3.5',
 		$$restProps.class
 	)
 </script>
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 536b0b6..bef1923 100755
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -19,14 +19,14 @@
 </script>
 
 <header
-	class="fixed inset-x-0 top-0 z-50 flex items-center justify-between rounded-full px-6 pt-2 duration-1000 animate-in fade-in-0 slide-in-from-top-1 fill-mode-backwards [animation-delay:0ms]"
+	class="fixed inset-x-0 top-0 z-50 flex items-center justify-between rounded-full px-6 pt-2 text-sm duration-1000 animate-in fade-in-0 slide-in-from-top-1 fill-mode-backwards [animation-delay:0ms]"
 >
 	<a
 		href="/"
-		class="flex items-center gap-4 rounded-full bg-black/50 px-4 py-2 font-london text-sm font-bold tracking-wider text-white backdrop-blur"
+		class="flex items-center gap-4 rounded-full bg-black/50 px-4 py-2 font-london font-bold tracking-wider text-white backdrop-blur"
 	>
 		<HyprlandLogo class="h-8 w-6 object-contain" />
-		<span class="mt-1 text-lg tracking-widest">Hyprland</span></a
+		<span class="mt-1 tracking-widest">Hyprland</span></a
 	>
 
 	<button
@@ -82,7 +82,12 @@
 				</a>
 			</li>
 			<li>
-				<a href={forgejoLink} class="social-icon" aria-label="Hyprland git instance" target="_blank">
+				<a
+					href={forgejoLink}
+					class="social-icon"
+					aria-label="Hyprland git instance"
+					target="_blank"
+				>
 					<ForgejoIcon class="h-full w-full" />
 				</a>
 			</li>
@@ -100,7 +105,6 @@
 	.nav {
 		/* Base classes */
 		font-weight: 600;
-		@apply text-lg;
 
 		/* Mobile classes */
 		position: absolute;
@@ -117,7 +121,7 @@
 
 		/* Desktop classes */
 		@media screen(lg) {
-			@apply relative flex h-min w-max flex-row rounded-full bg-black/40 p-2 pl-5 text-base outline outline-primary/10;
+			@apply relative flex h-min w-max flex-row rounded-full bg-black/40 p-2 pl-5 outline outline-primary/10;
 		}
 	}
 
diff --git a/src/routes/home-slices/Hero.svelte b/src/routes/home-slices/Hero.svelte
index a50f9ae..1279b0c 100644
--- a/src/routes/home-slices/Hero.svelte
+++ b/src/routes/home-slices/Hero.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <section
-	class="relative flex h-[100svh] min-h-[52rem] w-full flex-col items-center justify-center overflow-x-hidden"
+	class="relative flex h-[100svh] min-h-[36rem] w-full flex-col items-center justify-center overflow-x-hidden"
 	use:inview
 	on:inview_change={({ detail: { inView } }) => {
 		isVisible = inView
@@ -27,31 +27,26 @@
 	<div
 		class="pointer-events-none z-10 flex h-full min-h-max flex-col items-center justify-center px-5"
 	>
-		<div
-			class="ani-in -mt-10 mb-8 flex flex-col items-center gap-6 text-center fill-mode-backwards sm:-mt-20"
-		>
-			<HyprlandLogo class=" mb-6 h-40 w-48   sm:h-48 sm:w-56" />
-		</div>
 		<h1
-			class="ani-in title pointer-events-auto mb-4 max-w-[20ch] text-center !leading-[1.25] fill-mode-backwards [animation-delay:384ms]"
+			class="ani-in title pointer-events-auto mb-4 max-w-[20ch] text-center text-4xl font-bold !leading-[1.25] fill-mode-backwards [animation-delay:384ms] sm:text-6xl md:text-7xl lg:text-8xl lg:tracking-tight"
 		>
 			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-lg sm:px-0 md:max-w-lg"
+			class="ani-in mb-8 text-center text-base font-medium text-slate-400 fill-mode-backwards [animation-delay:794ms] sm:mb-12 sm:max-w-lg sm:px-0 sm:text-xl md:max-w-lg md:text-2xl lg:max-w-[50ch]"
 		>
 			Hyprland provides the latest Wayland features, dynamic tiling, all the eyecandy, powerful
-			plugins and much more.
+			plugins 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]"
 		>
 			<a href="https://wiki.hyprland.org/Getting-Started/Installation/">
-				<Button size="lg">Install</Button>
+				<Button size="xl">Install</Button>
 			</a>
 			<a href="https://wiki.hyprland.org/">
-				<Button type="fancyOutline" size="lg">Wiki</Button>
+				<Button type="fancyOutline" size="xl">Wiki</Button>
 			</a>
 		</div>
 	</div>
@@ -72,7 +67,6 @@
 			theme(colors.cyan.500 / 0%)
 		);
 		background-clip: text;
-		@apply text-4xl font-bold sm:text-5xl md:text-7xl;
 	}
 
 	.title-gradient {