From 636ef129bb2298e3953db8d91f011ea29126d8f5 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan@local>
Date: Sat, 18 Apr 2026 22:50:42 +0200
Subject: [PATCH] feat: product preview page

---
 src/pages/preview.astro | 185 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 185 insertions(+)
 create mode 100644 src/pages/preview.astro

diff --git a/src/pages/preview.astro b/src/pages/preview.astro
new file mode 100644
index 0000000..045adfc
--- /dev/null
+++ b/src/pages/preview.astro
@@ -0,0 +1,185 @@
+---
+import AppLayout from '../layouts/AppLayout.astro';
+
+const user = Astro.locals.user;
+---
+<AppLayout title="Product preview" user={user}>
+  <div class="page">
+
+    <header class="page-header">
+      <p class="label-sm eyebrow">Product preview</p>
+      <h1 class="display-md page-title">What we are building toward.</h1>
+      <p class="lead subtitle">
+        A first look at the platform. Early, restrained, honest.
+      </p>
+    </header>
+
+    <div class="content">
+
+      <!-- Fenja AI -->
+      <section class="product-section">
+        <div class="product-label">
+          <span class="label-sm product-tag">Platform</span>
+          <h2 class="headline-lg product-name">Fenja AI</h2>
+        </div>
+        <div class="product-body">
+          <p class="body-lg">
+            The sovereign AI platform. Open-source models — Llama 3, Mistral — deployed entirely
+            inside your infrastructure. No data leaves your network. No external API calls.
+            No foreign cloud dependencies.
+          </p>
+          <p class="body-lg">
+            You interact with it through a clean interface: ask a question, get an answer,
+            see exactly which documents informed that answer and with what confidence.
+            The audit trail is not an afterthought — it is the design.
+          </p>
+          <p class="body-lg">
+            What Bifrost is testing is the core of this: document ingestion, contextual retrieval,
+            traceable responses. What comes after — agentic workflows, self-service automation,
+            developer APIs — builds on the same foundation.
+          </p>
+        </div>
+      </section>
+
+      <!-- Fenja Knowledge -->
+      <section class="product-section">
+        <div class="product-label">
+          <span class="label-sm product-tag">Component</span>
+          <h2 class="headline-lg product-name">Fenja Knowledge</h2>
+        </div>
+        <div class="product-body">
+          <p class="body-lg">
+            An evolving knowledge layer that learns the context you work in — your organisation,
+            your regulatory obligations, your domain-specific language — and makes it available
+            to the model without requiring you to re-explain it in every query.
+          </p>
+          <p class="body-lg">
+            Think of it as a structured, permission-controlled wiki that the AI reads before
+            answering. Not a prompt. Not a system message. A maintained, versioned context
+            that grows with your work.
+          </p>
+          <p class="body-lg">
+            The concept was previewed at the pilot kickoff. The response from participants
+            was clear: not a question of whether, but when. It is on the roadmap.
+          </p>
+        </div>
+      </section>
+
+      <!-- Coming next -->
+      <section class="coming-next">
+        <h2 class="label-sm coming-heading">When the MVP ships</h2>
+        <p class="body-md coming-body">
+          This page will become a gateway: screenshots, a walkthrough, and a path
+          for pilot participants to request early access to the interface.
+          Until then, this is the honest picture of where things stand.
+        </p>
+      </section>
+
+    </div>
+
+  </div>
+</AppLayout>
+
+<style>
+  .page {
+    padding: var(--space-12) var(--space-20) var(--space-16);
+    max-width: var(--content-max);
+    margin: 0 auto;
+  }
+
+  /* ── Header ──────────────────────────────────────────────────────── */
+  .page-header {
+    max-width: 44rem;
+    margin-bottom: var(--space-12);
+  }
+
+  .eyebrow {
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--on-surface-muted);
+    margin-bottom: var(--space-3);
+  }
+
+  .page-title { margin-bottom: var(--space-5); }
+
+  .subtitle {
+    color: var(--on-surface-variant);
+    max-width: var(--reading-max);
+    margin: 0;
+  }
+
+  /* ── Content ─────────────────────────────────────────────────────── */
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-16);
+    max-width: 52rem;
+  }
+
+  /* ── Product sections ────────────────────────────────────────────── */
+  .product-section {
+    display: grid;
+    grid-template-columns: 14rem 1fr;
+    gap: var(--space-8);
+    align-items: start;
+    padding-top: var(--space-8);
+    border-top: var(--ghost-border);
+  }
+
+  .product-label {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding-top: var(--space-1);
+  }
+
+  .product-tag {
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--on-surface-muted);
+  }
+
+  .product-name {
+    font-family: var(--font-serif);
+    font-weight: 400;
+    letter-spacing: var(--tracking-snug);
+    margin: 0;
+    color: var(--on-surface);
+    line-height: var(--leading-snug);
+  }
+
+  /* ── Body ────────────────────────────────────────────────────────── */
+  .product-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+
+  .product-body .body-lg {
+    margin: 0;
+    color: var(--on-surface-variant);
+    line-height: var(--leading-relaxed);
+  }
+
+  /* ── Coming next ─────────────────────────────────────────────────── */
+  .coming-next {
+    padding: var(--space-6);
+    background: var(--surface-container-lowest);
+    border-radius: var(--radius-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .coming-heading {
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--on-surface-muted);
+  }
+
+  .coming-body {
+    margin: 0;
+    color: var(--on-surface-variant);
+    line-height: var(--leading-relaxed);
+  }
+</style>