From 339671c73849b5f411021116d6bd2b861b12c6c8 Mon Sep 17 00:00:00 2001
From: moux1024 <403053463@qq.com>
Date: Fri, 26 Sep 2025 21:04:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20=E5=A5=97=E9=A4=90?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/pricing/page.tsx             | 15 ++++--
 components/pages/home-page2.tsx  | 88 ++++++++++++++++++--------------
 components/ui/VideoCoverflow.tsx |  4 +-
 3 files changed, 64 insertions(+), 43 deletions(-)

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}
               </span>
               <span
                 className="text-white ml-2 whitespace-nowrap
@@ -237,9 +243,12 @@ function HomeModule5() {
                               xl:text-xs
                               2xl:text-sm"
               >
-                / {billingType === "month" ? "month" : "year"}
+                / month
               </span>
             </div>
+            {plan.originalPrice !== plan.price ? (<div className="pt-2 text-white text-sm line-through">
+              ${plan.originalPrice}
+            </div>) : null}
           </div>
           <p
             className="text-white mb-4
@@ -288,7 +297,7 @@ function HomeModule5() {
                         xl:text-[0.75rem] xl:mb-[2rem]
                         2xl:text-sm 2xl:mb-[2.5rem]"
           >
-            * Billed monthly until cancelled
+            * {plan.discountMsg}
           </p>
           <ul
             className="space-y-2
diff --git a/components/pages/home-page2.tsx b/components/pages/home-page2.tsx
index afbceb1..27caba2 100644
--- a/components/pages/home-page2.tsx
+++ b/components/pages/home-page2.tsx
@@ -1205,8 +1205,7 @@ function HomeModule4() {
 }
 /**价格方案 */
 function HomeModule5() {
-  const [billingType, setBillingType] = useState<"month" | "year">("month");
-
+  const [billingType, setBillingType] = useState<"month" | "year">("year");
   const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
   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 - <span className="text-[#FFCC6D]">20%</span>
+            Yearly
           </button>
         </div>
       </div>
@@ -1438,40 +1443,47 @@ function HomeModule5() {
                            /* 大屏显示器间距 */
                            2xl:mb-[1.25rem]"
             >
-              <span
-                className="text-white font-bold
-                              /* 移动端价格字体 */
-                              text-2xl
-                              /* 平板价格字体 */
-                              sm:text-3xl
-                              /* 小屏笔记本价格字体 */
-                              md:text-[2.5rem]
-                              /* 大屏笔记本价格字体 */
-                              lg:text-[3rem]
-                              /* 桌面端价格字体 */
-                              xl:text-[3.375rem]
-                              /* 大屏显示器价格字体 */
-                              2xl:text-[3.75rem]"
-              >
-                ${plan.price}
-              </span>
-              <span
-                className="text-white ml-2
-                              /* 移动端单位字体 */
-                              text-xs
-                              /* 平板单位字体 */
-                              sm:text-xs
-                              /* 小屏笔记本单位字体 */
-                              md:text-xs
-                              /* 大屏笔记本单位字体 */
-                              lg:text-xs
-                              /* 桌面端单位字体 */
-                              xl:text-xs
-                              /* 大屏显示器单位字体 */
-                              2xl:text-sm"
-              >
-                / {billingType === "month" ? "mo" : "year"}
-              </span>
+              <div className="flex items-baseline">
+                <span
+                  className="text-white font-bold
+                                /* 移动端价格字体 */
+                                text-2xl
+                                /* 平板价格字体 */
+                                sm:text-3xl
+                                /* 小屏笔记本价格字体 */
+                                md:text-[2.5rem]
+                                /* 大屏笔记本价格字体 */
+                                lg:text-[3rem]
+                                /* 桌面端价格字体 */
+                                xl:text-[3.375rem]
+                                /* 大屏显示器价格字体 */
+                                2xl:text-[3.75rem]"
+                >
+                  ${plan.monthlyPrice || plan.price}
+                </span>
+                <span
+                  className="text-white ml-2 whitespace-nowrap
+                                /* 移动端单位字体 */
+                                text-xs
+                                /* 平板单位字体 */
+                                sm:text-xs
+                                /* 小屏笔记本单位字体 */
+                                md:text-xs
+                                /* 大屏笔记本单位字体 */
+                                lg:text-xs
+                                /* 桌面端单位字体 */
+                                xl:text-xs
+                                /* 大屏显示器单位字体 */
+                                2xl:text-sm"
+                >
+                  / month
+                </span>
+              </div>
+              {plan.originalPrice !== plan.price ? (
+                <div className="pt-2 text-white text-sm line-through">
+                  ${plan.originalPrice}
+                </div>
+              ) : null}
             </div>
             <p
               className="text-white mb-4
@@ -1544,7 +1556,7 @@ function HomeModule5() {
                           /* 大屏显示器提示文字 */
                           2xl:text-sm 2xl:mb-[2.5rem]"
             >
-              * Billed monthly until cancelled
+              * {plan.discountMsg}
             </p>
             <ul
               className="space-y-2
diff --git a/components/ui/VideoCoverflow.tsx b/components/ui/VideoCoverflow.tsx
index 0fa17d8..a3a8071 100644
--- a/components/ui/VideoCoverflow.tsx
+++ b/components/ui/VideoCoverflow.tsx
@@ -99,7 +99,7 @@ const VideoCoverflow: React.FC<VideoCoverflowProps> = ({
             >
                 {title}
             </h2>
-            <p className="text-white font-normal text-center
+            <p className="text-white font-normal text-center mb-8
                     -mt-2
                     /* 移动端字体 */
                     text-[1rem] leading-[140%]
@@ -138,7 +138,7 @@ const VideoCoverflow: React.FC<VideoCoverflowProps> = ({
                     } : {})}
                     onAfterInit={handleAfterInit}
                     onSlideChange={handleSlideChange}
-                    className="w-full py-8"
+                    className="w-full"
                 >
                     {videos.map((src, index) => (
                         <SwiperSlide key={src} className="select-none">