diff --git a/frontend/src/marketing/pages/Pricing.tsx b/frontend/src/marketing/pages/Pricing.tsx index 642c4c1a..bf567dbf 100644 --- a/frontend/src/marketing/pages/Pricing.tsx +++ b/frontend/src/marketing/pages/Pricing.tsx @@ -245,29 +245,32 @@ const Pricing: React.FC = () => { tier.featured ? "lg:scale-105" : "hover:-translate-y-1" }`} > - {/* Badge */} - {tier.badge && ( - - {tier.badge} - - )} - - {/* Icon */} -
- + {/* Badge and Icon - Aligned */} +
+ {/* Icon */} +
+ +
+ + {/* Badge and Plan Name */} +
+ {tier.badge && ( + + {tier.badge} + + )} +

{tier.name}

+
- {/* Plan Info */} -
-

{tier.name}

-

{tier.description}

-
+ {/* Plan Description */} +

{tier.description}

{/* Price */}
@@ -282,15 +285,13 @@ const Pricing: React.FC = () => { {/* Features List */}
    {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 (
  • - + {feature}
  • );