);
-}
\ No newline at end of file
+}
diff --git a/web/src/components/LoginPage.tsx b/web/src/components/LoginPage.tsx
index d2a9cb23..ea36356c 100644
--- a/web/src/components/LoginPage.tsx
+++ b/web/src/components/LoginPage.tsx
@@ -3,6 +3,7 @@ import { useAuth } from '../contexts/AuthContext';
import { useLanguage } from '../contexts/LanguageContext';
import { t } from '../i18n/translations';
import { Header } from './Header';
+import { ArrowLeft } from 'lucide-react';
export function LoginPage() {
const { language } = useLanguage();
@@ -52,13 +53,26 @@ export function LoginPage() {
return (
-
+
+ {/* Back to Home */}
+
{
+ window.history.pushState({}, '', '/');
+ window.dispatchEvent(new PopStateEvent('popstate'));
+ }}
+ className="flex items-center gap-2 mb-6 text-sm hover:text-[#F0B90B] transition-colors"
+ style={{ color: '#848E9C' }}
+ >
+
+
{/* Logo */}
-
+
{t('loginTitle', language)}
@@ -191,4 +205,4 @@ export function LoginPage() {
);
-}
\ No newline at end of file
+}
diff --git a/web/src/components/RegisterPage.tsx b/web/src/components/RegisterPage.tsx
index 01691aac..438bed05 100644
--- a/web/src/components/RegisterPage.tsx
+++ b/web/src/components/RegisterPage.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { useLanguage } from '../contexts/LanguageContext';
import { t } from '../i18n/translations';
+import { ArrowLeft } from 'lucide-react';
export function RegisterPage() {
const { language } = useLanguage();
@@ -73,10 +74,25 @@ export function RegisterPage() {
return (
+ {/* Back to Home */}
+ {step === 'register' && (
+
{
+ window.history.pushState({}, '', '/');
+ window.dispatchEvent(new PopStateEvent('popstate'));
+ }}
+ className="flex items-center gap-2 mb-6 text-sm hover:text-[#F0B90B] transition-colors"
+ style={{ color: '#848E9C' }}
+ >
+
+ )}
+
{/* Logo */}
-
+
{t('appTitle', language)}
@@ -307,4 +323,4 @@ export function RegisterPage() {
);
-}
\ No newline at end of file
+}
diff --git a/web/src/components/TraderConfigModal.tsx b/web/src/components/TraderConfigModal.tsx
index c50d5dea..528f763f 100644
--- a/web/src/components/TraderConfigModal.tsx
+++ b/web/src/components/TraderConfigModal.tsx
@@ -453,7 +453,7 @@ export function TraderConfigModal({
className="w-4 h-4"
/>
覆盖默认提示词
-
⚠️ 启用后将完全替换默认策略
+
@@ -491,4 +491,4 @@ export function TraderConfigModal({
);
-}
\ No newline at end of file
+}
diff --git a/web/src/components/Typewriter.tsx b/web/src/components/Typewriter.tsx
new file mode 100644
index 00000000..3d1ff93f
--- /dev/null
+++ b/web/src/components/Typewriter.tsx
@@ -0,0 +1,73 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+interface TypewriterProps {
+ lines: string[]
+ typingSpeed?: number // 毫秒/字符
+ lineDelay?: number // 每行结束的额外等待
+ className?: string
+ style?: React.CSSProperties
+}
+
+export default function Typewriter({
+ lines,
+ typingSpeed = 50,
+ lineDelay = 600,
+ className,
+ style,
+}: TypewriterProps) {
+ const [typedLines, setTypedLines] = useState
([''])
+ const [showCursor, setShowCursor] = useState(true)
+ const lineIndexRef = useRef(0)
+ const charIndexRef = useRef(0)
+ const timerRef = useRef(null)
+ const blinkRef = useRef(null)
+ const sanitizedLines = useMemo(() => lines.map((l) => String(l ?? '')), [lines])
+
+ useEffect(() => {
+ function typeNext() {
+ const currentLine = sanitizedLines[lineIndexRef.current] ?? ''
+ if (charIndexRef.current < currentLine.length) {
+ setTypedLines((prev) => {
+ const next = [...prev]
+ const ch = currentLine.charAt(charIndexRef.current)
+ next[next.length - 1] = (next[next.length - 1] || '') + ch
+ return next
+ })
+ charIndexRef.current += 1
+ timerRef.current = window.setTimeout(typeNext, typingSpeed)
+ } else {
+ // 行结束
+ if (lineIndexRef.current < sanitizedLines.length - 1) {
+ lineIndexRef.current += 1
+ charIndexRef.current = 0
+ setTypedLines((prev) => [...prev, ''])
+ timerRef.current = window.setTimeout(typeNext, lineDelay)
+ } else {
+ // 最后一行输入完毕
+ timerRef.current = null
+ }
+ }
+ }
+
+ typeNext()
+
+ // 光标闪烁
+ blinkRef.current = window.setInterval(() => {
+ setShowCursor((v) => !v)
+ }, 500)
+
+ return () => {
+ if (timerRef.current) window.clearTimeout(timerRef.current)
+ if (blinkRef.current) window.clearInterval(blinkRef.current)
+ }
+ }, [lines, typingSpeed, lineDelay])
+
+ const displayText = useMemo(() => typedLines.join('\n').replace(/undefined/g, ''), [typedLines])
+
+ return (
+
+ {displayText}
+ ▍
+
+ )
+}
diff --git a/web/src/components/landing/AboutSection.tsx b/web/src/components/landing/AboutSection.tsx
new file mode 100644
index 00000000..d087a66f
--- /dev/null
+++ b/web/src/components/landing/AboutSection.tsx
@@ -0,0 +1,123 @@
+import { motion } from 'framer-motion'
+import { Shield, Target } from 'lucide-react'
+import AnimatedSection from './AnimatedSection'
+import Typewriter from '../Typewriter'
+
+export default function AboutSection() {
+ return (
+
+
+
+
+
+
+ 关于 NOFX
+
+
+
+
+ 什么是 NOFX？
+
+
+ NOFX 不是另一个交易机器人，而是 AI 交易的 'Linux' ——
+ 一个透明、可信任的开源 OS，提供统一的 '决策-风险-执行'
+ 层，支持所有资产类别。
+
+
+ 从加密市场起步（24/7、高波动性完美测试场），未来扩展到股票、期货、外汇。核心：开放架构、AI
+ 达尔文主义（多代理自竞争、策略进化）、CodeFi 飞轮（开发者 PR
+ 贡献获积分奖励）。
+
+
+
+
+
+
+ 你 100% 掌控
+
+
+ 完全掌控 AI 提示词和资金
+
+
+
+
+
+
+
+ )
+}
+
diff --git a/web/src/components/landing/AnimatedSection.tsx b/web/src/components/landing/AnimatedSection.tsx
new file mode 100644
index 00000000..2b84c6f4
--- /dev/null
+++ b/web/src/components/landing/AnimatedSection.tsx
@@ -0,0 +1,30 @@
+import { useRef } from 'react'
+import { motion, useInView } from 'framer-motion'
+
+export default function AnimatedSection({
+ children,
+ id,
+ backgroundColor = 'var(--brand-black)',
+}: {
+ children: React.ReactNode
+ id?: string
+ backgroundColor?: string
+}) {
+ const ref = useRef(null)
+ const isInView = useInView(ref, { once: true, margin: '-100px' })
+
+ return (
+
+ {children}
+
+ )
+}
+
diff --git a/web/src/components/landing/CommunitySection.tsx b/web/src/components/landing/CommunitySection.tsx
new file mode 100644
index 00000000..196b286a
--- /dev/null
+++ b/web/src/components/landing/CommunitySection.tsx
@@ -0,0 +1,42 @@
+import { motion } from 'framer-motion'
+import AnimatedSection from './AnimatedSection'
+
+function TestimonialCard({ quote, author, delay }: any) {
+ return (
+
+
+ "{quote}"
+
+
+
+ )
+}
+
+export default function CommunitySection() {
+ const staggerContainer = { animate: { transition: { staggerChildren: 0.1 } } }
+ return (
+
+
+
+
+
+
+ )
+}
+
diff --git a/web/src/components/landing/FeaturesSection.tsx b/web/src/components/landing/FeaturesSection.tsx
new file mode 100644
index 00000000..7eef7e00
--- /dev/null
+++ b/web/src/components/landing/FeaturesSection.tsx
@@ -0,0 +1,56 @@
+import { motion } from 'framer-motion'
+import AnimatedSection from './AnimatedSection'
+import { CryptoFeatureCard } from '../CryptoFeatureCard'
+import { Code, Cpu, Lock, Rocket } from 'lucide-react'
+
+export default function FeaturesSection() {
+ return (
+
+
+
+
+
+ 核心功能
+
+
+
+ 为什么选择 NOFX？
+
+
+ 开源、透明、社区驱动的 AI 交易操作系统
+
+
+
+
+
+
+ )
+}
+
diff --git a/web/src/components/landing/FooterSection.tsx b/web/src/components/landing/FooterSection.tsx
new file mode 100644
index 00000000..6ff3faa9
--- /dev/null
+++ b/web/src/components/landing/FooterSection.tsx
@@ -0,0 +1,169 @@
+import { useLanguage } from '../../contexts/LanguageContext'
+import { t } from '../../i18n/translations'
+
+export default function FooterSection() {
+ const { language } = useLanguage()
+ return (
+
+ )
+}
diff --git a/web/src/components/landing/HeaderBar.tsx b/web/src/components/landing/HeaderBar.tsx
new file mode 100644
index 00000000..b3f10049
--- /dev/null
+++ b/web/src/components/landing/HeaderBar.tsx
@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { motion } from 'framer-motion'
+import { Menu, X } from 'lucide-react'
+
+export default function HeaderBar({ onLoginClick }: { onLoginClick: () => void }) {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+ return (
+
+
+
+ {/* Logo */}
+
+
+
+ NOFX
+
+
+ Agentic Trading OS
+
+
+
+ {/* Desktop Menu */}
+
+ {['功能', '如何运作', 'GitHub', '社区'].map((item) => (
+
+ {item}
+
+ ))}
+
+ 登录 / 注册
+
+
+
+ {/* Mobile Menu Button */}
+
setMobileMenuOpen(!mobileMenuOpen)}
+ className='md:hidden'
+ style={{ color: 'var(--brand-light-gray)' }}
+ whileTap={{ scale: 0.9 }}
+ >
+ {mobileMenuOpen ?
+
+
+
+ {['功能', '如何运作', 'GitHub', '社区'].map((item) => (
+
+ {item}
+
+ ))}
+
{
+ onLoginClick()
+ setMobileMenuOpen(false)
+ }}
+ className='w-full px-4 py-2 rounded font-semibold text-sm mt-2'
+ style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}
+ >
+ 登录 / 注册
+
+
+
+ )
+}
+
diff --git a/web/src/components/landing/HeroSection.tsx b/web/src/components/landing/HeroSection.tsx
new file mode 100644
index 00000000..61de5e7a
--- /dev/null
+++ b/web/src/components/landing/HeroSection.tsx
@@ -0,0 +1,82 @@
+import { motion, useScroll, useTransform } from 'framer-motion'
+import { Sparkles } from 'lucide-react'
+
+export default function HeroSection() {
+ const { scrollYProgress } = useScroll()
+ const opacity = useTransform(scrollYProgress, [0, 0.2], [1, 0])
+ const scale = useTransform(scrollYProgress, [0, 0.2], [1, 0.8])
+
+ const fadeInUp = {
+ initial: { opacity: 0, y: 60 },
+ animate: { opacity: 1, y: 0 },
+ transition: { duration: 0.6, ease: [0.6, -0.05, 0.01, 0.99] },
+ }
+ const staggerContainer = { animate: { transition: { staggerChildren: 0.1 } } }
+
+ return (
+
+
+
+ {/* Left Content */}
+
+
+
+
+ 3 天内 2.5K+ GitHub Stars
+
+
+
+
+
+ Read the Market.
+ Write the Trade.
+
+
+
+ NOFX 是 AI 交易的未来标准——一个开放、社区驱动的代理式交易操作系统。支持 Binance、Aster DEX 等交易所，
+ 自托管、多代理竞争，让 AI 为你自动决策、执行和优化交易。
+
+
+
+
+
+ 由 Aster DEX 和 Binance 提供支持，Amber.ac 战略投资。
+
+
+
+ {/* Right Visual */}
+
+
+
+ )
+}
+
diff --git a/web/src/components/landing/HowItWorksSection.tsx b/web/src/components/landing/HowItWorksSection.tsx
new file mode 100644
index 00000000..f33075e7
--- /dev/null
+++ b/web/src/components/landing/HowItWorksSection.tsx
@@ -0,0 +1,74 @@
+import { motion } from 'framer-motion'
+import AnimatedSection from './AnimatedSection'
+
+function StepCard({ number, title, description, delay }: any) {
+ return (
+
+
+ {number}
+
+
+
+ {title}
+
+
+ {description}
+
+
+ )
+}
+
+export default function HowItWorksSection() {
+ return (
+
+
+
+
+ 如何开始使用 NOFX
+
+
+ 四个简单步骤，开启 AI 自动交易之旅
+
+
+
+
+ {[
+ { 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 分享策略。' },
+ ].map((step, index) => (
+
+
+
+
+
+
+ 重要风险提示
+
+
+ dev 分支不稳定，勿用无法承受损失的资金。NOFX 非托管，无官方策略。交易有风险，投资需谨慎。
+
+
+
+ )
+}
diff --git a/web/src/components/landing/LoginModal.tsx b/web/src/components/landing/LoginModal.tsx
new file mode 100644
index 00000000..c981b506
--- /dev/null
+++ b/web/src/components/landing/LoginModal.tsx
@@ -0,0 +1,63 @@
+import { motion } from 'framer-motion'
+import { X } from 'lucide-react'
+
+export default function LoginModal({ onClose }: { onClose: () => void }) {
+ return (
+
+ e.stopPropagation()}
+ >
+
+
+
+ 访问 NOFX 平台
+
+
+ 请选择登录或注册以访问完整的 AI 交易平台
+
+
+ {
+ window.history.pushState({}, '', '/login')
+ window.dispatchEvent(new PopStateEvent('popstate'))
+ onClose()
+ }}
+ className='block w-full px-6 py-3 rounded-lg font-semibold text-center'
+ style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}
+ whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(240, 185, 11, 0.4)' }}
+ whileTap={{ scale: 0.95 }}
+ >
+ 登录
+
+ {
+ window.history.pushState({}, '', '/register')
+ window.dispatchEvent(new PopStateEvent('popstate'))
+ onClose()
+ }}
+ className='block w-full px-6 py-3 rounded-lg font-semibold text-center'
+ style={{ background: 'var(--brand-dark-gray)', color: 'var(--brand-light-gray)', border: '1px solid rgba(240, 185, 11, 0.2)' }}
+ whileHover={{ scale: 1.05, borderColor: 'var(--brand-yellow)' }}
+ whileTap={{ scale: 0.95 }}
+ >
+ 注册新账号
+
+
+
+
+ )
+}
+
diff --git a/web/src/index.css b/web/src/index.css
index 09daf5a6..cc360ff5 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -6,13 +6,22 @@
@tailwind utilities;
:root {
+ /* Binance Brand Colors */
+ --brand-yellow: #F0B90B;
+ --brand-black: #0C0E12;
+ --brand-dark-gray: #1E2329;
+ --brand-light-gray: #EAECEF;
+ --brand-almost-white: #FAFAFA;
+ --brand-white: #FFFFFF;
+
/* Binance Theme Colors */
--binance-yellow: #F0B90B;
--binance-yellow-dark: #C99400;
--binance-yellow-light: #FCD535;
--binance-yellow-glow: rgba(240, 185, 11, 0.2);
- --background: #0B0E11;
+ --background: #181A20; /* Binance body bg */
+ --header-bg: #0B0E11; /* Binance header bg */
--background-elevated: #181A20;
--foreground: #EAECEF;
--panel-bg: #1E2329;
@@ -138,10 +147,10 @@ body {
@keyframes shimmer {
0% {
- background-position: -200% 0;
+ transform: translateX(-100%);
}
100% {
- background-position: 200% 0;
+ transform: translateX(100%);
}
}
@@ -171,12 +180,9 @@ body {
}
/* Glass effect - Binance header style */
-.glass {
- background: var(--background-elevated);
- backdrop-filter: blur(12px);
- -webkit-backdrop-filter: blur(12px);
+.header-bar {
+ background: var(--header-bg);
border-bottom: 1px solid var(--panel-border);
- box-shadow: var(--shadow-sm);
}
/* Monospace numbers */
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
new file mode 100644
index 00000000..a5ef1935
--- /dev/null
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/web/src/pages/LandingPage.tsx b/web/src/pages/LandingPage.tsx
new file mode 100644
index 00000000..206e2b3b
--- /dev/null
+++ b/web/src/pages/LandingPage.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { motion } from 'framer-motion'
+import { ArrowRight } from 'lucide-react'
+import HeaderBar from '../components/landing/HeaderBar'
+import HeroSection from '../components/landing/HeroSection'
+import AboutSection from '../components/landing/AboutSection'
+import FeaturesSection from '../components/landing/FeaturesSection'
+import HowItWorksSection from '../components/landing/HowItWorksSection'
+import CommunitySection from '../components/landing/CommunitySection'
+import AnimatedSection from '../components/landing/AnimatedSection'
+import LoginModal from '../components/landing/LoginModal'
+import FooterSection from '../components/landing/FooterSection'
+
+export function LandingPage() {
+ const [showLoginModal, setShowLoginModal] = useState(false)
+ return (
+
+
setShowLoginModal(true)} />
+
+
+
+ 准备好定义 AI 交易的未来吗？
+
+
+ 从加密市场起步，扩展到 TradFi。NOFX 是 AgentFi 的基础架构。
+
+
+
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 }}>
+ 立即开始
+
+
+
+
+ 查看源码
+
+
+
+
+ {showLoginModal && setShowLoginModal(false)} />}
+ 
+ 
+ 
+ 
+