From c0f15d4e6a296d98e865de26df2c14c9c1941994 Mon Sep 17 00:00:00 2001 From: Sibyl Date: Sun, 5 Oct 2025 20:01:42 +0800 Subject: [PATCH 1/4] feat(subscription): improve pricing cards UI/UX with simplified hierarchy - 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 --- src/components/SubscribeCards/FreeCard.tsx | 3 +- .../SubscribeEnterpriseCard.tsx | 15 ++++++--- .../SubscribeCards/SubscribePlusCard.tsx | 32 ++++++++----------- .../SubscribeCards/SubscribeProCard.tsx | 32 ++++++++----------- src/containers/Subscribtion/Home.tsx | 13 ++------ 5 files changed, 41 insertions(+), 54 deletions(-) diff --git a/src/components/SubscribeCards/FreeCard.tsx b/src/components/SubscribeCards/FreeCard.tsx index d28d3b3ac..9a255ec11 100644 --- a/src/components/SubscribeCards/FreeCard.tsx +++ b/src/components/SubscribeCards/FreeCard.tsx @@ -20,8 +20,7 @@ export function FreeCard({ context = 'page' }: FreeCardProps) {

Free

- - +

Pro

-
+
49 USD /month
-

Multiple payment options

+

Multiple payment options

  • @@ -95,7 +95,7 @@ export function SubscribePlusCard({ API access
-
+
{active ? (
Current Plan @@ -110,24 +110,20 @@ export function SubscribePlusCard({
) : ( <> - {(context === 'page' || context === 'account') && ( + {context === 'page' && ( <> - -
- {context === 'account' ? ( - <> - - - - ) : ( - <> - - - - )} -
+ )} + {context === 'account' && ( +
+ + +
+ )} {isModal && (

API

-
+
300 USD /month
-

Multiple payment options

+

Multiple payment options

  • @@ -68,7 +68,7 @@ export function SubscribeProCard({ $0.60 per 1,000 additional calls after 1M limit
-
+
{active && !isLegacyActive ? (
Current Plan @@ -81,25 +81,19 @@ export function SubscribeProCard({ )}
- ) : context === 'account' || isLegacyActive ? ( -
-
-
- - -
-
-
) : ( <> {context === 'page' && ( - <> - -
- - -
- + + )} + {(context === 'account' || isLegacyActive) && ( +
+ + +
)} )} diff --git a/src/containers/Subscribtion/Home.tsx b/src/containers/Subscribtion/Home.tsx index fc9ea654b..8198d9a4e 100644 --- a/src/containers/Subscribtion/Home.tsx +++ b/src/containers/Subscribtion/Home.tsx @@ -3,7 +3,7 @@ import { useRouter } from 'next/router' import { useQueryClient } from '@tanstack/react-query' import { LocalLoader } from '~/components/Loaders' import { FreeCard } from '~/components/SubscribeCards/FreeCard' -import { EnterpriseCardContent } from '~/components/SubscribeCards/SubscribeEnterpriseCard' +import { SubscribeEnterpriseCard } from '~/components/SubscribeCards/SubscribeEnterpriseCard' import { SubscribePlusCard } from '~/components/SubscribeCards/SubscribePlusCard' import { SubscribeProCard } from '~/components/SubscribeCards/SubscribeProCard' import { useAuthContext } from '~/containers/Subscribtion/auth' @@ -255,7 +255,7 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr
-
- -

Enterprise

- - -
+
)} From a932dfa84f17d461e895befcdfd34074e34d5535 Mon Sep 17 00:00:00 2001 From: Sibyl Date: Sun, 5 Oct 2025 20:14:37 +0800 Subject: [PATCH 2/4] feat(subscription): enhance pricing cards UI/UX with improved hierarchy 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) --- src/components/SubscribeCards/FreeCard.tsx | 11 ++- .../SubscribeEnterpriseCard.tsx | 29 ++++--- .../SubscribeCards/SubscribePlusCard.tsx | 84 +++++++++---------- .../SubscribeCards/SubscribeProCard.tsx | 64 +++++++------- 4 files changed, 101 insertions(+), 87 deletions(-) diff --git a/src/components/SubscribeCards/FreeCard.tsx b/src/components/SubscribeCards/FreeCard.tsx index 9a255ec11..efe70e897 100644 --- a/src/components/SubscribeCards/FreeCard.tsx +++ b/src/components/SubscribeCards/FreeCard.tsx @@ -19,8 +19,15 @@ export function FreeCard({ context = 'page' }: FreeCardProps) { >
-

Free

-
+

Free

+
+ + $0 + + /month +
+

-

+
) @@ -49,15 +65,6 @@ export function EnterpriseCardContent({ active = false }: { active?: boolean }) Custom data licensing agreements - - - Contact Us - {active && (
Current Plan diff --git a/src/components/SubscribeCards/SubscribePlusCard.tsx b/src/components/SubscribeCards/SubscribePlusCard.tsx index 72c194ef3..805e7b1b1 100644 --- a/src/components/SubscribeCards/SubscribePlusCard.tsx +++ b/src/components/SubscribeCards/SubscribePlusCard.tsx @@ -31,12 +31,52 @@ export function SubscribePlusCard({

Pro

- - 49 USD + + $49 /month

Multiple payment options

+
+ {active ? ( +
+ Current Plan + {onCancelSubscription && ( + + )} +
+ ) : ( + <> + {context === 'page' && ( + <> + + + )} + {context === 'account' && ( +
+ + +
+ )} + {isModal && ( + + Go to Subscription Page + + )} + + )} +
  • @@ -95,46 +135,6 @@ export function SubscribePlusCard({ API access
-
- {active ? ( -
- Current Plan - {onCancelSubscription && ( - - )} -
- ) : ( - <> - {context === 'page' && ( - <> - - - )} - {context === 'account' && ( -
- - -
- )} - {isModal && ( - - Go to Subscription Page - - )} - - )} -
) } diff --git a/src/components/SubscribeCards/SubscribeProCard.tsx b/src/components/SubscribeCards/SubscribeProCard.tsx index 7f9730155..b8b715d3d 100644 --- a/src/components/SubscribeCards/SubscribeProCard.tsx +++ b/src/components/SubscribeCards/SubscribeProCard.tsx @@ -29,12 +29,42 @@ export function SubscribeProCard({

API

- - 300 USD + + $300 /month

Multiple payment options

+
+ {active && !isLegacyActive ? ( +
+ Current Plan + {onCancelSubscription && ( + + )} +
+ ) : ( + <> + {context === 'page' && ( + + )} + {(context === 'account' || isLegacyActive) && ( +
+ + +
+ )} + + )} +
  • @@ -68,36 +98,6 @@ export function SubscribeProCard({ $0.60 per 1,000 additional calls after 1M limit
-
- {active && !isLegacyActive ? ( -
- Current Plan - {onCancelSubscription && ( - - )} -
- ) : ( - <> - {context === 'page' && ( - - )} - {(context === 'account' || isLegacyActive) && ( -
- - -
- )} - - )} -
) } From 512d0f15d9a6b4700615aff448c13abf92a00744 Mon Sep 17 00:00:00 2001 From: Sibyl Date: Sun, 5 Oct 2025 20:22:50 +0800 Subject: [PATCH 3/4] feat(subscription): streamline header and improve content hierarchy 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. --- src/containers/Subscribtion/Home.tsx | 26 ++++++-------------------- 1 file changed, 6 insertions(+), 20 deletions(-) diff --git a/src/containers/Subscribtion/Home.tsx b/src/containers/Subscribtion/Home.tsx index 8198d9a4e..f8e8bf98f 100644 --- a/src/containers/Subscribtion/Home.tsx +++ b/src/containers/Subscribtion/Home.tsx @@ -107,27 +107,10 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr return ( <>
-
-
- -
-

DefiLlama

- {isSubscribed ? null : ( -

+ {!isAuthenticated && !isSubscribed && ( +

Upgrade now for access to LlamaFeed, increased api limits and premium api endpoints. -

+

)} {!isAuthenticated && isTrial && ( @@ -236,6 +219,9 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr subscription={subscription} onEmailChange={() => setShowEmailForm(true)} /> +

+ Upgrade now for access to LlamaFeed, increased api limits and premium api endpoints. +

)} Date: Sun, 5 Oct 2025 20:38:11 +0800 Subject: [PATCH 4/4] feat(subscription): add payment buttons for authenticated users and improve 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 --- src/components/SubscribeCards/FreeCard.tsx | 2 +- .../SubscribeCards/SubscribePlusCard.tsx | 22 ++++++++++++------- .../SubscribeCards/SubscribeProCard.tsx | 10 +++++---- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/components/SubscribeCards/FreeCard.tsx b/src/components/SubscribeCards/FreeCard.tsx index efe70e897..6deac2343 100644 --- a/src/components/SubscribeCards/FreeCard.tsx +++ b/src/components/SubscribeCards/FreeCard.tsx @@ -27,7 +27,7 @@ export function FreeCard({ context = 'page' }: FreeCardProps) { /month

-

-
+
  • diff --git a/src/components/SubscribeCards/SubscribePlusCard.tsx b/src/components/SubscribeCards/SubscribePlusCard.tsx index 805e7b1b1..8ed810097 100644 --- a/src/components/SubscribeCards/SubscribePlusCard.tsx +++ b/src/components/SubscribeCards/SubscribePlusCard.tsx @@ -1,6 +1,7 @@ import { Icon } from '~/components/Icon' import { PaymentButton } from '~/containers/Subscribtion/Crypto' import { SignIn } from '~/containers/Subscribtion/SignIn' +import { useAuthContext } from '~/containers/Subscribtion/auth' import { useDarkModeManager } from '~/contexts/LocalStorage' import { BasicLink } from '../Link' @@ -17,6 +18,7 @@ export function SubscribePlusCard({ returnUrl }: SubscribePlusCardProps & { onCancelSubscription?: () => void }) { const [isDarkMode] = useDarkModeManager() + const { isAuthenticated } = useAuthContext() const isModal = context === 'modal' const shouldShowLightMode = isModal && !isDarkMode return ( @@ -52,16 +54,20 @@ export function SubscribePlusCard({
) : ( <> - {context === 'page' && ( - <> - - + {context === 'page' && !isAuthenticated && ( + + )} + {context === 'page' && isAuthenticated && ( +
+ + +
)} {context === 'account' && ( -
+
diff --git a/src/components/SubscribeCards/SubscribeProCard.tsx b/src/components/SubscribeCards/SubscribeProCard.tsx index b8b715d3d..6d12f1bae 100644 --- a/src/components/SubscribeCards/SubscribeProCard.tsx +++ b/src/components/SubscribeCards/SubscribeProCard.tsx @@ -1,6 +1,7 @@ import { Icon } from '~/components/Icon' import { PaymentButton } from '~/containers/Subscribtion/Crypto' import { SignIn } from '~/containers/Subscribtion/SignIn' +import { useAuthContext } from '~/containers/Subscribtion/auth' import { useDarkModeManager } from '~/contexts/LocalStorage' export function SubscribeProCard({ @@ -15,6 +16,7 @@ export function SubscribeProCard({ isLegacyActive?: boolean }) { const [isDarkMode] = useDarkModeManager() + const { isAuthenticated } = useAuthContext() const isModal = false const shouldShowLightMode = isModal && !isDarkMode return ( @@ -50,18 +52,18 @@ export function SubscribeProCard({
) : ( <> - {context === 'page' && ( + {context === 'page' && !isAuthenticated && ( )} - {(context === 'account' || isLegacyActive) && ( -
+ {(context === 'page' && isAuthenticated) || context === 'account' || isLegacyActive ? ( +
- )} + ) : null} )}