From 6a4c6d81b2fcfb55aebd8df6f176d76b92a99ad0 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sun, 28 Apr 2024 16:08:28 +0100
Subject: [PATCH] feat(#36): Style the landing page

---
 src/routes/+layout.svelte | 113 ++++++++++++++++------
 src/routes/+page.svelte   | 191 ++++++++++++++++++++++----------------
 2 files changed, 194 insertions(+), 110 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4905580..e743f20 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -90,17 +90,52 @@
 
 <header>
 	<div class="navbar bg-neutral">
-		<div class="flex-1">
+		<div class="navbar-start">
+			<div class="dropdown">
+				<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M4 6h16M4 12h16M4 18h7"
+						/></svg
+					>
+				</div>
+				<ul
+					class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+				>
+					<li><a href="/about">About</a></li>
+					<li>
+						<a href="https://github.com/jcreek/LivingDexTracker" target="_blank">Contribute</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div class="navbar-center">
 			<a class="btn btn-ghost text-xl" href="/">Living Dex Tracker</a>
 		</div>
-		<div class="flex-none gap-2">
-			<div class="form-control">
-				<input
-					type="text"
-					placeholder="Search for a Dex"
-					class="input input-bordered w-32 md:w-auto"
-				/>
-			</div>
+		<div class="navbar-end">
+			<button class="btn btn-ghost btn-circle">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					><path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/></svg
+				>
+			</button>
 			<div class="dropdown dropdown-end">
 				<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
 					<div class="w-10 rounded-full">
@@ -112,6 +147,9 @@
 					class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box min-w-[13rem] w-auto"
 				>
 					{#if localUser}
+						<li>
+							<a href="/mydex"> My Dex </a>
+						</li>
 						<li>
 							<a href="/profile"> Profile </a>
 						</li>
@@ -130,26 +168,43 @@
 	<slot />
 </main>
 
-<footer class="footer p-10 bg-neutral text-neutral-content">
-	<nav>
-		<h6 class="footer-title">Services</h6>
-		<a class="link link-hover">Branding</a>
-		<a class="link link-hover">Design</a>
-		<a class="link link-hover">Marketing</a>
-		<a class="link link-hover">Advertisement</a>
-	</nav>
-	<nav>
-		<h6 class="footer-title">Company</h6>
-		<a class="link link-hover">About us</a>
-		<a class="link link-hover">Contact</a>
-		<a class="link link-hover">Jobs</a>
-		<a class="link link-hover">Press kit</a>
-	</nav>
-	<nav>
-		<h6 class="footer-title">Legal</h6>
-		<a class="link link-hover">Terms of use</a>
-		<a class="link link-hover">Privacy policy</a>
-		<a class="link link-hover">Cookie policy</a>
+<footer class="footer items-center p-4 bg-neutral text-neutral-content">
+	<aside class="items-center grid-flow-col">
+		<a href="https://github.com/jcreek/LivingDexTracker" target="_blank">
+			<svg
+				width="36"
+				height="36"
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				class="fill-current"
+				viewBox="0 0 120 120"
+			>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+				/>
+			</svg>
+		</a>
+		<p>
+			Open source and free to use, forever. We are in no way associated with Nintendo, Game Freak or
+			The Pokémon Company.
+		</p>
+	</aside>
+	<nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
+		<a href="https://discord.gg/SQcJkaXDye" target="_blank"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 127.14 96.36"
+				class="fill-current"
+			>
+				<path
+					d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
+				/>
+			</svg>
+		</a>
 	</nav>
 </footer>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b4ed955..e7d9821 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -15,10 +15,10 @@
 	onDestroy(unsubscribe);
 </script>
 
-<div class="hero min-h-screen bg-base-100">
+<div class="hero bg-base-100 my-36">
 	<div class="hero-content flex-col lg:flex-row-reverse">
 		<div class="text-center lg:text-left">
-			<h1 class="text-5xl font-bold">Start Your Pokemon Journey!</h1>
+			<h1 class="text-5xl font-bold">Start Your Pokédex Journey!</h1>
 		</div>
 		<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-neutral">
 			<SignUp {supabase} />
@@ -26,87 +26,116 @@
 	</div>
 </div>
 
-<div class="welcome-banner">
-	<div class="font-bold max-w-xl mx-auto">
-		<h2>
-			Welcome to the Pokedex website, where you can delve into the vast world of Pokémon with ease.
-		</h2>
-	</div>
+<div
+	class="md:container md:mx-auto justify-self-center flex justify-center items-center h-full flex-col mb-10"
+>
+	<div class="stats stats-vertical lg:stats-horizontal shadow bg-neutral text-center">
+		<div class="stat">
+			<div class="stat-title">Pokémon caught</div>
+			<div class="stat-value">310K</div>
+			<div class="stat-desc">Since January 2024</div>
+		</div>
 
-	<div class="colOne"></div>
-	<div class="one font-bold">
-		<p>
-			We're more than just a Pokédex - we're a vibrant community of passionate Pokémon enthusiasts
-			like you! Explore our extensive database, discover the unique traits of each Pokémon species,
-			where you can connect with friends and share your Pokémon journey like never before.. okéAtlas
-			isn't just about information; it's about exploration and discovery. With an intuitive search
-			function and user-friendly interface, navigating the Pokédex is a breeze. Whether you're
-			searching by name, type, region, or even specific attributes like height or weight, PokéAtlas
-			makes it easy to find exactly what you're looking for.
-		</p>
-	</div>
-	<div class="colTwo"></div>
-	<div class="two font-bold">
-		<p>
-			dynamic community features. In addition to browsing the Pokédex, users can create their own
-			profiles, customize their collections, and connect with fellow trainers from around the world.
-			Whether you're sharing your latest catches, discussing strategy, or organizing trades and
-			battles, PokéAtlas provides a vibrant platform for connecting with other Pokémon fans.
-			<i>Ready to catch 'em all?</i>
-		</p>
-	</div>
-	<img src="/template-welcome-pokedex.png" alt="welcome background" height="100%" width="100%" />
-</div>
+		<div class="stat">
+			<div class="stat-title">New Users</div>
+			<div class="stat-value">4,200</div>
+			<div class="stat-desc">↗︎ 400 (22%)</div>
+		</div>
 
-<div class="flex justify-center">
-	<div class="text-4xl text-center font-mono p-8">
-		<h3>Join Us!</h3>
-	</div>
-
-	<div class="card w-96 bg-base-100 shadow-xl p-16">
-		<div class="card-body">
-			<h4 class="card-title">
-				We invite you to share your thoughts, ideas, and experiences with fellow Trainers from
-				around the globe
-			</h4>
-			<p></p>
-			<div class="card-actions justify-end">
-				<a href="discord.com">Discord </a>
-			</div>
+		<div class="stat">
+			<div class="stat-title">Living Dexes Completed</div>
+			<div class="stat-value">1,200</div>
+			<div class="stat-desc">↘︎ 90 (14%)</div>
 		</div>
 	</div>
+
+	<div class="features mt-8">
+		<h1 class="flex justify-center text-4xl font-bold mb-5">Features</h1>
+
+		<ul class="space-y-6">
+			<li class="p-6 rounded-lg shadow-md bg-neutral">
+				<div class="flex items-start space-x-4">
+					<svg
+						class="w-8 h-8 text-green-500 flex-shrink-0"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
+						></path>
+					</svg>
+					<div>
+						<h2 class="text-lg font-semibold">Social</h2>
+						<p>
+							Easily share your Pokédex journey with friends, or find theirs. If you'd rather go it
+							alone, that's okay too!
+						</p>
+					</div>
+				</div>
+			</li>
+			<li class="p-6 rounded-lg shadow-md bg-neutral">
+				<div class="flex items-start space-x-4">
+					<svg
+						class="w-8 h-8 text-green-500 flex-shrink-0"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
+						></path>
+					</svg>
+					<div>
+						<h2 class="text-lg font-semibold">Free & Open Source</h2>
+						<p>
+							Completely open source and free to use, enabling the community to contribute updates
+							as soon as new Pokémon are released.
+						</p>
+					</div>
+				</div>
+			</li>
+			<li class="p-6 rounded-lg shadow-md bg-neutral">
+				<div class="flex items-start space-x-4">
+					<svg
+						class="w-8 h-8 text-green-500 flex-shrink-0"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
+						></path>
+					</svg>
+					<div>
+						<h2 class="text-lg font-semibold">Easy to use with advanced filtering</h2>
+						<p>
+							If you just want to track your progress completing your Pokédex, you can do that. But
+							if you are attempting a harder variant, like a Living Origin Forme Dex, you might find
+							our advanced filtering options helpful for tracking target Pokémon for specific
+							catching sessions.
+						</p>
+					</div>
+				</div>
+			</li>
+			<li class="p-6 rounded-lg shadow-md bg-neutral">
+				<div class="flex items-start space-x-4">
+					<svg
+						class="w-8 h-8 text-green-500 flex-shrink-0"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
+						></path>
+					</svg>
+					<div>
+						<h2 class="text-lg font-semibold">100% free</h2>
+						<p>Did we mention it's completely free to use? Oh, we did? Good. Because it is.</p>
+					</div>
+				</div>
+			</li>
+		</ul>
+	</div>
 </div>
-
-<style>
-	.welcome-banner {
-		position: relative;
-	}
-	h2 {
-		font-size: 40px;
-		text-align: center;
-		position: absolute;
-		top: 25%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
-	.one {
-		position: absolute;
-		font-size: 15px;
-		top: 50%;
-		left: 10%;
-		transform: translate(-50%, -50%);
-		padding-right: 20px;
-		max-width: calc(50% - 210px);
-		text-align: right;
-	}
-
-	.two {
-		position: absolute;
-		top: 50%;
-		right: 10%;
-		transform: translate(50%, -50%);
-		padding-left: 0px;
-		max-width: calc(50% - 210px);
-		text-align: right;
-	}
-</style>