User confirmed the old pricing they meant is the 1d5a75d edge-to-edge
grid: cards share borders, no individual rounded ring on each card,
the whole grid sits inside one rounded ring with overflow-hidden.
This commit takes the layout from 1d5a75d:
- grid uses gap-px on a [color:var(--border)] background to render the
internal separators as 1px lines instead of card gaps.
- Whole grid wrapped in a single ring-1 rounded-[10px] overflow-hidden
container so the four cards read as one block.
- Each card is bare bg-white p-7, no rounded corners, no individual ring,
no shadow.
- Plan name uses the 14px uppercase tracking-[0.12em] eyebrow style,
not the 16px bold heading style.
- Featured card keeps the Most popular pill, brand-color name, and
brand-filled CTA, but drops the ring-2 scale-[1.02] and the
sweep/bloom decorations (they only made sense on a separated card).
Switcher and price animation are still the d256ba4 motion.dev versions
restored in the previous commit, so the switcher works and the price
fades on toggle.
The user asked for the OLD pricing section back, the one before the
1d5a75d strip-down. This commit restores it exactly as it shipped in
commit d256ba4:
- Plans data: string prices ($29, $23, ..., 'Custom') instead of the
numeric/null shape I borrowed from /pricing.
- Section header: small 'Pricing' eyebrow chip on brand-soft, big
italic 'Per mailbox. Predictable.' headline, larger py-24/py-32
padding restored.
- Toggle: ID-based premium thumb toggle (#billing-toggle / #toggle-thumb)
with motion.dev sliding the thumb between Monthly and Annual. Save 20%
emerald pill sits to the right.
- Cards: ring-1 standard / ring-2 brand + scale-1.02 featured, sweep
+ bloom on the featured card, Most-popular pill anchored top-right,
sky-zap sends/day chip, brand-soft/sky checkmarks, brand-filled CTA
on the featured plan.
- Toggle script: the original motion.dev driven version that swaps the
.price-amount text via opacity flips and pushes the .cadence string.
- Kept the inline thumb width/left fallback (left:116px width:112px) so
the thumb stays visible until motion has booted.
The user has been asking for the home pricing section to match /pricing.
This commit ports the /pricing card grid verbatim onto the home page:
- Plan data structure aligned: numeric price/annual (29, 23, etc),
null for the Enterprise plan, all other fields preserved (summary,
sendsPerDay, href, cta, highlight, features).
- Card markup is now the same as /pricing: rounded-[18px] white card,
ring + layered shadow on standard plans, a 2px sky-6 ring + sky glow
on the featured plan, sky-1-to-transparent gradient overlay at the
top of the featured card, Most-popular pill anchored top-center.
- Plan name eyebrow is the sky-6 mono SHOUT label (matches /pricing).
- Price block: 48px number with a 28px $ prefix span, slide-up
.plan-price > .plan-price-inner wrapper with the same
cubic-bezier(0.34,1.56,0.64,1) rebound easing /pricing uses, then a
/ mo postfix; Enterprise renders the bare 'Custom' word at 44px.
- Cadence is .plan-note with data-monthly-note / data-annual-note that
the toggle script swaps with a soft fade. Enterprise gets the static
'volume-based · contact sales' string.
- Feature rows use sky-1 chip + sky-6 check, no neutral pills.
- Plan CTA: sky-6 filled button with lift+glow on the featured card,
dark filled button on the others, matching /pricing.
The toggle and switcher script were already aligned in the prior
commit; this commit only changes the card grid so the layout and the
price-swap animation now match /pricing exactly.
Home pricing:
- Removed both clouds the user flagged: the big cloud-5 backdrop sitting
behind the panel and the small cloud-4 bloom inside the featured card.
The brand-ring + sweep + Most-popular pill carry the highlight alone now.
- Switcher swapped to the same vanilla implementation /pricing uses:
data-billing-toggle wrapper with a .billing-indicator span that slides
by getBoundingClientRect, no motion.dev dependency, indicator is
positioned on first frame so it is never invisible.
- Price animation: the cards keep their original layout (large $48px
number, cadence note line, no $ prefix, no /mo split, no 62px
forced height), but the inner number now lives in a
.plan-price > .plan-price-inner pair and swaps via the same slide-up
cubic-bezier(0.34,1.56,0.64,1) rebound used on /pricing.
- Cadence text uses .plan-note with data-monthly-note / data-annual-note
so it fades in sync with the price swap.
Footer:
- The Mindroot Ltd disclosure went from three stacked lines to a single
compact line under the copyright, satisfying UK Companies Act s.82
without dominating the footer.
Brand and assets:
- New /public/brand/social-avatar.jpg: the official Warmbly social profile
picture (paper-plane mark on a sky-with-clouds canvas, 1024x1024).
- scripts/gen-icons.mjs generates the full favicon set from that source
using sharp. Rounded variants (16/32/48/96) so the icon reads as a
soft chip in browser tabs, square apple-touch-icon (iOS rounds it),
square maskable manifest icons (192/512), and a 1200x630 OG card on a
sky gradient with the rounded avatar on the left.
SEO / head:
- Layout.astro head now declares all favicon sizes, full Open Graph
set (type, site_name, url, locale, image w/h/alt), Twitter card with
summary_large_image, application-name and PWA capability meta, dual
light/dark theme-color tied to the sky tokens, format-detection off
for phone-number autolink, and crawler hints with
max-image-preview:large.
- Two JSON-LD blocks: Organization (legalName Mindroot Ltd, postal
address, two ContactPoints, Companies House identifier, sameAs
GitHub) and WebSite (publisher reference). Drives rich-result
eligibility and gives crawlers a clean entity to attach signals to.
- site.webmanifest expanded: real name, description, start_url, scope,
full icon set including the 96 rounded chip and apple-touch-icon
alongside the maskable 192/512s, sky-token theme/background colors.
Brand page:
- New Social avatar section after Marks: 1024 source preview, round
and square crop previews at 48/64/80/112, download CTA pointing at
/brand/social-avatar.jpg. Asset manifest gets the avatar entry.
About page:
- Repo surface list now includes site/ (this marketing site, Astro 5
+ Tailwind v4), deploy/, docs/, resources/, scripts/. AGENTS.md
(CLAUDE.md symlinked) System Shape section updated with the same
extra paths so the agent context stays in sync.
Footer:
- UK Companies Act s.82 disclosure restored with real entity info:
Mindroot Ltd, company number 16543299, registered office at
71-75 Shelton Street, London, England, WC2H 9JQ. Copyright line
flipped to Mindroot Ltd.
Home pricing regression fix:
- The home pricing cards had been flattened into a single edge-to-edge
grid with no rings, no featured-card highlight, and no animations,
while the toggle thumb had no inline width/left so it disappeared
whenever motion.dev had not booted yet (the 'defected switcher'
the user reported).
- Restored the premium card layout: each plan is a separated rounded
card with its own ring, the featured plan picks up ring-2 of the
brand color, a cloud bloom in the top-right, a continuously sweeping
highlight (pricing-sweep keyframes already present in the page
stylesheet), and a 'Most popular' pill.
- Toggle thumb now starts at left:116px width:112px so the Annual
default is visually selected on first paint even before the JS
upgrade animates it.
About:
- Remove the floating six-cell at-a-glance stats card under the hero
(License/Self-hostable/Roadmap/Encryption/Worker SQL access/Default
cold cap). The card looked busy and disrupted the page flow; the
same facts are covered in the planes, principles, and posture
sections lower down.
- Drop the now-unused facts array and the github.com/warmbly/warmbly
caption.
- Tighten the hero bottom padding from pb-44/pb-56 to pb-20/pb-28
since nothing floats over it anymore.
Legal layout:
- Add a top-to-bottom dark scrim above HeroAtmosphere so the white
eyebrow, title, and metadata stay legible when a painterly cloud
drifts behind them. Scrim uses the sky tokens (sky-8 to sky-6 to
transparent) so it reads as deeper sky, not as a black bar.
- Drop the white-on-cloud type into a small text-shadow as belt-and-
braces against the brightest cloud highlights.
Removes pages we do not need:
- dpa
- acceptable-use
- subprocessors
- cookies
Footer Legal column drops the four removed entries and keeps just
Terms and Privacy.
Shared Legal layout (src/layouts/Legal.astro) now drives both pages:
- Hero uses HeroAtmosphere for consistency with the product pages.
- Sticky sidebar lists the in-page sections passed as a sections prop.
- Scroll-spy script highlights the active section as you scroll and
slides an animated vertical pill indicator next to it, matching the
learn handbook treatment.
- Documents block under the section list cross-links Terms <-> Privacy.
- Footer line points to hello@warmbly.com (the only inbound legal
address advertised on /contact).
Real legal entity sourced from ~/warmbly-web:
- Mindroot Ltd, company number 16543299, registered in England and Wales
- Registered office: 71-75 Shelton Street, London, England, WC2H 9JQ
- Governing law: England and Wales; jurisdiction: courts of London
Terms rewritten as 17 numbered sections using the shared layout, with
a Who-we-are section that names Mindroot Ltd and the registered
office, Stripe as the payment processor, an Acceptable use section
that absorbs the relevant bits from the removed acceptable-use page,
and a contact section that points to hello@warmbly.com.
Privacy rewritten as 13 numbered sections, mirroring the real
encryption model (AWS KMS root, per-user 32-byte DEK, AES-GCM at the
app layer, DEK ciphertext in DynamoDB, plaintext DEK cached briefly
in Redis, control-plane state in PostgreSQL, workers operating over
Kafka/KMS/DynamoDB/S3/Redis only). UK ICO named as supervisory
authority; UK IDTA and EU SCCs referenced for international transfers.
Email cleanup across the site so only addresses that appear on the
contact page are used (hello@ and sales@):
- trust: security@warmbly.com -> hello@warmbly.com in the hero CTA,
the responsible-disclosure body and email chip, and the final CTA;
CTA secondary link swapped from /subprocessors/ to /privacy/.
- trust: subprocessors-summary block keeps the table of infrastructure
providers (real, sourced from CLAUDE.md) but drops the link out to
the deleted /subprocessors/ page and the DPA-on-request note.
- brand: press@warmbly.com -> hello@warmbly.com in the press contact.
- faq: DPA answer email updated from security@ to hello@.
Build: 36 pages (was 40); no remaining links to the removed pages.
Ten pages rewritten end to end against the shared HeroAtmosphere hero,
container-page max-width, and sky color tokens, so they finally match
the visual language of the product pages (sending, warmup, developers,
roadmap, changelog).
Company:
- about: open-source positioning, control plane vs execution plane
origin essay, six numbered build principles, posture comparison,
real repo path strip, small-team note linking to roadmap and
changelog and GitHub.
- brand: marks grid with wordmark and mark variants plus clear-space
and min-size strip, full sky palette ramp with hex and token names,
typography specimen (Inter plus system mono), four voice principles,
do and dont misuse grid, press contact and download manifest.
- trust: posture badges with shipped vs roadmap items called out
honestly, real envelope encryption flow (KMS, per-user DEK, AES-GCM,
Redis-cached plaintext DEK, encrypted DEK in DynamoDB) with source
anchors, worker boundary table, collect vs never-collect split, real
auto-block thresholds, subprocessors link, responsible disclosure
with security@warmbly.com only, status and changelog quick links.
Deliverability:
- mailbox-first positioning, per-mailbox health dashboard mocking the
five real states (healthy, watch, throttled, quarantined, blocked),
opinionated four-point stance, defaults spec sheet pulled straight
from CLAUDE.md (50/day, 600s, 10/day, 40/day, +1/day, 100/5min,
500/hr, 3/24h tokens, score > 50), four-pool isolation card grid,
auto-quarantine band gauge with thresholds and Google/SES anchors,
SPF/DKIM/DMARC/PTR coverage grid, six-row suppression engine table,
recommended cold posture, by-the-numbers strip with source paths,
FAQ and CTA.
Legal (consistent treatment, sticky sidebar TOC + numbered sections):
- terms: 17 numbered sections, Stripe payment processor note,
placeholder governing-law phrasing, legal@warmbly.com contact.
- privacy: 13 sections mirroring the real encryption model in copy,
print stylesheet for clean printing.
- dpa: 20 sections plus three annexes, SCC and UK IDTA references,
72-hour breach notification, sub-processor authorization model,
cross-references to terms and trust and subprocessors.
- acceptable-use: opinionated 14-section AUP, allowed vs not-allowed
two-column grid, real mailbox health enforcement ladder, no fake
enforcement statistics, abuse@warmbly.com.
- subprocessors: designer-grade table of real vendors only (AWS,
Cloudflare, Stripe, Postmark, Sentry, Plain) with real security or
privacy URLs, mobile stacked-card fallback, subscribe-to-changes
mailto, evaluation criteria, notice and objection window.
- cookies: per-category tables (strictly necessary, functional,
third-party) with real cookie names, analytics and marketing
explicitly empty rather than invented, manage-preferences anchor.
Constraints enforced across all ten: no em dashes, no fabricated
metrics, no fake compliance badges, no fictional company or employee
names, no AI-cute filenames or terminal logs. Astro JSX parser
caveat respected throughout (no < or <= comparisons inside JSX
expression blocks; all comparisons hoisted to frontmatter).
The earlier slop scrub renamed the sequence to use template variables
({{ first_name }}, {{ current_company }} etc), but the sequence preview
strip header and variables footer still referenced a candidate object
literal (candidate.first_name, candidate.current_company, candidate.current_role,
candidate.why_now) and fictional from:/to: addresses (ben@vector-talent.com,
priya@stripe.com), which crashed the build with 'candidate is not defined'.
- Preview chip: 'Preview · candidate.first_name' becomes 'Plain text'.
- Strip filename 'staff-platform-fy26-q2' becomes 'Sequence preview'.
- from:/to: replaced with neutral 'From recruiter mailbox' / 'To candidate'.
- Variables footer maps real template vars (first_name, current_company,
open_role, sender.first_name) to short descriptive labels instead of
pulling from a non-existent candidate object.
- founders: drop the 'founder-math.txt' filename + 'Founder math' frame in
the floating panel header. Replace with a plain 'The plan' eyebrow
plus a descriptive heading.
- recruiters: drop the fake 'candidate-step-01.body.txt' filename in the
code block header. Replace candidate body fanfic (Stripe / Series B
fintech / Bay Area band / hub days in SF) with the actual variable
placeholders the template engine would receive.
- sales: remove the made-up route: round_robin(...) / by_territory(...) /
crm.account_owner / manual(queue: triage) CLI snippets that looked
real but were not. Replace the 'routing: by_territory(field: account.region)'
line in the routing demo with a plain 'Routed by territory' label.
- header: replace 'Built for five seats.' use-cases dropdown title with
'Who uses Warmbly.' + a plainer tagline.
- header: hovering any non-mega nav link (Deliverability, Pricing, Learn)
now instantly closes any open mega panel via forceClose.
Replace the single-column timeline with a layered editorial page:
HeroAtmosphere hero matching warmup and pricing, a featured card
floating under the hero with a terminal-style detail of the BYOK
envelope flow, a 3-card count strip, filter chips, a hairline
timeline of all entries, and a 4-card subscribe block linking the
feed, GitHub, roadmap, and trust center.
Reseeds the entry list with the prior 9 entries and 3 new ones
grounded in the real codebase: BYOK envelope encryption, SAML SSO,
and SOC 2 Type I in progress.
Replace the three-card roadmap with the marketing-page hero pattern
(HeroAtmosphere, badge, large headline, two CTAs) and a richer body:
- Floating roadmap board floats up over the hero with three columns
(Shipped 90d, In progress Q2 to Q3, Researching H2). Each item card
carries a category chip, title, note, and changelog link when shipped.
- Quarter-by-quarter strip for 2026 with ship counts and themes,
highlighting the current quarter.
- Cadence spec sheet with mono-aligned values for items per quarter,
release cadence and refresh frequency.
- Editorial "How we pick" split with sticky title and a numbered list
of prioritisation inputs.
- Smooth grid-rows FAQ accordion with four questions.
- CTA block with Request a feature and See the changelog.
No fabricated metrics. Seed items come from the previous page, CLAUDE.md
and the live changelog.
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.
Modelled directly on web/src/app/app/analytics/page.tsx. Same chrome,
same components, populated with illustrative demo-workspace numbers
so the panel works as a marketing screenshot.
- PageTopbar: Analytics eyebrow + 'Deliverability across the
workspace' subtitle + 7d / 30d / 90d range tabs (7d active in
slate-900).
- StatStrip cols=4: Total sent 12,847 · Open rate 34.2% · Reply rate
6.1% · Bounce rate 1.8% with sub-labels matching the real component.
- Body grid 1fr | 320px:
- Email performance: SectionBar + 28 sky-100 bars, '7d ago / today'
axis labels.
- Breakdown column: Delivered / Opened / Replied / Bounced / Spam
rows with colored dots and right-aligned tabular numbers.
- Warmup SectionBar with 'All accounts ↗' link, plus a 4-card strip
of mailbox warmup state (ben/sara/mark/kai with day-count, today
send / cap, state chip, progress bar).
All chrome, hairlines, colors mirror the actual product.
Modelled directly on web/src/components/app/unibox/* (ConversationList +
ThreadView). No app shell, no URL window chrome.
Left pane (340px):
- SectionBar with 'Inbox' + count chip + filter button
- Search input + 4 quick filter chips (All / Unread / Today / This week)
- ConversationItems: slate avatars with initials, semibold sender names
when unread, sky-500 left bar for unread, sky-50 bg when selected,
relative-time stamp, subject, snippet preview
Right pane (ThreadView):
- 48px top bar with 'Thread · subject' eyebrow + mark-unread / archive /
delete icon buttons
- Sub-header strip with '3 messages · 2 participants' + Positive chip
- Message stream: hairline-divided articles, sender + email + time, body
- Auto-action receipt strip (paused sequence, routed to assignee,
posted to Slack)
- ReplyComposer at the bottom with attach/template buttons on the left
and Save draft / Send buttons aligned right
All chrome, colors and spacing match the real React components.
- Removed the traffic-light + URL window chrome at the top.
- Header row now has an eyebrow 'DEAL · DEAL-2026-0184' label, big
company name 'Stratech', then the Negotiation chip + primary
contact line. Right side: 3 stat tiles (Value / Close / Weighted)
with consistent label-to-value vertical rhythm.
- Sidebar uses a flex column with three logical blocks (Fields /
Contact / Actions), each separated by hairline rule. The two
action buttons are now a 2-col grid at the bottom of the sidebar
(full-width per cell) so they line up.
- Activity timeline: each row now has a 3-column grid (icon /
content / timestamp) so timestamps align right consistently.
Dropped the legend chips above the timeline in favour of an
event count.
- Footer label simplified.
The kanban-board mock was thin. Now the floating mock is a real
deal record screen:
- Window chrome with app.warmbly.com/deals/stratech-fy26-q2.
- Header row: company name + Negotiation chip + deal id + primary
contact + Value ($45k) · Close (Jun 30) · Weighted ($27k · 60%).
- Left sidebar: deal fields (Value, Close date, Owner, Stage, Source,
Probability), then the primary contact card (RC avatar, name, title,
email, phone, tag chips) and Log activity / Add task buttons.
- Right side: activity timeline spanning 14 days with 8 events
(sequence sends, replies, meeting, stage change, task, note),
each with type chip (reply/meeting/stage/task/note/send), actor,
and timestamp.
- Footer: two-way CRM sync line.
Reads like a real CRM record. Kanban data array is gone.
- Hero: same HeroAtmosphere pattern with 'A CRM that lives next to
your sending.' headline and platform eyebrow chip.
- Kanban mock floats below the hero with 5 stages (New / Reached /
Demoed / Negotiation / Closed won) and color-tinted stage dots.
Footer: 'Drag between stages... Two-way sync HubSpot/Salesforce/
Pipedrive'.
- Data model section (unique): six entities laid out as a real
three-column ER table with relations and cardinality on the right.
Reads like a schema reference.
- Contacts power tools: split layout. Left: 4 numbered power-tool
rows (Import wizard CSV/XLSX, Export CSV/XLSX/JSON, Dedup
email/domain/key, Bulk update). Right: a real-looking contacts
table mock with stage chips and a '2,431 rows · 0 dupes' status.
- FAQ: 4 CRM questions, smooth grid-rows accordion.
- Hero: same HeroAtmosphere as the other product pages.
- Unique floating mock: a 3-pane inbox view with filters sidebar
(Inbox / Awaiting reply / Snoozed / Assigned to me / Suppressed +
Classification chips), thread list in the middle, and a thread
preview pane on the right showing the open thread, three auto-action
lines that already fired (sequence paused / routed to assignee /
posted to Slack), and Reply/Snooze/Assign buttons.
- Classifications action table: 6 rows (Positive, Negative, Referral,
OOO, Unsubscribe, Bounce) each with the class chip, what it is
detected on, and the deterministic auto-action.
- Capabilities: clean 2-col spec list (no icon grid), 6 numbered rows.
- FAQ: 4 reply questions with the grid-rows accordion.
- Hero: same HeroAtmosphere pattern as the other product pages, with
'Numbers we trust. Not vanity opens.' headline + two CTAs.
- Drill-down ladder · unique: a single panel where six layers cascade
with increasing left padding (workspace → pool → worker → mailbox →
sequence → contact), each row has its own sky-shaded icon tile,
layer label, and one-line description. Reads as a visual hierarchy.
- Signal vs noise: 2-col side-by-side. Left (emerald): 6 headline
metrics with the 'why we trust it' rationale per row. Right (rose):
3 ignored metrics with the 'why this is noise' reasoning (Apple Mail
Privacy prefetch, cold-CTR incentive trap, unauditable vendor scores).
- Sample dashboard mock: clearly framed as illustrative. KPI strip
with em-dash placeholders + sample-size disclaimer, placement chart
with premium vs free pool lines, mailbox health histogram (75% / 17%
/ 6% / 2% across the four bands). Footnote that real data appears
only after band sample-size thresholds are met.
- Exports: 5-row spec sheet (on-demand, scheduled, webhooks, REST,
S3 push) in the warmup defaults layout.
- FAQ: 4 reporting questions, smooth grid-rows accordion.
Hero now flows straight into the anatomy section without the floating
fleet card. Dropped the fleet[] data and tones() helper since they
were only used by that panel.
Same hero treatment as home / pricing / warmup / campaigns. The dark
ops-dashboard hero is gone but the worker fleet panel survives as a
floating white card below the hero. Anatomy diagram, single-send
trace, and scaling story still distinct from other pages.
Dropped the HeroAtmosphere + floating card pattern used by warmup
and campaigns. Sending now has its own shape:
- Hero: dark datacenter background (#0a0f1e + sky grid) with a live
worker-fleet panel on the right showing 6 workers, their IPs,
regions, load bars, plus a 'w-03 approaching concentration' warning.
- Anatomy section: big architecture SVG (control plane | Kafka spine
| workers | providers) with backend/Postgres/consumer on the left,
Kafka topics in a vertical bar, 4 workers, and 4 provider boxes.
Animated send-dots flow left-to-right. Legend underneath.
- Trace a single send: timeline of one message from queue to delivered
with timestamps (T+0ms to T+326ms), actor labels, and one-line
descriptions per handoff (kafka.publish, oauth, gmail api, ack,
consumer fold).
- Scaling story: 3 progressive scenarios (Founder 1 mailbox | Sales
team 10 mailboxes featured | Agency 50 mailboxes) each with a
mailbox dot-grid and stats.
- Providers: compact 3-card row with brand-colored top rules.
- FAQ: same grid-rows accordion.
- Hero: HeroAtmosphere with 'Many mailboxes. Many workers. Many IPs.'
headline, eyebrow chip 'Distributed across many machines, many IPs',
two CTAs.
- Floating worker fleet card: live topology SVG on the left (control
plane on left, 5 workers on right with IPs, animated send dots
traveling) plus a worker table on the right (id, ip, region, mailbox
count, status chip). Footer flags w-03 hitting the concentration
threshold of 10 mailboxes.
- Control plane vs execution plane: 2-card side-by-side with colored
top rules. Each card lists the 4 things that plane is responsible
for, with cmd/backend cmd/consumer and cmd/worker file labels.
- Per-mailbox math: 'Worker capacity is the sum of its mailboxes'
with a Go code block (worker_scheduler.go) showing the actual
budget = sum(mailbox caps) + concentration warning emit.
- Message lifecycle: 6 numbered editorial rows (scheduled, dispatched,
sent, acknowledged, tracked, reconciled) each with a code-style
signature (kafka.publish, provider.send, etc) and prose.
- Providers: 3 cards with brand-colored top rules (Gmail red, Outlook
blue, BYOS sky) and verifiable detail.
- Limits: 2-col spec sheet (cap, gap, concentration, worker budget,
send window, dependencies) with source-file mono footer.
- FAQ: 4 engine questions with the same grid-rows accordion.
- Hero: HeroAtmosphere with '12 steps. 4 variants. One source of truth.'
headline, eyebrow chip, two CTAs.
- Floating live-sequence card: realistic step list with 6 rows (send /
wait / branch / send / send / event), each with kind chip (SEND /
WAIT / BRANCH / EVENT in distinct colors), delay, label, body note,
variant count, and a spine line connecting steps.
- Variables + fallbacks: code block showing the real template engine
(pipe fallbacks + conditional blocks for sender-specific copy).
- Sender pool distribution: SVG fan-out diagram showing one campaign
feeding four mailboxes with animated dots, then a pool table with
today / cap / headroom progress bars per mailbox.
- Auto-stop rules: 6-card grid of suppression triggers (replied,
hard bounce, 3x soft, unsubscribe, OOO, manual).
- Limits: 2-col spec sheet (12 steps, 4 variants, 1 day min delay,
100/day cap, 10m gap, recipient TZ) with source-file mono footer.
- FAQ: 4 operational questions with the smooth grid-rows accordion.
- CTA: standard sky.
- Defaults: full-width 2-column spec sheet. Each row = numbered key,
description prose, and a big 22-26px mono value on the right.
Hover tints the row. Source-of-truth file paths in mono footer.
- Pool isolation: 2x2 grid of pool cards, each topped with a colored
rule (slate / sky / amber / black). Premium pool is featured with a
sky ring, drop shadow, and a 'Most paid plans' tag tucked into the
rule. Each card has 3 verifiable isolation rules.
- Health bands: replaced the table with a horizontal threshold gauge.
4 bands fill widths proportional to their range (Healthy 0-10%,
Watch 10-20%, Quarantined 20-40%, Blocked 40-100%) along a single
bar, with tick marks below at 0/10/20/40/80/100% and a 'providers
act' marker at 80%. Below the gauge: 4 detail cards with spam,
complaint, bounce, and action per band.
Dropped the floating card that overlapped into the hero (the layout
that 'just didn't fit'). The ramp is now a normal flowing section
with a split layout:
- Left (sticky): eyebrow, '10 emails on day 1. 40 emails on day 30.'
headline, one-paragraph explanation.
- Right: 3 rows (Day 1 / Each day / Day 30), each row is stage label
+ big mono number + one-line note. Hairline dividers between rows.
Day 30 row uses sky color for the highlight.
- Footer mono row with the operational facts.
Big editorial numbers instead of a chart or grid:
- Three columns: Day 1 (10/day), Each day after (+1/day), Day 30 (40/day)
with 80-96px mono numerals and a one-line explanation each.
- Single horizontal sky-gradient bar below with 4 milestone labels.
- Footer mono row: ~10m gap, business-hour scheduling, weekends skipped,
plain text only.
Quiet, premium, no grid noise.
- Replaced the line chart + bar chart with a 5-week x 7-day calendar
grid. Each cell shows the day label, the warmup volume that day,
and is shaded by intensity (sky-1 to sky-8). Weekends are skipped
visibly. Side panel: 4 stat tiles (Day 1 send, daily ramp, ceiling
reached at Day 30, ~550 total sends).
- FAQ converted from native <details> to the smooth grid-template-rows
animation pattern used on pricing: click expands panel from 0fr to 1fr
over 300ms, plus icon rotates 0->45deg.
Replaced a section with fabricated 'internal A/B' percentages with a
qualitative two-column side-by-side: 'Without warmup' (5 reputation
liabilities) vs 'With Warmbly warmup' (5 actual platform behaviours).
Footnote explicitly states why we don't publish placement-improvement
numbers (it depends on domain age, content, hygiene, DMARC). No fake
stats.
- New section: 'Every warmup message carries proof it is real'. Shows
the actual token format (wbly:ulid:exp:hmac), embeds it as a realistic
body footer, and shows the receiver's verification pseudocode. Side
panel lists the 5 validation rules (HMAC, expiry, single-use ULID,
pool membership, sender/recipient binding), with the quarantine
threshold footer (>= 3 invalid / 24h).
- 'The daily loop' rewritten with code-style signature snippets for
each step (partner = pool.draw(...), token = hmac(...), etc) plus
the prose explanation. Real implementation language, not marketing.
Three layers of detail in one panel:
- Chart (340px tall): full 30-day curve with daily dots, week dividers,
ceiling reference line, milestone markers at Day 1, Week 1 (17/d),
and Day 30 (40/d at ceiling).
- Week-by-week breakdown on the right: 5 weeks with start/end rate,
total sends, status label (Initial ramp / Building reputation /
Provider learning / Approaching ceiling / At ceiling).
- Day-by-day mini bar chart at the bottom: 30 bars scaling with the
daily volume, ceiling days in darker sky.
- Stats footer: 775 total sends, 30% reply target, ~10m gap, 9-5 TZ.
Astro compiler tripped on the <= in the IIFE inside the SVG block.
Replaced with two inline Array.from(...) expressions producing the
polygon and polyline points strings directly. Same visual output.
- Replaced the 3-card 'ramp numbers' (borrowed from pricing) with a
unique real SVG ramp curve. Charts the 30-day path from 10/day to
40/day with a dashed ceiling line, day-1 and day-30 markers, axis
ticks, and a mono summary row underneath.
- Replaced the 3-card pool grid (also borrowed from pricing plans)
with a single 'pool isolation' table showing 4 layered rows: Free /
Premium (highlighted in sky) / Recovery / Dedicated, each with a
plain-language rule and the plan label.
- Hero: editorial split with a real-looking warmup dashboard mock on
the right. Six mailboxes listed with day-in-warmup, tiny sparkline
showing the ramp, today's send vs cap, and a state chip. Watch state
has an amber sparkline. Footer row shows 'next send in 12m'.
- The daily loop: 6-step horizontal cycle visualization with a
connecting rail and circular step badges.
- Health bands: state-machine table on the right showing each transition
with from/to chips, trigger condition (spam >= 10%, etc), and action.
Left side has the four states as soft-tinted chip cards.
- Defaults: clean spec table on a muted band, monospace values.
- Final CTA: deep Warmbly sky band with the standard white-CTA pattern.
Dropped the radial pool ring SVG, the 8-card grid, and the traffic-light
band cards from the previous version.
The cursor traveling from the Product trigger down to the fixed panel
was hitting a few px of dead space between the bottom of the header
and the top of the panel. Cursor was outside both rects, mousemove
scheduled a close, panel shut. Expanding the panel's hit-test rect
upward by 40px lets that gap count as 'inside the panel' for the
hover check, so the menu stays open.
- Left intro block is now plain white (matches right): eyebrow,
'Six systems. One platform.' headline, short tagline, and a single
'Read the handbook' link. No sky gradient, no clouds, no status row.
- Product cards: dropped the leading number, kept only the tag eyebrow
plus title + description; cleaner repeated rhythm.
- Open animation: cards stagger fade-up (220ms) with 32ms steps for
a quiet entrance on hover.
- Hover hit-test: replaced mouseenter/leave (which mis-fired under
position:fixed) with a global mousemove that checks the cursor
against both the trigger and panel bounding rects. The panel only
closes when the cursor is outside BOTH, with a 180ms grace.
- White panel chrome now spans the full viewport edge-to-edge with
shadow + bottom border.
- Inner content uses container-page so brand block + product grid + the
footer band all align with the page baseline width.
- Brand sky-gradient bleeds left of the container into the white edge
via negative margin so the visual feels continuous.
- Removed the 100/d cold cap stat from the brand block (kept only a
small status + Apache 2.0 mono row).
- Panel is now position: fixed under the header at top: 56px, anchored
full-width with an inner container-page wrapper so it matches the
baseline width of page content.
- Removed border radius (square edges).
- Left brand block widened to 320px with slightly larger headline.
- Product cards lose card-level rounded corners and gap; they now share
hairline borders between cells for an editorial grid look.
- Removed transforms on cards/chevron to prevent layout shifts that
caused the hover flicker.
- Added a 24px invisible hover-bridge above the panel so the cursor
can travel from the Product trigger into the panel without falling
into a dead gap.
960px panel split into a 260px brand column and a 3x2 product grid.
- Brand column: soft sky gradient with cloud accent, 'The cold-email
platform' headline, tagline, and a mono stat row (6 systems, 100/d
cold cap, Apache open source).
- Grid: 6 large product cards (17px titles), each with mono number +
uppercase tag, 1-line description, and an 'Open →' hint that lights
on hover. Current page is sky tinted with a sky dot.
- Footer band: GitHub URL + Deliverability/Integrations/Pricing links.
- Anchored left:-180px so the wide panel sits centered under the nav.
Matthew Meszaros