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