improvement: plans comparison & updated UI of pricing

[ameer2468]

Summary by CodeRabbit

• New Features
  • Added a plan comparison table with interactive CTAs and animations for Desktop License and Pro.
  • Introduced a Question Mark icon.
  • Commercial animation now supports custom sizing via className.
• UI/UX
  • Refreshed Pro and Commercial pricing cards with clearer static features, specific icons, and adjusted typography/spacing.
  • Pricing page updates: new Compare Plans section, revamped Enterprise promo with “Book a Call,” reorganized FAQ, removed outdated comparison image.
• Style
  • Improved disabled appearance for blue buttons for clearer states.

[coderabbitai]

Warning

Rate limit exceeded

@ameer2468 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 16 minutes and 23 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 37e680d and 186ab49.

📒 Files selected for processing (8)

• apps/web/components/icons/QuestionMarkIcon.tsx (1 hunks)
• apps/web/components/pages/HomePage/Pricing/CommercialArt.tsx (2 hunks)
• apps/web/components/pages/HomePage/Pricing/CommercialCard.tsx (3 hunks)
• apps/web/components/pages/HomePage/Pricing/ProArt.tsx (1 hunks)
• apps/web/components/pages/HomePage/Pricing/ProCard.tsx (5 hunks)
• apps/web/components/pages/PricingPage.tsx (3 hunks)
• apps/web/components/pages/_components/ComparePlans.tsx (1 hunks)
• packages/ui/src/components/Button.tsx (1 hunks)

Walkthrough

Introduces a new ComparePlans component and integrates it into PricingPage, restructures Pro/Commercial cards and art components’ styling and features, adds a QuestionMarkIcon, and updates Button disabled styles. Adds checkout flows (guest, commercial, subscription) within ComparePlans, and adjusts enterprise and FAQ sections on the pricing page.

Changes

Cohort / File(s)	Summary
Icons apps/web/components/icons/QuestionMarkIcon.tsx	Adds a new QuestionMarkIcon React component rendering a 24x24 stroke-based SVG; accepts optional className.
Pricing Page Integration apps/web/components/pages/PricingPage.tsx	Integrates new ComparePlans section; updates layout spacing; replaces enterprise section with CTA + feature grid; reflows FAQ; removes bottom comparison image.
Compare Plans Component apps/web/components/pages/_components/ComparePlans.tsx	New client component showing Free/Desktop License/Cap Pro comparison; handles auth-aware CTAs; implements guest/commercial/plan checkout via POST endpoints; includes animated plan icons (CommercialArt, ProArt); exports named and default.
Commercial Card/UI apps/web/components/pages/HomePage/Pricing/CommercialCard.tsx	Refactors features to a static list with specific icons and a “Learn more” link using QuestionMarkIcon; adjusts typography/layout; no logic changes to pricing/checkout.
Pro Card/UI apps/web/components/pages/HomePage/Pricing/ProCard.tsx	Replaces dynamic features with a static iconized list; removes Next.js router usage; adjusts layout/typography and price display formatting.
Art Components apps/web/components/pages/HomePage/Pricing/CommercialArt.tsx, apps/web/components/pages/HomePage/Pricing/ProArt.tsx	CommercialArt now accepts optional className and forwards it with clsx; both components reduce default sizes; ProArt removes relative positioning/bottom offset.
UI Button Styles packages/ui/src/components/Button.tsx	Tweaks blue variant disabled styles: adds disabled border and updates disabled bg/text tokens.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant CP as ComparePlans
  participant AUTH as AuthContext
  participant API as Server API
  participant TOAST as Toast

  U->>CP: Click "Download" (Free)
  CP-->>U: Navigate to /download

  U->>CP: Click "Desktop License"
  CP->>API: POST /api/commercial/checkout
  alt success (URL)
    API-->>CP: { url }
    CP-->>U: Redirect to url
  else error
    API-->>CP: { error }
    CP->>TOAST: Show error
  end

  U->>CP: Click "Cap Pro"
  CP->>AUTH: Check auth + subscription
  alt not authenticated
    CP->>API: POST /api/settings/billing/guest-checkout
    API-->>CP: { url | error }
    alt url
      CP-->>U: Redirect to url
    else error
      CP->>TOAST: Show error
    end
  else authenticated
    CP->>API: POST /api/settings/billing/subscribe
    alt newly subscribing
      API-->>CP: { url }
      CP-->>U: Redirect to url
    else already subscribed
      API-->>CP: { status: already_subscribed }
      CP->>TOAST: Inform already subscribed
    else error
      API-->>CP: { error }
      CP->>TOAST: Show error
    end
  end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• tweak: adjust disabled colors for gray variant #978 — Also adjusts disabled-state colors in packages/ui/src/components/Button.tsx (parallel styling changes).
• improvement: new buttons look #960 — Modifies Button variant styling (including blue), overlapping with this update.
• chore: make login a button instead #1013 — Touches ProArt props/forwardRef patterns, related to the art component adjustments here.

Suggested reviewers

• Brendonovich

Poem

A rabbit taps the checkout keys—tap tap, let’s roll!
Three plans align like carrots in a tidy scroll.
Icons wink, prices shrink, buttons rest in blue,
Compare, prepare, then hop to something new.
With art that twirls and FAQs that glow,
I stamp my paw: to Pro we go! 🥕✨

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch compare-plans

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}