Make profile page

src/routes/+layout.svelte

@@ -89,7 +89,7 @@
 </svelte:head>
 
 <header>
-	<div class="navbar bg-base-100">
+	<div class="navbar bg-neutral">
 		<div class="flex-1">
 			<a class="btn btn-ghost text-xl" href="/">Living Dex Tracker</a>
 		</div>
@@ -104,10 +104,7 @@
 			<div class="dropdown dropdown-end">
 				<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
 					<div class="w-10 rounded-full">
-						<img
+						<img alt="usericon" src="/OIG5.jpg" />
-							alt="Tailwind CSS Navbar component"
-							src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
-						/>
 					</div>
 				</div>
 				<ul

src/routes/+page.svelte

@@ -15,15 +15,98 @@
 	onDestroy(unsubscribe);
 </script>
 
-<div class="hero min-h-screen bg-base-200">
+<div class="hero min-h-screen bg-base-100">
 	<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">
+		<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-neutral">
 			<SignUp {supabase} />
 		</div>
 	</div>
 </div>
 
-<p></p>
+<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="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="Join Us 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>
+	</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>

src/routes/profile/+page.svelte

@@ -1 +1,58 @@
-<h1>dfftht</h1>
+<div class="h-screen">
+	<div id="banner">
+		<div id="avatar">
+			<div
+				class="avatar mt-10 ml-20 w-14 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2"
+			>
+				<div class="rounded-full"><img src="/OIG5.jpg" alt="profile icon" /></div>
+			</div>
+			<button class="btn btn-outline btn-primary">Upload new avatar</button>
+		</div>
+		<div id="personal-information">
+			<p class="text-white font-mono text-3xl font-bold">Username</p>
+			<p class="text-white font-mono text-3xl font-bold">Title</p>
+			<p class="text-white font-mono text-3xl font-bold">Level</p>
+		</div>
+	</div>
+	<div id="profile-content">
+		<div id="pokemon-collection-summary">
+			<div class="radial-progress top-0 left-0" style="--value:70;" role="progressbar">70%</div>
+			<div class="caught-text top-20 left-30 font-mono text-xl">
+				<p>Total Pokemon Caught</p>
+			</div>
+
+			<h2 class="">Types Collected</h2>
+			<ul>
+				<li class="type-list-item font-mono">Fire</li>
+			</ul>
+			<br />
+			any other relevant statistics or achievements
+		</div>
+		<div id="customisation-options">
+			theme selection
+			<br />
+			profile background
+			<br />
+			any other features that enhance user experience and personalisation
+		</div>
+		<div id="social-sharing">
+			options for users to share their profile or achievements on social media platforms,
+			encouraging engagement and interaction with other users
+		</div>
+	</div>
+</div>
+
+<style>
+	#banner {
+		background: rgb(41, 106, 170);
+		background: linear-gradient(0deg, rgba(41, 106, 170, 1) 0%, rgba(123, 225, 255, 1) 100%);
+	}
+
+	#profile-content {
+		background-color: rgb(255, 247, 238);
+		color: black;
+	}
+	.ring {
+		box-shadow: 0 0 0 4px rgb(149, 175, 230);
+	}
+</style>