jhd3197 Pricing page
A single-page pricing surface, designed for a buyer who is comparison shopping.
Required sections
- Sticky nav (lightweight — link back to product is enough).
- Headline + monthly/annual toggle. Annual should show a "save 20%" badge (or whatever the brief says).
- 3-4 plan cards in a row on desktop, stacked on mobile. Each card has:
- Plan name
- One-line "for whom" subtitle
- Price (large, with /mo or /yr unit)
- Primary CTA
- 5-8 bullet features. Mark the middle/recommended plan with a subtle badge ("Most popular") and slightly elevated style.
- Feature comparison table — full matrix of every feature × every plan. Checkmarks / dashes / value cells. Sticky first column on mobile.
- FAQ — 6-10 concise Q&A. Use
<details>for accessibility (no JS required). - Footer CTA — final "Start free" or "Talk to sales" block.
Quality rules
- Tabular numerics (
font-variant-numeric: tabular-nums) on every price. - Comparison table must be readable at 360px (horizontal scroll inside a fixed wrapper is acceptable).
- "Contact sales" plan: replace the price slot with "Custom" and a "Talk to us" CTA, not "$$$".
- No fake discount strikethrough numbers unless the brief specifies them.