From a706683c1e7ece186d14a404edc55ca400169b86 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Thu, 19 Feb 2026 12:17:36 -0600
Subject: [PATCH] refactor: update pricing display logic in Pricing component

- Renamed variables for clarity, changing hobbyAnnualPrice to hobbyAnnualTotal and introduced hobbyAnnualPerMonth for monthly display.
- Adjusted the pricing display to show annual totals and monthly equivalents more clearly, enhancing user understanding of pricing options.
---
 apps/website/components/pricing.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/apps/website/components/pricing.tsx b/apps/website/components/pricing.tsx
index 6869664..3083eff 100644
--- a/apps/website/components/pricing.tsx
+++ b/apps/website/components/pricing.tsx
@@ -77,7 +77,8 @@ export function Pricing() {
 	const [openPartnerModal, setOpenPartnerModal] = useState(false);
 
 	const hobbyMonthlyPrice = 4.5;
-	const hobbyAnnualPrice = hobbyMonthlyPrice * 12 * 0.8; // 20% discount
+	const hobbyAnnualTotal = hobbyMonthlyPrice * 12 * 0.8; // 20% discount, total per year
+	const hobbyAnnualPerMonth = hobbyAnnualTotal / 12;
 	const startupBaseMonthly = 15;
 	const startupBaseAnnual = startupBaseMonthly * 12 * 0.8;
 
@@ -151,16 +152,15 @@ export function Pricing() {
 								<span className="text-2xl font-semibold text-primary">
 									$
 									{isAnnual
-										? hobbyAnnualPrice.toFixed(2)
+										? hobbyAnnualPerMonth.toFixed(2)
 										: hobbyMonthlyPrice.toFixed(2)}
 									/mo
 								</span>
-								{isAnnual && (
-									<span className="ml-2 text-sm text-muted-foreground">
-										per server
-									</span>
-								)}
-								{!isAnnual && (
+								{isAnnual ? (
+									<p className="mt-1 text-sm text-muted-foreground">
+										${hobbyAnnualTotal.toFixed(2)}/year per server
+									</p>
+								) : (
 									<span className="ml-2 text-sm text-muted-foreground">
 										per server (add as many servers as you&apos;d like for $4.50/mo)
 									</span>
@@ -209,6 +209,11 @@ export function Pricing() {
 										: startupBaseMonthly.toFixed(0)}
 									/mo
 								</span>
+								{isAnnual ? (
+									<p className="mt-1 text-sm text-muted-foreground">
+										${startupBaseAnnual.toFixed(0)}/year
+									</p>
+								) : null}
 								<p className="mt-1 text-xs text-muted-foreground">
 									Add more servers as you&apos;d like for $4.50/mo
 								</p>