diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index 04d142d..93ff639 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -62,6 +62,9 @@ function HomeModule5() {
{
title: string;
price: number;
+ originalPrice: number;
+ monthlyPrice: number;
+ discountMsg: string;
credits: string;
buttonText: string;
features: string[];
@@ -75,6 +78,9 @@ function HomeModule5() {
billingType === "month"
? plan.price_month / 100
: plan.price_year / 100,
+ originalPrice: plan.price_month / 100,
+ monthlyPrice: billingType === "month" ? 0 : plan.price_year / 1200,
+ discountMsg: `Saves $${(plan.price_month * 12 - plan.price_year) / 100} by billing yearly!`,
credits: plan.description,
buttonText: plan.is_free ? "Try For Free" : "Subscribe Now",
issubscribed: plan.is_subscribed,
@@ -226,7 +232,7 @@ function HomeModule5() {
xl:text-[3.375rem]
2xl:text-[3.75rem]"
>
- ${plan.price}
+ ${plan.monthlyPrice || plan.price}
- / {billingType === "month" ? "month" : "year"}
+ / month
+ {plan.originalPrice !== plan.price ? (
+ ${plan.originalPrice}
+
) : null}
- * Billed monthly until cancelled
+ * {plan.discountMsg}
("month");
-
+ const [billingType, setBillingType] = useState<"month" | "year">("year");
const [plans, setPlans] = useState([]);
const { setShowCallbackModal } = useCallbackModal();
const pathname = usePathname();
@@ -1228,6 +1227,9 @@ function HomeModule5() {
{
title: string;
price: number;
+ originalPrice: number;
+ monthlyPrice: number;
+ discountMsg: string;
credits: string;
buttonText: string;
features: string[];
@@ -1241,6 +1243,9 @@ function HomeModule5() {
billingType === "month"
? plan.price_month / 100
: plan.price_year / 100,
+ originalPrice: plan.price_month / 100,
+ monthlyPrice: billingType === "month" ? 0 : plan.price_year / 1200,
+ discountMsg: `Saves $${(plan.price_month * 12 - plan.price_year) / 100} by billing yearly!`,
credits: plan.description,
buttonText: plan.is_free ? "Try For Free" : "Subscribe Now",
issubscribed: plan.is_subscribed,
@@ -1372,7 +1377,7 @@ function HomeModule5() {
/* 大屏显示器按钮尺寸 */
2xl:w-[7.125rem] 2xl:text-base`}
>
- Yearly - 20%
+ Yearly
@@ -1438,40 +1443,47 @@ function HomeModule5() {
/* 大屏显示器间距 */
2xl:mb-[1.25rem]"
>
-
- ${plan.price}
-
-
- / {billingType === "month" ? "mo" : "year"}
-
+
+
+ ${plan.monthlyPrice || plan.price}
+
+
+ / month
+
+
+ {plan.originalPrice !== plan.price ? (
+
+ ${plan.originalPrice}
+
+ ) : null}
- * Billed monthly until cancelled
+ * {plan.discountMsg}
{videos.map((src, index) => (