Jonathan Hvid
547515061c
Adds a new standalone /deepdive page with its own platform.css/platform.js, wires it into the dot-nav as an external entry, and updates the dot-nav docblock to reflect the new seven-entry layout. Also drops in BUSINESS.md and reference material under architecture boxes/ and examples/. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
386 lines
16 KiB
HTML
386 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Fenja AI Platform — Product Deepdive</title>
|
|
<link rel="stylesheet" href="/fenja/colors_and_type.css" />
|
|
<link rel="stylesheet" href="/platform.css" />
|
|
<style>
|
|
/* ───── Page scaffolding ─────
|
|
Standalone subpage — no SPA page-switching. The deepdive section
|
|
is the only "page" here; its internal scroller
|
|
(#product-deepdive-scroll) handles all scrolling, so the body
|
|
itself stays clipped (matches the timeline page's pattern). */
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0; padding: 0;
|
|
height: 100%;
|
|
background: var(--background);
|
|
color: var(--on-surface);
|
|
font-family: var(--font-sans);
|
|
overflow: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
body {
|
|
/* Same warm radial wash as the timeline page so the two surfaces
|
|
feel like the same paper. */
|
|
background:
|
|
radial-gradient(1200px 800px at 18% 45%,
|
|
var(--surface-container-lowest) 0%,
|
|
var(--background) 55%,
|
|
var(--surface-container-low) 100%);
|
|
}
|
|
|
|
/* Reproduce the .page / .is-active contract platform.js expects.
|
|
There's only one page here, so it's active from frame 0. */
|
|
.page {
|
|
position: fixed; inset: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 380ms cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
.page.is-active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Site wordmark — top-left, links back to the entrance. Mirrors the
|
|
masthead pattern from /timeline so the two pages feel paired. */
|
|
.site-mark,
|
|
.site-mark:link,
|
|
.site-mark:visited,
|
|
.site-mark:hover,
|
|
.site-mark:active,
|
|
.site-mark:focus,
|
|
.site-mark:focus-visible {
|
|
text-decoration: none;
|
|
border-bottom: 0;
|
|
}
|
|
.site-mark {
|
|
position: fixed;
|
|
top: 28px;
|
|
left: 36px;
|
|
width: 118px;
|
|
height: auto;
|
|
z-index: 50;
|
|
opacity: 0.85;
|
|
display: block;
|
|
cursor: pointer;
|
|
transition: opacity 200ms ease;
|
|
}
|
|
.site-mark img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
pointer-events: none;
|
|
}
|
|
.site-mark:hover,
|
|
.site-mark:focus-visible { opacity: 1; }
|
|
.site-mark:focus-visible {
|
|
outline: 2px solid #785f53;
|
|
outline-offset: 6px;
|
|
}
|
|
@media (max-width: 720px) {
|
|
.site-mark { width: 90px; top: 20px; left: 22px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body data-screen-label="03 Product Deepdive">
|
|
|
|
<a class="site-mark" href="/timeline" aria-label="Back to the timeline">
|
|
<img src="/fenja/fenja-wordmark-black.svg" alt="Fenja" />
|
|
</a>
|
|
|
|
<!-- ───── PRODUCT DEEPDIVE — standalone page ─────
|
|
Self-contained page reached at /deepdive. Uses the same internal
|
|
scroller (#product-deepdive-scroll) the timeline's deepdive used,
|
|
so Lenis + ScrollTrigger.scrollerProxy can be wired without
|
|
touching the window scroll. All behaviour lives in /platform.js,
|
|
all styles in /platform.css. Pre-set `is-active` so platform.js's
|
|
init observer fires immediately on load. -->
|
|
<section class="page page-product-deepdive is-active" id="page-product-deepdive" data-screen-label="03 Product Deepdive">
|
|
<div id="product-deepdive-scroll">
|
|
|
|
<!-- ============================================================
|
|
"The Question" intro — first section of the Deepdive page.
|
|
Full-viewport framing statement, fades in on scroll like
|
|
the cards stagger.
|
|
============================================================ -->
|
|
<section id="platform-question" aria-labelledby="platform-question-head">
|
|
<div class="pq-wrap">
|
|
<!-- Two-part typographic rhythm: italic serif for the
|
|
parallel "isn't enough" rejection (problem), upright
|
|
serif for the affirmative resolution. Reads as one
|
|
flowing statement, not headline + sub. -->
|
|
<h2 id="platform-question-head" class="pq-title">
|
|
Renting a few AI capabilities from American companies isn't enough.<br>
|
|
Installing an open-source language model isn't enough.
|
|
</h2>
|
|
<p class="pq-body">
|
|
You need a <em>platform you control</em> — with the
|
|
tools, the knowledge, and the framework to make AI
|
|
actually do the work your organization needs done.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ============================================================
|
|
"The Layers" entry section — pinned scrubbed five-beat
|
|
build. Two columns inside the pin: a copy stage on the left
|
|
whose five text panels swap per beat, and an architecture
|
|
canvas on the right that assembles progressively (Foundation
|
|
in Beat 1+2, Tools in Beat 3, Agents in Beat 4; Beat 5 is
|
|
the closing summary against the fully assembled diagram).
|
|
A static title sits above the body from the moment the pin
|
|
engages.
|
|
|
|
Layout invariant: the canvas reserves its full final
|
|
assembled height from frame 0. Each .pl-group occupies its
|
|
final vertical slot from the start (opacity 0 until its
|
|
beat). Cards inside reveal in place — settled elements
|
|
never move.
|
|
|
|
All behaviour in /platform.js (initLayers), all styles in
|
|
/platform.css (.pl-* selectors).
|
|
============================================================ -->
|
|
<section id="platform-layers" aria-labelledby="platform-layers-head">
|
|
<h2 id="platform-layers-head" class="sr-only" style="position:absolute;left:-9999px;">The Fenja architecture, layer by layer</h2>
|
|
<div class="pl-pin">
|
|
|
|
<!-- HEADER — section title + subtitle. Statically rendered
|
|
from the moment the pin engages; visible before any
|
|
beat fires. Stays in place while the beats play below. -->
|
|
<header class="pl-pin-header">
|
|
<p class="pl-pin-title">Fenja AI Platform Architecture</p>
|
|
<p class="pl-pin-subtitle">Simply Explained</p>
|
|
</header>
|
|
|
|
<!-- BODY — two-column build. Copy stage (left) and the
|
|
diagram canvas (right) live here. -->
|
|
<div class="pl-pin-body">
|
|
|
|
<!-- LEFT — text panel stage. Five beats; each panel is
|
|
absolutely positioned, vertically centred within the
|
|
stage so shorter panels (Beats 1, 3) read as deliberate
|
|
rather than top-anchored fragments. -->
|
|
<div class="pl-copy-stage" aria-live="polite">
|
|
|
|
<!-- Beat 1 — Foundation begins -->
|
|
<div class="pl-copy-step" data-beat="1">
|
|
<p class="pl-eyebrow">The foundation</p>
|
|
<h3 class="pl-headline"><em>A model in your environment.</em></h3>
|
|
<p class="pl-body">
|
|
A state-of-the-art open-source language model, running
|
|
entirely on your hardware. No data leaves your
|
|
perimeter. The starting point — but not yet
|
|
Fenja.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Beat 2 — Knowledge added -->
|
|
<div class="pl-copy-step" data-beat="2">
|
|
<p class="pl-eyebrow">The foundation</p>
|
|
<h3 class="pl-headline"><em>Knowledge.</em></h3>
|
|
<p class="pl-body">
|
|
What makes the model <em>Fenja</em> — an
|
|
understanding of your organization, captured in a wiki
|
|
your team can read and edit. Plus the routines and
|
|
working memory that turn Fenja into a coworker who
|
|
knows how things get done.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Beat 3 — Tools layer arrives -->
|
|
<div class="pl-copy-step" data-beat="3">
|
|
<p class="pl-eyebrow">What Fenja can do</p>
|
|
<h3 class="pl-headline"><em>Tools.</em></h3>
|
|
<p class="pl-body">
|
|
How knowledge becomes work. Fenja uses tools to find
|
|
documents, query data, take action across your
|
|
systems. Some are obvious; others depend on what your
|
|
work needs.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Beat 4 — Agents layer arrives -->
|
|
<div class="pl-copy-step" data-beat="4">
|
|
<p class="pl-eyebrow">When one becomes a team</p>
|
|
<h3 class="pl-headline"><em>Agents.</em></h3>
|
|
<p class="pl-body">
|
|
Real work isn't one task. Fenja becomes a team
|
|
— a supervisor and specialists, each focused,
|
|
each governed, all dispatched by workflows you've
|
|
designed.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Beat 5 — final summary. Diagram is fully assembled
|
|
by now; this panel speaks for the whole stack. -->
|
|
<div class="pl-copy-step" data-beat="5">
|
|
<p class="pl-eyebrow">The full picture</p>
|
|
<h3 class="pl-headline"><em>Everything you need and with full control.</em></h3>
|
|
<p class="pl-body">
|
|
Fenja brings together all the pieces to solve simple
|
|
and complex AI use cases across your organisation.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- RIGHT — diagram canvas. Three layer slots, each at its
|
|
final vertical position from the start. .pl-canvas-wrap
|
|
holds the column; .pl-canvas is the flex container that
|
|
stacks the three layers with a 20px gap (per spec). -->
|
|
<div class="pl-canvas-wrap">
|
|
<div class="pl-canvas">
|
|
|
|
<!-- Foundation — 3 equal cards (corrects the original
|
|
handoff's tall-Knowledge asymmetry: that asymmetry
|
|
was for a single Knowledge concept; we've split
|
|
Knowledge into Wiki + Routines & memory, so all
|
|
three Foundation cards balance). -->
|
|
<section class="pl-group" data-layer="foundation" aria-hidden="true">
|
|
<header class="pl-group-head">
|
|
<span class="pl-group-label">Foundation</span>
|
|
<span class="pl-group-caption">Sovereign by design</span>
|
|
</header>
|
|
<div class="pl-cards pl-cards--3 pl-cards--stretch">
|
|
<article class="pl-card" data-card="lm">
|
|
<h4 class="pl-card-name">Language model</h4>
|
|
<p class="pl-card-italic">State-of-the-art, open-source</p>
|
|
<p class="pl-card-mono">On-prem</p>
|
|
</article>
|
|
<article class="pl-card" data-card="wiki">
|
|
<h4 class="pl-card-name">Wiki</h4>
|
|
<p class="pl-card-italic">Company and domain knowledge</p>
|
|
<p class="pl-card-mono">Organizational · Departmental · Personal</p>
|
|
</article>
|
|
<article class="pl-card" data-card="routines">
|
|
<h4 class="pl-card-name">Routines & memory</h4>
|
|
<p class="pl-card-italic">How Fenja works inside it</p>
|
|
<p class="pl-card-mono">Stand-ups · Recurring tasks · Working memory</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tools -->
|
|
<section class="pl-group" data-layer="tools" aria-hidden="true">
|
|
<header class="pl-group-head">
|
|
<span class="pl-group-label">Tools</span>
|
|
<span class="pl-group-caption">How Fenja acts</span>
|
|
</header>
|
|
<div class="pl-cards pl-cards--4 pl-cards--stretch">
|
|
<article class="pl-card">
|
|
<h4 class="pl-card-name">Document retrieval</h4>
|
|
<p class="pl-card-italic">Find and cite</p>
|
|
<p class="pl-card-mono">RAG</p>
|
|
</article>
|
|
<article class="pl-card">
|
|
<h4 class="pl-card-name">Structured data (ie SQL)</h4>
|
|
<p class="pl-card-italic">Query and extract</p>
|
|
<p class="pl-card-mono">NL → SQL</p>
|
|
</article>
|
|
<article class="pl-card">
|
|
<h4 class="pl-card-name">System actions</h4>
|
|
<p class="pl-card-italic">Read and write</p>
|
|
<p class="pl-card-mono">APIs · integrations</p>
|
|
</article>
|
|
<article class="pl-card">
|
|
<h4 class="pl-card-name">Custom tools</h4>
|
|
<p class="pl-card-italic">Your specific work</p>
|
|
<p class="pl-card-mono">Defined by you</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Agents -->
|
|
<section class="pl-group" data-layer="agents" aria-hidden="true">
|
|
<header class="pl-group-head">
|
|
<span class="pl-group-label">Agents</span>
|
|
<span class="pl-group-caption">How Fenja scales</span>
|
|
</header>
|
|
<div class="pl-cards pl-cards--4 pl-cards--stretch">
|
|
<article class="pl-card">
|
|
<h4 class="pl-card-name">Supervisor</h4>
|
|
<p class="pl-card-italic">Plan and dispatch</p>
|
|
<p class="pl-card-mono">Orchestration</p>
|
|
</article>
|
|
<article class="pl-card">
|
|
<h4 class="pl-card-name">Specialists</h4>
|
|
<p class="pl-card-italic">Focused expertise</p>
|
|
<p class="pl-card-mono">Subagents</p>
|
|
</article>
|
|
<article class="pl-card">
|
|
<h4 class="pl-card-name">Skills</h4>
|
|
<p class="pl-card-italic">Reusable capability</p>
|
|
<p class="pl-card-mono">Portable across specialists</p>
|
|
</article>
|
|
<article class="pl-card">
|
|
<h4 class="pl-card-name">Workflows</h4>
|
|
<p class="pl-card-italic">Composed by you</p>
|
|
<p class="pl-card-mono">Governed end-to-end</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /.pl-pin-body -->
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- "Choose your Capability" — 4 product cards. Final section. -->
|
|
<section id="platform-cards" aria-labelledby="platform-cards-head">
|
|
<header class="platform-cards-head">
|
|
<p class="platform-eyebrow">Deployment options</p>
|
|
<h2 id="platform-cards-head" class="platform-title">Choose your <em>Capability.</em></h2>
|
|
</header>
|
|
|
|
<div class="platform-card-grid" role="list">
|
|
<article class="platform-card" role="listitem">
|
|
<h3 class="platform-card-name">Fenja <em>Core.</em></h3>
|
|
<p class="platform-card-tier">Foundational</p>
|
|
<p class="platform-card-body">Essential LLM capabilities with Fenja Semantic. Your safe and custom chatbot that understands your organization.</p>
|
|
</article>
|
|
|
|
<article class="platform-card" role="listitem">
|
|
<h3 class="platform-card-name">Fenja <em>Dev.</em></h3>
|
|
<p class="platform-card-tier">Developer toolset</p>
|
|
<p class="platform-card-body">Code faster and better with your own secure AI-supported development platform.</p>
|
|
<p class="platform-card-includes">+ Core</p>
|
|
</article>
|
|
|
|
<article class="platform-card" role="listitem">
|
|
<h3 class="platform-card-name">Fenja <em>Analyze.</em></h3>
|
|
<p class="platform-card-tier">Strategic intel</p>
|
|
<p class="platform-card-body">Bring real insights to your people. You ask for an insight, and your agents will find, analyze, and present the relevant data.</p>
|
|
<p class="platform-card-includes">+ Core</p>
|
|
</article>
|
|
|
|
<article class="platform-card is-dark" role="listitem">
|
|
<h3 class="platform-card-name">Fenja <em>Agentic.</em></h3>
|
|
<p class="platform-card-tier">Automation</p>
|
|
<p class="platform-card-body">The complete framework. Fully governed and controlled agents collaborate to solve your most important processes.</p>
|
|
<p class="platform-card-includes">+ Core. Dev. Analyze.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</div><!-- /#product-deepdive-scroll -->
|
|
</section>
|
|
|
|
<script src="/vendor/lenis.min.js" defer></script>
|
|
<script src="/vendor/gsap.min.js" defer></script>
|
|
<script src="/vendor/scrolltrigger.min.js" defer></script>
|
|
<script src="/platform.js" defer></script>
|
|
|
|
</body>
|
|
</html>
|