From d89366031f0f5b1550e2ce2946c90fbdaef4b4cb Mon Sep 17 00:00:00 2001 From: Matthew Meszaros Date: Wed, 27 May 2026 04:02:41 +0000 Subject: [PATCH] site(analytics): real dashboard mock floats under the hero Replaced the drill-down ladder panel with the actual product analytics dashboard (PageTopbar + StatStrip + Email performance + Breakdown + Warmup mailbox strip), and removed the duplicate sample-dashboard section that appeared further down the page. The hero now flows directly into the screenshot-worthy product view. --- site/src/pages/analytics.astro | 295 +++++++++++++-------------------- 1 file changed, 114 insertions(+), 181 deletions(-) diff --git a/site/src/pages/analytics.astro b/site/src/pages/analytics.astro index 0240b3a1..cbf322c9 100644 --- a/site/src/pages/analytics.astro +++ b/site/src/pages/analytics.astro @@ -6,16 +6,6 @@ import CTA from '../components/CTA.astro'; // Source: CLAUDE.md analytics + admin sections, internal/repository/* -// Six drill-down layers (real product taxonomy) -const layers = [ - { tier: 'Workspace', icon: 'chart', body: 'Big-picture complaint rate, bounce rate, placement by sender pool, suppression-list growth.' }, - { tier: 'Pool', icon: 'flame', body: 'Warmup pool health, member count, quarantine queue, per-pool spam-score histogram.' }, - { tier: 'Worker', icon: 'cpu', body: 'Per-worker outbound volume, mailbox concentration, IP reputation signals, throttle events.' }, - { tier: 'Mailbox', icon: 'inbox', body: 'Inbox vs spam placement, daily send + warmup volume, complaint and bounce rates per mailbox.' }, - { tier: 'Sequence', icon: 'workflow', body: 'Step-by-step open / reply / positive-reply rates, A/B variant performance, drop-off curves.' }, - { tier: 'Contact', icon: 'contact', body: 'Per-recipient timeline of every send, open, click, reply, bounce, classification, suppression event.' }, -]; - // What we lead with vs what we treat as noise const signal = [ { k: 'Inbox placement rate', why: 'Probed via warmup pool partners. The only number that tells you mail is actually being read.' }, @@ -88,42 +78,128 @@ const faq = [
-
-
-
-
Six layers of drill-down
-
-
- workspace → contact -
-
+
- -
-
- {layers.map((l, i) => ( -
-
L{i + 1}
-
-
- -
-
{l.tier}
-
-
{l.body}
-
+ +
+
+
Analytics
+
Deliverability across the workspace
+
+
+ {['7d', '30d', '90d'].map((o) => ( + ))}
-
- Click any KPI to descend a layer · breadcrumb in the URL - Schema versioned in every event payload + +
+ {[ + { label: 'Total sent', value: '12,847', sub: 'last 7 days' }, + { label: 'Open rate', value: '34.2%', sub: 'after delivery' }, + { label: 'Reply rate', value: '6.1%', sub: 'incl. positive' }, + { label: 'Bounce rate', value: '1.8%', sub: 'hard + soft' }, + ].map((s, i) => ( +
+
{s.label}
+
{s.value}
+
{s.sub}
+
+ ))} +
+ + +
+
+
+ Email performance +
+
+
+ {Array.from({ length: 28 }).map((_, i) => { + const v = 22 + Math.sin(i * 0.5) * 18 + ((i * 13) % 17); + return ( +
+
+
+ ); + })} +
+
+ 7d ago + today +
+
+
+ + +
+ + +
+ Warmup + + All accounts + + +
+
+ {[ + { mb: 'ben@acme.com', day: 22, today: 32, cap: 40, state: 'healthy' }, + { mb: 'sara@acme.com', day: 14, today: 24, cap: 40, state: 'healthy' }, + { mb: 'mark@acme.com', day: 31, today: 40, cap: 40, state: 'watch' }, + { mb: 'kai@acme.com', day: 9, today: 19, cap: 40, state: 'healthy' }, + ].map((m) => { + const pct = Math.round((m.today / m.cap) * 100); + const chip = m.state === 'watch' ? 'bg-amber-50 text-amber-700' : 'bg-emerald-50 text-emerald-700'; + const dot = m.state === 'watch' ? 'bg-amber-500' : 'bg-emerald-500'; + const bar = m.state === 'watch' ? 'bg-amber-500' : 'bg-sky-500'; + return ( +
+
+ {m.mb} + + + {m.state} + +
+
+ {m.today} + / {m.cap} today · D{m.day} +
+
+
+
+
+ ); + })}
@@ -186,149 +262,6 @@ const faq = [
- -
-
-
-
Sample dashboard
-

- The workspace view, exactly as it ships. -

-

- The panel below is the actual analytics page from the product. Illustrative numbers for a demo workspace. Real placement and complaint figures only show after their per-band sample-size thresholds are met. -

-
- -
- - -
-
-
Analytics
-
Deliverability across the workspace
-
-
- {['7d', '30d', '90d'].map((o) => ( - - ))} -
-
- - -
- {[ - { label: 'Total sent', value: '12,847', sub: 'last 7 days' }, - { label: 'Open rate', value: '34.2%', sub: 'after delivery' }, - { label: 'Reply rate', value: '6.1%', sub: 'incl. positive' }, - { label: 'Bounce rate', value: '1.8%', sub: 'hard + soft' }, - ].map((s, i) => ( -
-
{s.label}
-
{s.value}
-
{s.sub}
-
- ))} -
- - -
- -
-
- Email performance -
-
-
- {Array.from({ length: 28 }).map((_, i) => { - // Deterministic illustrative pattern, looks alive - const v = 22 + Math.sin(i * 0.5) * 18 + ((i * 13) % 17); - return ( -
-
-
- ); - })} -
-
- 7d ago - today -
-
-
- - - -
- - -
- Warmup - - All accounts - - -
-
- {[ - { mb: 'ben@acme.com', day: 22, today: 32, cap: 40, state: 'healthy' }, - { mb: 'sara@acme.com', day: 14, today: 24, cap: 40, state: 'healthy' }, - { mb: 'mark@acme.com', day: 31, today: 40, cap: 40, state: 'watch' }, - { mb: 'kai@acme.com', day: 9, today: 19, cap: 40, state: 'healthy' }, - ].map((m) => { - const pct = Math.round((m.today / m.cap) * 100); - const chip = m.state === 'watch' ? 'bg-amber-50 text-amber-700' : 'bg-emerald-50 text-emerald-700'; - const dot = m.state === 'watch' ? 'bg-amber-500' : 'bg-emerald-500'; - const bar = m.state === 'watch' ? 'bg-amber-500' : 'bg-sky-500'; - return ( -
-
- {m.mb} - - - {m.state} - -
-
- {m.today} - / {m.cap} today · D{m.day} -
-
-
-
-
- ); - })} -
-
- -

- Numbers are illustrative for the structural mock. Pulled from a demo workspace. -

-
-