From 73f1df557307b59ed2a3b852031f356f89d268ec Mon Sep 17 00:00:00 2001
From: Zixin Zhou <zhouzixin@apache.org>
Date: Wed, 3 Sep 2025 15:10:04 +0800
Subject: [PATCH] update pay page

---
 app/pricing/page.tsx | 159 +++++++------------------------------------
 1 file changed, 25 insertions(+), 134 deletions(-)

diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index 0418f22..5c27bac 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -73,7 +73,6 @@ function HomeModule5() {
   const handleSubscribe = async (planName: string) => {
 
     try {
-      // 使用新的Checkout Session方案（更简单！）
       const { createCheckoutSession, redirectToCheckout } = await import(
         "@/lib/stripe"
       );
@@ -106,48 +105,30 @@ function HomeModule5() {
     <div
     data-alt="core-value-section"
     className="home-module5 relative flex flex-col items-center justify-center w-full bg-black snap-start
-               /* 移动端适配 */
                min-h-[100vh] py-8
-               /* 平板适配 */
                sm:min-h-[100vh] sm:py-12
-               /* 小屏笔记本适配 (13-15寸) */
                md:h-[1000px] md:py-16
-               /* 大屏笔记本适配 (16-17寸) */
                lg:h-[1100px] lg:py-20
-               /* 桌面端适配 (21-24寸) */
                xl:h-[1200px] xl:py-24
-               /* 大屏显示器适配 (27寸+) */
                2xl:h-[1500px] 2xl:py-32"
   >
     <div
       data-alt="core-value-content"
       className="center z-10 flex flex-col items-center
-                 /* 移动端间距 */
                  mb-8 px-4
-                 /* 平板间距 */
                  sm:mb-12 sm:px-6
-                 /* 小屏笔记本间距 */
                  md:mb-[4rem] md:px-8
-                 /* 大屏笔记本间距 */
                  lg:mb-[4rem] lg:px-12
-                 /* 桌面端间距 */
                  xl:mb-[4rem] xl:px-16
-                 /* 大屏显示器间距 */
                  2xl:mb-[4rem] 2xl:px-20"
     >
       <h2
         className="text-white font-normal text-center
-                     /* 移动端字体 */
                      text-[1.5rem] leading-[110%] mb-4
-                     /* 平板字体 */
                      sm:text-[2rem] sm:leading-[110%] sm:mb-6
-                     /* 小屏笔记本字体 */
                      md:text-[2.5rem] md:leading-[110%] md:mb-[1.5rem]
-                     /* 大屏笔记本字体 */
                      lg:text-[3rem] lg:leading-[110%] lg:mb-[1.5rem]
-                     /* 桌面端字体 */
                      xl:text-[3.375rem] xl:leading-[110%] xl:mb-[1.5rem]
-                     /* 大屏显示器字体 */
                      2xl:text-[3.5rem] 2xl:leading-[110%] 2xl:mb-[1.5rem]"
       >
         Pick a plan and make it yours
@@ -156,17 +137,11 @@ function HomeModule5() {
       {/* 计费切换 */}
       <div
         className="flex bg-black rounded-full border border-white/20
-                      /* 移动端尺寸 */
                       h-[2.5rem] p-[0.0625rem] mt-4
-                      /* 平板尺寸 */
                       sm:h-[3rem] sm:mt-6
-                      /* 小屏笔记本尺寸 */
                       md:h-[3.375rem] md:mt-[1.5rem]
-                      /* 大屏笔记本尺寸 */
                       lg:h-[3.375rem] lg:mt-[1.5rem]
-                      /* 桌面端尺寸 */
                       xl:h-[3.375rem] xl:mt-[1.5rem]
-                      /* 大屏显示器尺寸 */
                       2xl:h-[3.375rem] 2xl:mt-[1.5rem]"
       >
         <button
@@ -176,17 +151,11 @@ function HomeModule5() {
               ? "bg-white text-black"
               : "text-white hover:text-gray-300"
           }
-          /* 移动端按钮尺寸 */
           w-[4.5rem] text-sm
-          /* 平板按钮尺寸 */
           sm:w-[5rem] sm:text-sm
-          /* 小屏笔记本按钮尺寸 */
           md:w-[6rem] md:text-base
-          /* 大屏笔记本按钮尺寸 */
           lg:w-[6rem] lg:text-base
-          /* 桌面端按钮尺寸 */
           xl:w-[6rem] xl:text-base
-          /* 大屏显示器按钮尺寸 */
           2xl:w-[6rem] 2xl:text-base`}
         >
           Monthly
@@ -198,17 +167,11 @@ function HomeModule5() {
               ? "bg-white text-black"
               : "text-white hover:text-gray-300"
           }
-          /* 移动端按钮尺寸 */
           w-[5.5rem] text-sm
-          /* 平板按钮尺寸 */
           sm:w-[6rem] sm:text-sm
-          /* 小屏笔记本按钮尺寸 */
           md:w-[7.125rem] md:text-base
-          /* 大屏笔记本按钮尺寸 */
           lg:w-[7.125rem] lg:text-base
-          /* 桌面端按钮尺寸 */
           xl:w-[7.125rem] xl:text-base
-          /* 大屏显示器按钮尺寸 */
           2xl:w-[7.125rem] 2xl:text-base`}
         >
           Yearly - <span className="text-[#FFCC6D]">20%</span>
@@ -218,14 +181,10 @@ function HomeModule5() {
 
     {/* 主要价格卡片 */}
     <div
-      className="w-full max-w-[70%] mx-auto px-4
-                   /* 移动端 - 单列布局 */
+      className="w-full max-w-[95%] mx-auto px-4
                    grid grid-cols-1 gap-4
-                   /* 平板 - 双列布局 */
                    sm:grid-cols-2 sm:gap-6 sm:px-6
-                   /* 桌面端 - 三列布局 */
                    md:grid-cols-3 md:gap-8 md:px-8
-                   /* 大屏 - 保持三列但增加间距 */
                    lg:gap-10 lg:px-12
                    xl:gap-12 xl:px-16
                    2xl:gap-16 2xl:px-20"
@@ -234,97 +193,64 @@ function HomeModule5() {
         <div
           key={index}
           className="bg-black rounded-2xl border border-white/20
-                     /* 移动端卡片尺寸 */
                      p-4 min-h-[28rem]
-                     /* 平板卡片尺寸 */
                      sm:p-5 sm:min-h-[32rem]
-                     /* 小屏笔记本卡片尺寸 */
                      md:p-6 md:min-h-[36rem]
-                     /* 大屏笔记本卡片尺寸 */
                      lg:p-[1.375rem] lg:min-h-[37rem]
-                     /* 桌面端卡片尺寸 */
                      xl:p-[1.5rem] xl:min-h-[38.125rem]
-                     /* 大屏显示器卡片尺寸 */
                      2xl:p-[1.75rem] 2xl:min-h-[40rem]"
         >
           <h3
             className="text-white font-normal
-                        /* 移动端标题 */
                         text-lg mb-3
-                        /* 平板标题 */
                         sm:text-xl sm:mb-4
-                        /* 小屏笔记本标题 */
                         md:text-xl md:mb-4
-                        /* 大屏笔记本标题 */
                         lg:text-2xl lg:mb-[1rem]
-                        /* 桌面端标题 */
                         xl:text-2xl xl:mb-[1rem]
-                        /* 大屏显示器标题 */
                         2xl:text-3xl 2xl:mb-[1.25rem]"
           >
             {plan.title}
           </h3>
           <div
             className="mb-3
-                         /* 平板间距 */
                          sm:mb-4
-                         /* 小屏笔记本间距 */
                          md:mb-4
-                         /* 大屏笔记本间距 */
                          lg:mb-[1rem]
-                         /* 桌面端间距 */
                          xl:mb-[1rem]
-                         /* 大屏显示器间距 */
                          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.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"
+              >
+                / {billingType === "month" ? "month" : "year"}
+              </span>
+            </div>
           </div>
           <p
             className="text-white mb-4
-                        /* 移动端描述字体 */
                         text-sm
-                        /* 平板描述字体 */
                         sm:text-sm
-                        /* 小屏笔记本描述字体 */
                         md:text-[0.875rem]
-                        /* 大屏笔记本描述字体 */
                         lg:text-[0.875rem]
-                        /* 桌面端描述字体 */
                         xl:text-[0.875rem]
-                        /* 大屏显示器描述字体 */
                         2xl:text-base"
           >
             {plan.credits}
@@ -333,17 +259,11 @@ function HomeModule5() {
             <button
               disabled
               className="w-full bg-gray-400 text-gray-600 rounded-full cursor-not-allowed border border-gray-300
-                        /* 移动端按钮 */
                         py-2 mb-4 text-sm
-                        /* 平板按钮 */
                         sm:py-3 sm:mb-4 sm:text-base
-                        /* 小屏笔记本按钮 */
                         md:py-[0.75rem] md:mb-[1rem] md:text-base
-                        /* 大屏笔记本按钮 */
                         lg:py-[0.75rem] lg:mb-[1rem] lg:text-base
-                        /* 桌面端按钮 */
                         xl:py-[0.75rem] xl:mb-[1rem] xl:text-base
-                        /* 大屏显示器按钮 */
                         2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg"
             >
               Already Owned
@@ -352,17 +272,11 @@ function HomeModule5() {
             <button
               onClick={() => handleSubscribe(plan.title)}
               className="w-full bg-white text-black rounded-full hover:bg-black hover:text-white transition-colors border border-white/20
-                        /* 移动端按钮 */
                         py-2 mb-4 text-sm
-                        /* 平板按钮 */
                         sm:py-3 sm:mb-4 sm:text-base
-                        /* 小屏笔记本按钮 */
                         md:py-[0.75rem] md:mb-[1rem] md:text-base
-                        /* 大屏笔记本按钮 */
                         lg:py-[0.75rem] lg:mb-[1rem] lg:text-base
-                        /* 桌面端按钮 */
                         xl:py-[0.75rem] xl:mb-[1rem] xl:text-base
-                        /* 大屏显示器按钮 */
                         2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg"
             >
               {plan.buttonText}
@@ -370,64 +284,41 @@ function HomeModule5() {
           )}
           <p
             className="w-full text-center text-white/60 mb-4
-                        /* 移动端提示文字 */
                         text-xs
-                        /* 平板提示文字 */
                         sm:text-xs
-                        /* 小屏笔记本提示文字 */
                         md:text-[0.75rem] md:mb-[2rem]
-                        /* 大屏笔记本提示文字 */
                         lg:text-[0.75rem] lg:mb-[2rem]
-                        /* 桌面端提示文字 */
                         xl:text-[0.75rem] xl:mb-[2rem]
-                        /* 大屏显示器提示文字 */
                         2xl:text-sm 2xl:mb-[2.5rem]"
           >
             * Billed monthly until cancelled
           </p>
           <ul
             className="space-y-2
-                        /* 平板特性列表间距 */
                         sm:space-y-3
-                        /* 小屏笔记本特性列表间距 */
                         md:space-y-[1rem]
-                        /* 大屏笔记本特性列表间距 */
                         lg:space-y-[1rem]
-                        /* 桌面端特性列表间距 */
                         xl:space-y-[1rem]
-                        /* 大屏显示器特性列表间距 */
                         2xl:space-y-[1.25rem]"
           >
             {plan.features.map((feature, featureIndex) => (
               <li
                 key={featureIndex}
                 className="flex items-center text-white
-                          /* 移动端特性文字 */
                           text-sm
-                          /* 平板特性文字 */
                           sm:text-sm
-                          /* 小屏笔记本特性文字 */
                           md:text-[0.875rem]
-                          /* 大屏笔记本特性文字 */
                           lg:text-[0.875rem]
-                          /* 桌面端特性文字 */
                           xl:text-[0.875rem]
-                          /* 大屏显示器特性文字 */
                           2xl:text-base"
               >
                 <span
                   className="text-[#C73BFF] mr-2
-                                /* 移动端勾号间距 */
                                 text-sm
-                                /* 平板勾号间距 */
                                 sm:mr-2 sm:text-base
-                                /* 小屏笔记本勾号间距 */
                                 md:mr-[0.5rem] md:text-base
-                                /* 大屏笔记本勾号间距 */
                                 lg:mr-[0.5rem] lg:text-base
-                                /* 桌面端勾号间距 */
                                 xl:mr-[0.5rem] xl:text-base
-                                /* 大屏显示器勾号间距 */
                                 2xl:mr-[0.625rem] 2xl:text-lg"
                 >
                   ✓