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