Zakaria
a46764fb1b
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
481 lines
21 KiB
HTML
481 lines
21 KiB
HTML
<!doctype html>
|
|
<!--
|
|
OD replit-deck seed.
|
|
|
|
Single-file horizontal-swipe HTML deck in the style of Replit Slides's
|
|
landing-page template gallery (replit.com/slides). One deck picks ONE
|
|
theme via `<body data-theme="...">`. All 8 themes ship as tokens below;
|
|
never override per-slide.
|
|
|
|
Themes:
|
|
helix Modern minimal · light grey + ink + electric blue
|
|
holm Editorial serif · cream + ink + deep chestnut
|
|
vance Gallery · black/cream bars + cream serif
|
|
bevel Y2K editorial · black + Y2K display type
|
|
world-dark Finance dark · deep green + mint + neon yellow
|
|
world-mint Finance light · mint + deep green + neon yellow
|
|
atlas Museum · black + ivory + vermilion + serif
|
|
bluehouse Consumer · deep navy + peach/coral gradient cards
|
|
|
|
DO NOT rewrite the script at the bottom. It solves five iframe-specific
|
|
bugs (real scroller, dual listeners, auto-focus, no scrollIntoView,
|
|
position persistence). See `skills/simple-deck` for the same pattern.
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Helix — Q1 '26 Board Update</title>
|
|
<style>
|
|
/* ─── font stacks (system-only; no external fonts) ─────────────── */
|
|
:root {
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
|
|
--font-sans-display: -apple-system, BlinkMacSystemFont, 'Inter Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
|
|
--font-serif: 'Iowan Old Style', 'Charter', 'Palatino', Georgia, 'Times New Roman', serif;
|
|
--font-serif-display: 'GT Super', 'Tiempos Headline', 'Iowan Old Style', Georgia, serif;
|
|
--font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
|
}
|
|
|
|
/* ─── theme: helix (slide-1/4/5 — modern minimal) ─────────────── */
|
|
body[data-theme="helix"] {
|
|
--bg: #fafafa;
|
|
--surface: #ffffff;
|
|
--fg: #19191c;
|
|
--muted: #6e6e73;
|
|
--border: #e4e4e7;
|
|
--accent: #5889fe;
|
|
--accent-soft: color-mix(in oklch, #5889fe 14%, transparent);
|
|
--font-display: var(--font-sans-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 600;
|
|
--display-tracking: -0.02em;
|
|
}
|
|
|
|
/* ─── theme: holm (slide-2 — editorial serif memo) ────────────── */
|
|
body[data-theme="holm"] {
|
|
--bg: #e4dfd7;
|
|
--surface: #eee9e0;
|
|
--fg: #0f0f0e;
|
|
--muted: #7c7e84;
|
|
--border: #c7c1b7;
|
|
--accent: #52311d;
|
|
--accent-soft: color-mix(in oklch, #52311d 14%, transparent);
|
|
--font-display: var(--font-serif-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 500;
|
|
--display-tracking: -0.015em;
|
|
}
|
|
|
|
/* ─── theme: vance (slide-3/7 — gallery catalog) ──────────────── */
|
|
body[data-theme="vance"] {
|
|
--bg: #f1ede2;
|
|
--surface: #e7e2d4;
|
|
--fg: #171815;
|
|
--muted: #6e6b62;
|
|
--border: #d6d2c5;
|
|
--accent: #171815;
|
|
--accent-soft: color-mix(in oklch, #171815 8%, transparent);
|
|
--bar: #0a0a0a; /* top/bottom gallery bar */
|
|
--bar-fg: #f1ede2;
|
|
--font-display: var(--font-serif-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 400;
|
|
--display-tracking: -0.01em;
|
|
}
|
|
|
|
/* ─── theme: bevel (slide-6/13 — Y2K editorial) ───────────────── */
|
|
body[data-theme="bevel"] {
|
|
--bg: #0d0d0b;
|
|
--surface: #18181a;
|
|
--fg: #eae6dd;
|
|
--muted: #a29e95;
|
|
--border: #2a2a28;
|
|
--accent: #c8ff00; /* neon outline only — sparingly */
|
|
--accent-soft: color-mix(in oklch, #c8ff00 10%, transparent);
|
|
--font-display: 'Antonio', 'Bebas Neue', Impact, var(--font-sans-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 700;
|
|
--display-tracking: 0;
|
|
}
|
|
|
|
/* ─── theme: world-dark (slide-8/10 — finance dark) ───────────── */
|
|
body[data-theme="world-dark"] {
|
|
--bg: #0d3a2b;
|
|
--surface: #124736;
|
|
--fg: #bcd6cd;
|
|
--muted: #789f91;
|
|
--border: #1d4c3c;
|
|
--accent: #e8f615;
|
|
--accent-soft: color-mix(in oklch, #e8f615 18%, transparent);
|
|
--font-display: var(--font-sans-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 500;
|
|
--display-tracking: -0.015em;
|
|
}
|
|
|
|
/* ─── theme: world-mint (slide-9 — finance light sibling) ─────── */
|
|
body[data-theme="world-mint"] {
|
|
--bg: #bcd6cd;
|
|
--surface: #c8e0d6;
|
|
--fg: #0d3a2b;
|
|
--muted: #527567;
|
|
--border: #9abbac;
|
|
--accent: #e8f615;
|
|
--accent-soft: color-mix(in oklch, #e8f615 22%, transparent);
|
|
--font-display: var(--font-sans-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 500;
|
|
--display-tracking: -0.015em;
|
|
}
|
|
|
|
/* ─── theme: atlas (slide-11 — museum chapter) ────────────────── */
|
|
body[data-theme="atlas"] {
|
|
--bg: #111010;
|
|
--surface: #1a1918;
|
|
--fg: #e7e6e2;
|
|
--muted: #827d78;
|
|
--border: #2a2826;
|
|
--accent: #de3f40;
|
|
--accent-soft: color-mix(in oklch, #de3f40 14%, transparent);
|
|
--font-display: var(--font-serif-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 500;
|
|
--display-tracking: -0.02em;
|
|
}
|
|
|
|
/* ─── theme: bluehouse (slide-12 — consumer card) ─────────────── */
|
|
body[data-theme="bluehouse"] {
|
|
--bg: #0b1524;
|
|
--surface: #10203a;
|
|
--fg: #ffffff;
|
|
--muted: #8ea0b8;
|
|
--border: #1a2c46;
|
|
--accent: #fb675d; /* coral */
|
|
--accent-2: #ff8f68; /* peach */
|
|
--accent-soft: color-mix(in oklch, #fb675d 18%, transparent);
|
|
--card-peach: #e0af99;
|
|
--card-lavender: #c7cff0;
|
|
--font-display: var(--font-sans-display);
|
|
--font-body: var(--font-sans);
|
|
--display-weight: 700;
|
|
--display-tracking: -0.025em;
|
|
}
|
|
|
|
/* ─── reset / base ────────────────────────────────────────────── */
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html, body { margin: 0; height: 100%; }
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: var(--font-body);
|
|
font-size: 18px;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
display: flex;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scroll-snap-type: x mandatory;
|
|
scroll-behavior: smooth;
|
|
}
|
|
body::-webkit-scrollbar { display: none; }
|
|
p { text-wrap: pretty; margin: 0; }
|
|
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }
|
|
|
|
/* ─── slide surface ───────────────────────────────────────────── */
|
|
.slide {
|
|
flex: 0 0 100vw;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
scroll-snap-align: start;
|
|
padding: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.slide.center { align-items: center; justify-content: center; text-align: center; }
|
|
|
|
/* ─── meta bar (top thin row: brand · meta · page) ────────────── */
|
|
.meta-bar {
|
|
position: absolute;
|
|
top: clamp(32px, 4vw, 56px);
|
|
left: clamp(56px, 7vw, 112px);
|
|
right: clamp(56px, 7vw, 112px);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
body[data-theme="vance"] .meta-bar { color: var(--bar-fg); }
|
|
|
|
/* ─── typography primitives ──────────────────────────────────── */
|
|
.eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.eyebrow.accent { color: var(--accent); }
|
|
.h-hero { font-family: var(--font-display); font-size: clamp(56px, 8.5vw, 128px); line-height: 1.02; }
|
|
.h-xl { font-family: var(--font-display); font-size: clamp(40px, 5vw, 76px); line-height: 1.08; }
|
|
.h-lg { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.14; }
|
|
.h-md { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
|
|
.lead { font-size: clamp(16px, 1.2vw, 19px); color: var(--muted); max-width: 56ch; }
|
|
|
|
/* Big numeric display — for kpi rows, used by helix / world / atlas */
|
|
.num { font-family: var(--font-display); font-size: clamp(48px, 5.5vw, 84px); line-height: 1; letter-spacing: -0.03em; }
|
|
.num-label { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
|
|
.num-delta { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-top: 8px; letter-spacing: 0.02em; }
|
|
|
|
/* ─── layout primitives ──────────────────────────────────────── */
|
|
.hstack { display: flex; gap: var(--gap, 24px); align-items: flex-start; }
|
|
.vstack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
|
|
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
|
|
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
|
|
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); row-gap: clamp(48px, 5vw, 80px); }
|
|
.divider { height: 1px; background: var(--border); margin: clamp(16px, 2vw, 32px) 0; }
|
|
|
|
/* ─── surface cards ──────────────────────────────────────────── */
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: clamp(20px, 2vw, 32px);
|
|
}
|
|
|
|
/* ─── vance gallery bars ─────────────────────────────────────── */
|
|
body[data-theme="vance"] .slide { padding-top: 0; padding-bottom: 0; }
|
|
body[data-theme="vance"] .vance-top {
|
|
background: var(--bar);
|
|
color: var(--bar-fg);
|
|
padding: clamp(32px, 4vw, 64px) clamp(56px, 7vw, 112px);
|
|
margin-left: calc(-1 * clamp(56px, 7vw, 112px));
|
|
margin-right: calc(-1 * clamp(56px, 7vw, 112px));
|
|
}
|
|
|
|
/* ─── bevel dashed frames ────────────────────────────────────── */
|
|
body[data-theme="bevel"] .bevel-frame {
|
|
border: 1px dashed var(--accent);
|
|
padding: clamp(16px, 2vw, 28px);
|
|
position: relative;
|
|
}
|
|
body[data-theme="bevel"] .bevel-frame::before,
|
|
body[data-theme="bevel"] .bevel-frame::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 8px; height: 8px;
|
|
background: var(--accent);
|
|
border-radius: 50%;
|
|
}
|
|
body[data-theme="bevel"] .bevel-frame::before { top: -4px; left: -4px; }
|
|
body[data-theme="bevel"] .bevel-frame::after { bottom: -4px; right: -4px; }
|
|
|
|
/* ─── world yellow square marker ─────────────────────────────── */
|
|
body[data-theme="world-dark"] .world-marker,
|
|
body[data-theme="world-mint"] .world-marker {
|
|
display: inline-block;
|
|
width: 14px; height: 14px;
|
|
background: var(--accent);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* ─── atlas chapter dot ──────────────────────────────────────── */
|
|
body[data-theme="atlas"] .atlas-dot {
|
|
display: inline-block;
|
|
width: 10px; height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
margin-right: 12px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* ─── bluehouse gradient card ────────────────────────────────── */
|
|
body[data-theme="bluehouse"] .bh-card {
|
|
border-radius: 24px;
|
|
padding: clamp(28px, 3vw, 48px);
|
|
aspect-ratio: 4 / 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
body[data-theme="bluehouse"] .bh-card.peach {
|
|
background: var(--card-peach);
|
|
color: #1a0e08;
|
|
}
|
|
body[data-theme="bluehouse"] .bh-card.coral {
|
|
background: linear-gradient(135deg, var(--accent-2), var(--accent));
|
|
color: #ffffff;
|
|
}
|
|
body[data-theme="bluehouse"] .bh-card.lavender {
|
|
background: linear-gradient(180deg, var(--card-lavender), #8faad8);
|
|
color: #0b1524;
|
|
}
|
|
|
|
/* ─── deck chrome (counter, progress, hint) ──────────────────── */
|
|
.deck-counter {
|
|
position: fixed;
|
|
bottom: 24px; right: 32px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
padding: 6px 12px;
|
|
background: color-mix(in oklch, var(--bg) 92%, transparent);
|
|
border: 1px solid var(--border);
|
|
letter-spacing: 0.08em;
|
|
color: var(--muted);
|
|
z-index: 10;
|
|
}
|
|
.deck-hint {
|
|
position: fixed;
|
|
bottom: 24px; left: 32px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
letter-spacing: 0.04em;
|
|
z-index: 10;
|
|
}
|
|
.deck-progress {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
height: 2px;
|
|
background: var(--accent);
|
|
width: 0;
|
|
z-index: 10;
|
|
transition: width 0.18s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body data-theme="helix">
|
|
<!-- example: helix · illustrative content only. Numbers are synthetic. -->
|
|
|
|
<section class="slide center" data-screen-label="01 Cover">
|
|
<div class="meta-bar">
|
|
<span>HELIX · Q1 '26 BOARD</span>
|
|
<span>01 / 05</span>
|
|
</div>
|
|
<div>
|
|
<p class="eyebrow" style="margin-bottom: 28px;">QUARTERLY UPDATE · APRIL 2026</p>
|
|
<h1 class="h-hero" style="max-width: 16ch;">Compounding on a market that finally moved.</h1>
|
|
<p class="lead" style="margin-top: 28px;">One quarter of clean execution. Six numbers that matter. One ask.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide" data-screen-label="02 Operating Metrics">
|
|
<div class="meta-bar"><span>HELIX</span><span>02 / 05</span></div>
|
|
<h2 class="h-xl" style="margin-top: clamp(40px, 6vh, 80px); margin-bottom: clamp(40px, 5vh, 64px);">Operating Metrics</h2>
|
|
<div class="grid-6">
|
|
<div><div class="num-label">Annual Recurring Revenue</div><div class="num">$1.37B</div><div class="num-delta">▲ 38% YoY</div></div>
|
|
<div><div class="num-label">Net Retention Rate</div><div class="num">128%</div><div class="num-delta">▲ 200 bps</div></div>
|
|
<div><div class="num-label">Paying Customers</div><div class="num">42,850</div><div class="num-delta">▲ 24% YoY</div></div>
|
|
<div><div class="num-label">Gross Margin</div><div class="num">82.4%</div><div class="num-delta">▲ 140 bps</div></div>
|
|
<div><div class="num-label">Free Cash Flow</div><div class="num">$112M</div><div class="num-delta">▲ 55% YoY</div></div>
|
|
<div><div class="num-label">CAC Payback</div><div class="num">11 mo</div><div class="num-delta">▼ 1 mo</div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide" data-screen-label="03 Insight">
|
|
<div class="meta-bar"><span>INSIGHT · WHY NOW</span><span>03 / 05</span></div>
|
|
<div style="flex: 1; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 4vw, 72px); align-items: center;">
|
|
<div>
|
|
<p class="eyebrow" style="margin-bottom: 24px;">NET RETENTION</p>
|
|
<div class="num" style="font-size: clamp(96px, 12vw, 180px);">128%</div>
|
|
<div class="num-delta" style="font-size: 15px;">▲ 200 bps from Q4</div>
|
|
</div>
|
|
<div>
|
|
<h2 class="h-lg" style="max-width: 22ch;">Expansion took over from new logos as the primary growth engine this quarter.</h2>
|
|
<p class="lead" style="margin-top: 20px;">Multi-product adoption crossed 47% of the base. The median paying customer now runs Helix in three workflows, up from two in Q4.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide center" data-screen-label="04 Ask">
|
|
<div class="meta-bar"><span>HELIX · THE ASK</span><span>04 / 05</span></div>
|
|
<div>
|
|
<p class="eyebrow" style="margin-bottom: 28px;">BOARD APPROVAL · Q2 SPEND</p>
|
|
<h2 class="h-hero" style="max-width: 16ch;">$38M expansion into the EU, starting with Amsterdam.</h2>
|
|
<p class="lead" style="margin-top: 28px;">Eleven hires. Three months. First ARR booked by end of Q3.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- chrome (do not move) -->
|
|
<div class="deck-progress" id="deck-progress" aria-hidden></div>
|
|
<div class="deck-counter" id="deck-counter">1 / 3</div>
|
|
<div class="deck-hint">← / → · scroll · swipe</div>
|
|
|
|
<script>
|
|
/*
|
|
Five hard rules for deck nav inside an iframe.
|
|
Verified by skills/simple-deck — do not rewrite.
|
|
|
|
1. Detect the real scroller — body OR documentElement.
|
|
2. Listen for scroll on BOTH window and document, capture phase.
|
|
3. Listen for keydown on BOTH window and document, capture phase.
|
|
4. Auto-focus body so arrow keys work without an upfront click.
|
|
5. Never use Element.scrollIntoView — yanks host page.
|
|
*/
|
|
(function () {
|
|
var slides = document.querySelectorAll('.slide');
|
|
var counter = document.getElementById('deck-counter');
|
|
var progress = document.getElementById('deck-progress');
|
|
var KEY = 'od-deck-pos:' + (location.pathname || '/');
|
|
var active = 0;
|
|
|
|
function scroller() {
|
|
if (document.body.scrollWidth > document.body.clientWidth + 1) return document.body;
|
|
return document.scrollingElement || document.documentElement;
|
|
}
|
|
function setActive(i) {
|
|
active = i;
|
|
if (counter) counter.textContent = (i + 1) + ' / ' + slides.length;
|
|
if (progress) progress.style.width = (((i + 1) / slides.length) * 100) + '%';
|
|
try { localStorage.setItem(KEY, String(i)); } catch (_) {}
|
|
}
|
|
function go(i) {
|
|
var next = Math.max(0, Math.min(slides.length - 1, i));
|
|
setActive(next);
|
|
scroller().scrollTo({ left: next * window.innerWidth, behavior: 'smooth' });
|
|
}
|
|
function syncFromScroll() {
|
|
var i = Math.round(scroller().scrollLeft / window.innerWidth);
|
|
if (i !== active && i >= 0 && i < slides.length) setActive(i);
|
|
}
|
|
function onKey(e) {
|
|
var t = e.target;
|
|
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return;
|
|
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(active + 1); }
|
|
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(active - 1); }
|
|
else if (e.key === 'Home') { e.preventDefault(); go(0); }
|
|
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
|
|
}
|
|
|
|
window.addEventListener('keydown', onKey, true);
|
|
document.addEventListener('keydown', onKey, true);
|
|
document.addEventListener('scroll', syncFromScroll, { passive: true, capture: true });
|
|
window.addEventListener('scroll', syncFromScroll, { passive: true });
|
|
|
|
document.body.setAttribute('tabindex', '-1');
|
|
document.body.style.outline = 'none';
|
|
function focusDeck() { try { window.focus(); document.body.focus({ preventScroll: true }); } catch (_) {} }
|
|
document.addEventListener('mousedown', focusDeck);
|
|
window.addEventListener('load', focusDeck);
|
|
focusDeck();
|
|
|
|
try {
|
|
var saved = parseInt(localStorage.getItem(KEY) || '0', 10);
|
|
if (!isNaN(saved) && saved >= 0 && saved < slides.length) {
|
|
setActive(saved);
|
|
scroller().scrollTo({ left: saved * window.innerWidth, behavior: 'instant' });
|
|
} else {
|
|
setActive(0);
|
|
}
|
|
} catch (_) { setActive(0); }
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|