Skip to content

feat(subscription): enhance pricing cards UI/UX with improved hierarchy and payment buttons #2148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(subscription): enhance pricing cards UI/UX with improved hierarchy and payment buttons #2148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c0f15d4
feat(subscription): improve pricing cards UI/UX with simplified hiera…
sibyl-sys Oct 5, 2025
a932dfa
feat(subscription): enhance pricing cards UI/UX with improved hierarc…
sibyl-sys Oct 5, 2025
512d0f1
feat(subscription): streamline header and improve content hierarchy
sibyl-sys Oct 5, 2025
8198ef8
feat(subscription): add payment buttons for authenticated users and i…
sibyl-sys Oct 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions src/components/SubscribeCards/FreeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,15 @@ export function FreeCard({ context = 'page' }: FreeCardProps) {
>
<div className="absolute top-0 left-0 h-1 w-full bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-20"></div>
<div className="absolute top-[-30px] right-[-30px] h-[80px] w-[80px] rounded-full bg-gray-600 opacity-5 blur-2xl"></div>
<h2 className="text-center text-[2rem] font-extrabold whitespace-nowrap">Free</h2>
<span className="h-8"></span>
<span className="h-7"></span>
<h2 className="relative z-10 text-center text-[2rem] font-extrabold whitespace-nowrap">Free</h2>
<div className="relative z-10 mt-2 flex items-center justify-center">
<span className="bg-linear-to-r from-gray-400 to-gray-500 bg-clip-text text-center text-3xl font-bold text-transparent">
$0
</span>
<span className="ml-1 text-[#8a8c90]">/month</span>
</div>
<p className="relative z-10 mt-1 text-center text-sm text-transparent">-</p>
<div className="relative z-10 mt-4 h-0 md:h-[52px]"></div>
<ul className="mx-auto mb-auto flex w-full flex-col gap-3 py-6 max-sm:text-sm">
<li className="flex flex-nowrap items-start gap-2.5">
<Icon name="check" height={16} width={16} className="relative top-1 shrink-0 text-green-400" />
Expand Down
40 changes: 26 additions & 14 deletions src/components/SubscribeCards/SubscribeEnterpriseCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,36 @@
import { Icon } from '~/components/Icon'
import { useDarkModeManager } from '~/contexts/LocalStorage'

export function SubscribeEnterpriseCard({ active = false }: { active?: boolean }) {
export function SubscribeEnterpriseCard({ active = false, context = 'page' }: { active?: boolean; context?: 'page' | 'account' }) {
const [isDarkMode] = useDarkModeManager()
const isModal = false
const shouldShowLightMode = isModal && !isDarkMode
return (
<div
className={`relative flex w-full shrink-0 snap-center flex-col overflow-hidden rounded-xl border border-[#4a4a50] bg-[#22242930] px-5 py-8 shadow-md backdrop-blur-md transition-all duration-300 hover:transform md:w-auto md:max-w-[400px] md:flex-1 md:shrink md:snap-none md:px-5 md:hover:scale-[1.02]`}
className={`flex w-full shrink-0 snap-center flex-col px-4 py-8 md:w-auto md:flex-1 md:shrink md:snap-none md:px-5 ${
shouldShowLightMode ? 'border-[#e5e7eb] bg-[#f8f9fa]' : 'border-[#4a4a50] bg-[#22242930]'
} relative overflow-hidden rounded-xl border shadow-md backdrop-blur-md transition-all duration-300 hover:transform md:hover:scale-[1.02]`}
>
<div className="absolute top-0 left-0 h-1 w-full bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-20"></div>
<div className="absolute top-[-30px] right-[-30px] h-[80px] w-[80px] rounded-full bg-gray-600 opacity-5 blur-2xl"></div>
<h2 className="text-center text-[2rem] font-extrabold whitespace-nowrap">Enterprise</h2>
<span className="h-8"></span>
<span className="h-7"></span>
<h2 className="relative z-10 text-center text-[2rem] font-extrabold whitespace-nowrap">Enterprise</h2>
<div className="relative z-10 mt-2 flex min-h-[36px] items-center justify-center">
<span className="text-center text-xl font-medium text-[#8a8c90]">
Custom pricing
</span>
</div>
<p className="relative z-10 mt-1 min-h-[20px] text-center text-sm text-transparent">-</p>
<div className="relative z-10 mx-auto mt-4 flex w-full flex-col gap-3">
<a
className="group flex w-full flex-nowrap items-center justify-center gap-2 rounded-lg bg-linear-to-r from-[#5C5CF9] to-[#6E6EFA] px-4 py-3 font-medium text-white shadow-lg transition-all duration-200 hover:from-[#4A4AF0] hover:to-[#5A5AF5] hover:shadow-[#5C5CF9]/20"
target="_blank"
rel="noopener noreferrer"
href="mailto:[email protected]"
>
<Icon name="mail" height={16} width={16} />
Contact Us
</a>
</div>
<EnterpriseCardContent active={active} />
</div>
)
Expand Down Expand Up @@ -44,15 +65,6 @@ export function EnterpriseCardContent({ active = false }: { active?: boolean })
<span>Custom data licensing agreements</span>
</li>
</ul>
<a
className="group mt-auto flex w-full flex-nowrap items-center justify-center gap-2 rounded-lg border border-[#5C5CF9] bg-[#5C5CF9] py-3.5 font-medium text-white shadow-xs transition-all duration-200 hover:bg-[#4A4AF0] hover:shadow-md disabled:cursor-not-allowed disabled:opacity-70 dark:border-[#5C5CF9] dark:bg-[#5C5CF9] dark:hover:bg-[#4A4AF0]"
target="_blank"
rel="noopener noreferrer"
href="mailto:[email protected]"
>
<Icon name="mail" height={16} width={16} />
Contact Us
</a>
{active && (
<div className="mt-2 flex flex-col gap-2">
<span className="text-center font-bold text-green-400">Current Plan</span>
Expand Down
98 changes: 50 additions & 48 deletions src/components/SubscribeCards/SubscribePlusCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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 (
Expand All @@ -30,13 +32,57 @@ export function SubscribePlusCard({
<div className="absolute top-0 left-0 h-1 w-full bg-linear-to-r from-transparent via-[#5c5cf9] to-transparent opacity-20"></div>
<div className="absolute top-[-30px] right-[-30px] h-[80px] w-[80px] rounded-full bg-[#5c5cf9] opacity-5 blur-2xl"></div>
<h2 className="relative z-10 text-center text-[2rem] font-extrabold whitespace-nowrap text-[#5C5CF9]">Pro</h2>
<div className="relative z-10 mt-1 flex items-center justify-center">
<span className="bg-linear-to-r from-[#5C5CF9] to-[#7B7BFF] bg-clip-text text-center text-2xl font-medium text-transparent">
49 USD
<div className="relative z-10 mt-2 flex items-center justify-center">
<span className="bg-linear-to-r from-[#5C5CF9] to-[#7B7BFF] bg-clip-text text-center text-3xl font-bold text-transparent">
$49
</span>
<span className="ml-1 text-[#8a8c90]">/month</span>
</div>
<p className="relative z-10 mt-1 text-center font-medium text-[#8a8c90]">Multiple payment options</p>
<p className="relative z-10 mt-1 text-center text-sm text-[#8a8c90]">Multiple payment options</p>
<div className="relative z-10 mx-auto mt-4 flex w-full flex-col gap-3">
{active ? (
<div className="flex flex-col gap-2">
<span className="text-center font-bold text-green-400">Current Plan</span>
{onCancelSubscription && (
<button
className="mt-2 w-full rounded-lg bg-[#222429] px-4 py-2 text-white transition-colors hover:bg-[#39393E]"
onClick={onCancelSubscription}
>
Cancel Subscription
</button>
)}
</div>
) : (
<>
{context === 'page' && !isAuthenticated && (
<SignIn
text="Get Started"
className="w-full rounded-lg bg-linear-to-r from-[#5C5CF9] to-[#6E6EFA] px-4 py-3 font-medium text-white shadow-lg transition-all duration-200 hover:from-[#4A4AF0] hover:to-[#5A5AF5] hover:shadow-[#5C5CF9]/20"
/>
)}
{context === 'page' && isAuthenticated && (
<div className="flex w-full flex-col gap-3">
<PaymentButton paymentMethod="llamapay" type="llamafeed" />
<PaymentButton paymentMethod="stripe" type="llamafeed" />
</div>
)}
{context === 'account' && (
<div className="flex w-full flex-col gap-3">
<PaymentButton paymentMethod="llamapay" type="llamafeed" />
<PaymentButton paymentMethod="stripe" type="llamafeed" />
</div>
)}
{isModal && (
<BasicLink
href={returnUrl ? `/subscription?returnUrl=${encodeURIComponent(returnUrl)}` : '/subscription'}
className="mt-3 block w-full rounded-lg bg-[#5C5CF9] px-4 py-2 text-center font-medium text-white transition-colors hover:bg-[#4A4AF0]"
>
Go to Subscription Page
</BasicLink>
)}
</>
)}
</div>
<ul className="mx-auto mb-auto flex w-full flex-col gap-3 py-6 max-sm:text-sm">
<li className="flex flex-col gap-3">
<div className="flex flex-nowrap items-start gap-2.5">
Expand Down Expand Up @@ -95,50 +141,6 @@ export function SubscribePlusCard({
<span>API access</span>
</li>
</ul>
<div className="relative z-10 mx-auto flex w-full max-w-[408px] flex-col gap-3">
{active ? (
<div className="flex flex-col gap-2">
<span className="text-center font-bold text-green-400">Current Plan</span>
{onCancelSubscription && (
<button
className="mt-2 w-full rounded-lg bg-[#222429] px-4 py-2 text-white transition-colors hover:bg-[#39393E]"
onClick={onCancelSubscription}
>
Cancel Subscription
</button>
)}
</div>
) : (
<>
{(context === 'page' || context === 'account') && (
<>
<SignIn text="Already a subscriber? Sign In" />
<div className="grid grid-cols-2 gap-3 max-sm:w-full max-sm:grid-cols-1">
{context === 'account' ? (
<>
<PaymentButton paymentMethod="llamapay" type="llamafeed" />
<PaymentButton paymentMethod="stripe" type="llamafeed" />
</>
) : (
<>
<PaymentButton paymentMethod="llamapay" type="llamafeed" />
<PaymentButton paymentMethod="stripe" type="llamafeed" />
</>
)}
</div>
</>
)}
{isModal && (
<BasicLink
href={returnUrl ? `/subscription?returnUrl=${encodeURIComponent(returnUrl)}` : '/subscription'}
className="mt-3 block w-full rounded-lg bg-[#5C5CF9] px-4 py-2 text-center font-medium text-white transition-colors hover:bg-[#4A4AF0]"
>
Go to Subscription Page
</BasicLink>
)}
</>
)}
</div>
</div>
)
}
76 changes: 36 additions & 40 deletions src/components/SubscribeCards/SubscribeProCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -15,6 +16,7 @@ export function SubscribeProCard({
isLegacyActive?: boolean
}) {
const [isDarkMode] = useDarkModeManager()
const { isAuthenticated } = useAuthContext()
const isModal = false
const shouldShowLightMode = isModal && !isDarkMode
return (
Expand All @@ -28,13 +30,43 @@ export function SubscribeProCard({
<div className="absolute top-0 left-0 h-1 w-full bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-20"></div>
<div className="absolute top-[-30px] right-[-30px] h-[80px] w-[80px] rounded-full bg-gray-600 opacity-5 blur-2xl"></div>
<h2 className="relative z-10 text-center text-[2rem] font-extrabold whitespace-nowrap text-[#5C5CF9]">API</h2>
<div className="relative z-10 mt-1 flex items-center justify-center">
<span className="bg-linear-to-r from-[#5C5CF9] to-[#8a8aff] bg-clip-text text-center text-2xl font-medium text-transparent">
300 USD
<div className="relative z-10 mt-2 flex items-center justify-center">
<span className="bg-linear-to-r from-[#5C5CF9] to-[#8a8aff] bg-clip-text text-center text-3xl font-bold text-transparent">
$300
</span>
<span className="ml-1 text-[#8a8c90]">/month</span>
</div>
<p className="relative z-10 mt-1 text-center font-medium text-[#8a8c90]">Multiple payment options</p>
<p className="relative z-10 mt-1 text-center text-sm text-[#8a8c90]">Multiple payment options</p>
<div className="relative z-10 mx-auto mt-4 flex w-full flex-col gap-3">
{active && !isLegacyActive ? (
<div className="flex flex-col gap-2">
<span className="text-center font-bold text-green-400">Current Plan</span>
{onCancelSubscription && (
<button
className="mt-2 w-full rounded-lg bg-[#222429] px-4 py-2 text-white transition-colors hover:bg-[#39393E]"
onClick={onCancelSubscription}
>
Cancel Subscription
</button>
)}
</div>
) : (
<>
{context === 'page' && !isAuthenticated && (
<SignIn
text="Get Started"
className="w-full rounded-lg bg-linear-to-r from-[#5C5CF9] to-[#6E6EFA] px-4 py-3 font-medium text-white shadow-lg transition-all duration-200 hover:from-[#4A4AF0] hover:to-[#5A5AF5] hover:shadow-[#5C5CF9]/20"
/>
)}
{(context === 'page' && isAuthenticated) || context === 'account' || isLegacyActive ? (
<div className="flex w-full flex-col gap-3">
<PaymentButton paymentMethod="llamapay" type="api" />
<PaymentButton paymentMethod="stripe" type="api" />
</div>
) : null}
</>
)}
</div>
<ul className="mx-auto mb-auto flex w-full flex-col gap-3 py-6 max-sm:text-sm">
<li className="flex flex-nowrap items-start gap-2.5">
<Icon name="check" height={16} width={16} className="relative top-1 shrink-0 text-green-400" />
Expand Down Expand Up @@ -68,42 +100,6 @@ export function SubscribeProCard({
<span>$0.60 per 1,000 additional calls after 1M limit</span>
</li>
</ul>
<div className="relative z-10 mx-auto flex w-full max-w-[408px] flex-col gap-3">
{active && !isLegacyActive ? (
<div className="flex flex-col gap-2">
<span className="text-center font-bold text-green-400">Current Plan</span>
{onCancelSubscription && (
<button
className="mt-2 w-full rounded-lg bg-[#222429] px-4 py-2 text-white transition-colors hover:bg-[#39393E]"
onClick={onCancelSubscription}
>
Cancel Subscription
</button>
)}
</div>
) : context === 'account' || isLegacyActive ? (
<div className="mt-2 flex flex-col gap-6">
<div className="flex flex-col items-center">
<div className="grid w-full grid-cols-2 gap-3">
<PaymentButton paymentMethod="llamapay" type="api" />
<PaymentButton paymentMethod="stripe" type="api" />
</div>
</div>
</div>
) : (
<>
{context === 'page' && (
<>
<SignIn text="Already a subscriber? Sign In" />
<div className="grid grid-cols-2 gap-3 max-sm:w-full max-sm:grid-cols-1">
<PaymentButton paymentMethod="llamapay" type="api" />
<PaymentButton paymentMethod="stripe" type="api" />
</div>
</>
)}
</>
)}
</div>
</div>
)
}
39 changes: 9 additions & 30 deletions src/containers/Subscribtion/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -107,27 +107,10 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr
return (
<>
<div className="relative mx-auto flex w-full max-w-6xl flex-col gap-3 overflow-x-hidden px-5 pb-[64px] xl:max-w-7xl 2xl:max-w-[1440px]">
<div className="relative mx-auto aspect-square h-[118px] w-[118px] rounded-full object-contain">
<div
style={{
filter: 'blur(64px)',
background: 'linear-gradient(90deg, #5C5EFC 0%, #462A92 100%)'
}}
className="absolute z-0 mx-auto aspect-square h-[132px] w-[132px] rounded-full object-contain"
/>
<img
src="/icons/llama.webp"
height={118}
width={118}
className="z-10 mx-auto aspect-square rounded-full object-contain"
alt=""
/>
</div>
<h1 className="text-center text-[2rem] font-extrabold">DefiLlama</h1>
{isSubscribed ? null : (
<p className="text-center text-[#919296]">
{!isAuthenticated && !isSubscribed && (
<h1 className="text-left text-2xl font-semibold leading-relaxed text-white">
Upgrade now for access to LlamaFeed, increased api limits and premium api endpoints.
</p>
</h1>
)}

{!isAuthenticated && isTrial && (
Expand Down Expand Up @@ -236,6 +219,9 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr
subscription={subscription}
onEmailChange={() => setShowEmailForm(true)}
/>
<h1 className="mt-6 text-left text-2xl font-semibold leading-relaxed text-white">
Upgrade now for access to LlamaFeed, increased api limits and premium api endpoints.
</h1>
</>
)}
<EmailChangeModal
Expand All @@ -255,7 +241,7 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr
<div className="relative">
<div
ref={pricingContainer}
className="relative z-10 grid grid-cols-1 gap-4 *:*:max-w-[408px]! *:max-w-full! *:items-center lg:grid-cols-3"
className="relative z-10 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"
>
<FreeCard context="page" />
<SubscribePlusCard
Expand All @@ -270,14 +256,7 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr
context="page"
isLegacyActive={apiSubscription?.status === 'active' && apiSubscription?.provider === 'legacy'}
/>
<div
className={`col-span-full rounded-xl border border-[#4a4a50] bg-[#22242930] px-5 py-8 shadow-md backdrop-blur-md transition-all duration-300 hover:transform md:px-5 md:hover:scale-[1.02]`}
>
<span className="mx-auto flex w-full flex-col md:w-auto md:max-w-[400px]">
<h2 className="text-center text-[2rem] font-extrabold whitespace-nowrap">Enterprise</h2>
<EnterpriseCardContent />
</span>
</div>
<SubscribeEnterpriseCard context="page" />
</div>
</div>
)}
Expand Down