@windrun-huaiin/third-ui 7.6.1 → 10.0.0

package/src/main/money-price/money-price-types.ts

@@ -1,3 +1,5 @@
+import type { XCredit, XSubscription, XUser } from '../../clerk/fingerprint/types';
+
 /**
  * Money Price Component Types
  * 价格组件类型定义
@@ -15,10 +17,18 @@ export enum UserState {
 export interface UserContext {
   isAuthenticated: boolean;
   subscriptionStatus: UserState;
-  subscriptionType?: 'monthly' | 'yearly';
+  subscriptionType?: string;
   subscriptionEndDate?: string;
 }
 
+export interface InitUserContext {
+  fingerprintId: string | null;
+  xUser: XUser | null;
+  xCredit: XCredit | null;
+  xSubscription: XSubscription | null;
+  isClerkAuthenticated?: boolean;
+}
+
 // 支付供应商类型
 export type PaymentProvider = 'stripe' | 'apple' | 'paypal' | 'wechat' | 'alipay'  ;
 
@@ -32,24 +42,40 @@ export interface EnhancePricePlan {
   credits?: number;
 }
 
-// 产品配置
-export interface ProductConfig {
+// 订阅产品配置
+export interface SubscriptionProductConfig {
   key: string;
-  name: string;
-  plans: {
-    monthly: EnhancePricePlan;
-    yearly: EnhancePricePlan;
-  };
+  plans: Record<string, EnhancePricePlan>;
+}
+
+// 积分包产品配置
+export interface CreditPackProductConfig {
+  key: string;
+  priceId: string;
+  amount: number;
+  currency: string;
+  credits: number;
 }
 
 // 支付供应商配置
 export interface PaymentProviderConfig {
   provider: PaymentProvider;
   enabled: boolean;
-  products: {
-    free: ProductConfig;
-    pro: ProductConfig;
-    ultra: ProductConfig;
+  subscriptionProducts?: {
+    F1: SubscriptionProductConfig;
+    P2: SubscriptionProductConfig;
+    U3: SubscriptionProductConfig;
+  };
+  creditPackProducts?: {
+    F1: CreditPackProductConfig;
+    P2: CreditPackProductConfig;
+    U3: CreditPackProductConfig;
+  };
+  // 兼容旧结构
+  products?: {
+    F1: SubscriptionProductConfig;
+    P2: SubscriptionProductConfig;
+    U3: SubscriptionProductConfig;
   };
 }
 
@@ -71,27 +97,39 @@ export interface MoneyPriceProps {
   locale: string;
   config: MoneyPriceConfig;
   className?: string;
-  upgradeApiEndpoint?: string;
-  signInPath?: string;
+  checkoutApiEndpoint?: string;
+  customerPortalApiEndpoint?: string;
+  enableClerkModal?: boolean;
   sectionClassName?: string;
+  enabledBillingTypes?: string[];
+  enableSubscriptionUpgrade?: boolean;
+  initUserContext?: InitUserContext;
+  initialBillingType?: string;
 }
 
 // 交互组件属性
 export interface MoneyPriceInteractiveProps {
   data: MoneyPriceData;
   config: MoneyPriceConfig;
-  upgradeApiEndpoint?: string;
-  signInPath?: string;
+  checkoutApiEndpoint?: string;
+  customerPortalApiEndpoint?: string;
+  enableClerkModal?: boolean;
+  enabledBillingTypes?: string[];
+  enableSubscriptionUpgrade?: boolean;
+  initialBillingType?: string;
+  disableAutoDetectBilling?: boolean;
+  initUserContext?: InitUserContext;
 }
 
 // 按钮组件属性
 export interface MoneyPriceButtonProps {
-  planKey: 'free' | 'pro' | 'ultra';
+  planKey: 'F1' | 'P2' | 'U3';
   userContext: UserContext;
-  billingType: 'monthly' | 'yearly';
-  onLogin: () => void;
-  onUpgrade: (plan: string, billingType: string) => void | Promise<void>;
+  billingType: string;
+  onAuth: () => void;
+  onAction: (plan: string, billingType: string) => void | Promise<void>;
   texts: {
+    buyCredits: string;
     getStarted: string;
     getPro: string;
     getUltra: string;
@@ -99,6 +137,8 @@ export interface MoneyPriceButtonProps {
     upgrade: string;
   };
   isProcessing?: boolean;
+  isInitLoading: boolean;
+  enableSubscriptionUpgrade?: boolean;
 }
 
 // 数据结构
@@ -115,7 +155,7 @@ export interface MoneyPriceData {
     }>;
     defaultKey: string;
   };
-  plans: Array<{
+  subscriptionPlans: Array<{
     key: string;
     title: string;
     showBillingSubTitle?: boolean;
@@ -127,7 +167,21 @@ export interface MoneyPriceData {
       tooltip?: string;
     }>;
   }>;
+  creditsPlans: Array<{
+    key: string;
+    title: string;
+    subtitle?: string;
+    showBillingSubTitle?: boolean;
+    titleTags?: string[];
+    features?: Array<{
+      description: string;
+      icon?: string;
+      tag?: string;
+      tooltip?: string;
+    }>;
+  }>;
   buttonTexts: {
+    buyCredits: string;
     getStarted: string;
     getPro: string;
     getUltra: string;
@@ -135,4 +189,4 @@ export interface MoneyPriceData {
     upgrade: string;
   };
   currency: string;
-}
+}

package/src/main/money-price/money-price.tsx

@@ -1,284 +1,45 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { cn } from '@windrun-huaiin/lib/utils';
-import { getTranslations } from 'next-intl/server';
-import { getActiveProviderConfig } from './money-price-config-util';
 import { MoneyPriceInteractive } from './money-price-interactive';
-import type { MoneyPriceProps, MoneyPriceData } from './money-price-types';
+import type { MoneyPriceProps } from './money-price-types';
+import { buildMoneyPriceData } from './money-price-data';
 
-export async function MoneyPrice({ 
-  locale, 
+export async function MoneyPrice({
+  locale,
   config,
-  upgradeApiEndpoint,
-  signInPath,
-  sectionClassName
+  checkoutApiEndpoint,
+  customerPortalApiEndpoint,
+  enableClerkModal = false,
+  sectionClassName,
+  enabledBillingTypes,
+  enableSubscriptionUpgrade = true,
+  initUserContext,
+  initialBillingType,
 }: MoneyPriceProps) {
-  const t = await getTranslations({ locale, namespace: 'moneyPrice' });
-  
-  const data: MoneyPriceData = {
-    title: t('title'),
-    subtitle: t('subtitle'),
-    billingSwitch: t.raw('billingSwitch') as {
-      options: Array<{
-        key: string;
-        name: string;
-        unit: string;
-        discountText: string;
-        subTitle?: string;
-      }>;
-      defaultKey: string;
-    },
-    plans: t.raw('plans') as Array<any>,
-    buttonTexts: t.raw('buttonTexts') as {
-      getStarted: string;
-      getPro: string;
-      getUltra: string;
-      currentPlan: string;
-      upgrade: string;
-    },
-    currency: config.display.currency
-  };
-
-  const providerConfig = getActiveProviderConfig(config);
-  const minPlanFeaturesCount = config.display.minFeaturesCount;
-
-  const defaultBilling = data.billingSwitch.defaultKey;
-  const defaultBillingDisplay = data.billingSwitch.options.find(
-    (opt: any) => opt.key === defaultBilling
-  ) || data.billingSwitch.options[0];
-
-  const maxFeaturesCount = Math.max(
-    ...data.plans.map((plan: any) => plan.features?.length || 0),
-    minPlanFeaturesCount || 0
-  );
-
-  const getFeatureRows = (plan: any) => {
-    const features = plan.features || [];
-    const filled = [...features];
-    while (filled.length < maxFeaturesCount) filled.push(null);
-    return filled;
-  };
-
-  function renderPrice(plan: any, billingKey = data.billingSwitch.defaultKey) {
-    const productConfig = providerConfig.products[plan.key as 'free' | 'pro' | 'ultra'];
-    const pricing = productConfig.plans[billingKey as 'monthly' | 'yearly'];
-    const currentBillingDisplay = data.billingSwitch.options.find(
-      (opt: any) => opt.key === billingKey
-    ) || defaultBillingDisplay;
-    const billingSubTitle = currentBillingDisplay?.subTitle || '';
-    
-    if (pricing.amount === 0) {
-      return (
-        <div className="flex flex-col items-start w-full" data-price-container={plan.key}>
-          <div className="flex items-end gap-2">
-            <span className="text-4xl font-extrabold text-gray-900 dark:text-gray-100" data-price-value={plan.key}>
-              Free
-            </span>
-          </div>
-          <div className="flex items-center gap-2 min-h-[24px] mt-1">
-            <span className={cn('text-xs text-gray-700 dark:text-gray-300 font-medium', 
-              plan.showBillingSubTitle === false && 'opacity-0 select-none')} 
-              data-price-subtitle={plan.key}>
-              {plan.showBillingSubTitle === false ? '' : billingSubTitle}
-            </span>
-          </div>
-        </div>
-      );
-    }
-    
-    const hasDiscount = pricing.discountPercent && pricing.discountPercent > 0;
-    const unit = currentBillingDisplay.unit || '';
-    let discountText = '';
-    
-    if (hasDiscount && currentBillingDisplay.discountText) {
-      discountText = currentBillingDisplay.discountText.replace(
-        '{percent}', 
-        String(pricing.discountPercent)
-      );
-    }
-    
-    return (
-      <div className="flex flex-col items-start w-full" data-price-container={plan.key}>
-        <div className="flex items-end gap-2">
-          <span className="text-4xl font-extrabold text-gray-900 dark:text-gray-100" data-price-value={plan.key}>
-            {data.currency}{pricing.amount}
-          </span>
-          <span className="text-lg text-gray-700 dark:text-gray-300 font-medium mb-1" data-price-unit={plan.key}>
-            {unit}
-          </span>
-        </div>
-        <div className="flex items-center gap-2 min-h-[24px] mt-1">
-          {hasDiscount && pricing.originalAmount && (
-            <>
-              <span className="text-base text-gray-400 line-through" data-price-original={plan.key}>
-                {data.currency}{pricing.originalAmount}
-              </span>
-              {discountText && (
-                <span className="px-2 py-0.5 text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle" 
-                  data-price-discount={plan.key}>
-                  {discountText}
-                </span>
-              )}
-            </>
-          )}
-          <span className={cn('text-xs text-gray-700 dark:text-gray-300 font-medium', 
-            plan.showBillingSubTitle === false && 'opacity-0 select-none')} 
-            data-price-subtitle={plan.key}>
-            {plan.showBillingSubTitle === false ? '' : billingSubTitle}
-          </span>
-        </div>
-      </div>
-    );
-  }
+  const data = await buildMoneyPriceData({
+    locale,
+    currency: config.display.currency,
+    enabledBillingTypes,
+  });
 
   return (
-    <section id="money-pricing" className={cn("px-4 py-10 md:px-16 md:py-16 mx-auto max-w-7xl scroll-mt-10", sectionClassName)}>
+    <section id="money-pricing" className={cn("px-4 py-4 md:px-16 md:py-8 mx-auto max-w-7xl scroll-mt-10", sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-3">
         {data.title}
       </h2>
-      <p className="text-center text-gray-600 dark:text-gray-400 mb-8 text-base md:text-lg mx-auto">
+      <p className="text-center text-gray-600 dark:text-gray-400 mb-4 text-base md:text-lg mx-auto">
         {data.subtitle}
       </p>
-
-      {/* billing switch button */}
-      <div className="flex flex-col items-center">
-        <div className="flex items-center relative mb-3">
-          <div className="flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1" data-billing-switch>
-            <button
-              className={cn(
-                'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
-                data.billingSwitch.defaultKey === 'monthly'
-                  ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
-                  : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'
-              )}
-              data-billing-button="monthly"
-              type="button"
-            >
-              {(data.billingSwitch.options.find((opt: any) => opt.key === 'monthly')?.name) || 'Monthly'}
-            </button>
-            <button
-              className={cn(
-                'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
-                data.billingSwitch.defaultKey === 'yearly'
-                  ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
-                  : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'
-              )}
-              data-billing-button="yearly"
-              type="button"
-            >
-              {(data.billingSwitch.options.find((opt: any) => opt.key === 'yearly')?.name) || 'Yearly'}
-            </button>
-          </div>
-        </div>
-        
-        {/* Discount info - static for default billing */}
-        <div className="h-8 flex items-center justify-center mb-3" data-discount-info>
-          {(() => {
-            const opt = data.billingSwitch.options.find((opt: any) => opt.key === data.billingSwitch.defaultKey);
-            
-            let hasDiscount = false;
-            let discountPercent = 0;
-            
-            ['pro', 'ultra'].forEach(planKey => {
-              const product = providerConfig.products[planKey as 'pro' | 'ultra'];
-              const pricing = product.plans[data.billingSwitch.defaultKey as 'monthly' | 'yearly'];
-              if (pricing.discountPercent) {
-                hasDiscount = true;
-                discountPercent = pricing.discountPercent;
-              }
-            });
-            
-            if (!(opt && hasDiscount && opt.discountText)) return null;
-            
-            return (
-              <span className="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap">
-                {opt.discountText.replace(
-                  '{percent}',
-                  String(discountPercent)
-                )}
-              </span>
-            );
-          })()}
-        </div>
-      </div>
-
-      {/* price card area */}
-
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
-        {data.plans.map((plan: any, _idx: number) => (
-          <div
-            key={plan.key}
-            data-price-plan={plan.key}
-            className={cn(
-              'flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-8 h-full shadow-sm dark:shadow-none min-w-[350px]',
-              'hover:border-2 hover:border-purple-500',
-              'focus-within:border-2 focus-within:border-purple-500'
-            )}
-            style={{ minHeight: maxFeaturesCount*100 }}
-          >
-            <div className="flex items-center gap-2 mb-2">
-              <span className="text-xl font-bold text-gray-900 dark:text-gray-100">{plan.title}</span>
-              {plan.titleTags && plan.titleTags.map((tag: string, i: number) => (
-                <span key={i} className="px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle">
-                  {tag}
-                </span>
-              ))}
-            </div>
-            
-            {renderPrice(plan)}
-            
-            <ul className="flex-1 mb-6 mt-4">
-              {getFeatureRows(plan).map((feature: any, i: number) => (
-                <li key={i} className="flex items-center gap-2 mb-2 min-h-[28px]" data-feature-item={`${plan.key}-${i}`}>
-                  {feature ? (
-                    <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1">
-                      {feature.icon ? <span>{feature.icon}</span> : <span className="font-bold">✓</span>}
-                    </span>
-                  ) : (
-                    <span className="inline-flex items-center justify-center w-5 h-5 rounded-full mr-1">&nbsp;</span>
-                  )}
-                  {feature && feature.tag && (
-                    <span className="px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle">
-                      {feature.tag}
-                    </span>
-                  )}
-                  {feature ? (
-                    <span className="relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200">
-                      {feature.description}
-                      {feature.tooltip && (
-                        <span
-                          className="ml-1 align-middle inline-flex"
-                          data-tooltip-trigger={`${plan.key}-${i}`}
-                          data-tooltip-content={feature.tooltip}
-                        >
-                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
-                              d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                          </svg>
-                        </span>
-                      )}
-                    </span>
-                  ) : (
-                    <span>&nbsp;</span>
-                  )}
-                </li>
-              ))}
-            </ul>
-            
-            <div className="flex-1" />
-            
-            <div data-button-placeholder={plan.key} className="w-full">
-              {/* Button will be injected by client-side component */}
-            </div>
-          </div>
-        ))}
-      </div>
-      
-      <MoneyPriceInteractive 
+      <MoneyPriceInteractive
         data={data}
         config={config}
