);
-}
\ 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)} />}
+ 
+ 
+ 
+ 
+