info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-02 22:02:39 +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, MessageCircleIcon,
SparklesIcon, SparklesIcon,
Zap, Zap,
CheckCircle,
} from 'lucide-react'; } from 'lucide-react';
type EmptyBillingScreenProps = { type EmptyBillingScreenProps = {
@@ -39,45 +38,31 @@ export function EmptyBillingScreen(props: EmptyBillingScreenProps) {
const { onUpgrade } = props; const { onUpgrade } = props;
return ( return (
<div className="mt-6 max-w-3xl"> <div className="mt-12 flex h-full w-full flex-col items-center">
<h2 className="mb-6 text-2xl font-bold text-black">Subscription Details</h2> <CreditCard className="mb-3 h-12 w-12 text-gray-300" />
<h3 className="mb-3 text-xl font-semibold text-black">
<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">
No Active Subscription No Active Subscription
</h3> </h3>
<p className="mt-2 max-w-md text-balance text-gray-600"> <p className="text-balance text-gray-700">
Unlock premium benefits by upgrading to a subscription Unlock pro benefits by upgrading to a subscription
</p> </p>
<div className="mt-6 w-full max-w-md rounded-lg border border-gray-200 bg-gray-50 p-4"> <div className="my-8 flex flex-col gap-2">
<h4 className="mb-3 font-medium text-gray-800">Premium Benefits</h4>
<div className="flex flex-col gap-3">
{perks.map((perk) => ( {perks.map((perk) => (
<div className="flex items-center gap-2 text-gray-700" key={perk.text}> <p className="textsm flex items-center text-gray-600" key={perk.text}>
<CheckCircle className="h-5 w-5 text-green-500" /> <perk.icon className="mr-2 h-4 w-4 text-gray-500" />
<span>{perk.text}</span> {perk.text}
</div> </p>
))} ))}
</div> </div>
</div>
<button <button
onClick={onUpgrade} 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 Upgrade Account
</button> </button>
</div> </div>
</div>
</div>
</div>
); );
} }