From b03083bacdc6664a97cbcb89fc4cb54fec04e592 Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Mon, 29 Jun 2026 13:11:48 +0800
Subject: [PATCH] style(subscription): polish offer sections

---
 ...ubscription-coins-offer-section.module.css | 32 +++++++++++--------
 .../subscription-coins-offer-section.tsx      |  6 +++-
 .../subscription-vip-offer-section.module.css | 13 +++++---
 .../subscription-vip-offer-section.tsx        | 10 ++++--
 .../subscription-screen.helpers.ts            | 10 +++---
 src/app/subscription/subscription-screen.tsx  | 13 --------
 6 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/src/app/subscription/components/subscription-coins-offer-section.module.css b/src/app/subscription/components/subscription-coins-offer-section.module.css
index 8b001534..c12be573 100644
--- a/src/app/subscription/components/subscription-coins-offer-section.module.css
+++ b/src/app/subscription/components/subscription-coins-offer-section.module.css
@@ -2,7 +2,7 @@
   overflow: hidden;
   border: 1px solid rgba(17, 17, 17, 0.12);
   border-radius: 28px;
-  background: #ded4d7;
+  background: #f7dce7;
   box-shadow: 0 16px 42px rgba(31, 21, 25, 0.12);
   backdrop-filter: blur(18px);
 }
@@ -11,8 +11,8 @@
   position: relative;
   padding: 18px 18px 22px;
   background:
