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

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