Create a header

src/routes/+layout.svelte

@@ -2,6 +2,42 @@
 	import 'tailwindcss/tailwind.css';
 </script>
 
+<header>
+	<div class="navbar bg-base-100">
+		<div class="flex-1">
+			<a class="btn btn-ghost text-xl">Pokedex Tracker</a>
+		</div>
+		<div class="flex-none gap-2">
+			<div class="form-control">
+				<input type="text" placeholder="Search" class="input input-bordered w-24 md:w-auto" />
+			</div>
+			<div class="dropdown dropdown-end">
+				<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
+					<div class="w-10 rounded-full">
+						<img
+							alt="Tailwind CSS Navbar component"
+							src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
+						/>
+					</div>
+				</div>
+				<ul
+					tabindex="0"
+					class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
+				>
+					<li>
+						<a class="justify-between">
+							Profile
+							<span class="badge">New</span>
+						</a>
+					</li>
+					<li><a>Settings</a></li>
+					<li><a>Logout</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</header>
+
 <main>
 	<slot />
 </main>

src/routes/+page.svelte

@@ -47,14 +47,20 @@
 	<span>Welcome back {userEmail}</span>
 	<br />
 {/if}
-<SignUp {supabase} />
 <br />
 <SignIn {supabase} on:signedIn={setUserEmail} />
 <br />
 <SignOut {supabase} on:signedOut={setUserEmail} />
 
-<div>
-	<PokemonSprite pokedexNumber={666} form={'poke-ball'} />
-	<PokemonSprite pokedexNumber={666} form={''} />
-	<PokemonSprite pokedexNumber={'003'} form={''} />
+<div class="hero min-h-screen bg-base-200">
+	<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>
+		</div>
+		<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
+			<SignUp {supabase} />
+		</div>
+	</div>
 </div>
+
+<p></p>

src/routes/profile/+page.svelte

@@ -0,0 +1 @@
+<h1>dfftht</h1>