diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx index f66b05b..a08ca73 100644 --- a/components/PricingSection.tsx +++ b/components/PricingSection.tsx @@ -101,18 +101,22 @@ export default function PricingSection() { const currentTraffic = TRAFFIC_TIERS[sliderIndex] - const calculatePrice = (planId: string) => { + // Helper to get all price details + const getPriceDetails = (planId: string) => { // @ts-ignore const basePrice = currentTraffic.prices[planId] - // Handle "Custom" or missing prices - if (basePrice === null || basePrice === undefined) return 'Custom' + // Handle "Custom" + if (basePrice === null || basePrice === undefined) return null - let price = basePrice - if (isYearly) { - price = price * 0.8 // 20% discount + const yearlyTotal = basePrice * 11 // 1 month free (pay for 11) + const effectiveMonthly = Math.round(yearlyTotal / 12) + + return { + baseMonthly: basePrice, + yearlyTotal: yearlyTotal, + effectiveMonthly: effectiveMonthly } - return '€' + Math.round(price) } return ( @@ -163,44 +167,80 @@ export default function PricingSection() { /> - Yearly 2 months free + Yearly 1 month free {/* Pricing Cards Grid */}
- {PLANS.map((plan) => ( -
-
-

{plan.name}

-
- - {calculatePrice(plan.id)} - - {calculatePrice(plan.id) !== 'Custom' && ( - /{isYearly ? 'mo' : 'month'} + {PLANS.map((plan) => { + const priceDetails = getPriceDetails(plan.id) + + return ( +
+
+

{plan.name}

+ + {priceDetails ? ( + isYearly ? ( + // YEARLY VIEW +
+ {/* 1. Effective Monthly Price */} +
+ + €{priceDetails.effectiveMonthly} + + /mo +
+ + {/* 2. Yearly Total */} +

+ Billed €{priceDetails.yearlyTotal} yearly +

+ + {/* 3. Comparison (Original -> Discounted) */} +
+ + €{priceDetails.baseMonthly}/mo + + + → €{priceDetails.effectiveMonthly}/mo + +
+
+ ) : ( + // MONTHLY VIEW +
+ + €{priceDetails.baseMonthly} + + /mo +
+ ) + ) : ( + // CUSTOM VIEW +
+ Custom +
)}
- {isYearly && calculatePrice(plan.id) !== 'Custom' && ( -

Billed yearly

- )} + + + +
    + {plan.features.map((feature) => ( +
  • + + {feature} +
  • + ))} +
- - - -
    - {plan.features.map((feature) => ( -
  • - - {feature} -
  • - ))} -
-
- ))} + ) + })} {/* Enterprise Card (Dark Style) */}