src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script>
+    import "$lib/global.css";
 	import favicon from '$lib/assets/favicon.png';
 	import Toaster from '$lib/components/Toaster.svelte';
 

src/routes/Footer.svelte

@@ -19,6 +19,8 @@
 			<a href="#features">Features</a>
 			<a href="#pricing">Pricing</a>
 			<a href="#faq">FAQ</a>
+			<a href="/login">Log In</a>
+			<a href="/register">Sign Up</a>
 		</div>
 
 		<div class="footer-right">

src/routes/Navbar.svelte

@@ -64,7 +64,8 @@
 		</div>
 
 		<div class="nav-actions">
-			<button class="btn btn-primary" onclick={() => handleNavClick('pricing')}>See Pricing</button>
+			<a href="/login" class="btn btn-secondary">Log In</a>
+			<a href="/register" class="btn btn-primary">Get Started</a>
 		</div>
 
 		<!-- Mobile hamburger -->

src/routes/login/+page.svelte

@@ -0,0 +1,143 @@
+<script>
+    import favicon from "$lib/assets/favicon.png";
+    import {toast} from "$lib/toast.svelte.js";
+    import {PUBLIC_API_URL} from "$env/static/public";
+    import {goto} from "$app/navigation";
+
+    let email = $state("");
+    let password = $state("");
+
+    const submit = async ()=>{
+        const body = {
+            email: email,
+            password: password
+        };
+
+        const response = await fetch(`${PUBLIC_API_URL}/user/login`, {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            credentials: "include",
+            body: JSON.stringify(body)
+        });
+
+        const responseBody = await response.json();
+        if(!response.ok){
+            toast(responseBody.error.message, "error");
+        }else{
+            goto("/dashboard");
+        }
+    }
+</script>
+
+<main>
+    <a href="/" class="logo">
+        <span class="logo-icon">
+            <img src={favicon} alt="ChatRPG logo" width="35" height="35" />
+        </span>
+        <span class="logo-text">ChatRPG</span>
+    </a>
+
+    <div class="form-glow">
+        <form class="standardForm" onsubmit={submit}>
+            <h2>Welcome Back</h2>
+
+            <label>Email
+                <input bind:value={email} type="email" required autofocus>
+            </label>
+
+            <label>Password
+                <input bind:value={password} type="password" required>
+            </label>
+
+            <button type="submit">Log In</button>
+
+            <p>Don't have an account? <a href="/register">Sign up</a></p>
+        </form>
+    </div>
+</main>
+
+<style>
+    main {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1.75rem;
+        padding: 2rem 1rem;
+    }
+
+    a.logo {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        text-decoration: none;
+        color: #e5e5ea;
+        font-weight: 700;
+        font-size: 32px;
+        letter-spacing: -0.5px;
+    }
+
+    a.logo img {
+        width: 48px;
+        height: 48px;
+    }
+
+    a.logo .logo-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    h2 {
+        text-align: center;
+    }
+
+    .form-glow {
+        position: relative;
+        border-radius: 14px;
+        width: min(660px, 100%);
+    }
+
+    .form-glow::before {
+        content: "";
+        position: absolute;
+        inset: -2px;
+        border-radius: 14px;
+        background: conic-gradient(
+            from var(--angle, 0deg),
+            transparent 0%,
+            #c084fc 20%,
+            #5a5aff 40%,
+            transparent 60%
+        );
+        animation: spin-border 10s linear infinite;
+        z-index: 0;
+    }
+
+    .form-glow::after {
+        content: "";
+        position: absolute;
+        inset: 1px;
+        border-radius: 13px;
+        background: #1a1a2e;
+        z-index: 1;
+    }
+
+    .form-glow .standardForm {
+        position: relative;
+        z-index: 2;
+        border-color: transparent;
+        max-width: 660px;
+    }
+
+    @property --angle {
+        syntax: "<angle>";
+        inherits: false;
+        initial-value: 0deg;
+    }
+
+    @keyframes spin-border {
+        to { --angle: 360deg; }
+    }
+</style>

src/routes/register/+page.svelte

@@ -1,5 +1,4 @@
 <script>
-    import "$lib/global.css";
     import {PUBLIC_API_URL} from "$env/static/public";
     import {goto} from "$app/navigation";
     import {toast} from "$lib/toast.svelte.js";
@@ -48,7 +47,7 @@
             <h2>Join The Adventure</h2>
 
             <label>Name
-                <input bind:value={name} type="text" required>
+                <input bind:value={name} type="text" required autofocus>
             </label>
 
             <label>Email