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
273 lines
17 KiB
HTML
273 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Write a Weekly Growth Review like a Head of Analytics - Data, KPI & finance</title>
|
|
<style>/* weekly-report :: ops ledger restyle */
|
|
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400..700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
|
|
|
/* ============ tokens: one accent (forest emerald), warm off-white paper ============ */
|
|
:root{
|
|
--paper:#f6f5f1;
|
|
--paper-2:#edece6;
|
|
--ink:#181a17;
|
|
--ink-2:#4e524c;
|
|
--ink-3:#666b63;
|
|
--line:rgba(24,26,23,.13);
|
|
--line-strong:rgba(24,26,23,.32);
|
|
--accent:#136f47;
|
|
--down:#a83430;
|
|
--font-display:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
|
|
--font-body:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
|
|
--font-mono:'IBM Plex Mono',SFMono-Regular,Menlo,monospace;
|
|
--ease:cubic-bezier(.16,1,.3,1);
|
|
}
|
|
*,*::before,*::after{box-sizing:border-box}
|
|
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
|
|
font-family:var(--font-body);font-weight:400;line-height:1.55;
|
|
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
|
a{color:inherit;text-decoration:none}
|
|
code,kbd,pre,samp{font-family:var(--font-mono)}
|
|
|
|
/* ============ deck (static preview: slides stacked, print-paginated) ============ */
|
|
.deck{width:100vw}
|
|
.slide{position:relative;width:100vw;height:100vh;overflow:hidden;
|
|
display:flex;flex-direction:column;justify-content:center;
|
|
padding:84px 96px;border-bottom:1px solid var(--line)}
|
|
.center{align-items:center;justify-content:center}
|
|
.tc{text-align:center}
|
|
|
|
/* ============ type scale ============ */
|
|
.h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.032em;line-height:1.02;
|
|
font-size:clamp(56px,6.4vw,84px);margin:0}
|
|
.h2{font-family:var(--font-display);font-weight:650;letter-spacing:-.025em;line-height:1.06;
|
|
font-size:clamp(36px,3.8vw,50px);margin:0}
|
|
.h1,.h2{text-wrap:balance}
|
|
h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;font-size:18px;line-height:1.3;margin:0}
|
|
.lede{font-size:19px;line-height:1.6;color:var(--ink-2);font-weight:400;max-width:58ch;margin:0}
|
|
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;
|
|
color:var(--accent);font-weight:500;margin:0 0 18px}
|
|
.dim{color:var(--ink-2)}
|
|
.mono{font-family:var(--font-mono)}
|
|
.mt-s{margin-top:8px}.mt-m{margin-top:18px}.mt-l{margin-top:40px}
|
|
.row{display:flex;gap:24px;align-items:baseline}
|
|
.grid{display:grid}
|
|
.pill{font-family:var(--font-mono);font-size:12px;color:var(--ink-2);letter-spacing:.03em}
|
|
|
|
/* ============ entrance motion: transform+opacity only, ease-out, staggered ============ */
|
|
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
|
|
.slide>*{animation:rise .65s var(--ease) both}
|
|
.slide>*:nth-child(2){animation-delay:.06s}
|
|
.slide>*:nth-child(3){animation-delay:.12s}
|
|
.slide>*:nth-child(4){animation-delay:.18s}
|
|
@media (prefers-reduced-motion:reduce){.slide>*{animation:none}}
|
|
|
|
/* ============ S1 cover ============ */
|
|
.cover-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:72px;
|
|
padding-bottom:18px;border-bottom:1px solid var(--line-strong)}
|
|
.logo{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;
|
|
display:inline-flex;align-items:center;gap:10px}
|
|
.logo::before{content:"";width:11px;height:11px;background:var(--accent);flex:none}
|
|
.week-chip{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;color:var(--ink-2)}
|
|
.deck-footer{position:absolute;left:96px;right:96px;bottom:44px;
|
|
display:flex;justify-content:space-between;align-items:baseline;
|
|
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-3)}
|
|
.slide-number::before{content:attr(data-current)}
|
|
.slide-number::after{content:" / " attr(data-total)}
|
|
.cover .h1 span{color:var(--accent)}
|
|
|
|
/* ============ S2 KPI board: hairline grid, no shadow cards ============ */
|
|
.g4{grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-strong)}
|
|
.kpi{padding:30px 32px 28px 0;border-bottom:1px solid var(--line)}
|
|
.kpi:not(:nth-child(4n+1)){border-left:1px solid var(--line);padding-left:32px}
|
|
.kpi .label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
|
|
.kpi .value{font-family:var(--font-display);font-weight:650;font-size:clamp(34px,3vw,44px);
|
|
letter-spacing:-.03em;line-height:1;margin-top:14px;font-variant-numeric:tabular-nums}
|
|
.kpi.hero .value{color:var(--accent)}
|
|
.kpi .delta{display:block;font-family:var(--font-mono);font-size:12px;margin-top:12px;color:var(--ink-3)}
|
|
.kpi .delta.up{color:var(--accent)}
|
|
.kpi .delta.down{color:var(--down)}
|
|
.kpi .delta.flat{color:var(--ink-3)}
|
|
|
|
/* ============ S3 shipped: ledger rows ============ */
|
|
.ship-list{border-top:1px solid var(--line-strong)}
|
|
.ship-item{display:flex;gap:22px;padding:17px 0;border-bottom:1px solid var(--line);align-items:baseline}
|
|
.ship-item .tag{flex:none;width:64px;font-family:var(--font-mono);font-size:11px;font-weight:600;
|
|
letter-spacing:.08em;color:var(--ink-3)}
|
|
.ship-item .tag.feat{color:var(--accent)}
|
|
.ship-item .tag.fix,.ship-item .tag.exp,.ship-item .tag.infra{color:var(--ink-2)}
|
|
.ship-item b{font-weight:600;color:var(--ink);font-size:16px;letter-spacing:-.005em}
|
|
.ship-item p{margin:0}
|
|
.ship-item span.owner{margin-left:auto;flex:none;color:var(--ink-3);font-size:12px;font-family:var(--font-mono)}
|
|
|
|
/* ============ S4 chart: flat bars, accent only on the current week ============ */
|
|
.chart{border-top:1px solid var(--line-strong);padding-top:26px}
|
|
.chart-bars{display:flex;align-items:flex-end;gap:12px;height:240px;margin-top:44px;
|
|
border-bottom:1px solid var(--line-strong)}
|
|
.chart-bars .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
|
|
.chart-bars .col .b{width:100%;background:var(--ink);min-height:6px;position:relative}
|
|
.chart-bars .col:last-child .b{background:var(--accent)}
|
|
.chart-bars .col:last-child .b::after{color:var(--accent);font-weight:600}
|
|
.chart-bars .col .b::after{content:attr(data-v);position:absolute;top:-26px;left:0;right:0;text-align:center;
|
|
font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--ink)}
|
|
.chart-bars .col .lbl{position:absolute;top:100%;left:0;right:0;text-align:center;margin-top:10px;
|
|
font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
|
|
.chart>.dim{padding-top:18px}
|
|
|
|
/* ============ S5 blockers: ruled rows, red tick ============ */
|
|
.blocker-list{border-top:1px solid var(--line-strong)}
|
|
.blocker{position:relative;padding:22px 0 20px 26px;border-bottom:1px solid var(--line);margin:0}
|
|
.blocker::before{content:"";position:absolute;left:0;top:30px;width:12px;height:2px;background:var(--down)}
|
|
.blocker h4{margin-bottom:6px}
|
|
.blocker p{font-size:14px;color:var(--ink-2);margin:0;max-width:64ch}
|
|
.blocker .meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--ink-3);margin-top:8px}
|
|
|
|
/* ============ S6 next week: owner/task ledger ============ */
|
|
.next-list{border-top:1px solid var(--line-strong)}
|
|
.next-row{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:16px 0;
|
|
border-bottom:1px solid var(--line);align-items:baseline}
|
|
.next-row .owner{font-family:var(--font-mono);font-size:12.5px;color:var(--accent)}
|
|
.next-row .task{color:var(--ink);font-size:16px}
|
|
.next-row .task b{font-weight:600;letter-spacing:-.005em}
|
|
.next-row .task span{display:block;color:var(--ink-3);font-size:12.5px;font-family:var(--font-mono);margin-top:3px}
|
|
|
|
/* ============ S7 thanks: the single inverted page ============ */
|
|
.slide.thanks{background:var(--ink);color:var(--paper);border-bottom:none}
|
|
.thanks .kicker{color:var(--paper);opacity:.55}
|
|
.thanks .h1{font-size:clamp(64px,7.6vw,104px)}
|
|
.thanks .lede{color:rgba(246,245,241,.72);max-width:72ch;text-wrap:balance}
|
|
.thanks .week-chip{color:rgba(246,245,241,.78);border-bottom:1px solid rgba(246,245,241,.3);padding-bottom:5px}
|
|
|
|
/* ============ print ============ */
|
|
@media print{
|
|
.slide{page-break-after:always;border-bottom:none}
|
|
.slide,.chart-bars .col .b{-webkit-print-color-adjust:exact;print-color-adjust:exact}
|
|
}
|
|
@media (max-width:820px){
|
|
.slide{padding:52px 28px;height:auto;min-height:100vh}
|
|
.deck-footer{left:28px;right:28px}
|
|
.g4{grid-template-columns:1fr 1fr}
|
|
.kpi:not(:nth-child(4n+1)){border-left:none;padding-left:0}
|
|
.kpi:nth-child(2n){border-left:1px solid var(--line);padding-left:24px}
|
|
.ship-item{flex-wrap:wrap}
|
|
.next-row{grid-template-columns:1fr}
|
|
}
|
|
</style></head>
|
|
<body class="tpl-weekly-report">
|
|
<div class="deck">
|
|
|
|
<!-- 1. Cover -->
|
|
<section class="slide cover" data-title="Cover">
|
|
<div class="cover-head">
|
|
<div class="logo">Open Design</div>
|
|
<div class="week-chip">W24 · 2026-06-08 → 2026-06-14</div>
|
|
</div>
|
|
<p class="kicker">WEEKLY GROWTH REVIEW · DATA, KPI & FINANCE</p>
|
|
<h1 class="h1 mt-s">Stars are up 18%.<br>Installs are <span>flat</span>.</h1>
|
|
<p class="lede mt-m">Top-of-funnel is working. The leak is activation — only 31% of new installs create a first file within 24h, down 4 points WoW. Recommended move: fix the onboarding drop before we fund another awareness push.</p>
|
|
<div class="deck-footer"><span>Prepared by @growth · reviewed by @maya</span><span class="slide-number" data-current="1" data-total="7"></span></div>
|
|
</section>
|
|
|
|
<!-- 2. KPI -->
|
|
<section class="slide" data-title="KPIs">
|
|
<p class="kicker">THE NUMBER, PROVEN · KPIs</p>
|
|
<h2 class="h2">Stars up, installs flat, activation down</h2>
|
|
<div class="grid g4 mt-l">
|
|
<div class="kpi good hero"><div class="label">GitHub Stars</div><div class="value">68.4K</div><div class="delta up">▲ +18% WoW</div></div>
|
|
<div class="kpi"><div class="label">New installs (Mac+Win)</div><div class="value">4,120</div><div class="delta flat">— +2% WoW</div></div>
|
|
<div class="kpi bad"><div class="label">D1 activation (1st file <24h)</div><div class="value">31%</div><div class="delta down">▼ -4 pts WoW</div></div>
|
|
<div class="kpi"><div class="label">BYOK setup completion</div><div class="value">58%</div><div class="delta flat">— flat WoW</div></div>
|
|
<div class="kpi good"><div class="label">Plugin installs</div><div class="value">9,800</div><div class="delta up">▲ +11% WoW</div></div>
|
|
<div class="kpi good"><div class="label">Discord signups</div><div class="value">640</div><div class="delta up">▲ +9% WoW</div></div>
|
|
<div class="kpi good"><div class="label">Agent-store listings</div><div class="value">214</div><div class="delta up">▲ +3 WoW</div></div>
|
|
<div class="kpi good"><div class="label">Weekly active projects</div><div class="value">22,300</div><div class="delta up">▲ +5% WoW</div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. Shipped -->
|
|
<section class="slide" data-title="Shipped">
|
|
<p class="kicker">DRIVER TREE · STAR GROWTH BY SOURCE</p>
|
|
<h2 class="h2">Where the 18% came from</h2>
|
|
<div class="ship-list mt-l" style="max-width:980px">
|
|
<div class="ship-item"><span class="tag feat">LAUNCH</span><div><b>Show HN: Open Design v2</b><p class="dim" style="font-size:13px;margin:2px 0 0">Front-page 14 hours. Largest single referral spike of the quarter.</p></div><span class="owner">41% of stars</span></div>
|
|
<div class="ship-item"><span class="tag feat">PRESS</span><div><b>3 YouTube creator reviews</b><p class="dim" style="font-size:13px;margin:2px 0 0">Local-first + BYOK angle resonated; combined 210K views this week.</p></div><span class="owner">22% of stars</span></div>
|
|
<div class="ship-item"><span class="tag exp">SOCIAL</span><div><b>r/programming thread</b><p class="dim" style="font-size:13px;margin:2px 0 0">"Apache-2.0 Figma alternative" thread crossed 1.2K upvotes.</p></div><span class="owner">14% of stars</span></div>
|
|
<div class="ship-item"><span class="tag infra">ORGANIC</span><div><b>GitHub Trending (daily, TypeScript)</b><p class="dim" style="font-size:13px;margin:2px 0 0">Held a top-5 slot for 4 of 7 days without a paid or press trigger.</p></div><span class="owner">12% of stars</span></div>
|
|
<div class="ship-item"><span class="tag exp">SOCIAL</span><div><b>X/Twitter thread on agent-native design</b><p class="dim" style="font-size:13px;margin:2px 0 0">Single thread from a mid-size dev account, no boosting.</p></div><span class="owner">7% of stars</span></div>
|
|
<div class="ship-item"><span class="tag fix">REFERRAL</span><div><b>Existing-user referrals + other</b><p class="dim" style="font-size:13px;margin:2px 0 0">Long tail: forks, blog mentions, internal team shares.</p></div><span class="owner">4% of stars</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. Metrics chart -->
|
|
<section class="slide" data-title="Metrics">
|
|
<p class="kicker">FORECAST · NEXT 4 WEEKS</p>
|
|
<h2 class="h2">Installs plateau at ~4.15K/week without a fix</h2>
|
|
<div class="chart mt-l">
|
|
<div class="row" style="justify-content:space-between"><h4>Decision: redirect the 4th paid-channel test budget into the onboarding rebuild.</h4><span class="pill">target: 5.0K/wk</span></div>
|
|
<div class="chart-bars">
|
|
<div class="col"><div class="b" data-v="3.6K" style="height:56%"></div><div class="lbl">W18</div></div>
|
|
<div class="col"><div class="b" data-v="3.7K" style="height:60%"></div><div class="lbl">W19</div></div>
|
|
<div class="col"><div class="b" data-v="3.8K" style="height:65%"></div><div class="lbl">W20</div></div>
|
|
<div class="col"><div class="b" data-v="3.9K" style="height:69%"></div><div class="lbl">W21</div></div>
|
|
<div class="col"><div class="b" data-v="4.0K" style="height:73%"></div><div class="lbl">W22</div></div>
|
|
<div class="col"><div class="b" data-v="4.05K" style="height:76%"></div><div class="lbl">W23</div></div>
|
|
<div class="col"><div class="b" data-v="4.12K" style="height:80%"></div><div class="lbl">W24</div></div>
|
|
<div class="col"><div class="b" data-v="4.15K*" style="height:82%"></div><div class="lbl">W25e</div></div>
|
|
</div>
|
|
<p class="dim mt-m" style="font-size:13px;margin-top:36px">*W25 is a forecast, not actuals. At the current activation rate, installs flatten near 4.15K/week regardless of new-visitor volume — the ceiling is the onboarding funnel, not awareness.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. Blockers -->
|
|
<section class="slide" data-title="Blockers">
|
|
<p class="kicker">RISK TO THE FORECAST · 3 items</p>
|
|
<h2 class="h2">What could break the 4.15K plateau call</h2>
|
|
<div class="blocker-list mt-l" style="max-width:900px">
|
|
<div class="blocker">
|
|
<h4>Step 2 (BYOK key entry) drops 42% of new installs</h4>
|
|
<p>Funnel replay shows the single largest activation leak sits at the API-key prompt — most users bounce before entering any key.</p>
|
|
<div class="meta">owner: @onboarding · biggest lever · help wanted</div>
|
|
</div>
|
|
<div class="blocker">
|
|
<h4>Windows install friction is rising support load</h4>
|
|
<p>Windows native remains best-effort (macOS/Linux/WSL2 are primary); ticket volume from Windows installs is up 22% WoW.</p>
|
|
<div class="meta">owner: @desktop · target: next week</div>
|
|
</div>
|
|
<div class="blocker">
|
|
<h4>No day-2 nudge exists for silent installs</h4>
|
|
<p>Users who don't create a file on day 1 currently get no follow-up — we can't tell drop-off from delayed activation.</p>
|
|
<div class="meta">owner: @data · needs decision from @maya</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. Next week -->
|
|
<section class="slide" data-title="Next Week">
|
|
<p class="kicker">RECOMMENDED MOVE · W25 plan</p>
|
|
<h2 class="h2">Fix activation, then re-test paid</h2>
|
|
<div class="next-list mt-l" style="max-width:960px">
|
|
<div class="next-row"><div class="owner">@onboarding</div><div class="task"><b>Ship guided first-file wizard, replace blank canvas</b><span>target: 31% → 40% D1 activation</span></div></div>
|
|
<div class="next-row"><div class="owner">@docs</div><div class="task"><b>Inline 60-second BYOK setup video at step 2</b><span>directly targets the 42% drop point</span></div></div>
|
|
<div class="next-row"><div class="owner">@growth</div><div class="task"><b>Hold the 4th paid-channel test</b><span>redirect budget to onboarding rebuild this week</span></div></div>
|
|
<div class="next-row"><div class="owner">@desktop</div><div class="task"><b>Triage top 5 Windows install failure modes</b><span>clears this week's rising ticket volume</span></div></div>
|
|
<div class="next-row"><div class="owner">@data</div><div class="task"><b>Instrument day-2 nudge email</b><span>closes the silent-install blind spot</span></div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. Thanks -->
|
|
<section class="slide thanks center tc" data-title="Thanks">
|
|
<div>
|
|
<p class="kicker">DECISION RECAP</p>
|
|
<h1 class="h1">Fix the leak<br>before we fund the funnel.</h1>
|
|
<p class="lede" style="margin:24px auto 0">Stars: +18%. Installs: flat. Activation: the one number that moves the other two next week.</p>
|
|
<div class="row mt-l" style="justify-content:center;gap:40px">
|
|
<span class="week-chip">github.com/nexu-io/open-design</span>
|
|
<span class="week-chip">questions → #growth-review</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</body></html>
|