Merge pull request #79 from jcreek/54-make-it-clear-what-the-profile-search-is-in-the-nav-bar-ie-not-a-pokemon-search

feat(#54): Remove search icon and improve sign in page

src/lib/components/SignIn.svelte

@@ -8,11 +8,16 @@
 
 	let email = '';
 	let password = '';
+	let isLoading = false;
+	let errorMessage = '';
 
 	// Access the supabase client from the layout data
 	export let supabase: any;
 
 	async function signInWithEmail() {
+		isLoading = true;
+		errorMessage = '';
+
 		try {
 			const { data, error } = await supabase.auth.signInWithPassword({
 				email: email,
@@ -21,7 +26,7 @@
 
 			if (error) {
 				console.error('Sign in error:', error);
-				alert(`Sign in failed: ${error.message}`);
+				errorMessage = error.message;
 				return;
 			}
 
@@ -30,37 +35,112 @@
 			}
 		} catch (err) {
 			console.error('Sign in error:', err);
-			alert('Sign in failed');
+			errorMessage = 'An unexpected error occurred. Please try again.';
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handleKeyPress(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			signInWithEmail();
 		}
 	}
 </script>
 
-<label class="input input-bordered flex items-center gap-2">
+<div class="space-y-4">
-	<svg
+	<!-- Error Message -->
-		xmlns="http://www.w3.org/2000/svg"
+	{#if errorMessage}
-		viewBox="0 0 16 16"
+		<div class="alert alert-error text-sm">
-		fill="currentColor"
+			<svg
-		class="w-4 h-4 opacity-70"
+				xmlns="http://www.w3.org/2000/svg"
-		><path
+				class="h-5 w-5 shrink-0 stroke-current"
-			d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
+				fill="none"
-		/><path
+				viewBox="0 0 24 24"
-			d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
+			>
-		/></svg
+				<path
-	>
+					stroke-linecap="round"
-	<input type="text" class="grow" placeholder="Email" bind:value={email} />
+					stroke-linejoin="round"
-</label>
+					stroke-width="2"
-<label class="input input-bordered flex items-center gap-2">
+					d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-	<svg
+				/>
-		xmlns="http://www.w3.org/2000/svg"
+			</svg>
-		viewBox="0 0 16 16"
+			<span>{errorMessage}</span>
-		fill="currentColor"
+		</div>
-		class="w-4 h-4 opacity-70"
+	{/if}
-		><path
+
-			fill-rule="evenodd"
+	<!-- Email Input -->
-			d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+	<div class="form-control">
-			clip-rule="evenodd"
+		<label class="label">
-		/></svg
+			<span class="label-text font-medium">Email</span>
-	>
+		</label>
-	<input type="password" class="grow" placeholder="Password" bind:value={password} />
+		<div class="relative">
-</label>
+			<input
-<button class="btn btn-active btn-primary" on:click={signInWithEmail}>Sign In</button>
+				type="email"
+				placeholder="your@email.com"
+				class="input input-bordered w-full pl-10"
+				bind:value={email}
+				on:keypress={handleKeyPress}
+				disabled={isLoading}
+			/>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 16 16"
+				fill="currentColor"
+				class="h-4 w-4 opacity-70 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
+			>
+				<path
+					d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
+				/>
+				<path
+					d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
+				/>
+			</svg>
+		</div>
+	</div>
+
+	<!-- Password Input -->
+	<div class="form-control">
+		<label class="label">
+			<span class="label-text font-medium">Password</span>
+		</label>
+		<div class="relative">
+			<input
+				type="password"
+				placeholder="••••••••"
+				class="input input-bordered w-full pl-10"
+				bind:value={password}
+				on:keypress={handleKeyPress}
+				disabled={isLoading}
+			/>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 16 16"
+				fill="currentColor"
+				class="h-4 w-4 opacity-70 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</div>
+	</div>
+
+	<!-- Sign In Button -->
+	<div class="form-control mt-6">
+		<button
+			class="btn btn-primary w-full"
+			on:click={signInWithEmail}
+			disabled={isLoading || !email || !password}
+		>
+			{#if isLoading}
+				<span class="loading loading-spinner loading-sm"></span>
+				Signing in...
+			{:else}
+				Sign In
+			{/if}
+		</button>
+	</div>
+</div>

src/routes/+layout.svelte

@@ -137,21 +137,6 @@
 				<a class="btn btn-ghost text-xl" href="/">Living Dex Tracker</a>
 			</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">
 					{#if localUser}
 						<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">

src/routes/forgot-password/+page.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { user } from '$lib/stores/user.js';
+	import { goto } from '$app/navigation';
+	import type { User } from '@supabase/auth-js';
+
+	export let data;
+	let { supabase } = data;
+	$: ({ supabase } = data);
+
+	let localUser: User | null = null;
+	const unsubscribe = user.subscribe((value) => {
+		localUser = value;
+	});
+	onDestroy(unsubscribe);
+
+	let showAnimation = false;
+
+	onMount(() => {
+		// Redirect if already logged in
+		if (localUser) {
+			goto('/my-pokedexes');
+		}
+
+		// Start animation
+		setTimeout(() => {
+			showAnimation = true;
+		}, 100);
+	});
+
+	let email = '';
+	let isLoading = false;
+	let errorMessage = '';
+	let successMessage = '';
+
+	async function sendResetEmail() {
+		isLoading = true;
+		errorMessage = '';
+		successMessage = '';
+
+		try {
+			const { error } = await supabase.auth.resetPasswordForEmail(email, {
+				redirectTo: `${window.location.origin}/reset-password`
+			});
+
+			if (error) {
+				console.error('Reset password error:', error);
+				errorMessage = error.message;
+				return;
+			}
+
+			successMessage = 'Check your email for the password reset link';
+			email = '';
+		} catch (err) {
+			console.error('Reset password error:', err);
+			errorMessage = 'An unexpected error occurred. Please try again.';
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handleKeyPress(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			sendResetEmail();
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Forgot Password - Living Dex Tracker</title>
+	<meta name="description" content="Reset your password for Living Dex Tracker." />
+</svelte:head>
+
+<div class="min-h-[calc(100vh-16rem)] bg-base-100 py-8 md:py-16 px-4 sm:px-6 lg:px-8">
+	<div class="max-w-md mx-auto">
+		<!-- Hero Section -->
+		<div class="text-center mb-8 {showAnimation ? 'animate-fade-in' : ''}">
+			<div class="flex justify-center mb-4">
+				<div class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-10 w-10 text-primary"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+						/>
+					</svg>
+				</div>
+			</div>
+			<h1
+				class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-2"
+			>
+				Forgot Password?
+			</h1>
+			<p class="text-base-content/70">Enter your email to receive a password reset link</p>
+		</div>
+
+		<!-- Forgot Password Card -->
+		<div class="card bg-base-200 shadow-xl {showAnimation ? 'animate-slide-up' : ''}">
+			<div class="card-body p-6 md:p-8">
+				<!-- Error Message -->
+				{#if errorMessage}
+					<div class="alert alert-error text-sm">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5 shrink-0 stroke-current"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						<span>{errorMessage}</span>
+					</div>
+				{/if}
+
+				<!-- Success Message -->
+				{#if successMessage}
+					<div class="alert alert-success text-sm">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5 shrink-0 stroke-current"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						<span>{successMessage}</span>
+					</div>
+				{/if}
+
+				<!-- Email Input -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Email</span>
+					</label>
+					<div class="relative">
+						<input
+							type="email"
+							placeholder="your@email.com"
+							class="input input-bordered w-full pl-10"
+							bind:value={email}
+							on:keypress={handleKeyPress}
+							disabled={isLoading}
+						/>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="h-4 w-4 opacity-70 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
+						>
+							<path
+								d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
+							/>
+							<path
+								d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
+							/>
+						</svg>
+					</div>
+				</div>
+
+				<!-- Send Reset Link Button -->
+				<div class="form-control mt-6">
+					<button
+						class="btn btn-primary w-full"
+						on:click={sendResetEmail}
+						disabled={isLoading || !email}
+					>
+						{#if isLoading}
+							<span class="loading loading-spinner loading-sm"></span>
+							Sending...
+						{:else}
+							Send Reset Link
+						{/if}
+					</button>
+				</div>
+
+				<!-- Back to Sign In Link -->
+				<div class="divider text-sm opacity-70">or</div>
+
+				<div class="text-center">
+					<p class="text-sm opacity-70 mb-2">Remember your password?</p>
+					<a href="/signin" class="link link-primary font-semibold hover:underline"> Sign In </a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slide-up {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.animate-fade-in {
+		animation: fade-in 0.5s ease-out forwards;
+	}
+
+	.animate-slide-up {
+		animation: slide-up 0.5s ease-out forwards;
+		animation-delay: 0.1s;
+		opacity: 0;
+	}
+
+	/* Respect user's motion preferences */
+	@media (prefers-reduced-motion: reduce) {
+		.animate-fade-in,
+		.animate-slide-up {
+			animation: none;
+			opacity: 1;
+			transform: none;
+		}
+	}
+
+	/* Gradient text fallback for older browsers */
+	@supports not (background-clip: text) {
+		h1 {
+			background: none;
+			color: hsl(var(--p));
+		}
+	}
+</style>

src/routes/reset-password/+page.svelte

@@ -0,0 +1,310 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { user } from '$lib/stores/user.js';
+	import { goto } from '$app/navigation';
+	import type { User } from '@supabase/auth-js';
+
+	export let data;
+	let { supabase } = data;
+	$: ({ supabase } = data);
+
+	let localUser: User | null = null;
+	const unsubscribe = user.subscribe((value) => {
+		localUser = value;
+	});
+	onDestroy(unsubscribe);
+
+	let showAnimation = false;
+	let hasCheckedAuth = false;
+
+	onMount(() => {
+		// Start animation
+		setTimeout(() => {
+			showAnimation = true;
+		}, 100);
+
+		// Check authentication after a short delay to allow Supabase to process the token
+		setTimeout(() => {
+			hasCheckedAuth = true;
+			if (!localUser) {
+				goto('/signin');
+			}
+		}, 500);
+	});
+
+	// Reactive: redirect if user becomes null after initial check
+	$: if (hasCheckedAuth && !localUser) {
+		goto('/signin');
+	}
+
+	let password = '';
+	let confirmPassword = '';
+	let isLoading = false;
+	let errorMessage = '';
+	let successMessage = '';
+
+	async function updatePassword() {
+		isLoading = true;
+		errorMessage = '';
+		successMessage = '';
+
+		// Validate passwords match
+		if (password !== confirmPassword) {
+			errorMessage = 'Passwords do not match';
+			isLoading = false;
+			return;
+		}
+
+		// Validate password length
+		if (password.length < 6) {
+			errorMessage = 'Password must be at least 6 characters long';
+			isLoading = false;
+			return;
+		}
+
+		try {
+			const { error } = await supabase.auth.updateUser({
+				password: password
+			});
+
+			if (error) {
+				console.error('Update password error:', error);
+				errorMessage = error.message;
+				return;
+			}
+
+			successMessage = 'Password updated successfully! Redirecting to sign in...';
+
+			// Redirect to sign in after a short delay
+			setTimeout(() => {
+				goto('/signin');
+			}, 2000);
+		} catch (err) {
+			console.error('Update password error:', err);
+			errorMessage = 'An unexpected error occurred. Please try again.';
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handleKeyPress(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			updatePassword();
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Reset Password - Living Dex Tracker</title>
+	<meta name="description" content="Set a new password for your Living Dex Tracker account." />
+</svelte:head>
+
+<div class="min-h-[calc(100vh-16rem)] bg-base-100 py-8 md:py-16 px-4 sm:px-6 lg:px-8">
+	<div class="max-w-md mx-auto">
+		<!-- Hero Section -->
+		<div class="text-center mb-8 {showAnimation ? 'animate-fade-in' : ''}">
+			<div class="flex justify-center mb-4">
+				<div class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-10 w-10 text-primary"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+						/>
+					</svg>
+				</div>
+			</div>
+			<h1
+				class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-2"
+			>
+				Reset Password
+			</h1>
+			<p class="text-base-content/70">Enter your new password below</p>
+		</div>
+
+		<!-- Reset Password Card -->
+		<div class="card bg-base-200 shadow-xl {showAnimation ? 'animate-slide-up' : ''}">
+			<div class="card-body p-6 md:p-8">
+				<!-- Error Message -->
+				{#if errorMessage}
+					<div class="alert alert-error text-sm">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5 shrink-0 stroke-current"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						<span>{errorMessage}</span>
+					</div>
+				{/if}
+
+				<!-- Success Message -->
+				{#if successMessage}
+					<div class="alert alert-success text-sm">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5 shrink-0 stroke-current"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						<span>{successMessage}</span>
+					</div>
+				{/if}
+
+				<!-- New Password Input -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">New Password</span>
+					</label>
+					<div class="relative">
+						<input
+							type="password"
+							placeholder="••••••••"
+							class="input input-bordered w-full pl-10"
+							bind:value={password}
+							on:keypress={handleKeyPress}
+							disabled={isLoading}
+						/>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="h-4 w-4 opacity-70 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+				</div>
+
+				<!-- Confirm Password Input -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Confirm Password</span>
+					</label>
+					<div class="relative">
+						<input
+							type="password"
+							placeholder="••••••••"
+							class="input input-bordered w-full pl-10"
+							bind:value={confirmPassword}
+							on:keypress={handleKeyPress}
+							disabled={isLoading}
+						/>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="h-4 w-4 opacity-70 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+				</div>
+
+				<!-- Update Password Button -->
+				<div class="form-control mt-6">
+					<button
+						class="btn btn-primary w-full"
+						on:click={updatePassword}
+						disabled={isLoading || !password || !confirmPassword}
+					>
+						{#if isLoading}
+							<span class="loading loading-spinner loading-sm"></span>
+							Updating...
+						{:else}
+							Update Password
+						{/if}
+					</button>
+				</div>
+
+				<!-- Back to Sign In Link -->
+				<div class="divider text-sm opacity-70">or</div>
+
+				<div class="text-center">
+					<a href="/signin" class="link link-primary font-semibold hover:underline">
+						Back to Sign In
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slide-up {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.animate-fade-in {
+		animation: fade-in 0.5s ease-out forwards;
+	}
+
+	.animate-slide-up {
+		animation: slide-up 0.5s ease-out forwards;
+		animation-delay: 0.1s;
+		opacity: 0;
+	}
+
+	/* Respect user's motion preferences */
+	@media (prefers-reduced-motion: reduce) {
+		.animate-fade-in,
+		.animate-slide-up {
+			animation: none;
+			opacity: 1;
+			transform: none;
+		}
+	}
+
+	/* Gradient text fallback for older browsers */
+	@supports not (background-clip: text) {
+		h1 {
+			background: none;
+			color: hsl(var(--p));
+		}
+	}
+</style>

src/routes/signin/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { user } from '$lib/stores/user.js';
 	import { type User } from '@supabase/auth-js';
 	import SignIn from '$lib/components/SignIn.svelte';
@@ -15,6 +15,19 @@
 	});
 	onDestroy(unsubscribe);
 
+	let showAnimation = false;
+	let animationTimer: ReturnType<typeof setTimeout>;
+
+	onMount(() => {
+		animationTimer = setTimeout(() => {
+			showAnimation = true;
+		}, 100);
+	});
+
+	onDestroy(() => {
+		clearTimeout(animationTimer);
+	});
+
 	async function getUser() {
 		try {
 			const {
@@ -35,4 +48,116 @@
 	}
 </script>
 
-<SignIn {supabase} on:signedIn={getUser} />
+<svelte:head>
+	<title>Sign In - Living Dex Tracker</title>
+	<meta
+		name="description"
+		content="Sign in to Living Dex Tracker to track your Pokédex progress."
+	/>
+</svelte:head>
+
+<div class="min-h-[calc(100vh-16rem)] bg-base-100 py-8 md:py-16 px-4 sm:px-6 lg:px-8">
+	<div class="max-w-md mx-auto">
+		<!-- Hero Section -->
+		<div class="text-center mb-8 {showAnimation ? 'animate-fade-in' : ''}">
+			<div class="flex justify-center mb-4">
+				<div class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-10 w-10 text-primary"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
+						/>
+					</svg>
+				</div>
+			</div>
+			<h1
+				class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-2"
+			>
+				Welcome Back
+			</h1>
+			<p class="text-base-content/70">Sign in to continue tracking your Pokédex progress</p>
+		</div>
+
+		<!-- Sign In Card -->
+		<div class="card bg-base-200 shadow-xl {showAnimation ? 'animate-slide-up' : ''}">
+			<div class="card-body p-6 md:p-8">
+				<SignIn {supabase} on:signedIn={getUser} />
+
+				<!-- Sign Up Link -->
+				<div class="divider text-sm opacity-70">or</div>
+
+				<div class="text-center">
+					<p class="text-sm opacity-70 mb-2">Don't have an account?</p>
+					<a href="/" class="link link-primary font-semibold hover:underline">
+						Register for free
+					</a>
+				</div>
+			</div>
+		</div>
+
+		<!-- Help Section -->
+		<div class="mt-6 text-center text-sm opacity-60">
+			<a href="/forgot-password" class="link link-primary hover:underline">
+				Forgot your password?
+			</a>
+		</div>
+	</div>
+</div>
+
+<style>
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slide-up {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.animate-fade-in {
+		animation: fade-in 0.5s ease-out forwards;
+	}
+
+	.animate-slide-up {
+		animation: slide-up 0.5s ease-out forwards;
+		animation-delay: 0.1s;
+		opacity: 0;
+	}
+
+	/* Respect user's motion preferences */
+	@media (prefers-reduced-motion: reduce) {
+		.animate-fade-in,
+		.animate-slide-up {
+			animation: none;
+			opacity: 1;
+			transform: none;
+		}
+	}
+
+	/* Gradient text fallback for older browsers */
+	@supports not (background-clip: text) {
+		h1 {
+			background: none;
+			color: hsl(var(--p));
+		}
+	}
+</style>