salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Pricing.tsx

Browse Source
This commit is contained in:
Desktop
2025-11-14 02:48:32 +05:00
parent 228215e49f
commit 8d3d4786ca
1 changed files with 29 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/marketing/pages/Pricing.tsx
View File

@@ -245,29 +245,32 @@ const Pricing: React.FC = () => {
tier.featured ? "lg:scale-105" : "hover:-translate-y-1" tier.featured ? "lg:scale-105" : "hover:-translate-y-1"
}`} }`}
> >
{/* Badge */} {/* Badge and Icon - Aligned */}
{tier.badge && ( <div className="flex items-center gap-4">
<span {/* Icon */}
className={`inline-flex items-center self-start rounded-full border px-4 py-1 text-[11px] uppercase tracking-[0.25em] ${ <div className={`inline-flex size-14 rounded-2xl bg-gradient-to-br ${tier.iconColor} items-center justify-center text-white shadow-lg flex-shrink-0`}>
tier.featured <Icon className="h-7 w-7" />
? "border-[#0693e3]/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]" </div>
: "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 text-[#0693e3]"
}`} {/* Badge and Plan Name */}
> <div className="flex-1">
{tier.badge} {tier.badge && (
</span> <span
)} className={`inline-flex items-center rounded-full border px-3 py-1 text-[10px] uppercase tracking-[0.25em] mb-2 ${
tier.featured
{/* Icon */} ? "border-[#0693e3]/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]"
<div className={`inline-flex size-14 rounded-2xl bg-gradient-to-br ${tier.iconColor} items-center justify-center text-white shadow-lg w-fit`}> : "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 text-[#0693e3]"
<Icon className="h-7 w-7" /> }`}
>
{tier.badge}
</span>
)}
<h3 className="text-2xl font-semibold text-slate-900">{tier.name}</h3>
</div>
</div> </div>
{/* Plan Info */} {/* Plan Description */}
<div> <p className="text-sm text-slate-600">{tier.description}</p>
<h3 className="text-2xl font-semibold text-slate-900">{tier.name}</h3>
<p className="text-sm text-slate-600 mt-2">{tier.description}</p>
</div>
{/* Price */} {/* Price */}
<div className="text-4xl font-semibold text-slate-900"> <div className="text-4xl font-semibold text-slate-900">
@@ -282,15 +285,13 @@ const Pricing: React.FC = () => {
{/* Features List */} {/* Features List */}
<ul className="space-y-4 text-sm text-slate-600 flex-1"> <ul className="space-y-4 text-sm text-slate-600 flex-1">
{tier.features.map((feature, idx) => { {tier.features.map((feature, idx) => {
const colors = [ // Subtle check icons: light bg with dark check for starter/scale, colored for growth
"bg-[#0693e3]", const checkStyle = tier.featured
"bg-[#0bbf87]", ? "bg-[#0bbf87]/10 text-[#0bbf87]"
"bg-[#ff7a00]", : "bg-slate-100 text-slate-600";
"bg-[#5d4ae3]",
];
return ( return (
<li key={feature} className="flex gap-3 items-start"> <li key={feature} className="flex gap-3 items-start">
<CheckIcon className={`h-5 w-5 ${colors[idx % colors.length]} text-white rounded-full p-0.5 flex-shrink-0 mt-0.5`} /> <CheckIcon className={`h-5 w-5 ${checkStyle} rounded-full p-0.5 flex-shrink-0 mt-0.5`} />
<span>{feature}</span> <span>{feature}</span>
</li> </li>
); );