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/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>