Make navigation feel more premium and polished

- Transparent with blur, and it becomes more white as you scroll down - Features link to jump to features section - Added a `scroll-margin-top` for both Features and Pricing links so it doesn’t cut off the header - Show only Features link on mobile instead of Help, as people are more likely just checking it out
johnjago · Apr 1, 2024 · 9b05d04 · 9b05d04
1 parent 8190d2f
commit 9b05d04
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 14 deletions.
diff --git a/main.css b/main.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+#nav-logo {
+	mask-image: url(images/logo.svg);
+	mask-size: contain;
+	mask-repeat: no-repeat;
+}
diff --git a/public/index.html b/public/index.html
@@ -19,27 +19,36 @@
 	<!-- <script type="text/javascript" src="https://livejs.com/live.js"></script> -->
 </head>
 <body class="font-sans bg-gray-50">
-	<header class="sticky top-0 bg-white shadow-lg">
-		<div class="flex justify-between items-center p-4 max-w-7xl mx-auto">
-			<a href="/">
-				<img src="images/logo.svg" width="80" alt="Dashify logo">
-			</a>
-			<nav class="text-gray-600 font-semibold">
-				<a href="#pricing" class="ml-8 hover:text-[#9D6095] transition hidden sm:inline">Pricing</a>
-				<a href="https://forms.gle/pRezSbdUcZmvZdX27" class="ml-8 hover:text-[#9D6095] transition">Help</a>
-				<a href="https://wordpress.org/plugins/dashify/" class="ml-8 px-4 py-2 rounded-full bg-gray-800 text-gray-50 hover:bg-[#9D6095] transition">Download</a>
-			</nav>
+	<header class="sticky top-0 h-0">
+		<div id="navbar" class="z-10 backdrop-blur-xl transition bg-[#ffffff10] border-b border-b-[#ffffff15]">
+			<div class="flex justify-between items-center p-4 max-w-7xl mx-auto">
+				<a href="/">
+					<div id="nav-logo" class="bg-gray-50 w-[80px] h-[40px]"></div>
+				</a>
+				<nav class="text-gray-50 font-semibold">
+					<a href="/#features" class="ml-8 transition hover:underline hover:underline-offset-4">Features</a>
+					<a href="/#pricing" class="ml-8 transition hidden sm:inline hover:underline hover:underline-offset-4">Pricing</a>
+					<a href="https://forms.gle/pRezSbdUcZmvZdX27" class="ml-8 transition hidden sm:inline hover:underline hover:underline-offset-4">Help</a>
+					<a
+						id="nav-download-link"
+						href="https://wordpress.org/plugins/dashify/"
+						class="ml-8 px-4 py-2 rounded-full border border-gray-50 text-gray-50 transition hover:bg-gray-50 hover:text-gray-800"
+					>
+						Download
+					</a>
+				</nav>
+			</div>
 		</div>
 	</header>
-	<main class="">
-		<section class="py-32 px-4 text-center bg-gradient-to-b from-[#9D6095B3] to-[#E8A04DB3]">
+	<main>
+		<section class="pt-40 pb-32 px-4 text-center bg-gradient-to-b from-[#9D6095B3] to-[#E8A04DB3]">
 			<h1 class="text-white text-5xl font-bold mb-16">Better WooCommerce order management.</h1>
 			<img src="images/dashify-order-list.png" alt="Screenshot of the WooCommerce order list page with Dashify styles and functionality." class="max-w-full w-3/4 lg:max-w-7xl lg:w-none mx-auto rounded-lg shadow-2xl">
 			<p class="text-white text-3xl font-semibold mt-16 mb-12">Search, navigate, and manage orders faster with Dashify.</p>
 			<a href="https://wordpress.org/plugins/dashify/" class="py-4 px-6 rounded-full bg-gray-800 text-gray-50 text-lg font-semibold hover:shadow-lg transition">Get Dashify for free</a>
 		</section>
 
-		<section class="pt-16 px-4 max-w-7xl mx-auto">
+		<section id="features" class="pt-16 px-4 max-w-7xl mx-auto scroll-mt-16">
 			<h2 class="text-4xl text-center font-bold text-gray-700 mb-8">How does Dashify make WooCommerce better?</h2>
 			<div class="flex flex-row flex-wrap justify-between mb-16">
 				<div class="lg:flex flex-col justify-evenly border p-8 lg:basis-[48%] bg-white rounded-lg m-0.5 mt-8">
@@ -194,7 +203,7 @@ <h3 class="text-2xl font-semibold text-gray-600 mb-2">Auto-expanding order notes
 			</div>
 		</section>
 
-		<section id="pricing" class="py-16 px-4 bg-white border-t">
+		<section id="pricing" class="py-16 px-4 bg-white border-t scroll-mt-16">
 			<h2 class="text-4xl text-center font-bold text-gray-700 mb-8">Pricing</h2>
 			<div class="flex flex-row flex-wrap justify-evenly mt-16 mb-8">
 				<div class="flex flex-col w-96 mb-8">
@@ -245,5 +254,29 @@ <h2 class="text-white text-5xl font-bold mb-16">Manage WooCommerce orders more e
 			document.querySelector('#day').textContent = dayOfWeekName;
 		});
 	</script>
+	<script>
+		window.addEventListener('scroll', function() {
+			const navbar = document.querySelector('#navbar');
+			const logo = document.querySelector('#nav-logo');
+			const links = document.querySelectorAll('nav a');
+			const downloadLink = document.querySelector('#nav-download-link');
+
+			if (window.scrollY > 50) {
+				navbar.classList.add('bg-[#ffffff56]', 'shadow-sm');
+				logo.classList.add('bg-gray-800')
+				for (const link of links) {
+					link.classList.add('text-gray-800');
+				}
+				downloadLink.classList.add('border-gray-800', 'hover:bg-gray-800', 'hover:text-gray-50');
+			} else {
+				navbar.classList.remove('bg-[#ffffff56]', 'shadow-sm');
+				logo.classList.remove('bg-gray-800')
+				for (const link of links) {
+					link.classList.remove('text-gray-800');
+				}
+				downloadLink.classList.remove('border-gray-800', 'hover:bg-gray-800', 'hover:text-gray-50');
+			}
+		});
+	</script>
 </body>
 </html>