Add:

- Initial dashboard draft
- Login page 
- supabase magic link auth
- env parsing

src/routes/+layout.svelte

@@ -7,14 +7,6 @@
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
 
-<header class="site-header">
-  <a class="site-logo" href="/">gitKeep</a>
-  <nav class="site-nav" aria-label="Main navigation">
-    <a href="#how-it-works">How it works</a>
-    <a class="login-link" href="#get-started">Login</a>
-  </nav>
-</header>
-
 <main>
   {@render children()}
 </main>

src/routes/+page.svelte

@@ -1,3 +1,10 @@
+<header class="site-header">
+  <a class="site-logo" href="/">gitKeep</a>
+  <nav class="site-nav" aria-label="Main navigation">
+    <a href="#how-it-works">How it works</a>
+    <a class="login-link" href="/login">Login</a>
+  </nav>
+</header>
 <section class="container hero" id="intro">
   <div class="row">
     <div class = "six columns">

src/routes/dashboard/+page.svelte

@@ -0,0 +1,51 @@
+<header class="site-header">
+  <a class="site-logo" href="/">gitKeep</a>
+  <nav class="site-nav" aria-label="Main navigation">
+    <a class="login-link" href="#get-started">Logout</a>
+  </nav>
+</header>
+
+<script lang="ts">
+  import Config from "./Config.svelte";
+  let activePanel = $state("configuration");
+  let { data } = $props();;
+</script>
+
+<section class="container hero" id="intro">
+  <h1> Welcome to gitKeep...</h1>
+
+    <div class="dashboard-button-row">
+      <div class="dashboard-button-column">
+        <button
+          class="dashboard-button"
+          class:active={activePanel === "configuration"}
+          aria-pressed={activePanel === "configuration"}
+          on:click={() => activePanel = "configuration"}
+        >Configure message</button>
+      </div>
+
+      <div class="dashboard-button-column">
+        <button
+          class="dashboard-button"
+          class:active={activePanel === "vouchList"}
+          aria-pressed={activePanel === "vouchList"}
+          on:click={() => activePanel = "vouchList"}
+        >Vouch list</button>
+      </div>
+
+      <div class="dashboard-button-column">
+        <button
+          class="dashboard-button"
+          class:active={activePanel === "gitHelp"}
+          aria-pressed={activePanel === "gitHelp"}
+          on:click={() => activePanel = "gitHelp"}
+        >Github setup</button>
+      </div>
+    </div>
+
+    {#if activePanel === "configuration"}
+    <Config markdown = {data.markdown} />
+    {/if}
+    
+
+</section>

src/routes/dashboard/Config.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  let { markdown = '' } = $props();
+  let text = $state(markdown);
+</script>
+<label for="text-input">Text</label>
+<textarea
+  id="text-input"
+  name="Onboarding agreement:"
+  bind:value={text}
+  placeholder="Enter text..."
+  rows="20"
+></textarea>
+
+<button type="submit">Submit</button>

src/routes/login/+page.server.ts

@@ -0,0 +1,29 @@
+   import { fail } from '@sveltejs/kit';
+   import { supabase } from '$lib/server/supabase.ts';
+   import type { Actions } from './$types';
+
+export const actions: Actions = {
+  default: async ({request, url}) =>{
+    const form = await request.formData();
+    const email = String(form.get("email") ?? "");
+    const baseUrl = url.origin;
+
+    if (!email){
+      return fail(400, {message: "Missing email"})
+    }
+      const { error } = await supabase.auth.signInWithOtp({
+      email: email,
+      options: {
+        shouldCreateUser: true,
+        emailRedirectTo: `${baseUrl}/dashboard`,
+      },
+    })
+    
+    if (error){
+      return fail(400, error.message);
+    }
+
+    return {success: true}
+
+  }
+}

src/routes/login/+page.svelte

@@ -0,0 +1,19 @@
+<header class="site-header">
+  <a class="site-logo" href="/">gitKeep</a>
+  <nav class="site-nav" aria-label="Main navigation">
+    <a href="/">Home</a>
+  </nav>
+</header>
+
+<section class="container login-page">
+  <div class="login-card">
+    <h1 class="display-heading">Login</h1>
+    <p class="login-copy">Enter your email and we’ll send you a magic link.</p>
+
+    <form class="login-form" method = "POST">
+      <label for="email">Email</label>
+      <input id="email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required />
+      <button type="submit">Send magic link</button>
+    </form>
+  </div>
+</section>