-    linear-gradient(135deg, #ddd4d7 0%, #d3c9cd 58%, #c8bdc2 100%),
-    #d3c9cd;
+    linear-gradient(135deg, #f3cbd8 0%, #efbacd 58%, #eaa9c3 100%),
+    #efbacd;
 }
 
 .title {
@@ -29,7 +29,7 @@
   bottom: -12px;
   width: 24px;
   height: 24px;
-  background: #d3c9cd;
+  background: #efbacd;
   transform: translateX(-50%) rotate(45deg);
 }
 
@@ -68,25 +68,31 @@
 }
 
 .selected {
-  border-color: rgba(246, 87, 160, 0.45);
-  background: #fff4f8;
+  border: 3px solid #f657a0;
+  background: linear-gradient(90deg, #fff1f7 0%, #ffffff 100%);
   color: #111111;
-  box-shadow: 0 12px 28px rgba(246, 87, 160, 0.15);
+  box-shadow: 0 14px 30px rgba(246, 87, 160, 0.3);
+  transform: translateY(-2px);
 }
 
 .coinIcon {
   display: inline-flex;
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
   align-items: center;
   justify-content: center;
   justify-self: center;
   border-radius: 999px;
-  background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
-  color: #6a5960;
-  font-size: 12px;
+  background: linear-gradient(180deg, #ffe89c 0%, #f8b83e 100%);
+  color: #8f5400;
   line-height: 1;
-  text-transform: lowercase;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.75),
+    0 5px 12px rgba(216, 132, 22, 0.22);
+}
+
+.coinIcon svg {
+  display: block;
 }
 
 .coins {
diff --git a/src/app/subscription/components/subscription-coins-offer-section.tsx b/src/app/subscription/components/subscription-coins-offer-section.tsx
index 662293bf..349c539e 100644
--- a/src/app/subscription/components/subscription-coins-offer-section.tsx
+++ b/src/app/subscription/components/subscription-coins-offer-section.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { Coins } from "lucide-react";
+
 import styles from "./subscription-coins-offer-section.module.css";
 
 export interface CoinsOfferPlanView {
@@ -39,7 +41,9 @@ export function SubscriptionCoinsOfferSection({
               aria-label={`${plan.coins} Coins, ${plan.currency}${plan.price}`}
               onClick={() => onSelectPlan(plan.id)}
             >
-              <span className={styles.coinIcon}>coins</span>
+              <span className={styles.coinIcon} aria-hidden="true">
+                <Coins size={18} strokeWidth={2.4} />
+              </span>
               <span className={styles.coins}>{plan.coins} Coins</span>
               <span className={styles.price}>
                 {plan.currency}
diff --git a/src/app/subscription/components/subscription-vip-offer-section.module.css b/src/app/subscription/components/subscription-vip-offer-section.module.css
index cc48face..bbce6ab1 100644
--- a/src/app/subscription/components/subscription-vip-offer-section.module.css
+++ b/src/app/subscription/components/subscription-vip-offer-section.module.css
@@ -78,8 +78,8 @@
   font: inherit;
   text-align: center;
   box-shadow: 0 8px 22px rgba(26, 16, 20, 0.05);
-  transition: background-color 0.18s ease, box-shadow 0.18s ease,
-    color 0.18s ease, transform 0.12s ease;
+  transition: background-color 0.18s ease, border-color 0.18s ease,
+    box-shadow 0.18s ease, color 0.18s ease, transform 0.12s ease;
 }
 
 .planCard:focus-visible {
@@ -92,10 +92,13 @@
 }
 
 .selected {
-  border-color: rgba(246, 87, 160, 0.55);
-  background: linear-gradient(180deg, #fff 0%, #fff2f8 100%);
-  box-shadow: 0 14px 30px rgba(246, 87, 160, 0.2);
+  border: 3px solid #f657a0;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #ffeaf4 100%),
+    #ffffff;
+  box-shadow: 0 16px 34px rgba(246, 87, 160, 0.34);
   color: #111111;
+  transform: translateY(-3px);
 }
 
 .planTitle {
diff --git a/src/app/subscription/components/subscription-vip-offer-section.tsx b/src/app/subscription/components/subscription-vip-offer-section.tsx
index 18de4de1..5b04b820 100644
--- a/src/app/subscription/components/subscription-vip-offer-section.tsx
+++ b/src/app/subscription/components/subscription-vip-offer-section.tsx
@@ -25,10 +25,14 @@ export function SubscriptionVipOfferSection({
     <section className={styles.section} aria-label="Choose a VIP plan">
       <div className={styles.summary}>
         <h1 className={styles.title}>
-          <span className={styles.titleText}>VIP会员</span>
-          <span className={styles.renewText}>（到期自动续费，可随时取消）</span>
+          <span className={styles.titleText}>VIP Membership</span>
+          <span className={styles.renewText}>
+            Auto-renews, cancel anytime
+          </span>
         </h1>
-        <p className={styles.subtitle}>每月送3000积分，每日早上畅聊到晚上</p>
+        <p className={styles.subtitle}>
+          Get 3,000 credits monthly and enjoy unlimited daily chats
+        </p>
         <span className={styles.notch} aria-hidden="true" />
       </div>
 
diff --git a/src/app/subscription/subscription-screen.helpers.ts b/src/app/subscription/subscription-screen.helpers.ts
index f8dcb957..814a31e3 100644
--- a/src/app/subscription/subscription-screen.helpers.ts
+++ b/src/app/subscription/subscription-screen.helpers.ts
@@ -80,11 +80,11 @@ function formatCoinCurrency(currency: string): string {
 
 function vipOfferTitle(plan: PaymentPlan): string {
   const key = `${plan.planId} ${plan.orderType} ${plan.planName}`.toLowerCase();
-  if (key.includes("year")) return "连续包年";
-  if (key.includes("quarter")) return "连续包季";
-  if (key.includes("month")) return "连续包月";
-  if (plan.vipDays !== null && plan.vipDays >= 300) return "连续包年";
-  if (plan.vipDays !== null && plan.vipDays >= 80) return "连续包季";
+  if (key.includes("year")) return "Annual";
+  if (key.includes("quarter")) return "Quarterly";
+  if (key.includes("month")) return "Monthly";
+  if (plan.vipDays !== null && plan.vipDays >= 300) return "Annual";
+  if (plan.vipDays !== null && plan.vipDays >= 80) return "Quarterly";
   return plan.planName;
 }
 
diff --git a/src/app/subscription/subscription-screen.tsx b/src/app/subscription/subscription-screen.tsx
index 8eabcad5..3ba92e55 100644
--- a/src/app/subscription/subscription-screen.tsx
+++ b/src/app/subscription/subscription-screen.tsx
@@ -313,19 +313,6 @@ export function SubscriptionScreen({
           </>
         )}
 
-        {/* <p className={styles.autoRenewCaption}>{autoRenewCaption}</p>
-
-        <section className={styles.benefitsSlot}>
-          {subscriptionType === "voice" ? (
-            <div className={styles.benefitsPlaceholder} aria-hidden="true" />
-          ) : (
-            <SubscriptionBenefitsCard
-              title="VIP Membership Benefits"
-              items={VIP_BENEFITS}
-            />
-          )}
-        </section> */}
-
         <section className={styles.paymentMethodSlot}>
           <SubscriptionPaymentMethod
             value={payment.payChannel}