Back to Library
Landing Page
Pricing Page — SaaS Tiers
Pricing page with 3 tiers, feature comparison table, FAQ section, and toggle for monthly/annual billing.
Compatible with:
v0cursorchatgpt
Create a SaaS pricing page with these components: HEADER: - Page title: "Simple, transparent pricing" - Subtitle explaining value - Billing toggle: Monthly / Annual (show "Save 20%" on annual) PRICING CARDS (3 tiers): - Starter, Professional, Enterprise - Card structure: * Tier name * Price (large, bold) * Billing period * Short description * Feature list (checkmarks) * CTA button - Highlight middle tier (scale up, border, "Most Popular" badge) FEATURES: - All tiers include: [list common features] - Professional adds: [additional features] - Enterprise adds: [premium features] COMPARISON TABLE: - Full feature comparison - Rows: Features - Columns: Tiers - Checkmarks or X marks - Sticky header on scroll FAQ SECTION: - "Frequently Asked Questions" - Accordion-style Q&A - 6-8 common questions - Questions about: Billing, Refunds, Upgrades, Support, etc. CTA BANNER: - "Still have questions?" - "Contact Sales" button - "Start Free Trial" button STYLING: - Clean, professional design - Use brand color for primary buttons - Subtle shadows on cards - Smooth transitions on toggle - Mobile responsive (stack cards vertically)
How to Use
- 1Click the "Copy Prompt" button above
- 2Open your AI tool (Cursor, v0, Lovable, ChatGPT, or Claude)
- 3Paste the prompt and let the AI generate your UI
- 4Customize the output to match your brand and content
💡 Tips
Update prices and features to match your product. Add currency selector if needed. Consider adding a calculator for team pricing.