feat(pricing): redesign pricing page#201
Conversation
Complete rewrite of the pricing page to match the black/purple/white brand design system with: path selector (MF vs teams), volume-tiered Pro calculator with clickable band cards and annual discount, 30-day free trial, Enterprise custom pricing, and full feature comparison table. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
🚀 Preview Environment Ready!
Details:
|
Finance Review Request@zackarychapple — tagging you for final sign-off before merge. This implements the pricing structure we aligned on, including SOC2 compliance as Enterprise-only. Spencer — tagging you for finance review. Summary of the new pricing model below. New Pricing StructureFree
Pro — Volume-tiered, costs decrease as team scales
Enterprise — Custom pricing
Stripe Setup NeededBefore this goes live, the following needs to be configured in Stripe:
Happy to provide the exact Stripe API calls or dashboard steps — just let me know who owns Stripe access. |
|
@arthurfiorette — tagging you for the Stripe setup. See the pricing structure in the comment above. Let me know if you want the exact API calls or dashboard steps to configure the volume-tiered products. |
vern-dt
changed the title
Pricing Change Rationale + Package BreakdownWhy We Changed the Pricing ModelOur previous model created a hard cliff between Business ($99/seat, 20-seat cap, ~$24k/yr) and Enterprise (custom, $100k+) with no viable path for teams in between. Companies needing 25–75 seats had to either overpay for Enterprise or cap their team size to stay on Business. The new volume-tiered Pro model eliminates that cliff entirely: pricing starts at $39/seat for small teams and scales down to $24/seat as the team grows, so the per-seat cost actually decreases with adoption. This rewards growth rather than penalizing it, creates a natural upgrade path from Free → Pro → Enterprise, and keeps mid-market teams — our highest-converting segment — from stalling at the checkout decision. Package Breakdown — Pain, Solution, What's IncludedFree — 1 Seat Pain: Individual developers and early-stage teams need to evaluate deployment tooling without a procurement process or budget approval. The cost of a bad platform decision compounds fast once a team scales. Solution: Full access to Zephyr's core deployment pipeline for a single engineer — enough to build a proof of concept, validate the workflow, and generate internal buy-in before asking finance for a line item. Included: CI/CD pipeline, deployment to Zephyr Cloud, OTA updates, version history, deployment preview URLs, basic analytics. Pro — 2 to 75 Seats (Volume-Tiered) Pain: Growing engineering teams hit a wall with traditional deployment tooling — coordination overhead multiplies as headcount scales, deploy queues slow everyone down, and there's no visibility into who deployed what and when. For teams running Module Federation, coordinating microfrontend deployments across remotes and hosts is a manual, error-prone process that gets worse with every new engineer added. Solution: Zephyr's shared deployment workspace gives the full team a single source of truth for all deployments — with per-engineer deploy history, instant rollback to any version or timestamp, and native Module Federation orchestration so remotes and hosts stay in sync automatically. Pricing decreases per seat as the team grows, so the platform gets cheaper per person the more value it delivers. Included: Everything in Free, plus — multi-seat shared workspace, team deploy history and audit trail, OTA updates across all environments, Module Federation remote dependency management, staging + preview environments per PR, deployment analytics and telemetry, monthly/annual billing toggle (15% annual discount), priority support.
Enterprise — 75+ Seats (Custom) Pain: Large engineering organizations have non-negotiable requirements before any infrastructure touches production: data residency controls, identity provider integration, contractual SLAs, and compliance documentation that procurement and legal need before signing. Most deployment platforms treat these as afterthoughts — or charge a 5x premium to unlock them. Solution: Enterprise tier is built for organizations where deployment infrastructure is a regulated, auditable surface. Zephyr runs inside your cloud (BYOC), connects to your identity provider, and provides the compliance paperwork your security team needs — without requiring a full platform rebuild. Included: Everything in Pro, plus — Bring Your Own Cloud (BYOC) deployment, SAML/SSO with your identity provider, SOC 2 Type II compliance documentation, dedicated support with named CSM, custom SLA with uptime guarantees, negotiated contract and invoicing terms, onboarding and migration support. |
Team Feedback — Review Round 1Shane Walker
Zack Chapple
Summary — Blockers Before Merge
Non-blockers (can fix post-merge or in follow-up PR)
|
…plied - Add Business tier (2-200 seats, $52-$34/seat volume) between Pro and Enterprise - Feature gates: Pro=deployment, Business=SSO+SLA+governance, Enterprise=SOC2+CSM+compliance - Tabbed Pro/Business calculator with amber accent for Business - Fix hero copy (no geographic ambiguity) - Add above-fold Get Started CTA scrolling to tier cards - Add BYOC to Free tier (was incorrectly excluded) - Remove unverified MAU stat from proof bar - Equal-height tier cards (remove alignItems start) - Mobile responsive: 2-col at 960px, 1-col at 600px - Path selector changed to button elements for better click UX - Business calculator slider with amber thumb styling - Update feature table with Business column (5 columns total) - Update FAQ with Business pricing and upgrade trigger questions - Annual discount applies to both Pro and Business Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Compact hero: reduced padding, smaller heading, removed CTA buttons - selectPath now scrolls to tier cards (not billing toggle) - Value panels expand below hero but scroll is compensated to land on tiers - Billing toggle padding reduced for tighter layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…cards Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace all hardcoded colors with DS CSS variables (var(--*)) - DS-compliant green badges: 12px/500/8px-radius - Remove amber from Business calculator → neutral DS tokens - Single outer border on calculator (no double borders) - Table group headers span full width (fix display:flex on td) - Feature names and table headers → var(--foreground) at 14px - Final CTA: Figma card design with right-to-left violet gradient - All buttons → DS spec: 8px 16px padding, 14px/500 - Enterprise "Custom" aligned to 36px (matches price row height) - SGWS logo replaces plaintext in social proof section - Remove ROI banner Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Remove amber from Business calculator → neutral DS vars - Fix Enterprise 'Custom' price row alignment - Redesign final CTA section with animated right-to-left violet gradient - Standardize borders (single outer border on calculator) - Align all buttons to DS spec (padding, weight, size) - Standardize green badges to DS spec - Fix table header row spanning - Align social proof section to DS vars + SGWS logo - Add mobile table with plan badge switcher - Rename Annual → Yearly throughout UI text - Add 'starting at' mono uppercase label on tier cards - Fix ghost padding below CTA in tier cards - Move SGWS logo to top-right of testimonial card - Enterprise customer label above quote (desktop flex-row, mobile stacked) - Animated CTA gradient (desktop: linear shift; mobile: radial bottom-left) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace hardcoded color values with DS CSS variables (color-mix for primary tints, var(--primary), var(--muted-foreground), etc.) - Add responsive calculator layout (two-column desktop / stacked mobile) via CSS Grid classes in index.css - Add collapsible overages section after feature table with correct rates - Remove stats proof bar (hidden) - Fix table group header backgrounds and add missing borderTop separators - Standardize all spacing to DS multiples of 8 - Bump pricing page max-width from 1160 to 1280 - Add overflow-x: hidden to html/body to prevent mobile jiggle Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
marioDamnj
force-pushed
the
feat/pricing-page-redesign
branch
from
90edc4f to
7d2beb1
Compare
|
Preview: https://mario-damnjanovi-m23i34fz6nj-2743-zephyr-landing--73cffda18-ze.zephyr-cloud.io/pricing DS alignment pass complete — ready for review. |
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…l-caps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…e features Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2 participants
🎫 Ticket
N/A
🧠 Why
Pricing page redesign to reflect the new volume-tiered pricing model.
Our previous pricing model created a hard cliff between Business ($99/seat, 20-seat cap, ~$24k/yr) and Enterprise (custom, $100k+) with no viable path for teams in between. Companies needing 25–75 seats — had to either overpay for Enterprise or cap their team size to stay on Business. The new volume-tiered Pro model eliminates that cliff entirely: pricing starts at $39/seat for small teams and scales down to $24/seat as the team grows, so the per-seat cost actually decreases with adoption. This rewards growth rather than penalizing it, creates a natural upgrade path from free to Pro to Enterprise, and keeps mid-market teams — our highest-converting segment — from stalling at the checkout decision.
📝 What changed
/pricingpage with inline styles matching the HTML design system (--black: #0A0A0F,--purple: #8B5CF6,--white: #F5F4F0)🧪 How to test
/pricingloads with black/purple design (not emerald)🤖 Generated with Claude Code