From 9355af51aaa53f7c26f3ce5b1d1e3a8224228ade Mon Sep 17 00:00:00 2001
From: icy <icyoung520@gmail.com>
Date: Sun, 2 Nov 2025 06:22:16 +0800
Subject: [PATCH] feat(i18n): internationalize footer and login modal
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update FooterSection to use language prop pattern instead of useLanguage hook
- Add language prop support to LoginModal component
- Ensure consistent internationalization approach across UI components
- Maintain proper prop interfaces for language handling

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: tinkle-community <tinklefund@gmail.com>
---
 web/src/components/landing/FooterSection.tsx | 28 +++++++++++---------
 web/src/components/landing/LoginModal.tsx    | 16 +++++++----
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/web/src/components/landing/FooterSection.tsx b/web/src/components/landing/FooterSection.tsx
index 6ff3faa9..598409fe 100644
--- a/web/src/components/landing/FooterSection.tsx
+++ b/web/src/components/landing/FooterSection.tsx
@@ -1,20 +1,22 @@
-import { useLanguage } from '../../contexts/LanguageContext'
-import { t } from '../../i18n/translations'
+import { t, Language } from '../../i18n/translations'
 
-export default function FooterSection() {
-  const { language } = useLanguage()
+interface FooterSectionProps {
+  language: Language
+}
+
+export default function FooterSection({ language }: FooterSectionProps) {
   return (
-    <footer style={{ borderTop: '1px solid #2B3139', background: '#181A20' }}>
+    <footer style={{ borderTop: '1px solid var(--panel-border)', background: 'var(--brand-dark-gray)' }}>
       <div className='max-w-[1200px] mx-auto px-6 py-10'>
         {/* Brand */}
         <div className='flex items-center gap-3 mb-8'>
-          <img src='/images/logo.png' alt='NOFX Logo' className='w-8 h-8' />
+          <img src='/icons/nofx.svg' alt='NOFX Logo' className='w-8 h-8' />
           <div>
             <div className='text-lg font-bold' style={{ color: '#EAECEF' }}>
               NOFX
             </div>
             <div className='text-xs' style={{ color: '#848E9C' }}>
-              AI 交易的未来标准
+              {t('futureStandardAI', language)}
             </div>
           </div>
         </div>
@@ -26,7 +28,7 @@ export default function FooterSection() {
               className='text-sm font-semibold mb-3'
               style={{ color: '#EAECEF' }}
             >
-              链接
+              {t('links', language)}
             </h3>
             <ul className='space-y-2 text-sm' style={{ color: '#848E9C' }}>
               <li>
@@ -67,7 +69,7 @@ export default function FooterSection() {
               className='text-sm font-semibold mb-3'
               style={{ color: '#EAECEF' }}
             >
-              资源
+              {t('resources', language)}
             </h3>
             <ul className='space-y-2 text-sm' style={{ color: '#848E9C' }}>
               <li>
@@ -77,7 +79,7 @@ export default function FooterSection() {
                   target='_blank'
                   rel='noopener noreferrer'
                 >
-                  文档
+                  {t('documentation', language)}
                 </a>
               </li>
               <li>
@@ -108,7 +110,7 @@ export default function FooterSection() {
               className='text-sm font-semibold mb-3'
               style={{ color: '#EAECEF' }}
             >
-              支持方
+              {t('supporters', language)}
             </h3>
             <ul className='space-y-2 text-sm' style={{ color: '#848E9C' }}>
               <li>
@@ -148,7 +150,7 @@ export default function FooterSection() {
                   target='_blank'
                   rel='noopener noreferrer'
                 >
-                  Amber.ac <span className='opacity-70'>(战略投资)</span>
+                  Amber.ac <span className='opacity-70'>{t('strategicInvestment', language)}</span>
                 </a>
               </li>
             </ul>
@@ -158,7 +160,7 @@ export default function FooterSection() {
         {/* Bottom note (kept subtle) */}
         <div
           className='pt-6 mt-8 text-center text-xs'
-          style={{ color: '#5E6673', borderTop: '1px solid #2B3139' }}
+          style={{ color: 'var(--text-tertiary)', borderTop: '1px solid var(--panel-border)' }}
         >
           <p>{t('footerTitle', language)}</p>
           <p className='mt-1'>{t('footerWarning', language)}</p>
diff --git a/web/src/components/landing/LoginModal.tsx b/web/src/components/landing/LoginModal.tsx
index c981b506..b5bdd58d 100644
--- a/web/src/components/landing/LoginModal.tsx
+++ b/web/src/components/landing/LoginModal.tsx
@@ -1,7 +1,13 @@
 import { motion } from 'framer-motion'
 import { X } from 'lucide-react'
+import { t, Language } from '../../i18n/translations'
 
-export default function LoginModal({ onClose }: { onClose: () => void }) {
+interface LoginModalProps {
+  onClose: () => void
+  language: Language
+}
+
+export default function LoginModal({ onClose, language }: LoginModalProps) {
   return (
     <motion.div
       className='fixed inset-0 z-50 flex items-center justify-center p-4'
@@ -23,10 +29,10 @@ export default function LoginModal({ onClose }: { onClose: () => void }) {
           <X className='w-6 h-6' />
         </motion.button>
         <h2 className='text-2xl font-bold mb-6' style={{ color: 'var(--brand-light-gray)' }}>
-          访问 NOFX 平台
+          {t('accessNofxPlatform', language)}
         </h2>
         <p className='text-sm mb-6' style={{ color: 'var(--text-secondary)' }}>
-          请选择登录或注册以访问完整的 AI 交易平台
+          {t('loginRegisterPrompt', language)}
         </p>
         <div className='space-y-3'>
           <motion.button
@@ -40,7 +46,7 @@ export default function LoginModal({ onClose }: { onClose: () => void }) {
             whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(240, 185, 11, 0.4)' }}
             whileTap={{ scale: 0.95 }}
           >
-            登录
+            {t('signIn', language)}
           </motion.button>
           <motion.button
             onClick={() => {
@@ -53,7 +59,7 @@ export default function LoginModal({ onClose }: { onClose: () => void }) {
             whileHover={{ scale: 1.05, borderColor: 'var(--brand-yellow)' }}
             whileTap={{ scale: 0.95 }}
           >
-            注册新账号
+            {t('registerNewAccount', language)}
           </motion.button>
         </div>
       </motion.div>