feat(i18n): internationalize landing page sections

- Update AboutSection, FeaturesSection, HowItWorksSection to use language prop pattern
- Replace useLanguage hook with language prop interface for consistency
- Add comprehensive internationalization support for landing page content
- Update HeroSection and LandingPage to support language prop flow

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

Co-Authored-By: Claude <noreply@anthropic.com>

web/src/components/landing/AboutSection.tsx

@@ -2,8 +2,13 @@ import { motion } from 'framer-motion'
 import { Shield, Target } from 'lucide-react'
 import AnimatedSection from './AnimatedSection'
 import Typewriter from '../Typewriter'
+import { t, Language } from '../../i18n/translations'
 
-export default function AboutSection() {
+interface AboutSectionProps {
+  language: Language
+}
+
+export default function AboutSection({ language }: AboutSectionProps) {
   return (
     <AnimatedSection id='about' backgroundColor='var(--brand-dark-gray)'>
       <div className='max-w-7xl mx-auto'>
@@ -31,7 +36,7 @@ export default function AboutSection() {
                 className='text-sm font-semibold'
                 style={{ color: 'var(--brand-yellow)' }}
               >
-                关于 NOFX
+                {t('aboutNofx', language)}
               </span>
             </motion.div>
 
@@ -39,23 +44,19 @@ export default function AboutSection() {
               className='text-4xl font-bold'
               style={{ color: 'var(--brand-light-gray)' }}
             >
-              什么是 NOFX？
+              {t('whatIsNofx', language)}
             </h2>
             <p
               className='text-lg leading-relaxed'
               style={{ color: 'var(--text-secondary)' }}
             >
-              NOFX 不是另一个交易机器人，而是 AI 交易的 'Linux' ——
-              一个透明、可信任的开源 OS，提供统一的 '决策-风险-执行'
-              层，支持所有资产类别。
+              {t('nofxNotAnotherBot', language)} {t('nofxDescription1', language)} {t('nofxDescription2', language)}
             </p>
             <p
               className='text-lg leading-relaxed'
               style={{ color: 'var(--text-secondary)' }}
             >
-              从加密市场起步（24/7、高波动性完美测试场），未来扩展到股票、期货、外汇。核心：开放架构、AI
-              达尔文主义（多代理自竞争、策略进化）、CodeFi 飞轮（开发者 PR
-              贡献获积分奖励）。
+              {t('nofxDescription3', language)} {t('nofxDescription4', language)} {t('nofxDescription5', language)}
             </p>
             <motion.div
               className='flex items-center gap-3 pt-4'
@@ -75,13 +76,13 @@ export default function AboutSection() {
                   className='font-semibold'
                   style={{ color: 'var(--brand-light-gray)' }}
                 >
-                  你 100% 掌控
+                  {t('youFullControl', language)}
                 </div>
                 <div
                   className='text-sm'
                   style={{ color: 'var(--text-secondary)' }}
                 >
-                  完全掌控 AI 提示词和资金
+                  {t('fullControlDesc', language)}
                 </div>
               </div>
             </motion.div>
@@ -101,16 +102,16 @@ export default function AboutSection() {
                   '$ cd nofx',
                   '$ chmod +x start.sh',
                   '$ ./start.sh start --build',
-                  ' 启动自动交易系统...',
-                  ' API服务器启动在端口 8080',
-                  ' Web 控制台 http://localhost:3000',
+                  t('startupMessages1', language),
+                  t('startupMessages2', language),
+                  t('startupMessages3', language),
                 ]}
                 typingSpeed={70}
                 lineDelay={900}
                 className='text-sm font-mono'
                 style={{
-                  color: '#00FF41',
-                  textShadow: '0 0 6px rgba(0,255,65,0.6)',
+                  color: '#00FF88',
+                  textShadow: '0 0 8px rgba(0,255,136,0.4)',
                 }}
               />
             </div>

web/src/components/landing/FeaturesSection.tsx

@@ -2,8 +2,13 @@ import { motion } from 'framer-motion'
 import AnimatedSection from './AnimatedSection'
 import { CryptoFeatureCard } from '../CryptoFeatureCard'
 import { Code, Cpu, Lock, Rocket } from 'lucide-react'
+import { t, Language } from '../../i18n/translations'
 
-export default function FeaturesSection() {
+interface FeaturesSectionProps {
+  language: Language
+}
+
+export default function FeaturesSection({ language }: FeaturesSectionProps) {
   return (
     <AnimatedSection id='features'>
       <div className='max-w-7xl mx-auto'>
@@ -15,37 +20,52 @@ export default function FeaturesSection() {
           >
             <Rocket className='w-4 h-4' style={{ color: 'var(--brand-yellow)' }} />
             <span className='text-sm font-semibold' style={{ color: 'var(--brand-yellow)' }}>
-              核心功能
+              {t('coreFeatures', language)}
             </span>
           </motion.div>
           <h2 className='text-4xl font-bold mb-4' style={{ color: 'var(--brand-light-gray)' }}>
-            为什么选择 NOFX？
+            {t('whyChooseNofx', language)}
           </h2>
           <p className='text-lg' style={{ color: 'var(--text-secondary)' }}>
-            开源、透明、社区驱动的 AI 交易操作系统
+            {t('openCommunityDriven', language)}
           </p>
         </motion.div>
 
         <div className='grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto'>
           <CryptoFeatureCard
             icon={<Code className='w-8 h-8' />}
-            title='100% 开源与自托管'
-            description='你的框架，你的规则。非黑箱，支持自定义提示词和多模型。'
-            features={['完全开源代码', '支持自托管部署', '自定义 AI 提示词', '多模型支持（DeepSeek、Qwen）']}
+            title={t('openSourceSelfHosted', language)}
+            description={t('openSourceDesc', language)}
+            features={[
+              t('openSourceFeatures1', language),
+              t('openSourceFeatures2', language),
+              t('openSourceFeatures3', language),
+              t('openSourceFeatures4', language)
+            ]}
             delay={0}
           />
           <CryptoFeatureCard
             icon={<Cpu className='w-8 h-8' />}
-            title='多代理智能竞争'
-            description='AI 策略在沙盒中高速战斗，最优者生存，实现策略进化。'
-            features={['多 AI 代理并行运行', '策略自动优化', '沙盒安全测试', '跨市场策略移植']}
+            title={t('multiAgentCompetition', language)}
+            description={t('multiAgentDesc', language)}
+            features={[
+              t('multiAgentFeatures1', language),
+              t('multiAgentFeatures2', language),
+              t('multiAgentFeatures3', language),
+              t('multiAgentFeatures4', language)
+            ]}
             delay={0.1}
           />
           <CryptoFeatureCard
             icon={<Lock className='w-8 h-8' />}
-            title='安全可靠交易'
-            description='企业级安全保障，完全掌控你的资金和交易策略。'
-            features={['本地私钥管理', 'API 权限精细控制', '实时风险监控', '交易日志审计']}
+            title={t('secureReliableTrading', language)}
+            description={t('secureDesc', language)}
+            features={[
+              t('secureFeatures1', language),
+              t('secureFeatures2', language),
+              t('secureFeatures3', language),
+              t('secureFeatures4', language)
+            ]}
             delay={0.2}
           />
         </div>

web/src/components/landing/HeroSection.tsx

@@ -1,10 +1,16 @@
-import { motion, useScroll, useTransform } from 'framer-motion'
+import { motion, useScroll, useTransform, useAnimation } from 'framer-motion'
 import { Sparkles } from 'lucide-react'
+import { t, Language } from '../../i18n/translations'
 
-export default function HeroSection() {
+interface HeroSectionProps {
+  language: Language
+}
+
+export default function HeroSection({ language }: HeroSectionProps) {
   const { scrollYProgress } = useScroll()
   const opacity = useTransform(scrollYProgress, [0, 0.2], [1, 0])
   const scale = useTransform(scrollYProgress, [0, 0.2], [1, 0.8])
+  const handControls = useAnimation()
 
   const fadeInUp = {
     initial: { opacity: 0, y: 60 },
@@ -27,40 +33,39 @@ export default function HeroSection() {
               >
                 <Sparkles className='w-4 h-4' style={{ color: 'var(--brand-yellow)' }} />
                 <span className='text-sm font-semibold' style={{ color: 'var(--brand-yellow)' }}>
-                  3 天内 2.5K+ GitHub Stars
+{t('githubStarsInDays', language)}
                 </span>
               </motion.div>
             </motion.div>
 
             <h1 className='text-5xl lg:text-7xl font-bold leading-tight' style={{ color: 'var(--brand-light-gray)' }}>
-              Read the Market.
+              {t('heroTitle1', language)}
               <br />
-              <span style={{ color: 'var(--brand-yellow)' }}>Write the Trade.</span>
+              <span style={{ color: 'var(--brand-yellow)' }}>{t('heroTitle2', language)}</span>
             </h1>
 
             <motion.p className='text-xl leading-relaxed' style={{ color: 'var(--text-secondary)' }} variants={fadeInUp}>
-              NOFX 是 AI 交易的未来标准——一个开放、社区驱动的代理式交易操作系统。支持 Binance、Aster DEX 等交易所，
-              自托管、多代理竞争，让 AI 为你自动决策、执行和优化交易。
+              {t('heroDescription', language)}
             </motion.p>
 
             <div className='flex items-center gap-3 flex-wrap'>
               <motion.a href='https://github.com/tinkle-community/nofx' target='_blank' rel='noopener noreferrer' whileHover={{ scale: 1.05 }} transition={{ type: 'spring', stiffness: 400 }}>
                 <img
-                  src='https://img.shields.io/github/stars/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=1E2329'
+                  src='https://img.shields.io/github/stars/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=0A0A0A'
                   alt='GitHub Stars'
                   className='h-7'
                 />
               </motion.a>
               <motion.a href='https://github.com/tinkle-community/nofx/network/members' target='_blank' rel='noopener noreferrer' whileHover={{ scale: 1.05 }} transition={{ type: 'spring', stiffness: 400 }}>
                 <img
-                  src='https://img.shields.io/github/forks/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=1E2329'
+                  src='https://img.shields.io/github/forks/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=0A0A0A'
                   alt='GitHub Forks'
                   className='h-7'
                 />
               </motion.a>
               <motion.a href='https://github.com/tinkle-community/nofx/graphs/contributors' target='_blank' rel='noopener noreferrer' whileHover={{ scale: 1.05 }} transition={{ type: 'spring', stiffness: 400 }}>
                 <img
-                  src='https://img.shields.io/github/contributors/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=1E2329'
+                  src='https://img.shields.io/github/contributors/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=0A0A0A'
                   alt='GitHub Contributors'
                   className='h-7'
                 />
@@ -68,12 +73,62 @@ export default function HeroSection() {
             </div>
 
             <motion.p className='text-xs pt-4' style={{ color: 'var(--text-tertiary)' }} variants={fadeInUp}>
-              由 Aster DEX 和 Binance 提供支持，Amber.ac 战略投资。
+{t('poweredBy', language)}
             </motion.p>
           </motion.div>
 
-          {/* Right Visual */}
-          <motion.img src='/images/main.png' alt='NOFX Platform' className='w-full opacity-90' whileHover={{ scale: 1.05, rotate: 5 }} transition={{ type: 'spring', stiffness: 300 }} />
+          {/* Right Visual - Interactive Robot */}
+          <div 
+            className='relative w-full cursor-pointer'
+            onMouseEnter={() => {
+              handControls.start({
+                y: [-8, 8, -8],
+                rotate: [-3, 3, -3],
+                x: [-2, 2, -2],
+                transition: {
+                  duration: 2.5,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                  times: [0, 0.5, 1]
+                }
+              })
+            }}
+            onMouseLeave={() => {
+              handControls.start({
+                y: 0,
+                rotate: 0,
+                x: 0,
+                transition: {
+                  duration: 0.6,
+                  ease: "easeOut"
+                }
+              })
+            }}
+          >
+            {/* Background Layer */}
+            <motion.img 
+              src='/images/hand-bg.png' 
+              alt='NOFX Platform Background' 
+              className='w-full opacity-90'
+              style={{ opacity, scale }}
+              whileHover={{ scale: 1.02 }}
+              transition={{ type: 'spring', stiffness: 300 }}
+            />
+            
+            {/* Hand Layer - Animated */}
+            <motion.img 
+              src='/images/hand.png' 
+              alt='Robot Hand' 
+              className='absolute top-0 left-0 w-full'
+              style={{ opacity }}
+              animate={handControls}
+              initial={{ y: 0, rotate: 0, x: 0 }}
+              whileHover={{
+                scale: 1.05,
+                transition: { type: 'spring', stiffness: 400 }
+              }}
+            />
+          </div>
         </div>
       </div>
     </section>

web/src/components/landing/HowItWorksSection.tsx

@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion'
 import AnimatedSection from './AnimatedSection'
+import { t, Language } from '../../i18n/translations'
 
 function StepCard({ number, title, description, delay }: any) {
   return (
@@ -24,25 +25,29 @@ function StepCard({ number, title, description, delay }: any) {
   )
 }
 
-export default function HowItWorksSection() {
+interface HowItWorksSectionProps {
+  language: Language
+}
+
+export default function HowItWorksSection({ language }: HowItWorksSectionProps) {
   return (
     <AnimatedSection id='how-it-works' backgroundColor='var(--brand-dark-gray)'>
       <div className='max-w-7xl mx-auto'>
         <motion.div className='text-center mb-16' initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
           <h2 className='text-4xl font-bold mb-4' style={{ color: 'var(--brand-light-gray)' }}>
-            如何开始使用 NOFX
+            {t('howToStart', language)}
           </h2>
           <p className='text-lg' style={{ color: 'var(--text-secondary)' }}>
-            四个简单步骤，开启 AI 自动交易之旅
+            {t('fourSimpleSteps', language)}
           </p>
         </motion.div>
 
         <div className='space-y-8'>
           {[
-            { number: 1, title: '拉取 GitHub 仓库', description: 'git clone https://github.com/tinkle-community/nofx 并切换到 dev 分支测试新功能。' },
-            { number: 2, title: '配置环境', description: '前端设置交易所 API（如 Binance、Hyperliquid）、AI 模型和自定义提示词。' },
-            { number: 3, title: '部署与运行', description: '一键 Docker 部署，启动 AI 代理。注意：高风险市场，仅用闲钱测试。' },
-            { number: 4, title: '优化与贡献', description: '监控交易，提交 PR 改进框架。加入 Telegram 分享策略。' },
+            { number: 1, title: t('step1Title', language), description: t('step1Desc', language) },
+            { number: 2, title: t('step2Title', language), description: t('step2Desc', language) },
+            { number: 3, title: t('step3Title', language), description: t('step3Desc', language) },
+            { number: 4, title: t('step4Title', language), description: t('step4Desc', language) },
           ].map((step, index) => (
             <StepCard key={step.number} {...step} delay={index * 0.1} />
           ))}
@@ -61,10 +66,10 @@ export default function HowItWorksSection() {
           </div>
           <div>
             <div className='font-semibold mb-2' style={{ color: '#F6465D' }}>
-              重要风险提示
+              {t('importantRiskWarning', language)}
             </div>
             <p className='text-sm' style={{ color: 'var(--text-secondary)' }}>
-              dev 分支不稳定，勿用无法承受损失的资金。NOFX 非托管，无官方策略。交易有风险，投资需谨慎。
+              {t('riskWarningText', language)}
             </p>
           </div>
         </motion.div>