From 621f105ddd10ef6b4dc48f2bfb2b62ea4ece2fa8 Mon Sep 17 00:00:00 2001 From: icy Date: Sun, 2 Nov 2025 06:21:48 +0800 Subject: [PATCH] feat(i18n): internationalize landing page sections MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- web/src/components/landing/AboutSection.tsx | 33 ++++---- .../components/landing/FeaturesSection.tsx | 46 ++++++++--- web/src/components/landing/HeroSection.tsx | 81 ++++++++++++++++--- .../components/landing/HowItWorksSection.tsx | 23 +++--- web/src/pages/LandingPage.tsx | 58 +++++++++---- 5 files changed, 175 insertions(+), 66 deletions(-) diff --git a/web/src/components/landing/AboutSection.tsx b/web/src/components/landing/AboutSection.tsx index d087a66f..55ff9d9b 100644 --- a/web/src/components/landing/AboutSection.tsx +++ b/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 (
@@ -31,7 +36,7 @@ export default function AboutSection() { className='text-sm font-semibold' style={{ color: 'var(--brand-yellow)' }} > - 关于 NOFX + {t('aboutNofx', language)} @@ -39,23 +44,19 @@ export default function AboutSection() { className='text-4xl font-bold' style={{ color: 'var(--brand-light-gray)' }} > - 什么是 NOFX？ + {t('whatIsNofx', language)}

- NOFX 不是另一个交易机器人，而是 AI 交易的 'Linux' —— - 一个透明、可信任的开源 OS，提供统一的 '决策-风险-执行' - 层，支持所有资产类别。 + {t('nofxNotAnotherBot', language)} {t('nofxDescription1', language)} {t('nofxDescription2', language)}

- 从加密市场起步（24/7、高波动性完美测试场），未来扩展到股票、期货、外汇。核心：开放架构、AI - 达尔文主义（多代理自竞争、策略进化）、CodeFi 飞轮（开发者 PR - 贡献获积分奖励）。 + {t('nofxDescription3', language)} {t('nofxDescription4', language)} {t('nofxDescription5', language)}

- 你 100% 掌控 + {t('youFullControl', language)}
- 完全掌控 AI 提示词和资金 + {t('fullControlDesc', language)}
@@ -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)', }} /> diff --git a/web/src/components/landing/FeaturesSection.tsx b/web/src/components/landing/FeaturesSection.tsx index 7eef7e00..3026405f 100644 --- a/web/src/components/landing/FeaturesSection.tsx +++ b/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 (
@@ -15,37 +20,52 @@ export default function FeaturesSection() { > - 核心功能 + {t('coreFeatures', language)}

- 为什么选择 NOFX？ + {t('whyChooseNofx', language)}

- 开源、透明、社区驱动的 AI 交易操作系统 + {t('openCommunityDriven', language)}

} - 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} /> } - 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} /> } - 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} />
diff --git a/web/src/components/landing/HeroSection.tsx b/web/src/components/landing/HeroSection.tsx index 61de5e7a..52656bf6 100644 --- a/web/src/components/landing/HeroSection.tsx +++ b/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() { > - 3 天内 2.5K+ GitHub Stars +{t('githubStarsInDays', language)}

- Read the Market. + {t('heroTitle1', language)}
- Write the Trade. + {t('heroTitle2', language)}

- NOFX 是 AI 交易的未来标准——一个开放、社区驱动的代理式交易操作系统。支持 Binance、Aster DEX 等交易所， - 自托管、多代理竞争，让 AI 为你自动决策、执行和优化交易。 + {t('heroDescription', language)}
GitHub Stars GitHub Forks GitHub Contributors @@ -68,12 +73,62 @@ export default function HeroSection() {
- 由 Aster DEX 和 Binance 提供支持，Amber.ac 战略投资。 +{t('poweredBy', language)} - {/* Right Visual */} - + {/* Right Visual - Interactive Robot */} +
{ + 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 */} + + + {/* Hand Layer - Animated */} + +
diff --git a/web/src/components/landing/HowItWorksSection.tsx b/web/src/components/landing/HowItWorksSection.tsx index f33075e7..4fefa15d 100644 --- a/web/src/components/landing/HowItWorksSection.tsx +++ b/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 (

- 如何开始使用 NOFX + {t('howToStart', language)}

- 四个简单步骤，开启 AI 自动交易之旅 + {t('fourSimpleSteps', language)}

{[ - { 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) => ( ))} @@ -61,10 +66,10 @@ export default function HowItWorksSection() {
- 重要风险提示 + {t('importantRiskWarning', language)}

- dev 分支不稳定，勿用无法承受损失的资金。NOFX 非托管，无官方策略。交易有风险，投资需谨慎。 + {t('riskWarningText', language)}

diff --git a/web/src/pages/LandingPage.tsx b/web/src/pages/LandingPage.tsx index 206e2b3b..1d835917 100644 --- a/web/src/pages/LandingPage.tsx +++ b/web/src/pages/LandingPage.tsx @@ -10,43 +10,71 @@ import CommunitySection from '../components/landing/CommunitySection' import AnimatedSection from '../components/landing/AnimatedSection' import LoginModal from '../components/landing/LoginModal' import FooterSection from '../components/landing/FooterSection' +import { useAuth } from '../contexts/AuthContext' +import { useLanguage } from '../contexts/LanguageContext' +import { t } from '../i18n/translations' export function LandingPage() { const [showLoginModal, setShowLoginModal] = useState(false) + const { user, logout } = useAuth() + const { language, setLanguage } = useLanguage() + const isLoggedIn = !!user + + console.log('LandingPage - user:', user, 'isLoggedIn:', isLoggedIn); return ( -
- setShowLoginModal(true)} /> - - - - - + <> + setShowLoginModal(true)} + isLoggedIn={isLoggedIn} + isHomePage={true} + language={language} + onLanguageChange={setLanguage} + user={user} + onLogout={logout} + onPageChange={(page) => { + console.log('LandingPage onPageChange called with:', page); + if (page === 'competition') { + window.location.href = '/competition'; + } else if (page === 'traders') { + window.location.href = '/traders'; + } else if (page === 'trader') { + window.location.href = '/dashboard'; + } + }} + /> +
+ + + + + {/* CTA */}
- 准备好定义 AI 交易的未来吗？ + {t('readyToDefine', language)} - 从加密市场起步，扩展到 TradFi。NOFX 是 AgentFi 的基础架构。 + {t('startWithCrypto', language)}
setShowLoginModal(true)} className='flex items-center gap-2 px-10 py-4 rounded-lg font-semibold text-lg' style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}> - 立即开始 + {t('getStartedNow', language)} - - 查看源码 + + {t('viewSourceCode', language)}
- {showLoginModal && setShowLoginModal(false)} />} - -
+ {showLoginModal && setShowLoginModal(false)} language={language} />} + +
+ ) }