feat(subscription): enhance pricing cards UI/UX with improved hierarchy and payment buttons #2148
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…rchy - Restructure pricing grid to 4-column layout including Enterprise card - Replace multiple CTAs with single "Get Started" button for unauthenticated users - Show payment options only after sign-in for better progressive disclosure - Standardize button styling across all pricing tiers (py-3, gradient background) - Improve typography hierarchy with consistent spacing (mt-2 for prices, text-sm for subtext) - Remove redundant spacer elements and improve vertical rhythm - Update Enterprise card to match grid layout with consistent padding - Add responsive breakpoints for tablet (md:grid-cols-2) and mobile views
…hy and consistency Restructure pricing page with improved visual hierarchy and user experience: - Restructure pricing grid to 4-column layout (Free, Pro, API, Enterprise) - Simplify CTA to single "Get Started" button for unauthenticated users - Move payment options to post-authentication state for progressive disclosure - Reposition primary CTA buttons directly below pricing for better conversion flow Pricing improvements: - Increase price visual weight from text-2xl to text-3xl with font-bold - Standardize pricing format across all tiers ($0, $49, $300, Custom pricing) - Add pricing display to Free card ($0/month) for consistency - Add custom pricing label to Enterprise card with subdued styling Layout and spacing: - Ensure consistent button placement across all pricing cards - Add minimum height constraints to Enterprise card for vertical alignment - Standardize spacing (mt-2 for price, mt-1 for subtext, mt-4 for CTA) - Align button containers with consistent wrapper structure (mx-auto, flex, gap-3) - Add button-height spacer to Free card to maintain grid alignment Visual consistency: - Apply relative z-10 positioning to all card headers - Unify button styling with gradient background and consistent padding (py-3) - Match Enterprise "Contact Us" button style with other CTAs - Improve responsive breakpoints (md:grid-cols-2, lg:grid-cols-4)
Remove redundant branding elements and enhance upgrade messaging: Header improvements: - Remove DefiLlama logo and site name from subscription page content - Logo already present in global site header, eliminating redundancy - Clean up visual clutter for more focused user experience Upgrade message enhancements: - Upgrade description from paragraph to prominent h1 heading - Increase text size from base to text-2xl with font-semibold - Change alignment from center to left for better readability - Enhance contrast by changing from muted gray (#919296) to white - Add leading-relaxed for improved line height and readability Message positioning logic: - Show at top when user is not authenticated - Position below AccountStatus card when authenticated but not subscribed - Add mt-6 spacing between account card and upgrade message for visual separation - Hide message entirely when user is already subscribed This creates a cleaner, more focused subscription page with better visual hierarchy and context-aware messaging based on authentication state.
…mprove layout Add context-aware payment options and optimize button layout: Payment button improvements: - Show payment buttons (Crypto/Card) immediately when user is authenticated - Replace "Get Started" button with direct payment options for signed-in users - Stack payment buttons vertically for better readability and space efficiency - Remove horizontal grid layout to prevent text cramping in buttons Button state logic by authentication: - Not authenticated: Show single "Get Started" button (opens sign-in modal) - Authenticated: Show two stacked payment buttons (Pay with Crypto, Pay with Card) - Active subscription: Show "Current Plan" badge with cancel option - Reduces friction by eliminating extra click for authenticated users Vertical alignment fixes: - Add responsive spacers to align feature lists across all pricing cards - Free card: 52px spacer on desktop to match single button height - Enterprise card: Removed extra spacer (already has single button) - Pro/API cards: Dynamic content based on auth state (1 or 2 buttons) - Mobile: Remove alignment spacers (h-0) for more compact layout - Desktop (md+): Apply spacers for perfect grid alignment Card layout consistency: - All cards use consistent button container structure - Uniform spacing (mt-4) between pricing and CTA section - Consistent gap-3 spacing between stacked buttons - Professional vertical rhythm across all tiers
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR improves the subscription page UI/UX by enhancing the pricing card hierarchy, streamlining the header, and adding payment buttons for authenticated users.
Changes
Pricing Cards UX Improvements
Payment Integration
Header Optimization
Files Modified
src/components/SubscribeCards/FreeCard.tsxsrc/components/SubscribeCards/SubscribePlusCard.tsxsrc/components/SubscribeCards/SubscribeProCard.tsxsrc/components/SubscribeCards/SubscribeEnterpriseCard.tsxsrc/containers/Subscribtion/Home.tsxBefore:
2025-10-05.21-08-25.mp4
After:
2025-10-05.21-08-42.mp4
When signed in:
