feat: product page with architecture and platform framing
This commit is contained in:
Jonathan
parent
f7bd9085de
commit
2d3391f531
1 changed files with 424 additions and 0 deletions
424
src/pages/product.astro
Normal file
424
src/pages/product.astro
Normal file
|
|
@ -0,0 +1,424 @@
|
||||||
|
---
|
||||||
|
import AppLayout from '../layouts/AppLayout.astro';
|
||||||
|
|
||||||
|
const user = Astro.locals.user;
|
||||||
|
|
||||||
|
const tiers = [
|
||||||
|
{
|
||||||
|
name: 'Fenja Basic',
|
||||||
|
desc: 'General knowledge work — document retrieval, Q&A, summarisation, and search across the organisation\'s corpus. The foundation every other tier is built on.',
|
||||||
|
current: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Fenja Code',
|
||||||
|
desc: 'Developer-assisted coding within the customer\'s own codebase. The agent understands project structure, conventions, and prior decisions.',
|
||||||
|
current: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Fenja Analyze',
|
||||||
|
desc: 'Strategic data analysis — structured extraction across large document corpora, with full provenance on every finding.',
|
||||||
|
current: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Fenja Agentic',
|
||||||
|
desc: 'Governed agent-based automation. Non-technical users define repeatable workflows; the platform handles execution, scheduling, and audit.',
|
||||||
|
current: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
---
|
||||||
|
<AppLayout title="Product" user={user}>
|
||||||
|
<div class="page">
|
||||||
|
|
||||||
|
<!-- ── Hero ───────────────────────────────────────────────────── -->
|
||||||
|
<header class="hero">
|
||||||
|
<p class="label-sm eyebrow">Product</p>
|
||||||
|
<h1 class="hero-headline">
|
||||||
|
The platform for <em>sovereign AI.</em>
|
||||||
|
</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- ── What Fenja is ──────────────────────────────────────────── -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="intro-prose">
|
||||||
|
<p class="body-lg">
|
||||||
|
Fenja is not a single product. It is a platform for running advanced AI
|
||||||
|
inside the customer's own infrastructure. It solves many use cases because
|
||||||
|
it provides the building blocks every regulated AI deployment needs: a local
|
||||||
|
model, agents that do work, a layer that teaches the AI the organisation's
|
||||||
|
language, and the tools those agents use to act.
|
||||||
|
</p>
|
||||||
|
<p class="body-lg">
|
||||||
|
One deployment, fully under your control, with no data ever touching
|
||||||
|
external infrastructure.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── Architecture diagram ───────────────────────────────────── -->
|
||||||
|
<section class="section arch-section">
|
||||||
|
<h2 class="section-heading label-sm">How it is structured</h2>
|
||||||
|
|
||||||
|
<div class="arch-diagram" role="list" aria-label="Platform architecture layers">
|
||||||
|
|
||||||
|
<div class="arch-row" role="listitem" style="background: var(--surface-container-lowest);">
|
||||||
|
<div class="arch-row-label">
|
||||||
|
<span class="arch-layer-name label-sm">AI Model</span>
|
||||||
|
</div>
|
||||||
|
<div class="arch-row-content">
|
||||||
|
<p class="arch-row-desc body-md">
|
||||||
|
Locally hosted, open-source foundation model (Llama 3, Mistral).
|
||||||
|
No data ever leaves the customer's infrastructure.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="arch-row-tag">
|
||||||
|
<span class="arch-tag label-sm">Foundation</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arch-row" role="listitem" style="background: var(--surface-container-low);">
|
||||||
|
<div class="arch-row-label">
|
||||||
|
<span class="arch-layer-name label-sm">Agents</span>
|
||||||
|
</div>
|
||||||
|
<div class="arch-row-content">
|
||||||
|
<p class="arch-row-desc body-md">
|
||||||
|
Specialised AI agents that handle distinct tasks — retrieval, summarisation,
|
||||||
|
analysis, drafting — and collaborate to solve complex queries.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="arch-row-tag">
|
||||||
|
<span class="arch-tag label-sm">Execution</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arch-row arch-row--highlight" role="listitem" style="background: var(--surface-container);">
|
||||||
|
<div class="arch-row-label">
|
||||||
|
<span class="arch-layer-name label-sm">Semantic Layer</span>
|
||||||
|
<span class="arch-sublabel label-sm">Fenja Knowledge</span>
|
||||||
|
</div>
|
||||||
|
<div class="arch-row-content">
|
||||||
|
<p class="arch-row-desc body-md">
|
||||||
|
The business vocabulary through which the AI understands the organisation —
|
||||||
|
its structure, terminology, decisions, and the people behind them.
|
||||||
|
Grows automatically as the organisation uses the platform.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="arch-row-tag">
|
||||||
|
<span class="arch-tag label-sm">Context</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arch-row" role="listitem" style="background: var(--surface-container-high);">
|
||||||
|
<div class="arch-row-label">
|
||||||
|
<span class="arch-layer-name label-sm">Tools</span>
|
||||||
|
</div>
|
||||||
|
<div class="arch-row-content">
|
||||||
|
<p class="arch-row-desc body-md">
|
||||||
|
The capabilities agents use to act: read files, query systems, search the corpus,
|
||||||
|
produce structured output, trigger processes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="arch-row-tag">
|
||||||
|
<span class="arch-tag label-sm">Capabilities</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── Platform framing ───────────────────────────────────────── -->
|
||||||
|
<section class="section platform-section">
|
||||||
|
<h2 class="section-heading label-sm">Why this is a platform, not a product</h2>
|
||||||
|
<div class="prose-col">
|
||||||
|
<p class="body-lg">
|
||||||
|
The same sovereign infrastructure supports fundamentally different shapes of work.
|
||||||
|
One deployment, one security model, one audit trail — but the use cases it enables
|
||||||
|
expand as you add tiers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="tiers-list">
|
||||||
|
{tiers.map((tier) => (
|
||||||
|
<div class:list={['tier-row', { 'tier-row--current': tier.current }]}>
|
||||||
|
<div class="tier-name-col">
|
||||||
|
<span class="tier-name body-md">{tier.name}</span>
|
||||||
|
{tier.current && (
|
||||||
|
<span class="tier-badge label-sm">Bifrost MVP</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p class="tier-desc body-md">{tier.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── What Bifrost delivers ──────────────────────────────────── -->
|
||||||
|
<section class="section bifrost-section">
|
||||||
|
<h2 class="section-heading label-sm">What Project Bifrost delivers first</h2>
|
||||||
|
<div class="prose-col">
|
||||||
|
<p class="body-lg">
|
||||||
|
The MVP in Project Bifrost is Fenja Basic: a locally hosted LLM with agent
|
||||||
|
flows, plus Fenja Knowledge — the semantic layer that lets the AI understand
|
||||||
|
not just your documents, but the context behind them.
|
||||||
|
</p>
|
||||||
|
<p class="body-lg">
|
||||||
|
This is the foundation. It solves real work today. And every tier that follows —
|
||||||
|
Code, Analyze, Agentic — is built on it without requiring a new deployment,
|
||||||
|
new infrastructure, or new compliance review.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── What comes after ───────────────────────────────────────── -->
|
||||||
|
<section class="section extends-section">
|
||||||
|
<h2 class="section-heading label-sm">The platform extends to</h2>
|
||||||
|
<ul class="extends-list">
|
||||||
|
<li class="extends-item">
|
||||||
|
<span class="extends-name body-md">Fenja Code</span>
|
||||||
|
<span class="extends-desc body-md">
|
||||||
|
Developer-assisted coding inside your own infrastructure — source code never leaves.
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li class="extends-item">
|
||||||
|
<span class="extends-name body-md">Fenja Analyze</span>
|
||||||
|
<span class="extends-desc body-md">
|
||||||
|
Structured data extraction and analysis across large corpora, with provenance intact.
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li class="extends-item">
|
||||||
|
<span class="extends-name body-md">Fenja Agentic</span>
|
||||||
|
<span class="extends-desc body-md">
|
||||||
|
Governed automation for repeatable workflows — defined in natural language, audited end to end.
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</AppLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page {
|
||||||
|
max-width: var(--content-max);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--space-20) var(--space-16);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Hero ────────────────────────────────────────────────────────── */
|
||||||
|
.hero {
|
||||||
|
padding-top: var(--space-16);
|
||||||
|
padding-bottom: var(--space-12);
|
||||||
|
max-width: 52rem;
|
||||||
|
border-bottom: var(--ghost-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-headline {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: var(--text-display-md);
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: var(--tracking-tight);
|
||||||
|
line-height: var(--leading-snug);
|
||||||
|
color: var(--on-surface);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-headline em {
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Sections ────────────────────────────────────────────────────── */
|
||||||
|
.section {
|
||||||
|
padding: var(--space-12) 0;
|
||||||
|
border-bottom: var(--ghost-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading {
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
margin-bottom: var(--space-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Intro ───────────────────────────────────────────────────────── */
|
||||||
|
.intro-prose {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-5);
|
||||||
|
max-width: 44rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-prose .body-lg {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Architecture diagram ────────────────────────────────────────── */
|
||||||
|
.arch-diagram {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 52rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arch-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 11rem 1fr 6rem;
|
||||||
|
gap: var(--space-6);
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-6) var(--space-8);
|
||||||
|
transition: background var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arch-row-label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arch-layer-name {
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arch-sublabel {
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--secondary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arch-row-desc {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
margin: 0;
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arch-row-tag {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arch-tag {
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Platform / tiers ────────────────────────────────────────────── */
|
||||||
|
.prose-col {
|
||||||
|
max-width: 44rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-5);
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-col .body-lg {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tiers-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 52rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tier-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 14rem 1fr;
|
||||||
|
gap: var(--space-6);
|
||||||
|
align-items: start;
|
||||||
|
padding: var(--space-5) 0;
|
||||||
|
border-top: var(--ghost-border);
|
||||||
|
}
|
||||||
|
.tier-row:last-child {
|
||||||
|
border-bottom: var(--ghost-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tier-name-col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tier-name {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: italic;
|
||||||
|
letter-spacing: var(--tracking-snug);
|
||||||
|
color: var(--on-surface);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tier-row--current .tier-name {
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tier-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.2em var(--space-2);
|
||||||
|
background: var(--surface-container);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--secondary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tier-desc {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
margin: 0;
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
padding-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Extends list ────────────────────────────────────────────────── */
|
||||||
|
.extends-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
max-width: 52rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extends-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 10rem 1fr;
|
||||||
|
gap: var(--space-6);
|
||||||
|
align-items: baseline;
|
||||||
|
padding: var(--space-4) 0;
|
||||||
|
border-top: var(--ghost-border);
|
||||||
|
}
|
||||||
|
.extends-item:last-child {
|
||||||
|
border-bottom: var(--ghost-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.extends-name {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: italic;
|
||||||
|
letter-spacing: var(--tracking-snug);
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extends-desc {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
margin: 0;
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Add table
Reference in a new issue