+ {/* Animated glow border effect */}
+
+
+
+
+ {/* Background pattern */}
+
+
+
+
+
+
+ {/* Icon container */}
+
+
+
+ {/* Title */}
+
+
+ {/* Corner accent */}
+ {icon}
+ {title}
+ + {/* Description */} +{description}
+ + {/* Features list */} +
+ {features.map((feature, index) => (
+
+
+ ))}
+
+
+
+
+ {feature}
+
+
+
+
+
+
+ {/* Animated Background */}
+
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
+
+ {/* About Section */}
+
+
+
+ {/* Features Section */}
+
+
+
+ {/* How It Works Section */}
+
+
+
+ {/* Community Section */}
+
+
+
+ {/* CTA Section */}
+
+
+
+ {/* Footer */}
+
+
+ {/* Login Modal */}
+ {showLoginModal && (
+ setShowLoginModal(false)} />
+ )}
+
+ )
+}
+
+// Helper Components
+function FloatingCard({ children, delay, position, color }: any) {
+ return (
+
+
+
+ {/* Navbar */}
+
+
+
+ {/* Mobile Menu */}
+
+ {/* Logo */}
+
+ 
+
+ NOFX
+
+
+ Agentic Trading OS
+
+
+
+ {/* Desktop Menu */}
+ setMobileMenuOpen(!mobileMenuOpen)}
+ className='md:hidden'
+ style={{ color: 'var(--brand-light-gray)' }}
+ whileTap={{ scale: 0.9 }}
+ >
+ {mobileMenuOpen ? (
+
+
+
+
+ NOFX
+
+
+ Agentic Trading OS
+
+
+ {['功能', '如何运作', 'GitHub', '社区'].map((item, index) => (
+
+ {item}
+
+ ))}
+ setShowLoginModal(true)}
+ className='px-4 py-2 rounded font-semibold text-sm'
+ style={{
+ background: 'var(--brand-yellow)',
+ color: 'var(--brand-black)',
+ }}
+ whileHover={{
+ scale: 1.05,
+ boxShadow: '0 0 20px rgba(240, 185, 11, 0.4)',
+ }}
+ whileTap={{ scale: 0.95 }}
+ >
+ 登录 / 注册
+
+
+
+ {/* Mobile Menu Button */}
+
+ {['功能', '如何运作', 'GitHub', '社区'].map((item) => (
+
+ {item}
+
+ ))}
+
+
+
+
+
+ {/* Scroll Indicator */}
+
+ {/* Left Content */}
+
+
+
+
+
+
+
+ Read the Market.
+
+
+ Write the Trade.
+
+
+
+
+ NOFX 是 AI
+ 交易的未来标准——一个开放、社区驱动的代理式交易操作系统。支持
+ Binance、Aster DEX 等交易所，自托管、多代理竞争，让 AI
+ 为你自动决策、执行和优化交易。
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+ 由 Aster DEX 和 Binance 提供支持，Amber.ac 战略投资。
+
+
+
+ {/* Right Content - Visual */}
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 24/7
+
+
+ 自动交易
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 什么是 NOFX？ +
++ NOFX 不是另一个交易机器人，而是 AI 交易的 'Linux' —— + 一个透明、可信任的开源 OS，提供统一的 '决策-风险-执行' + 层，支持所有资产类别。 +
++ 从加密市场起步（24/7、高波动性完美测试场），未来扩展到股票、期货、外汇。核心：开放架构、AI + 达尔文主义（多代理自竞争、策略进化）、CodeFi 飞轮（开发者 PR + 贡献获积分奖励）。 +
+
+
+
+
+
+ 你 100% 掌控
+
+
+ 完全掌控 AI 提示词和资金
+
+
+ {`$ git clone https://github.com/...
+$ docker compose up -d
+🚀 NOFX 已启动
+✓ AI 代理运行中
+✓ 交易所已连接
+✓ 策略已激活`}
+
+
+
+
+
+
+
+
+ + 为什么选择 NOFX？ +
++ 开源、透明、社区驱动的 AI 交易操作系统 +
+
+
+
+
+
+
+
+
+
+ + 如何开始使用 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 + 非托管，无官方策略。交易有风险，投资需谨慎。 +
+
+
+
+
+
+
+ 准备好定义 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)',
+ }}
+ variants={fadeInScale}
+ whileHover={{
+ scale: 1.05,
+ boxShadow: '0 20px 60px rgba(240, 185, 11, 0.4)',
+ }}
+ whileTap={{ scale: 0.95 }}
+ >
+
+
+
+
+
+
+
+
+
+ + {title} +
++ {description} +
++ "{quote}" +
+
+
+ + 访问 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 }}
+ >
+ 注册新账号
+
+
+
+ {/* Back to Home */}
+
+
{/* Logo */}
);
-}
\ No newline at end of file
+}
diff --git a/web/src/components/RegisterPage.tsx b/web/src/components/RegisterPage.tsx
index 01691aac..16616b86 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,6 +74,21 @@ export function RegisterPage() {
return (
@@ -191,4 +205,4 @@ export function LoginPage() {
+ {/* Back to Home */}
+ {step === 'register' && (
+
+ )}
+
{/* Logo */}
);
-}
\ No newline at end of file
+}
diff --git a/web/src/index.css b/web/src/index.css
index 09daf5a6..5c4e8e53 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -6,13 +6,21 @@
@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: #0C0E12;
--background-elevated: #181A20;
--foreground: #EAECEF;
--panel-bg: #1E2329;
@@ -138,10 +146,10 @@ body {
@keyframes shimmer {
0% {
- background-position: -200% 0;
+ transform: translateX(-100%);
}
100% {
- background-position: 200% 0;
+ transform: translateX(100%);
}
}
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));
+}
@@ -307,4 +323,4 @@ export function RegisterPage() {