-        upgradeApiEndpoint={upgradeApiEndpoint}
-        signInPath={signInPath}
+        checkoutApiEndpoint={checkoutApiEndpoint}
+        customerPortalApiEndpoint={customerPortalApiEndpoint}
+        enableClerkModal={enableClerkModal}
+        enabledBillingTypes={enabledBillingTypes}
+        enableSubscriptionUpgrade={enableSubscriptionUpgrade}
+        initUserContext={initUserContext}
+        initialBillingType={initialBillingType}
       />
     </section>
   );
-}
+}

package/src/main/price-plan.tsx

@@ -176,7 +176,7 @@ export async function PricePlan({
               className={cn(
                 'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
                 data.billingSwitch.defaultKey === 'monthly'
-                  ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+                  ? 'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
                   : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'
               )}
               data-billing-button="monthly"
@@ -188,7 +188,7 @@ export async function PricePlan({
               className={cn(
                 'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
                 data.billingSwitch.defaultKey === 'yearly'
-                  ? 'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+                  ? 'text-white bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
                   : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'
               )}
               data-billing-button="yearly"
@@ -285,7 +285,7 @@ export async function PricePlan({
                 'w-full py-2 mt-auto text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full',
                 plan.button?.disabled
                   ? 'bg-gray-400 cursor-not-allowed'
-                  : 'bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700'
+                  : 'bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700'
               )}
               disabled={plan.button?.disabled}
               type="button"

package/src/main/section-layout.ts

@@ -0,0 +1,5 @@
+
+const sectionSpacing = "px-4 py-10 sm:px-6 md:px-8 lg:px-10 scroll-mt-20";
+const wideWidth = "max-w-6xl min-w-[calc(100vw-22rem)] ";
+
+export const responsiveSection = `mx-auto ${wideWidth} ${sectionSpacing}`;

package/src/main/seo-content.tsx

@@ -2,6 +2,7 @@
 import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from '@third-ui/main/rich-text-expert';
+import { responsiveSection } from './section-layout';
 
 interface SeoSection {
   id: string;
@@ -47,7 +48,7 @@ export async function SeoContent({
   };
 
   return (
-    <section id="seo" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
+    <section id="seo" className={cn(responsiveSection, sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-8">
         {data.title} <span className="text-purple-500">{data.eyesOn}</span>
       </h2>
@@ -75,4 +76,3 @@ export async function SeoContent({
     </section>
   )
 }
-

package/src/main/server.ts

@@ -1,5 +1,5 @@
 // Main application Server components
-export * from './gallery';
+export * from './gallery/gallery-server';
 export * from './usage';
 export * from './features';
 export * from './tips'; 
@@ -8,13 +8,22 @@ export * from './seo-content';
 export * from './cta';
 export * from './footer';
 export * from './price-plan';
+export { CreditOverview } from './credit/credit-overview';
+export type {
+  CreditOverviewData,
+  CreditBucket,
+  CreditBucketStatus,
+  SubscriptionInfo,
+} from './credit/types';
 
 // Money Price Server Component and Types
 export { MoneyPrice } from './money-price/money-price';
 export {
-  getActiveProviderConfig,
-  getProductPricing
+  getActiveProviderConfigUtil,
+  getCreditsFromPriceIdUtil,
+  getPriceConfigUtil
 } from './money-price/money-price-config-util';
+export { buildMoneyPriceData } from './money-price/money-price-data';
 
 // Money Price Types (shared between server and client)
 export type {
@@ -23,10 +32,12 @@ export type {
   MoneyPriceInteractiveProps,
   MoneyPriceButtonProps,
   MoneyPriceData,
+  InitUserContext,
   PaymentProvider,
   PaymentProviderConfig,
   EnhancePricePlan,
-  ProductConfig,
+  SubscriptionProductConfig,
+  CreditPackProductConfig,
   UserContext
 } from './money-price/money-price-types';
 

package/src/main/tips.tsx

@@ -1,6 +1,7 @@
 import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from '@third-ui/main/rich-text-expert';
+import { responsiveSection } from './section-layout';
 
 interface TipSection {
   id: string;
@@ -48,7 +49,7 @@ export async function Tips({
   };
 
   return (
-    <section id="tips" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
+    <section id="tips" className={cn(responsiveSection, sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">
         {data.title} <span className="text-purple-500">{data.eyesOn}</span>
       </h2>
@@ -67,4 +68,3 @@ export async function Tips({
     </section>
   )
 }
-

package/src/main/usage.tsx

@@ -2,6 +2,7 @@ import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { globalLucideIcons as icons, getGlobalIcon } from '@windrun-huaiin/base-ui/components/server'
 import { richText } from '@third-ui/main/rich-text-expert';
+import { responsiveSection } from './section-layout';
 
 interface UsageData {
   title: string;
@@ -46,11 +47,11 @@ export async function Usage({
   };
 
   return (
-    <section id="usage" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
+    <section id="usage" className={cn(responsiveSection, sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
         {data.title} <span className="text-purple-500">{data.eyesOn}</span>
       </h2>
-      <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap">
+      <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl">
         {data.description}
       </p>
       <div className="bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none">
@@ -59,7 +60,7 @@ export async function Usage({
             const Icon = getGlobalIcon(step.iconKey);
             return (
               <div key={step.id} data-usage-step={step.id} className="flex items-start">
-                <div className="flex-shrink-0 mr-4">
+                <div className="shrink-0 mr-4">
                   <Icon className="w-8 h-8 text-purple-500" />
                 </div>
                 <div>
@@ -76,4 +77,3 @@ export async function Usage({
     </section>
   )
 }
-