From 8e28854751f052be39990ca51339b2b4e395a451 Mon Sep 17 00:00:00 2001 From: Ember <197652334@qq.com> Date: Sun, 2 Nov 2025 00:36:37 +0800 Subject: [PATCH] =?UTF-8?q?refactor(web):=20=E6=8B=86=E5=88=86=20LandingPa?= =?UTF-8?q?ge=20=E4=B8=BA=E5=8F=AF=E5=A4=8D=E7=94=A8=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=EF=BC=88HeaderBar/Hero/AnimatedSection=20=E7=AD=89=EF=BC=89?= =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9E=20pages=20=E7=BB=93=E6=9E=84?= =?UTF-8?q?=E5=B9=B6=E5=AE=8C=E6=88=90=E9=9B=86=E6=88=90=EF=BC=9B=E6=9E=84?= =?UTF-8?q?=E5=BB=BA=E9=80=9A=E8=BF=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/landing/AboutSection.tsx | 71 ++ .../components/landing/AnimatedSection.tsx | 30 + .../components/landing/CommunitySection.tsx | 42 + .../components/landing/FeaturesSection.tsx | 56 + web/src/components/landing/HeaderBar.tsx | 97 ++ web/src/components/landing/HeroSection.tsx | 82 ++ .../components/landing/HowItWorksSection.tsx | 75 ++ web/src/components/landing/LoginModal.tsx | 63 + web/src/pages/LandingPage.tsx | 1010 +---------------- 9 files changed, 543 insertions(+), 983 deletions(-) create mode 100644 web/src/components/landing/AboutSection.tsx create mode 100644 web/src/components/landing/AnimatedSection.tsx create mode 100644 web/src/components/landing/CommunitySection.tsx create mode 100644 web/src/components/landing/FeaturesSection.tsx create mode 100644 web/src/components/landing/HeaderBar.tsx create mode 100644 web/src/components/landing/HeroSection.tsx create mode 100644 web/src/components/landing/HowItWorksSection.tsx create mode 100644 web/src/components/landing/LoginModal.tsx diff --git a/web/src/components/landing/AboutSection.tsx b/web/src/components/landing/AboutSection.tsx new file mode 100644 index 00000000..1ee3431a --- /dev/null +++ b/web/src/components/landing/AboutSection.tsx @@ -0,0 +1,71 @@ +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}" +

+
+
+ + {author} + +
+ + ) +} + +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 交易操作系统 +

+ + +
+ } + title='100% 开源与自托管' + description='你的框架，你的规则。非黑箱，支持自定义提示词和多模型。' + features={['完全开源代码', '支持自托管部署', '自定义 AI 提示词', '多模型支持（DeepSeek、Qwen）']} + delay={0} + /> + } + title='多代理智能竞争' + description='AI 策略在沙盒中高速战斗，最优者生存，实现策略进化。' + features={['多 AI 代理并行运行', '策略自动优化', '沙盒安全测试', '跨市场策略移植']} + delay={0.1} + /> + } + title='安全可靠交易' + description='企业级安全保障，完全掌控你的资金和交易策略。' + features={['本地私钥管理', 'API 权限精细控制', '实时风险监控', '交易日志审计']} + delay={0.2} + /> +
+
+ + ) +} + 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 ( + + ) +} + 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 为你自动决策、执行和优化交易。 + + +
+ + GitHub Stars + + + GitHub Forks + + + GitHub Contributors + +
+ + + 由 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..c9fe8786 --- /dev/null +++ b/web/src/components/landing/HowItWorksSection.tsx @@ -0,0 +1,75 @@ +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/pages/LandingPage.tsx b/web/src/pages/LandingPage.tsx index 9bafd804..fdbad26e 100644 --- a/web/src/pages/LandingPage.tsx +++ b/web/src/pages/LandingPage.tsx @@ -1,1006 +1,50 @@ -import { useState, useRef } from 'react' -import { motion, useScroll, useTransform, useInView } from 'framer-motion' -import { - Menu, - X, - Code, - GitBranch, - Shield, - ArrowRight, - Sparkles, - Target, - Rocket, - Lock, - Cpu, -} from 'lucide-react' -import { CryptoFeatureCard } from '../components/CryptoFeatureCard' -import Typewriter from '../components/Typewriter' - -// Animation variants -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 fadeInScale = { - initial: { opacity: 0, scale: 0.8 }, - animate: { opacity: 1, scale: 1 }, - transition: { duration: 0.5 }, -} - -const staggerContainer = { - animate: { - transition: { - staggerChildren: 0.1, - }, - }, -} - -// removed floatingAnimation to match simplified style +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' export function LandingPage() { - const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [showLoginModal, setShowLoginModal] = useState(false) - const { scrollYProgress } = useScroll() - const opacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]) - const scale = useTransform(scrollYProgress, [0, 0.2], [1, 0.8]) - return ( -
- {/* Navbar */} - - - {/* Hero Section */} -
-
-
- {/* Left Content */} - - - - - - 3 天内 2.5K+ GitHub Stars - - - - -

