feat: product preview page
This commit is contained in:
Jonathan
parent
40aed88525
commit
636ef129bb
1 changed files with 185 additions and 0 deletions
185
src/pages/preview.astro
Normal file
185
src/pages/preview.astro
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Reference in a new issue