wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
339 lines
18 KiB
HTML
339 lines
18 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Run a Metrics Standup like a Data-Driven Ops Lead - Data, KPI & finance</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
||
|
||
/* tokens: off-black ground, single emerald accent, status-report mono */
|
||
:root {
|
||
--bg: #121417;
|
||
--ink: #edefe9;
|
||
--muted: #a3aaa1;
|
||
--line: rgba(237, 239, 233, 0.14);
|
||
--line-strong: rgba(237, 239, 233, 0.34);
|
||
--accent: #3ecf8e;
|
||
--accent-deep: #0e8a55;
|
||
--accent-ink: #0c1410;
|
||
--display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
--ease: cubic-bezier(.16, 1, .3, 1);
|
||
}
|
||
* { box-sizing: border-box; }
|
||
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--display); -webkit-font-smoothing: antialiased; }
|
||
body { overflow: hidden; }
|
||
.deck {
|
||
display: flex;
|
||
width: 100vw; height: 100vh;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scroll-snap-type: x mandatory;
|
||
scroll-behavior: smooth;
|
||
scrollbar-width: none;
|
||
}
|
||
.deck::-webkit-scrollbar { display: none; }
|
||
.slide {
|
||
flex: 0 0 100vw; height: 100vh;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: 56px 96px;
|
||
scroll-snap-align: start;
|
||
position: relative;
|
||
}
|
||
.slide-inner { width: 100%; max-width: 1100px; }
|
||
.crumb {
|
||
position: absolute; top: 28px; left: 40px;
|
||
font-family: var(--mono); font-size: 11px; color: var(--muted);
|
||
text-transform: uppercase; letter-spacing: 0.14em;
|
||
}
|
||
.crumb::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 10px; }
|
||
.pageno {
|
||
position: absolute; bottom: 28px; right: 40px;
|
||
font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em;
|
||
}
|
||
.nav {
|
||
position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
|
||
display: flex; gap: 7px; z-index: 5;
|
||
}
|
||
.nav .dot {
|
||
width: 16px; height: 2px; border-radius: 0; background: var(--line-strong);
|
||
cursor: pointer; transition: background .2s var(--ease);
|
||
}
|
||
.nav .dot:hover { background: var(--muted); }
|
||
.nav .dot.active { background: var(--accent); }
|
||
|
||
/* entrance: transform+opacity only, staggered, reduced-motion safe */
|
||
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
|
||
.slide-inner > * { animation: rise .6s var(--ease) both; }
|
||
.slide-inner > *:nth-child(2) { animation-delay: .07s; }
|
||
.slide-inner > *:nth-child(3) { animation-delay: .14s; }
|
||
.slide-inner > *:nth-child(4) { animation-delay: .21s; }
|
||
@media (prefers-reduced-motion: reduce) { .slide-inner > * { animation: none; } }
|
||
|
||
/* Cover */
|
||
.cover { display: flex; flex-direction: column; gap: 30px; }
|
||
.cover .badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--line-strong); align-self: flex-start; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
||
.cover .badge .dot { width: 6px; height: 6px; background: var(--accent); }
|
||
.cover h1 { font-size: clamp(56px, 8vw, 112px); margin: 0; line-height: 0.96; letter-spacing: -0.035em; font-weight: 700; }
|
||
.cover h1 em { font-style: normal; color: var(--accent); }
|
||
.cover .meta { display: flex; gap: 40px; color: var(--muted); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; border-top: 1px solid var(--line); padding-top: 22px; }
|
||
|
||
/* Headline */
|
||
.headline { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
|
||
.headline-num { font-size: clamp(120px, 17vw, 210px); line-height: 0.9; letter-spacing: -0.045em; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
|
||
.headline-num small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: 0.1em; margin-top: 18px; font-family: var(--mono); text-transform: uppercase; }
|
||
.headline-text h2 { font-size: 42px; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 18px; font-weight: 600; }
|
||
.headline-text p { color: var(--muted); font-size: 17px; max-width: 38ch; line-height: 1.6; margin: 0; }
|
||
|
||
/* Section title */
|
||
.section-title { font-size: clamp(32px, 4vw, 54px); margin: 0 0 40px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; }
|
||
.section-title em { font-style: normal; color: var(--accent); }
|
||
|
||
/* Lists of items: hairline ledger rows, no cards */
|
||
.item-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
|
||
.item { display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
|
||
.item-num { font-family: var(--mono); font-size: 12px; color: var(--accent); }
|
||
.item-title { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
|
||
.item-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
|
||
.av-row { display: flex; }
|
||
.av { width: 30px; height: 30px; border: 1px solid var(--line-strong); background: var(--bg); margin-left: -9px; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
|
||
.av:first-child { margin-left: 0; }
|
||
.av-2 { background: #1b1f23; color: var(--ink); }
|
||
.av-3 { background: #15211b; color: var(--accent); border-color: rgba(62, 207, 142, 0.4); }
|
||
|
||
/* Blocked / problem statement: accent rule, no gradient card */
|
||
.blocked-block { padding: 8px 0 8px 36px; border-left: 3px solid var(--accent); }
|
||
.blocked-block h3 { font-size: 32px; margin: 0 0 14px; letter-spacing: -0.02em; font-weight: 600; line-height: 1.15; }
|
||
.blocked-block p { color: var(--muted); margin: 0 0 26px; font-size: 17px; line-height: 1.6; max-width: 62ch; }
|
||
.blocked-ask { display: inline-flex; padding: 12px 22px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; }
|
||
|
||
/* Charts: hairline columns, flat strokes, single accent */
|
||
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
|
||
.chart { padding: 30px 36px 8px 0; }
|
||
.chart + .chart { border-left: 1px solid var(--line); padding-left: 36px; padding-right: 0; }
|
||
.chart h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
|
||
.chart .sub { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
|
||
.chart svg { width: 100%; height: 200px; display: block; margin-top: 18px; border-bottom: 1px solid var(--line); }
|
||
.chart svg polyline { stroke: var(--accent); vector-effect: non-scaling-stroke; }
|
||
.chart svg circle { fill: var(--accent); }
|
||
.chart svg line { stroke: var(--line); vector-effect: non-scaling-stroke; }
|
||
.big-num { font-size: 68px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--ink); margin-top: 22px; font-variant-numeric: tabular-nums; }
|
||
.delta { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-top: 10px; letter-spacing: 0.02em; }
|
||
|
||
/* Asks / outputs: hairline quadrant, no cards */
|
||
.asks { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
|
||
.ask { padding: 30px 36px 30px 0; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--line); }
|
||
.ask:nth-child(even) { border-left: 1px solid var(--line); padding-left: 36px; padding-right: 0; }
|
||
.ask .who { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
|
||
.ask .who .av { width: 26px; height: 26px; margin-left: 0; }
|
||
.ask h3 { font-size: 21px; line-height: 1.25; margin: 0; letter-spacing: -0.015em; font-weight: 600; }
|
||
.ask p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 44ch; }
|
||
|
||
/* Closer: the deck's single deliberate inversion */
|
||
.invert { background: var(--ink); color: var(--bg); }
|
||
.invert .crumb, .invert .pageno { color: rgba(18, 20, 23, 0.72); }
|
||
.closer { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
|
||
.closer h2 { font-size: clamp(44px, 6vw, 84px); margin: 0; line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
|
||
.closer h2 em { font-style: normal; color: var(--accent-deep); }
|
||
.closer p { color: rgba(18, 20, 23, 0.74); font-size: 18px; max-width: 56ch; line-height: 1.6; margin: 0; }
|
||
.closer .signature { display: flex; align-items: center; gap: 16px; padding-top: 26px; border-top: 1px solid rgba(18, 20, 23, 0.22); width: 100%; }
|
||
.closer .signature .av { width: 44px; height: 44px; font-size: 14px; background: var(--accent-deep); border: none; color: var(--ink); font-weight: 600; }
|
||
.closer .signature strong { display: block; font-size: 16px; letter-spacing: -0.01em; }
|
||
.closer .signature span { color: rgba(18, 20, 23, 0.68); font-size: 13px; font-family: var(--mono); }
|
||
|
||
@media (max-width: 760px) {
|
||
.slide { padding: 48px 28px; }
|
||
.headline { grid-template-columns: 1fr; }
|
||
.chart-grid, .asks { grid-template-columns: 1fr; }
|
||
.chart + .chart, .ask:nth-child(even) { border-left: none; padding-left: 0; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="deck" id="deck">
|
||
|
||
<!-- 1. Cover -->
|
||
<section class="slide">
|
||
<span class="crumb">Data, KPI & Finance · standup</span>
|
||
<div class="slide-inner cover">
|
||
<div class="badge"><span class="dot"></span>Week of Jul 6 · Ops & Growth standup</div>
|
||
<h1>One number, <em>one decision</em>.</h1>
|
||
<div class="meta">
|
||
<span>Metrics standup · Open Design growth & activation</span>
|
||
<span>Prepared for Ops & Growth · Jul 9, 2026</span>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">01 / 08</span>
|
||
</section>
|
||
|
||
<!-- 2. Headline number -->
|
||
<section class="slide">
|
||
<span class="crumb">Headline answer</span>
|
||
<div class="slide-inner headline">
|
||
<div class="headline-num">41%<small>Signup → first-render conversion, −6pp WoW</small></div>
|
||
<div class="headline-text">
|
||
<h2>The stars are up. The unit economics aren't.</h2>
|
||
<p>GitHub stars grew 1.3% WoW to 68.4K, but signup-to-first-render conversion fell to 41% from 47% — the third straight week that step alone has dropped.</p>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">02 / 08</span>
|
||
</section>
|
||
|
||
<!-- 3. Metric proof -->
|
||
<section class="slide">
|
||
<span class="crumb">Metric proof</span>
|
||
<div class="slide-inner">
|
||
<h2 class="section-title">The proof, <em>line by line</em>.</h2>
|
||
<div class="item-list">
|
||
<div class="item"><span class="item-num">01</span><span class="item-title">Weekly active builders — 14,220 sessions, +4% WoW</span><span class="item-meta">Core · Activation</span></div>
|
||
<div class="item"><span class="item-num">02</span><span class="item-title">Signup → first-render conversion — 41%, −6pp WoW</span><span class="item-meta">Funnel · Down</span></div>
|
||
<div class="item"><span class="item-num">03</span><span class="item-title">BYOK agent connections — 9,800 linked keys across 21 agents, +2%</span><span class="item-meta">Agents · Flat</span></div>
|
||
<div class="item"><span class="item-num">04</span><span class="item-title">Plugin installs — 214,000 cumulative, +11,400 this week</span><span class="item-meta">Distribution</span></div>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">03 / 08</span>
|
||
</section>
|
||
|
||
<!-- 4. Driver tree -->
|
||
<section class="slide">
|
||
<span class="crumb">Driver tree</span>
|
||
<div class="slide-inner">
|
||
<h2 class="section-title">Why conversion <em>slipped</em>.</h2>
|
||
<div class="item-list">
|
||
<div class="item"><span class="item-num">01</span><span class="item-title">Default agent timeout raised p95 render latency 8.1s → 14.4s</span><div class="av-row"><span class="av">OD</span></div></div>
|
||
<div class="item"><span class="item-num">02</span><span class="item-title">61% of the drop concentrates in Safari desktop, React-based templates</span><div class="av-row"><span class="av av-2">MR</span><span class="av">SL</span></div></div>
|
||
<div class="item"><span class="item-num">03</span><span class="item-title">New od-reframe flow added one extra confirm step before render</span><div class="av-row"><span class="av av-2">CA</span></div></div>
|
||
<div class="item"><span class="item-num">04</span><span class="item-title">Everything else — agent choice, BYOK setup, plugin discovery — flat WoW</span><div class="av-row"><span class="av av-3">PB</span></div></div>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">04 / 08</span>
|
||
</section>
|
||
|
||
<!-- 5. The anomaly -->
|
||
<section class="slide">
|
||
<span class="crumb">The anomaly</span>
|
||
<div class="slide-inner">
|
||
<h2 class="section-title">One thing broke the <em>pattern</em>.</h2>
|
||
<div class="blocked-block">
|
||
<h3>Safari desktop first-render latency nearly doubled.</h3>
|
||
<p>Every other channel held steady or improved this week. Safari desktop alone jumped from 8.1s to 14.4s p95, and it's driving almost two-thirds of the conversion drop. That forces a call: roll back the od-reframe confirm step, or ship a Safari-specific render path before Friday's release cut.</p>
|
||
<span class="blocked-ask">Decision needed: roll back or patch by Thu 18:00</span>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">05 / 08</span>
|
||
</section>
|
||
|
||
<!-- 6. Forecast -->
|
||
<section class="slide">
|
||
<span class="crumb">Forecast</span>
|
||
<div class="slide-inner">
|
||
<h2 class="section-title">If we don't fix it by <em>Friday</em>.</h2>
|
||
<div class="chart-grid">
|
||
<div class="chart">
|
||
<h4>First-render conversion · 4-week trailing</h4>
|
||
<div class="sub">Higher is better</div>
|
||
<svg viewBox="0 0 600 220" preserveAspectRatio="none">
|
||
<polyline fill="none" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
||
points="20,60 110,72 200,90 290,108 380,124 470,148 560,164" />
|
||
<circle cx="560" cy="164" r="5"/>
|
||
</svg>
|
||
<div class="big-num">41%</div>
|
||
<div class="delta">▼ −6pp this week, tracking to 33% by month end if unresolved</div>
|
||
</div>
|
||
<div class="chart">
|
||
<h4>p95 render latency · Safari desktop</h4>
|
||
<div class="sub">Lower is better</div>
|
||
<svg viewBox="0 0 600 220" preserveAspectRatio="none">
|
||
<polyline fill="none" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
||
points="20,160 110,150 200,140 290,124 380,108 470,80 560,52" />
|
||
<circle cx="560" cy="52" r="5"/>
|
||
</svg>
|
||
<div class="big-num">14.4s</div>
|
||
<div class="delta">▲ +78% WoW, breaches the 12s render SLA</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">06 / 08</span>
|
||
</section>
|
||
|
||
<!-- 7. Recommended move -->
|
||
<section class="slide">
|
||
<span class="crumb">Recommended move</span>
|
||
<div class="slide-inner">
|
||
<h2 class="section-title">The one decision, <em>and who owns it</em>.</h2>
|
||
<div class="asks">
|
||
<div class="ask">
|
||
<div class="who"><span class="av av-2">EN</span>Engineering</div>
|
||
<h3>Ship the Safari-specific fallback render path by Thursday EOD.</h3>
|
||
<p>Bypasses the timeout path causing the 14.4s p95 without touching the other 39% of the drop.</p>
|
||
</div>
|
||
<div class="ask">
|
||
<div class="who"><span class="av av-3">PM</span>Product</div>
|
||
<h3>Pull the extra confirm step from od-reframe pending re-test.</h3>
|
||
<p>It was added for clarity, not speed — re-run the A/B once the Safari fix lands.</p>
|
||
</div>
|
||
<div class="ask">
|
||
<div class="who"><span class="av">GR</span>Growth</div>
|
||
<h3>Hold paid acquisition spend flat until conversion clears 45%.</h3>
|
||
<p>No point buying more traffic into a funnel step that's currently losing 6pp of it.</p>
|
||
</div>
|
||
<div class="ask">
|
||
<div class="who"><span class="av av-2">DA</span>Data</div>
|
||
<h3>Split Safari desktop out of the funnel dashboard going forward.</h3>
|
||
<p>This anomaly stayed hidden inside a blended average for two weeks — that can't repeat.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">07 / 08</span>
|
||
</section>
|
||
|
||
<!-- 8. Decision -->
|
||
<section class="slide invert">
|
||
<span class="crumb">Decision</span>
|
||
<div class="slide-inner closer">
|
||
<h2>Ship the <em>fallback</em>, not more spend.</h2>
|
||
<p>The data says one thing: fix the render path before we spend another dollar acquiring users into a slower funnel. Engineering owns Thursday's patch, Growth holds spend flat until conversion recovers, and Data splits Safari out so this doesn't hide again.</p>
|
||
<div class="signature">
|
||
<span class="av">OD</span>
|
||
<div><strong>Analytics & Ops</strong><span>Weekly metrics standup · ping #growth-metrics</span></div>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">08 / 08</span>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="nav" id="nav"></div>
|
||
|
||
<script>
|
||
const deck = document.getElementById('deck');
|
||
const slides = deck.querySelectorAll('.slide');
|
||
const nav = document.getElementById('nav');
|
||
slides.forEach((_, i) => {
|
||
const d = document.createElement('span');
|
||
d.className = 'dot' + (i === 0 ? ' active' : '');
|
||
d.addEventListener('click', () => deck.scrollTo({ left: window.innerWidth * i, behavior: 'smooth' }));
|
||
nav.appendChild(d);
|
||
});
|
||
function activeIndex() {
|
||
return Math.round(deck.scrollLeft / window.innerWidth);
|
||
}
|
||
deck.addEventListener('scroll', () => {
|
||
const idx = activeIndex();
|
||
nav.querySelectorAll('.dot').forEach((d, i) => d.classList.toggle('active', i === idx));
|
||
}, { passive: true });
|
||
document.addEventListener('keydown', (e) => {
|
||
const idx = activeIndex();
|
||
if (e.key === 'ArrowRight' || e.key === 'PageDown') {
|
||
const next = Math.min(slides.length - 1, idx + 1);
|
||
deck.scrollTo({ left: window.innerWidth * next, behavior: 'smooth' });
|
||
} else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
|
||
const prev = Math.max(0, idx - 1);
|
||
deck.scrollTo({ left: window.innerWidth * prev, behavior: 'smooth' });
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|