- Read the Market. -
- - Write the Trade. - -

- - - NOFX 是 AI - 交易的未来标准——一个开放、社区驱动的代理式交易操作系统。支持 - Binance、Aster DEX 等交易所，自托管、多代理竞争，让 AI - 为你自动决策、执行和优化交易。 - - -
- - GitHub Stars - - - GitHub Forks - - - GitHub Contributors - -
- - - 由 Aster DEX 和 Binance 提供支持，Amber.ac 战略投资。 - - - - {/* Right Content - Visual */} - - -
-
- - {/* Scroll Indicator removed for cleaner Binance-like style */} -
- - {/* About Section */} - -
-
- - - - - 关于 NOFX - - - -

- 什么是 NOFX？ -

-

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

-

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

- -
- -
-
-
- 你 100% 掌控 -
-
- 完全掌控 AI 提示词和资金 -
-
- - - -
-
- -
-
-
-
- - - {/* Features Section */} - -
- - - - - 核心功能 - - -

- 为什么选择 NOFX？ -

-

- 开源、透明、社区驱动的 AI 交易操作系统 -

- - -
- } - title='100% 开源与自托管' - description='你的框架，你的规则。非黑箱，支持自定义提示词和多模型。' - features={[ - '完全开源代码', - '支持自托管部署', - '自定义 AI 提示词', - '多模型支持（DeepSeek、Qwen）', - ]} - delay={0} - /> - } - title='多代理智能竞争' - description='AI 策略在沙盒中高速战斗，最优者生存，实现策略进化。' - features={[ - '多 AI 代理并行运行', - '策略自动优化', - '沙盒安全测试', - '跨市场策略移植', - ]} - delay={0.1} - /> - } - title='安全可靠交易' - description='企业级安全保障，完全掌控你的资金和交易策略。' - features={[ - '本地私钥管理', - 'API 权限精细控制', - '实时风险监控', - '交易日志审计', - ]} - delay={0.2} - /> -
-
- - - {/* How It Works Section */} - -
- -

- 如何开始使用 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 - 非托管，无官方策略。交易有风险，投资需谨慎。 -

-
- -
- - - {/* Community Section */} - -
- - - - - -
- - - {/* CTA Section */} + {/* CTA */}
- + 准备好定义 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 }} - > - +
+ 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 }}> 立即开始 - + - - + 查看源码 - +
- {/* Footer */} -
-
-
- -
- NOFX Logo - - NOFX - -
-

- AI 交易的未来标准 -

- - {[ - { - title: '链接', - links: [ - { - text: 'GitHub', - href: 'https://github.com/tinkle-community/nofx', - }, - { text: 'Telegram', href: 'https://t.me/nofx_dev_community' }, - { text: 'X (Twitter)', href: 'https://x.com/nofx_ai' }, - ], - }, - { - title: '资源', - links: [ - { - text: '文档', - href: 'https://github.com/tinkle-community/nofx#readme', - }, - { - text: 'Issues', - href: 'https://github.com/tinkle-community/nofx/issues', - }, - { - text: 'Pull Requests', - href: 'https://github.com/tinkle-community/nofx/pulls', - }, - ], - }, - { - title: '支持方', - items: [ - 'Aster DEX', - 'Binance', - 'HyperLiquid', - 'Amber.ac (战略投资)', - ], - }, - ].map((section, index) => ( - -

- {section.title} -

-
- {section.links - ? section.links.map((link) => ( - - {link.text} - - )) - : section.items?.map((item) => ( -

- {item} -

- ))} -
- - ))} -
- -

- © 2025 NOFX. All rights reserved. Backed by Amber.ac. -

-

- ⚠️ 风险警告：交易有风险，NOFX - 不提供投资建议。请在充分了解风险的情况下使用本系统。 -

- -
-
- - {/* Login Modal */} - {showLoginModal && ( - setShowLoginModal(false)} /> - )} + {showLoginModal && setShowLoginModal(false)} />}
) } - -function AnimatedSection({ - children, - id, - backgroundColor = 'var(--brand-black)', -}: any) { - const ref = useRef(null) - const isInView = useInView(ref, { once: true, margin: '-100px' }) - - return ( - - {children} - - ) -} - -// Removed unused FeatureCard component - -function StepCard({ number, title, description, delay }: any) { - return ( - - - {number} - -
-

- {title} -

-

- {description} -

-
- - ) -} - -function TestimonialCard({ quote, author, delay }: any) { - return ( - -

- "{quote}" -

-
- - - {author} - -
- - ) -} - -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 }} - > - 注册新账号 - -
- - - ) -}