@windrun-huaiin/third-ui 5.14.2 → 6.1.0

package/src/main/price-plan.tsx

@@ -1,14 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-'use client';
-
-import React, { useState } from 'react'
-import { useTranslations } from 'next-intl'
 import { cn } from '@lib/utils';
-import { globalLucideIcons as icons } from '@base-ui/components/global-icon'
-import { useRouter } from 'next/navigation';
+import { getTranslations } from 'next-intl/server';
+import { PricePlanInteractive } from './price-plan-interactive';
 
 export interface PricePlanProps {
-  // default is $
+  locale: string
   currency?: string
   pricePlanConfig: PricePlanAppConfig
   sectionClassName?: string
@@ -30,9 +26,10 @@ export interface PricePlanAppConfig {
   minPlanFeaturesCount: number
 }
 
-export function PricePlan({ currency = '$', pricePlanConfig, sectionClassName }: PricePlanProps) {
-  const t = useTranslations('pricePlan')
-  const billingSwitch = t.raw('billingSwitch') as {
+interface PricePlanData {
+  title: string;
+  subtitle: string;
+  billingSwitch: {
     options: Array<{
       key: string
       name: string
@@ -41,175 +38,172 @@ export function PricePlan({ currency = '$', pricePlanConfig, sectionClassName }:
       subTitle?: string
     }>
     defaultKey: string
-  }
-  const plans = t.raw('plans') as Array<any>
-  const router = useRouter();
-
-  // price plan config
-  const billingOptions = pricePlanConfig.billingOptions
-  const prices = pricePlanConfig.prices
-  const minPlanFeaturesCount = pricePlanConfig.minPlanFeaturesCount
-
-  // current billing key
-  const [billingKey, setBillingKey] = useState(billingSwitch.defaultKey)
+  };
+  plans: Array<any>;
+  currency: string;
+  pricePlanConfig: PricePlanAppConfig;
+}
 
-  // tooltip state
-  const [tooltip, setTooltip] = useState<{
-    show: boolean
-    content: string
-    x: number
-    y: number
-  }>({ show: false, content: '', x: 0, y: 0 })
+export async function PricePlan({ 
+  locale, 
+  currency = '$', 
+  pricePlanConfig, 
+  sectionClassName 
+}: PricePlanProps) {
+  const t = await getTranslations({ locale, namespace: 'pricePlan' })
+  
+  const data: PricePlanData = {
+    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>,
+    currency,
+    pricePlanConfig
+  };
 
-  // get current billing config and display config
-  const currentBilling = billingOptions.find((opt: any) => opt.key === billingKey) || billingOptions[0]
-  const currentBillingDisplay = billingSwitch.options.find((opt: any) => opt.key === billingKey) || billingSwitch.options[0]
+  // Static data processing for server-side rendering
+  const billingOptions = data.pricePlanConfig.billingOptions;
+  const prices = data.pricePlanConfig.prices;
+  const minPlanFeaturesCount = data.pricePlanConfig.minPlanFeaturesCount;
+  
+  // Use default billing for static rendering
+  const defaultBilling = billingOptions.find((opt: any) => opt.key === data.billingSwitch.defaultKey) || billingOptions[0];
+  const defaultBillingDisplay = data.billingSwitch.options.find((opt: any) => opt.key === data.billingSwitch.defaultKey) || data.billingSwitch.options[0];
 
-  // calculate features count
+  // Calculate features count
   const maxFeaturesCount = Math.max(
-    ...plans.map((plan: any) => plan.features?.length || 0),
+    ...data.plans.map((plan: any) => plan.features?.length || 0),
     minPlanFeaturesCount || 0
-  )
+  );
 
-  // handle card height alignment
+  // Handle card height alignment
   const getFeatureRows = (plan: any) => {
-    const features = plan.features || []
-    const filled = [...features]
-    while (filled.length < maxFeaturesCount) filled.push(null)
-    return filled
-  }
+    const features = plan.features || [];
+    const filled = [...features];
+    while (filled.length < maxFeaturesCount) filled.push(null);
+    return filled;
+  };
 
-  // price render logic
-  function renderPrice(plan: any) {
+  // Static price render logic for default billing
+  function renderPrice(plan: any, billingKey = data.billingSwitch.defaultKey) {
     const priceValue = prices[plan.key];
-    // current billing subTitle
-    const billingSubTitle = billingSwitch.options.find((opt: any) => opt.key === billingKey)?.subTitle || '';
-    // non-numeric (like 'Custom') directly display
+    const currentBilling = billingOptions.find((opt: any) => opt.key === billingKey) || defaultBilling;
+    const currentBillingDisplay = data.billingSwitch.options.find((opt: any) => opt.key === billingKey) || defaultBillingDisplay;
+    const billingSubTitle = currentBillingDisplay?.subTitle || '';
+    
+    // Non-numeric (like 'Custom') directly display
     if (typeof priceValue !== 'number' || isNaN(priceValue)) {
       return (
-        <div className="flex flex-col items-start w-full">
+        <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">{priceValue}</span>
+            <span className="text-4xl font-extrabold text-gray-900 dark:text-gray-100" data-price-value={plan.key}>{priceValue}</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')}>
+            <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>
       );
     }
-    // numeric price logic
-    const originValue = Number(priceValue)
-    const discount = currentBilling.discount
-    const hasDiscount = discount !== 0
-    const saleValue = originValue * (1 - discount)
-    // format price, keep 2 decimal places but remove trailing 0
-    const formatPrice = (v: number) => Number(v.toFixed(2)).toString()
-    const unit = currentBillingDisplay.unit || ''
-    let discountText = ''
+    
+    // Numeric price logic
+    const originValue = Number(priceValue);
+    const discount = currentBilling.discount;
+    const hasDiscount = discount !== 0;
+    const saleValue = originValue * (1 - discount);
+    const formatPrice = (v: number) => Number(v.toFixed(2)).toString();
+    const unit = currentBillingDisplay.unit || '';
+    let discountText = '';
     if (hasDiscount && currentBillingDisplay.discountText) {
-      discountText = currentBillingDisplay.discountText.replace('{percent}', String(Math.round(Math.abs(discount) * 100)))
+      discountText = currentBillingDisplay.discountText.replace('{percent}', String(Math.round(Math.abs(discount) * 100)));
     }
-    // show NaN when price is negative
-    const showNaN = saleValue < 0
+    const showNaN = saleValue < 0;
+    
     return (
-      <div className="flex flex-col items-start w-full">
+      <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">
-            {currency}{showNaN ? 'NaN' : (hasDiscount ? formatPrice(saleValue) : formatPrice(originValue))}
+          <span className="text-4xl font-extrabold text-gray-900 dark:text-gray-100" data-price-value={plan.key}>
+            {data.currency}{showNaN ? 'NaN' : (hasDiscount ? formatPrice(saleValue) : formatPrice(originValue))}
           </span>
-          <span className="text-lg text-gray-700 dark:text-gray-300 font-medium mb-1">{unit}</span>
+          <span className="text-lg text-gray-700 dark:text-gray-300 font-medium mb-1" data-price-unit={plan.key}>{unit}</span>
         </div>
-        {/* sub title row, always take place */}
         <div className="flex items-center gap-2 min-h-[24px] mt-1">
           {hasDiscount && (
             <>
-              <span className="text-base text-gray-400 line-through">{currency}{showNaN ? 'NaN' : formatPrice(originValue)}</span>
+              <span className="text-base text-gray-400 line-through" data-price-original={plan.key}>
+                {data.currency}{showNaN ? 'NaN' : formatPrice(originValue)}
+              </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">{discountText}</span>
+                <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')}>
+          <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>
-    )
-  }
-
-  // tooltip component
-  const Tooltip = ({ show, content, x, y }: typeof tooltip) => {
-    if (!show) return null
-    // simple boundary handling, prevent overflow
-    const style: React.CSSProperties = {
-      position: 'fixed',
-      left: Math.max(8, x),
-      top: Math.max(8, y),
-      zIndex: 9999,
-      maxWidth: 200,
-      transform: 'translateY(-50%)',
-      pointerEvents: 'none',
-      whiteSpace: 'pre-line',
-    }
-    return (
-      <div 
-        style={style}
-        className="bg-gray-700 dark:bg-gray-200 text-gray-100 dark:text-gray-800 text-xs leading-relaxed px-3 py-2 rounded-lg shadow-lg border border-gray-300 dark:border-gray-600 backdrop-blur-sm"
-      >
-        {content}
-      </div>
-    )
+    );
   }
 
   return (
     <section id="pricing" className={cn("px-4 py-10 md:px-16 md:py-16 mx-auto max-w-7xl scroll-mt-10", sectionClassName)}>
       {/* title and subtitle */}
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-3">
-        {t('title')}
+        {data.title}
       </h2>
       <p className="text-center text-gray-600 dark:text-gray-400 mb-8 text-base md:text-lg mx-auto">
-        {t('subtitle')}
+        {data.subtitle}
       </p>
 
       {/* billing switch button */}
       <div className="flex flex-col items-center">
-        {/* Binary toggle buttons */}
         <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">
+          <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',
-                billingKey === 'monthly'
+                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'
               )}
-              onClick={() => setBillingKey('monthly')}
+              data-billing-button="monthly"
               type="button"
             >
-              {(billingSwitch.options.find((opt: any) => opt.key === 'monthly')?.name) || 'Monthly'}
+              {(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',
-                billingKey === 'yearly'
+                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'
               )}
-              onClick={() => setBillingKey('yearly')}
+              data-billing-button="yearly"
               type="button"
             >
-              {(billingSwitch.options.find((opt: any) => opt.key === 'yearly')?.name) || 'Yearly'}
+              {(data.billingSwitch.options.find((opt: any) => opt.key === 'yearly')?.name) || 'Yearly'}
             </button>
           </div>
         </div>
         
-        {/* Discount info - fixed position between buttons and cards */}
-        <div className="h-8 flex items-center justify-center mb-3">
+        {/* Discount info - static for default billing */}
+        <div className="h-8 flex items-center justify-center mb-3" data-discount-info>
           {(() => {
-            const opt = billingSwitch.options.find((opt: any) => opt.key === billingKey);
-            const bOpt = billingOptions.find((opt: any) => opt.key === billingKey);
+            const opt = data.billingSwitch.options.find((opt: any) => opt.key === data.billingSwitch.defaultKey);
+            const bOpt = billingOptions.find((opt: any) => opt.key === data.billingSwitch.defaultKey);
             if (!(opt && bOpt && opt.discountText && bOpt.discount !== 0)) 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">
@@ -225,9 +219,10 @@ export function PricePlan({ currency = '$', pricePlanConfig, sectionClassName }:
 
       {/* price card area */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        {plans.map((plan: any, _idx: number) => (
+        {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',
               'hover:border-2 hover:border-purple-500',
@@ -247,7 +242,7 @@ export function PricePlan({ currency = '$', pricePlanConfig, sectionClassName }:
             {/* feature list */}
             <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]">
+                <li key={i} className="flex items-center gap-2 mb-2 min-h-[28px]" data-feature-item={`${plan.key}-${i}`}>
                   {/* icon */}
                   {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">
@@ -267,20 +262,12 @@ export function PricePlan({ currency = '$', pricePlanConfig, sectionClassName }:
                       {feature.tooltip && (
                         <span
                           className="ml-1 align-middle inline-flex"
-                          onMouseEnter={e => {
-                            setTooltip({
-                              show: true,
-                              content: feature.tooltip,
-                              x: e.clientX,
-                              y: e.clientY
-                            })
-                          }}
-                          onMouseMove={e => {
-                            setTooltip(t => ({ ...t, x: e.clientX, y: e.clientY }))
-                          }}
-                          onMouseLeave={() => setTooltip(t => ({ ...t, show: false }))}
+                          data-tooltip-trigger={`${plan.key}-${i}`}
+                          data-tooltip-content={feature.tooltip}
                         >
-                          <icons.FAQ className="w-4 h-4" />
+                          <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>
@@ -302,19 +289,15 @@ export function PricePlan({ currency = '$', pricePlanConfig, sectionClassName }:
               )}
               disabled={plan.button?.disabled}
               type="button"
-              onClick={() => {
-                if (!plan.button?.disabled) {
-                  router.push('/');
-                }
-              }}
+              data-plan-button={plan.key}
             >
               {plan.button?.text || '--'}
             </button>
           </div>
         ))}
       </div>
-      {/* tooltip hover msg */}
-      <Tooltip {...tooltip} />
+      
+      <PricePlanInteractive data={data} />
     </section>
   )
 } 

package/src/main/seo-content.tsx

@@ -1,42 +1,75 @@
 /* eslint-disable react/no-unescaped-entities */
-'use client'
-
-import { useTranslations } from 'next-intl'
+import { getTranslations } from 'next-intl/server';
 import { cn } from '@lib/utils';
 import { richText } from '@third-ui/main/rich-text-expert';
 
-interface Section {
+interface SeoSection {
+  id: string;
   title: string;
   content: string;
 }
 
-export function SeoContent({ sectionClassName }: { sectionClassName?: string }) {
-  const t = useTranslations('seoContent');
+interface SeoContentData {
+  title: string;
+  eyesOn: string;
+  description: string;
+  intro: string;
+  sections: SeoSection[];
+  conclusion: string;
+}
+
+export async function SeoContent({ 
+  locale, 
+  sectionClassName 
+}: { 
+  locale: string;
+  sectionClassName?: string;
+}) {
+  const t = await getTranslations({ locale, namespace: 'seoContent' });
+  
+  // Process translation data
+  const rawSections = t.raw('sections') as Array<{
+    title: string;
+    content: string;
+  }>;
+  
+  const data: SeoContentData = {
+    title: t('title'),
+    eyesOn: t('eyesOn'),
+    description: t('description'),
+    intro: richText(t, 'intro'),
+    sections: rawSections.map((section, index) => ({
+      id: `seo-section-${index}`,
+      title: section.title,
+      content: richText(t, `sections.${index}.content`)
+    })),
+    conclusion: richText(t, 'conclusion')
+  };
 
   return (
     <section id="seo" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-8">
-        {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
+        {data.title} <span className="text-purple-500">{data.eyesOn}</span>
       </h2>
       <h3 className="text-center text-gray-600 dark:text-gray-400 mb-12 text-lg">
-        {t('description')}
+        {data.description}
       </h3>
       <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">
         <div className="space-y-10">
           <p className="text-gray-600 dark:text-gray-400 text-lg">
-            {richText(t, 'intro')}
+            {data.intro}
           </p>
-          {t.raw('sections').map((section: Section, index: number) => (
-            <div key={index}>
+          {data.sections.map((section) => (
+            <div key={section.id} data-seo-section={section.id}>
               <h2 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center">
                 {section.title}
               </h2>
-              <p className="text-gray-700 dark:text-gray-300">{richText(t, `sections.${index}.content`)}</p>
+              <p className="text-gray-700 dark:text-gray-300">{section.content}</p>
             </div>
           ))}
         </div>
         <p className="mt-10 text-gray-600 dark:text-gray-400 text-lg">
-          {richText(t, 'conclusion')}
+          {data.conclusion}
         </p>
       </div>
     </section>

package/src/main/server.ts

@@ -0,0 +1,10 @@
+// Main application Server components
+export * from './gallery';
+export * from './usage';
+export * from './features';
+export * from './tips'; 
+export * from './faq';
+export * from './seo-content';
+export * from './cta';
+export * from './footer';
+export * from './price-plan';

package/src/main/tips.tsx

@@ -1,40 +1,66 @@
-'use client'
-
-import { useTranslations } from 'next-intl'
+import { getTranslations } from 'next-intl/server';
 import { cn } from '@lib/utils';
 import { richText } from '@third-ui/main/rich-text-expert';
 
-interface Tip {
+interface TipSection {
+  id: string;
   title: string;
   description: string;
 }
 
-export function Tips({ sectionClassName }: { sectionClassName?: string }) {
-  const t = useTranslations('tips');
-  const sections = t.raw('sections') as Tip[];
+interface TipsData {
+  title: string;
+  eyesOn: string;
+  leftColumn: TipSection[];
+  rightColumn: TipSection[];
+}
+
+export async function Tips({ 
+  locale, 
+  sectionClassName 
+}: { 
+  locale: string;
+  sectionClassName?: string;
+}) {
+  const t = await getTranslations({ locale, namespace: 'tips' });
+  
+  // Process translation data
+  const sections = t.raw('sections') as Array<{
+    title: string;
+    description: string;
+  }>;
+  
+  const processedSections = sections.map((section, index) => ({
+    id: `tip-section-${index}`,
+    title: section.title,
+    description: richText(t, `sections.${index}.description`)
+  }));
+  
+  const midPoint = Math.ceil(processedSections.length / 2);
+  const leftColumn = processedSections.slice(0, midPoint);
+  const rightColumn = processedSections.slice(midPoint);
   
-  const midPoint = Math.ceil(sections.length / 2);
-  const leftColumn = sections.slice(0, midPoint);
-  const rightColumn = sections.slice(midPoint);
+  const data: TipsData = {
+    title: t('title'),
+    eyesOn: t('eyesOn'),
+    leftColumn,
+    rightColumn
+  };
 
   return (
     <section id="tips" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">
-        {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
+        {data.title} <span className="text-purple-500">{data.eyesOn}</span>
       </h2>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-12 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">
-        {[leftColumn, rightColumn].map((column: Tip[], colIndex) => (
+        {[data.leftColumn, data.rightColumn].map((column: TipSection[], colIndex) => (
           <div key={colIndex} className="space-y-8">
-            {column.map((tip: Tip, tipIndex) => {
-              // calculate the actual index in the original array
-              const actualIndex = colIndex === 0 ? tipIndex : tipIndex + midPoint;
-              return (
-                <div key={tipIndex} className="space-y-4">
-                  <h3 className="text-2xl font-semibold">{tip.title}</h3>
-                  <p className="">{richText(t, `sections.${actualIndex}.description`)}</p>
-                </div>
-              );
-            })}
+            {column.map((tip: TipSection) => (
+              <div key={tip.id} data-tip-id={tip.id} className="space-y-4">
+                <h3 className="text-2xl font-semibold">{tip.title}</h3>
+                <p className="">{tip.description}</p>
+              </div>
+            ))}
           </div>
         ))}
       </div>

package/src/main/usage.tsx

@@ -1,40 +1,72 @@
-'use client'
-
-import { useTranslations } from 'next-intl'
+import { getTranslations } from 'next-intl/server';
 import { cn } from '@lib/utils';
 import { globalLucideIcons as icons, getGlobalIcon } from '@base-ui/components/global-icon'
 import { richText } from '@third-ui/main/rich-text-expert';
 
-export function Usage({ sectionClassName }: { sectionClassName?: string }) {
-  const t = useTranslations('usage');
+interface UsageData {
+  title: string;
+  eyesOn: string;
+  description: string;
+  steps: Array<{
+    id: string;
+    title: string;
+    description: string;
+    iconKey: keyof typeof icons;
+    stepNumber: number;
+  }>;
+}
+
+export async function Usage({ 
+  locale, 
+  sectionClassName 
+}: { 
+  locale: string;
+  sectionClassName?: string;
+}) {
+  const t = await getTranslations({ locale, namespace: 'usage' });
+  
+  // Process translation data
   const steps = t.raw('steps') as Array<{
     title: string;
     description: string;
     iconKey: keyof typeof icons;
   }>;
+  
+  const data: UsageData = {
+    title: t('title'),
+    eyesOn: t('eyesOn'),
+    description: richText(t, 'description'),
+    steps: steps.map((step, index) => ({
+      id: `usage-step-${index}`,
+      title: step.title,
+      description: richText(t, `steps.${index}.description`),
+      iconKey: step.iconKey,
+      stepNumber: index + 1
+    }))
+  };
 
   return (
     <section id="usage" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
-        {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
+        {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">
-        {richText(t, 'description')}
+        {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">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12">
-          {steps.map((step, idx) => {
+          {data.steps.map((step) => {
             const Icon = getGlobalIcon(step.iconKey);
             return (
-              <div key={idx} className="flex items-start">
+              <div key={step.id} data-usage-step={step.id} className="flex items-start">
                 <div className="flex-shrink-0 mr-4">
                   <Icon className="w-8 h-8 text-purple-500" />
                 </div>
                 <div>
                   <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center">
-                    {`${idx + 1}. ${step.title}`}
+                    {`${step.stepNumber}. ${step.title}`}
                   </h3>
-                  <p className="text-gray-700 dark:text-gray-300">{richText(t, `steps.${idx}.description`)}</p>
+                  <p className="text-gray-700 dark:text-gray-300">{step.description}</p>
                 </div>
               </div>
             )