Stylize the register page

src/routes/Hero.svelte

@@ -19,9 +19,7 @@
 		</p>
 
 		<div class="hero-ctas">
-			<button class="btn btn-primary large" onclick={() => scrollTo('pricing')}>
-				See Pricing
-			</button>
+			<a href="/register" class="btn btn-primary large">Get Started</a>
 			<button class="btn btn-secondary large" onclick={() => scrollTo('how')}>
 				See How It Works
 			</button>

src/routes/Pricing.svelte

@@ -35,6 +35,8 @@
 			<div class="pricing-note">
 				You control model choice in the future (faster/cheaper or more creative).
 			</div>
+
+			<a href="/register" class="btn btn-primary large full">Get Started</a>
 		</div>
 	</div>
 </section>

src/routes/register/+page.svelte

@@ -1,5 +1,6 @@
 <script>
     import "$lib/global.css";
+    import favicon from "$lib/assets/favicon.png";
 
     let name = $state("");
     let email = $state("");
@@ -12,24 +13,76 @@
     }
 </script>
 
-<div id="register" class="standardForm" onsubmit={submit}>
-    <label>Name:
-        <input bind:value={name} type="text" required>
-    </label>
+<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>
 
-    <label>Email:
-        <input bind:value={email} type="email" required>
-    </label>
+    <div id="register" class="standardForm" onsubmit={submit}>
+        <h2>Join The Adventure</h2>
 
-    <label>Password:
-        <input bind:value={password} type="password" required>
-    </label>
+        <label>Name
+            <input bind:value={name} type="text" required>
+        </label>
 
-    <label>Confirm Password:
-        <input bind:value={confirmPassword} type="password" required>
-    </label>
+        <label>Email
+            <input bind:value={email} type="email" required>
+        </label>
 
-    <input bind:value={url} type="hidden" required>
+        <label>Password
+            <input bind:value={password} type="password" required>
+        </label>
 
-    <button>Register</button>
-</div>
+        <label>Confirm Password
+            <input bind:value={confirmPassword} type="password" required>
+        </label>
+
+        <input bind:value={url} type="hidden" required>
+
+        <button type="submit">Register</button>
+
+        <p>Already have an account? <a href="/login">Log in</a></p>
+    </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 {
+        color: #c084fc;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    h2{
+        text-align: center;
+    }
+</style>