feat: Welcome page (index) — greeting, framing, nav cards

src/pages/index.astro

@@ -1,27 +1,176 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
+
+// Placeholder — will be replaced with real session data once auth is built.
+const user = { name: 'Mette' };
 ---
 <BaseLayout title="Welcome">
-  <main class="placeholder-main">
+  <div class="page">
-    <span class="label-md">Project Bifrost</span>
+
-    <h1 class="display-md heading">
+    <!-- Wordmark -->
-      Welcome to the <em class="emphasis">hub.</em>
+    <header class="wordmark-bar">
-    </h1>
+      <img src="/logo.svg" alt="Fenja AI" class="wordmark" />
-    <p class="lead">Authentication and personalised content coming soon.</p>
+    </header>
-  </main>
+
+    <!-- Greeting -->
+    <main class="main">
+      <div class="greeting-zone">
+        <p class="label-md eyebrow">Project Bifrost</p>
+        <h1 class="display-lg greeting">
+          Welcome, <em class="name">{user.name}.</em>
+        </h1>
+        <p class="lead framing">
+          This is the private working space for the Bifrost pilot — where you follow what we are building,
+          shape it with your experience, and meet the people building it with you.
+        </p>
+      </div>
+
+      <!-- Navigation cards -->
+      <nav class="cards" aria-label="Quick navigation">
+        <a href="/updates" class="card">
+          <span class="label-sm card-label">Latest update</span>
+          <h2 class="headline-sm card-title">
+            See what <em class="card-em">changed.</em>
+          </h2>
+          <p class="body-sm card-body">
+            Progress notes from Fenja — what shipped, what shifted, what is next.
+          </p>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </a>
+
+        <a href="/calendar" class="card">
+          <span class="label-sm card-label">Next meeting</span>
+          <h2 class="headline-sm card-title">
+            The CAB <em class="card-em">calendar.</em>
+          </h2>
+          <p class="body-sm card-body">
+            Upcoming sessions, agendas, and notes from past meetings.
+          </p>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </a>
+
+        <a href="/contribute" class="card">
+          <span class="label-sm card-label">Contribute</span>
+          <h2 class="headline-sm card-title">
+            Share an <em class="card-em">idea.</em>
+          </h2>
+          <p class="body-sm card-body">
+            Post an idea, a question, or something that inspired you. Everyone in the hub sees it.
+          </p>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </a>
+      </nav>
+    </main>
+
+  </div>
 </BaseLayout>
 
 <style>
-  .placeholder-main {
+  .page {
-    padding: var(--space-20);
+    min-height: 100vh;
+    background: var(--background);
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* ── Wordmark bar ─────────────────────────────────────────────── */
+  .wordmark-bar {
+    padding: var(--space-8) var(--space-20);
+  }
+  .wordmark {
+    height: 28px;
+    width: auto;
+    display: block;
+  }
+
+  /* ── Greeting ─────────────────────────────────────────────────── */
+  .main {
+    flex: 1;
+    padding: var(--space-12) var(--space-20) var(--space-16);
     max-width: var(--content-max);
-    margin: 0 auto;
   }
-  .heading {
+
-    margin-top: var(--space-4);
+  .greeting-zone {
+    max-width: 44rem;
+    margin-bottom: var(--space-12);
   }
-  .emphasis {
+
+  .eyebrow {
+    margin-bottom: var(--space-4);
+  }
+
+  .greeting {
+    margin-bottom: var(--space-6);
+  }
+
+  .name {
     font-weight: 700;
     font-style: italic;
   }
+
+  .framing {
+    max-width: var(--reading-max);
+  }
+
+  /* ── Navigation cards ─────────────────────────────────────────── */
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-4);
+  }
+
+  .card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-6);
+    background: var(--surface-container-lowest);
+    border-radius: var(--radius-md);
+    color: var(--on-surface);
+    border-bottom: none;
+    text-decoration: none;
+    transition: background var(--duration-med) var(--ease-standard);
+  }
+  .card:hover {
+    background: var(--surface-container-low);
+    border-bottom: none;
+    color: var(--on-surface);
+  }
+
+  .card-label {
+    color: var(--on-surface-muted);
+  }
+
+  .card-title {
+    font-size: var(--text-headline-sm);
+    font-family: var(--font-serif);
+    font-weight: 400;
+    letter-spacing: var(--tracking-snug);
+    line-height: var(--leading-snug);
+    margin: 0;
+    color: var(--on-surface);
+  }
+
+  .card-em {
+    font-weight: 700;
+    font-style: italic;
+  }
+
+  .card-body {
+    margin: 0;
+    color: var(--on-surface-variant);
+    flex: 1;
+  }
+
+  .card-arrow {
+    font-family: var(--font-serif);
+    font-size: var(--text-body-sm);
+    color: var(--secondary);
+    align-self: flex-end;
+    transition: color var(--duration-fast) var(--ease-standard);
+  }
+  .card:hover .card-arrow {
+    color: var(--secondary-dim);
+  }
 </style>