mirror of
https://github.com/warmbly/warmbly.git
synced 2026-09-13 08:05:05 +00:00
site: home pricing header redesign (cards untouched)
User said the price boxes are good but the section header above them was bad. Only the header block changes. - Drop the brand-soft eyebrow chip and the italic flourish on 'Predictable.' Both read as marketing-template noise. - New eyebrow uses the standard site mono caps style: 'Plans · billed per mailbox' in 10.5px sky-6. - Headline rewritten to 'Pick a volume. Get every feature.' which states the actual product positioning (volume-priced, not feature-gated) instead of a vague adjective. Two-line break on sm+ so the line lengths balance; reflows on mobile. - Headline scaled up the responsive ramp (40 / 52 / 64 px) so the section reads as a real chapter break rather than a small subsection. - Subhead names every product surface that's bundled (warmup, sending, unified inbox, analytics, CRM, API), so the reason there is one number is obvious. - New trust strip under the toggle: 14-day trial, one mailbox to start, no credit card, cancel any time. Four short reassurances, sky-color checks, dot separators, no banner theater. Edge-to-edge card grid below is byte-for-byte unchanged.
This commit is contained in:
@@ -744,15 +744,17 @@ const plans = [
|
||||
============================================================ -->
|
||||
<section class="relative overflow-hidden border-y border-[color:var(--border)]" style="background: linear-gradient(180deg, var(--surface-2) 0%, #ffffff 100%);">
|
||||
<div class="container-page py-24 md:py-32 relative">
|
||||
<div class="text-center max-w-2xl mx-auto">
|
||||
<div class="inline-flex items-center gap-2 h-7 px-3 rounded-full bg-[color:var(--brand-soft)] ring-1 ring-[color:var(--brand)]/15 mb-4">
|
||||
<span class="text-[11px] uppercase tracking-[0.16em] text-[color:var(--brand)] font-semibold">Pricing</span>
|
||||
<div class="text-center max-w-3xl mx-auto">
|
||||
<div class="text-[10.5px] uppercase tracking-[0.22em] font-mono text-[#0284c7]">
|
||||
Plans · billed per mailbox
|
||||
</div>
|
||||
<h2 class="text-[36px] md:text-[58px] font-semibold tracking-[-0.035em] leading-[1.02] text-heading">
|
||||
Per mailbox. <span class="italic font-medium" style="color: var(--brand)">Predictable.</span>
|
||||
|
||||
<h2 class="mt-4 text-[40px] sm:text-[52px] md:text-[64px] font-semibold tracking-[-0.035em] leading-[1.02] text-heading">
|
||||
Pick a volume.<br class="hidden sm:inline" /> Get every feature.
|
||||
</h2>
|
||||
<p class="mt-5 text-[16.5px] text-foreground/75 leading-relaxed">
|
||||
Warmup, sending, the inbox, analytics and CRM aren't separate line items. You pay for the mailboxes you connect.
|
||||
|
||||
<p class="mt-6 text-[16.5px] md:text-[17.5px] text-foreground/75 leading-relaxed max-w-xl mx-auto">
|
||||
Warmup, sending, the unified inbox, analytics, CRM and the API are in every paid plan. What you pay reflects daily send volume only.
|
||||
</p>
|
||||
|
||||
<!-- Premium segmented billing toggle — annual is the default -->
|
||||
@@ -768,6 +770,29 @@ const plans = [
|
||||
Save 20%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Trust strip under the toggle: reassurance without theater. -->
|
||||
<div class="mt-7 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-[12.5px] text-foreground/70">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<Icon name="check" size={12} class="text-[color:var(--brand)]" />
|
||||
14-day trial
|
||||
</span>
|
||||
<span class="text-foreground/30">·</span>
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<Icon name="check" size={12} class="text-[color:var(--brand)]" />
|
||||
One mailbox to start
|
||||
</span>
|
||||
<span class="text-foreground/30">·</span>
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<Icon name="check" size={12} class="text-[color:var(--brand)]" />
|
||||
No credit card
|
||||
</span>
|
||||
<span class="text-foreground/30">·</span>
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<Icon name="check" size={12} class="text-[color:var(--brand)]" />
|
||||
Cancel any time
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edge-to-edge grid: cards share borders via gap-px, no per-card ring.
|
||||
|
||||
Reference in New Issue
Block a user