info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-02 13:52:46 +02:00
Code Issues Releases Wiki Activity

Update design

Browse Source
This commit is contained in:
Kamran Ahmed
2025-03-12 15:23:59 +00:00
parent 107ae1923b
commit 554e61947b
1 changed files with 22 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Billing/EmptyBillingScreen.tsx
View File

@@ -5,7 +5,6 @@ import {
MessageCircleIcon,
SparklesIcon,
Zap,
CheckCircle,
} from 'lucide-react';
type EmptyBillingScreenProps = {
@@ -39,45 +38,31 @@ export function EmptyBillingScreen(props: EmptyBillingScreenProps) {
const { onUpgrade } = props;
return (
<div className="mt-6 max-w-3xl">
<h2 className="mb-6 text-2xl font-bold text-black">Subscription Details</h2>
<div className="overflow-hidden rounded-lg bg-white shadow-sm">
<div className="p-6">
<div className="flex flex-col items-center text-center">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100">
<CreditCard className="h-8 w-8 text-gray-500" />
</div>
<h3 className="mt-4 text-xl font-semibold text-black">
<div className="mt-12 flex h-full w-full flex-col items-center">
<CreditCard className="mb-3 h-12 w-12 text-gray-300" />
<h3 className="mb-3 text-xl font-semibold text-black">
No Active Subscription
</h3>
<p className="mt-2 max-w-md text-balance text-gray-600">
Unlock premium benefits by upgrading to a subscription
<p className="text-balance text-gray-700">
Unlock pro benefits by upgrading to a subscription
</p>
<div className="mt-6 w-full max-w-md rounded-lg border border-gray-200 bg-gray-50 p-4">
<h4 className="mb-3 font-medium text-gray-800">Premium Benefits</h4>
<div className="flex flex-col gap-3">
<div className="my-8 flex flex-col gap-2">
{perks.map((perk) => (
<div className="flex items-center gap-2 text-gray-700" key={perk.text}>
<CheckCircle className="h-5 w-5 text-green-500" />
<span>{perk.text}</span>
</div>
<p className="textsm flex items-center text-gray-600" key={perk.text}>
<perk.icon className="mr-2 h-4 w-4 text-gray-500" />
{perk.text}
</p>
))}
</div>
</div>
<button
onClick={onUpgrade}
className="mt-6 inline-flex items-center justify-center rounded-md bg-black px-6 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-black/80 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
className="inline-flex items-center justify-center rounded-lg bg-black px-6 py-2.5 text-sm font-medium text-white transition-colors hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
>
Upgrade Account
</button>
</div>
</div>
</div>
</div>
);
}