mirror of
https://github.com/laoxong/nofx.git
synced 2026-06-04 09:58:22 +08:00
feat: improve landing page UI and add pprof port mapping
This commit is contained in:
tinkle-community
+1
-3
@@ -14,9 +14,6 @@ import (
|
||||
"nofx/manager"
|
||||
"nofx/market"
|
||||
"nofx/provider/alpaca"
|
||||
"nofx/provider/coinank/coinank_api"
|
||||
"nofx/provider/coinank/coinank_enum"
|
||||
"nofx/provider/hyperliquid"
|
||||
"nofx/provider/twelvedata"
|
||||
"nofx/store"
|
||||
"nofx/trader"
|
||||
@@ -125,6 +122,7 @@ func (s *Server) setupRoutes() {
|
||||
|
||||
// Market data (no authentication required)
|
||||
api.GET("/klines", s.handleKlines)
|
||||
api.GET("/klines", s.handleKlines)
|
||||
api.GET("/symbols", s.handleSymbols)
|
||||
|
||||
// Authentication related routes (no authentication required)
|
||||
|
||||
@@ -9,6 +9,7 @@ services:
|
||||
stop_grace_period: 30s # 允许应用有 30 秒时间优雅关闭
|
||||
ports:
|
||||
- "${NOFX_BACKEND_PORT:-8080}:8080"
|
||||
- "6060:6060" # pprof profiling
|
||||
volumes:
|
||||
- ./data:/app/data
|
||||
- /etc/localtime:/etc/localtime:ro
|
||||
|
||||
@@ -1,83 +1,126 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Bot, TrendingUp, Layers } from 'lucide-react'
|
||||
import { Bot, TrendingUp, Layers, Zap, Hexagon, Crosshair } from 'lucide-react'
|
||||
|
||||
const agents = [
|
||||
{ name: "Alpha-1", type: "Scalper", apy: "142%", winRate: "68%", exposure: "Low", avatar: "/images/nofx_mascot.png", color: "text-nofx-gold" },
|
||||
{ name: "Beta-X", type: "Swing", apy: "89%", winRate: "55%", exposure: "Med", icon: TrendingUp, color: "text-blue-400" },
|
||||
{ name: "Gamma-Ray", type: "Arbitrage", apy: "24%", winRate: "99%", exposure: "Zero", icon: Layers, color: "text-purple-400" },
|
||||
{
|
||||
name: "ALPHA-1",
|
||||
class: "SCALPER",
|
||||
desc: "High-frequency microstructure exploitation.",
|
||||
apy: "142%",
|
||||
winRate: "68%",
|
||||
risk: "HIGH",
|
||||
color: "text-nofx-gold",
|
||||
border: "border-nofx-gold/50",
|
||||
bg_glow: "shadow-[0_0_30px_rgba(240,185,11,0.1)]",
|
||||
icon: Zap
|
||||
},
|
||||
{
|
||||
name: "BETA-X",
|
||||
class: "SWING_OPS",
|
||||
desc: "Multi-day trend extraction engine.",
|
||||
apy: "89%",
|
||||
winRate: "55%",
|
||||
risk: "MED",
|
||||
color: "text-blue-400",
|
||||
border: "border-blue-400/30",
|
||||
bg_glow: "shadow-[0_0_30px_rgba(96,165,250,0.1)]",
|
||||
icon: TrendingUp
|
||||
},
|
||||
{
|
||||
name: "GAMMA-RAY",
|
||||
class: "ARBITRAGE",
|
||||
desc: "Risk-free spatial price equalization.",
|
||||
apy: "24%",
|
||||
winRate: "99%",
|
||||
risk: "ZERO",
|
||||
color: "text-purple-400",
|
||||
border: "border-purple-400/30",
|
||||
bg_glow: "shadow-[0_0_30px_rgba(192,132,252,0.1)]",
|
||||
icon: Layers
|
||||
},
|
||||
]
|
||||
|
||||
export default function AgentGrid() {
|
||||
return (
|
||||
<section id="market-scanner" className="py-24 bg-nofx-bg relative">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<section id="market-scanner" className="py-24 bg-nofx-bg relative overflow-hidden">
|
||||
|
||||
<div className="flex items-center gap-4 mb-12">
|
||||
<div className="w-2 h-8 bg-nofx-gold" />
|
||||
<h2 className="text-3xl font-black text-white uppercase tracking-tighter">
|
||||
Deployable <span className="text-nofx-gold">Agents</span>
|
||||
</h2>
|
||||
{/* Background Details */}
|
||||
<div className="absolute top-0 right-0 p-10 opacity-20 pointer-events-none">
|
||||
<Hexagon className="w-64 h-64 text-zinc-800" strokeWidth={0.5} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||||
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-nofx-gold font-mono text-xs mb-2 tracking-widest uppercase">
|
||||
<Crosshair className="w-4 h-4" /> Operator Select
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-white uppercase tracking-tighter">
|
||||
Available <span className="text-transparent bg-clip-text bg-gradient-to-r from-nofx-gold to-white">Units</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="font-mono text-right text-xs text-zinc-500 max-w-xs">
|
||||
SELECT AN AUTONOMOUS AGENT TO BEGIN DEPLOYMENT. UNITS ARE PRE-TRAINED ON HISTORICAL TICKS.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{agents.map((agent, i) => {
|
||||
const Icon = agent.icon
|
||||
return (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className={`relative bg-zinc-900/50 border border-zinc-800 p-6 overflow-hidden hover:border-zinc-600 transition-colors group ${i === 0 ? 'border-nofx-gold/50 shadow-[0_0_30px_rgba(240,185,11,0.1)]' : ''}`}
|
||||
className={`group relative bg-black/40 backdrop-blur-sm border ${agent.border} overflow-hidden hover:bg-zinc-900/40 transition-all duration-300 ${agent.bg_glow}`}
|
||||
style={{ clipPath: 'polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%)' }}
|
||||
>
|
||||
{/* Top "Hinge" decoration */}
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
|
||||
|
||||
<div className="p-8 relative z-10">
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<div className="text-zinc-400 text-xs font-mono uppercase mb-1">{agent.type} CLASS</div>
|
||||
<div className="text-2xl font-bold text-white flex items-center gap-2">
|
||||
{agent.name}
|
||||
{i === 0 && <span className="text-[10px] bg-nofx-gold text-black px-1.5 py-0.5 rounded font-bold">TOP RATED</span>}
|
||||
<div className="p-3 bg-zinc-900/80 rounded border border-zinc-700">
|
||||
<Icon className={`w-8 h-8 ${agent.color}`} />
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-[10px] font-mono text-zinc-500 uppercase">Class</div>
|
||||
<div className={`font-bold font-mono tracking-wider ${agent.color}`}>{agent.class}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Bot className={`w-8 h-8 ${agent.color}`} />
|
||||
</div>
|
||||
|
||||
{/* Name & Desc */}
|
||||
<h3 className="text-3xl font-bold text-white mb-2 tracking-tight group-hover:text-nofx-accent transition-colors">{agent.name}</h3>
|
||||
<p className="text-zinc-500 text-sm mb-8 leading-relaxed h-10">{agent.desc}</p>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-3 gap-2 mb-6 font-mono text-sm">
|
||||
<div className="bg-black/40 p-2 rounded border border-zinc-800 group-hover:border-zinc-700 transition-colors">
|
||||
<div className="text-zinc-500 text-[10px] uppercase">APY</div>
|
||||
<div className="grid grid-cols-3 gap-px bg-zinc-800/50 border border-zinc-800 rounded overflow-hidden mb-8">
|
||||
<div className="bg-black/60 p-3 text-center group-hover:bg-zinc-900/60 transition-colors">
|
||||
<div className="text-[10px] text-zinc-500 uppercase font-mono mb-1">APY</div>
|
||||
<div className="text-green-400 font-bold">{agent.apy}</div>
|
||||
</div>
|
||||
<div className="bg-black/40 p-2 rounded border border-zinc-800 group-hover:border-zinc-700 transition-colors">
|
||||
<div className="text-zinc-500 text-[10px] uppercase">Win Rate</div>
|
||||
<div className={`font-bold ${agent.color}`}>{agent.winRate}</div>
|
||||
<div className="bg-black/60 p-3 text-center group-hover:bg-zinc-900/60 transition-colors">
|
||||
<div className="text-[10px] text-zinc-500 uppercase font-mono mb-1">Win %</div>
|
||||
<div className="text-white font-bold">{agent.winRate}</div>
|
||||
</div>
|
||||
<div className="bg-black/40 p-2 rounded border border-zinc-800 group-hover:border-zinc-700 transition-colors">
|
||||
<div className="text-zinc-500 text-[10px] uppercase">Risk</div>
|
||||
<div className="text-white font-bold">{agent.exposure}</div>
|
||||
<div className="bg-black/60 p-3 text-center group-hover:bg-zinc-900/60 transition-colors">
|
||||
<div className="text-[10px] text-zinc-500 uppercase font-mono mb-1">Risk</div>
|
||||
<div className={`${agent.color} font-bold`}>{agent.risk}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual Asset (Avatar or Abstract Icon) */}
|
||||
<div className="absolute right-[-20px] bottom-[-20px] opacity-10 group-hover:opacity-20 transition-all duration-500 group-hover:scale-110 pointer-events-none">
|
||||
{agent.avatar ? (
|
||||
<img
|
||||
src={agent.avatar}
|
||||
alt="Agent"
|
||||
className="w-40 h-40 object-cover grayscale mix-blend-screen"
|
||||
/>
|
||||
) : (
|
||||
Icon && <Icon strokeWidth={1} className={`w-40 h-40 ${agent.color}`} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action */}
|
||||
<button className={`w-full py-3 font-bold uppercase tracking-wider text-sm transition-colors ${i === 0
|
||||
? 'bg-nofx-gold text-black hover:bg-white'
|
||||
: 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700'
|
||||
}`}>
|
||||
Initialize Agent
|
||||
{/* Action Btn */}
|
||||
<button className={`w-full py-4 text-xs font-bold font-mono uppercase tracking-[0.2em] border border-zinc-700 hover:border-${agent.color === 'text-nofx-gold' ? 'nofx-gold' : 'white'} hover:bg-white/5 transition-all flex items-center justify-center gap-2 group-hover:text-white`}>
|
||||
<span className={agent.color}>[</span> INITIALIZE <span className={agent.color}>]</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Decorative Background Elements */}
|
||||
<div className="absolute -right-10 -bottom-10 w-40 h-40 bg-gradient-to-br from-white/5 to-transparent rounded-full blur-2xl group-hover:opacity-50 transition-opacity opacity-20"></div>
|
||||
<div className="absolute inset-0 bg-scanlines opacity-20 pointer-events-none"></div>
|
||||
|
||||
</motion.div>
|
||||
)
|
||||
|
||||
@@ -1,63 +1,112 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Activity, BarChart3, Globe } from 'lucide-react'
|
||||
import { Activity, BarChart3, Globe, Wifi, Server, Database, Lock } from 'lucide-react'
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
// Mock Data for "Live" Feed
|
||||
const logs = [
|
||||
{ time: "14:02:23", type: "EXE", msg: "Bot-Alpha executed BUY BTC-USDT @ 64230.50", color: "text-green-500" },
|
||||
{ time: "14:02:24", type: "SIG", msg: "High vol detected in ETH-PERP. Signal strength: 0.89", color: "text-nofx-gold" },
|
||||
{ time: "14:02:25", type: "NET", msg: "Block propagation delay < 2ms", color: "text-zinc-500" },
|
||||
{ time: "14:02:27", type: "EXE", msg: "Bot-Beta executed SELL SOL-USDT @ 145.20", color: "text-red-500" },
|
||||
{ time: "14:02:28", type: "SYS", msg: "Memory pool optimization complete.", color: "text-nofx-accent" },
|
||||
{ time: "14:02:30", type: "ARB", msg: "Arbitrage opportunity found: BINANCE vs BYBIT (0.4%)", color: "text-blue-400" },
|
||||
]
|
||||
const generateLog = (id) => {
|
||||
const types = ['EXE', 'ARB', 'LIQ', 'NET', 'SYS']
|
||||
const pairs = ['BTC-USDT', 'ETH-PERP', 'SOL-USDT', 'BNB-BUSD']
|
||||
const actions = ['BUY', 'SELL', 'SHORT', 'LONG']
|
||||
const type = types[Math.floor(Math.random() * types.length)]
|
||||
|
||||
let msg = ''
|
||||
let color = ''
|
||||
|
||||
switch (type) {
|
||||
case 'EXE':
|
||||
msg = `BOT-${Math.floor(Math.random() * 99)} ${actions[Math.floor(Math.random() * 4)]} ${pairs[Math.floor(Math.random() * 4)]} @ ${Math.floor(Math.random() * 60000)}`
|
||||
color = 'text-green-500'
|
||||
break;
|
||||
case 'ARB':
|
||||
msg = `Spread detected: BINANCE <> BYBIT (${(Math.random()).toFixed(3)}%)`
|
||||
color = 'text-nofx-gold'
|
||||
break;
|
||||
case 'LIQ':
|
||||
msg = `Liquidation Alert: ${pairs[Math.floor(Math.random() * 4)]} $${Math.floor(Math.random() * 100)}k REKT`
|
||||
color = 'text-red-500'
|
||||
break;
|
||||
case 'NET':
|
||||
msg = `Block propagation latency < ${Math.floor(Math.random() * 10)}ms`
|
||||
color = 'text-zinc-500'
|
||||
break;
|
||||
default:
|
||||
msg = `System optimization cycle complete. Allocating resources.`
|
||||
color = 'text-blue-400'
|
||||
}
|
||||
|
||||
return { id, time: new Date().toLocaleTimeString('en-US', { hour12: false }) + '.' + Math.floor(Math.random() * 999), type, msg, color }
|
||||
}
|
||||
|
||||
export default function LiveFeed() {
|
||||
const [logs, setLogs] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
// Initial population
|
||||
const initialLogs = Array.from({ length: 8 }).map((_, i) => generateLog(i))
|
||||
setLogs(initialLogs)
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setLogs(prev => {
|
||||
const newLog = generateLog(Date.now())
|
||||
return [newLog, ...prev.slice(0, 7)]
|
||||
})
|
||||
}, 800) // Fast 800ms updates for HFT feel
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section className="w-full bg-black border-y border-zinc-800 py-4 overflow-hidden">
|
||||
<div className="max-w-[1920px] mx-auto px-6 flex flex-col md:flex-row gap-6">
|
||||
<section className="w-full bg-[#020304] border-y border-zinc-800 py-1 overflow-hidden relative">
|
||||
<div className="absolute inset-0 bg-scanlines opacity-10 pointer-events-none"></div>
|
||||
|
||||
{/* Left Status Panel */}
|
||||
<div className="w-full md:w-1/3 flex items-center justify-between md:justify-start gap-8 text-xs font-mono text-zinc-500 border-b md:border-b-0 md:border-r border-zinc-900 pb-4 md:pb-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<Activity className="w-4 h-4 text-nofx-gold" />
|
||||
<div>
|
||||
<div className="text-zinc-300 font-bold">SYSTEM LOAD</div>
|
||||
<div className="text-nofx-gold">42%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Globe className="w-4 h-4 text-nofx-accent" />
|
||||
<div>
|
||||
<div className="text-zinc-300 font-bold">ACTIVE NODES</div>
|
||||
<div className="text-nofx-accent">8,249</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<BarChart3 className="w-4 h-4 text-green-500" />
|
||||
<div>
|
||||
<div className="text-zinc-300 font-bold">24H VOL</div>
|
||||
<div className="text-green-500">$4.2B</div>
|
||||
<div className="max-w-[1920px] mx-auto px-4 flex flex-col md:flex-row gap-0 md:gap-8 items-stretch h-[320px] md:h-12 text-xs font-mono">
|
||||
|
||||
{/* Left Status Bar (Static) */}
|
||||
<div className="hidden md:flex items-center gap-6 text-zinc-600 border-r border-zinc-900 pr-6 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<span className="font-bold text-zinc-400">WS_CONN: STABLE</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-nofx-gold">TPS: 48,291</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Scrolling Log */}
|
||||
<div className="flex-1 font-mono text-xs md:text-sm h-32 md:h-12 overflow-hidden relative mask-image-b">
|
||||
<div className="absolute inset-0 flex flex-col gap-1 animate-slide-up">
|
||||
{logs.map((log, i) => (
|
||||
{/* Right Scrolling Log - Vertical on mobile, Single line ticker on Desktop */}
|
||||
<div className="flex-1 overflow-hidden relative font-mono text-[10px] md:text-sm h-full flex items-center">
|
||||
|
||||
{/* Desktop View: Single Line Fade */}
|
||||
<div className="hidden md:block w-full h-full relative">
|
||||
{logs.slice(0, 1).map((log) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
key={log.id}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: i * 0.2 }}
|
||||
className="flex gap-4"
|
||||
className="absolute inset-0 flex items-center gap-4"
|
||||
>
|
||||
<span className="text-zinc-600">[{log.time}]</span>
|
||||
<span className="text-zinc-400 font-bold w-8">{log.type}</span>
|
||||
<span className={log.color}>{log.msg}</span>
|
||||
<span className={`font-bold w-10 ${log.type === 'LIQ' ? 'text-red-500 bg-red-500/10 px-1 rounded' :
|
||||
log.type === 'ARB' ? 'text-nofx-gold bg-nofx-gold/10 px-1 rounded' :
|
||||
log.type === 'EXE' ? 'text-green-500' : 'text-zinc-500'
|
||||
}`}>{log.type}</span>
|
||||
<span className={`${log.color}`}>{log.msg}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Mobile View: Vertical Stack */}
|
||||
<div className="md:hidden flex flex-col gap-2 w-full p-4 h-full overflow-hidden">
|
||||
{logs.map((log) => (
|
||||
<div key={log.id} className="flex gap-2 w-full truncate border-b border-zinc-900/50 pb-1 last:border-0">
|
||||
<span className="text-zinc-700 w-16 shrink-0">{log.time.split('.')[0]}</span>
|
||||
<span className={`font-bold w-8 shrink-0 ${log.type === 'LIQ' ? 'text-red-500' :
|
||||
log.type === 'ARB' ? 'text-nofx-gold' :
|
||||
'text-zinc-500'
|
||||
}`}>{log.type}</span>
|
||||
<span className={`${log.color} truncate`}>{log.msg}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,224 +1,324 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { ArrowRight, Terminal as TerminalIcon, Star, GitFork, Users, Activity, Layers, Cpu, Network } from 'lucide-react'
|
||||
import { ArrowRight, Shield, Activity, CircuitBoard, Cpu, Wifi, Globe, Lock, Zap, Star, GitFork, Users, MessageCircle } from 'lucide-react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { OFFICIAL_LINKS } from '../../../constants/branding'
|
||||
import { httpClient } from '../../../lib/httpClient'
|
||||
import { useGitHubStats } from '../../../hooks/useGitHubStats'
|
||||
|
||||
export default function TerminalHero() {
|
||||
const [text, setText] = useState('')
|
||||
const [githubData, setGithubData] = useState({ stars: '9.4k', forks: '2.4k', subscribers: '74' })
|
||||
const fullText = "INITIALIZING NOFX KERNEL... CRYPTO | STOCKS | FOREX | METALS... SYSTEM READY."
|
||||
|
||||
// Real-time price state
|
||||
const [prices, setPrices] = useState<Record<string, string>>({
|
||||
BTC: '...',
|
||||
ETH: '...',
|
||||
SOL: '...',
|
||||
BNB: '...',
|
||||
XRP: '...',
|
||||
DOGE: '...',
|
||||
ADA: '...',
|
||||
AVAX: '...'
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
// Typing effect
|
||||
let i = 0
|
||||
const timer = setInterval(() => {
|
||||
setText(fullText.slice(0, i))
|
||||
i++
|
||||
if (i > fullText.length) clearInterval(timer)
|
||||
}, 30)
|
||||
const fetchPrices = async () => {
|
||||
const symbols = ['BTC', 'ETH', 'SOL', 'BNB', 'XRP', 'DOGE', 'ADA', 'AVAX']
|
||||
|
||||
// Fetch GitHub Data
|
||||
fetch('https://api.github.com/repos/NoFxAiOS/nofx')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.stargazers_count) {
|
||||
setGithubData({
|
||||
stars: (data.stargazers_count / 1000).toFixed(1) + 'k',
|
||||
forks: (data.forks_count / 1000).toFixed(1) + 'k',
|
||||
subscribers: data.subscribers_count?.toString() || '74'
|
||||
})
|
||||
// We use Promise.all to fetch them in parallel for now, or sequentially if rate limited.
|
||||
// Parallel is better for UI responsiveness.
|
||||
try {
|
||||
const results = await Promise.all(symbols.map(async (sym) => {
|
||||
try {
|
||||
const res = await httpClient.get(`/api/klines?symbol=${sym}USDT&interval=1m&limit=1`)
|
||||
if (res.success && res.data?.length > 0) {
|
||||
const closePrice = parseFloat(res.data[0].close)
|
||||
// Format price: < 1 use 4 decimals, > 1 use 2
|
||||
const formatted = closePrice < 1
|
||||
? closePrice.toFixed(4)
|
||||
: closePrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
return { symbol: sym, price: formatted }
|
||||
}
|
||||
})
|
||||
.catch(err => console.error("Failed to fetch GitHub stats", err))
|
||||
} catch (err) {
|
||||
// ignore individual failures
|
||||
}
|
||||
return null
|
||||
}))
|
||||
|
||||
return () => clearInterval(timer)
|
||||
const newPrices: Record<string, string> = {}
|
||||
results.forEach(r => {
|
||||
if (r) newPrices[r.symbol] = r.price
|
||||
})
|
||||
|
||||
setPrices(prev => ({ ...prev, ...newPrices }))
|
||||
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch market prices", e)
|
||||
}
|
||||
}
|
||||
|
||||
fetchPrices()
|
||||
const interval = setInterval(fetchPrices, 5000)
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section className="relative w-full min-h-screen bg-nofx-bg text-nofx-text overflow-hidden flex flex-col items-center justify-center pt-20">
|
||||
<section className="relative w-full min-h-screen bg-nofx-bg text-nofx-text overflow-hidden flex flex-col pt-20">
|
||||
|
||||
{/* 1. ARCHITECTURAL BACKGROUND / HOLOGRAPHIC CONSTRUCT */}
|
||||
<div className="absolute inset-0 z-0 overflow-hidden pointer-events-none select-none">
|
||||
{/* BACKGROUND LAYERS */}
|
||||
{/* 1. Grid */}
|
||||
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-soft-light pointer-events-none"></div>
|
||||
<div className="absolute inset-0 bg-grid-pattern opacity-[0.03] pointer-events-none"></div>
|
||||
|
||||
{/* The Mascot "Ghost" in the Machine - PREMIUM & CLEAN */}
|
||||
<div className="absolute right-0 bottom-0 w-[80vw] lg:w-[45vw] h-[85vh] opacity-90 mix-blend-normal flex items-end justify-end">
|
||||
<div className="relative w-full h-full">
|
||||
<img
|
||||
src="/images/nofx_mascot.png"
|
||||
alt=""
|
||||
className="w-full h-full object-contain object-bottom drop-shadow-[0_0_50px_rgba(240,185,11,0.2)]"
|
||||
style={{
|
||||
maskImage: 'linear-gradient(to top, black 60%, transparent 100%)',
|
||||
filter: 'grayscale(100%) contrast(110%) brightness(110%) sepia(20%) hue-rotate(320deg)'
|
||||
}}
|
||||
/>
|
||||
{/* 2. World Map / Data Viz Background (Abstract) */}
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-10 pointer-events-none">
|
||||
<div className="w-[80vw] h-[80vw] rounded-full border border-nofx-gold/20 animate-pulse-slow"></div>
|
||||
<div className="absolute w-[60vw] h-[60vw] rounded-full border border-dashed border-nofx-accent/20 animate-[spin_60s_linear_infinite]"></div>
|
||||
</div>
|
||||
|
||||
{/* Clean Horizontal Scanline Overlay */}
|
||||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSIxIiBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuMykiIC8+Cjwvc3ZnPg==')] opacity-50 mix-blend-overlay pointer-events-none" />
|
||||
{/* 3. Gradient Spots */}
|
||||
<div className="absolute top-[-10%] left-[-10%] w-[40vw] h-[40vw] bg-nofx-gold/10 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div className="absolute bottom-[-10%] right-[-10%] w-[40vw] h-[40vw] bg-nofx-accent/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
|
||||
{/* Subtle Glow Behind */}
|
||||
<div className="absolute right-10 bottom-10 w-64 h-64 bg-nofx-gold/20 rounded-full blur-[100px] -z-10" />
|
||||
{/* CONTENT GRID */}
|
||||
<div className="relative z-10 flex-1 grid grid-cols-1 lg:grid-cols-12 gap-0 lg:gap-8 max-w-[1800px] mx-auto w-full px-6 h-full pb-20 pt-10 pointer-events-none">
|
||||
|
||||
{/* LEFT COLUMN: TELEMETRY & STATUS */}
|
||||
<div className="hidden lg:flex col-span-3 flex-col justify-between h-full border-r border-white/5 pr-8 py-10 pointer-events-auto">
|
||||
|
||||
{/* Top: System Health */}
|
||||
<div className="space-y-6">
|
||||
<div className="tech-border p-4 bg-black/40 backdrop-blur-sm">
|
||||
<h3 className="text-xs font-mono text-nofx-gold mb-4 flex items-center gap-2">
|
||||
<Activity className="w-3 h-3" /> SYSTEM_DIAGNOSTICS
|
||||
</h3>
|
||||
<div className="space-y-3 font-mono text-[10px] text-zinc-400">
|
||||
<div className="flex justify-between items-center">
|
||||
<span>KERNEL_LATENCY</span>
|
||||
<span className="text-nofx-accent">12ms</span>
|
||||
</div>
|
||||
<div className="w-full h-1 bg-zinc-800 rounded-full overflow-hidden">
|
||||
<div className="w-[90%] h-full bg-nofx-accent/50"></div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span>MEMORY_INTEGRITY</span>
|
||||
<span className="text-nofx-success">100%</span>
|
||||
</div>
|
||||
<div className="w-full h-1 bg-zinc-800 rounded-full overflow-hidden">
|
||||
<div className="w-full h-full bg-nofx-success/50"></div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span>UPTIME</span>
|
||||
<span className="text-white">99.999%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Clean Geometric Grid */}
|
||||
<svg className="absolute inset-0 w-full h-full opacity-10" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-zinc-500" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#grid)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center text-center max-w-[1400px] px-6 w-full h-full justify-center">
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-center">
|
||||
|
||||
{/* LEFT COLUMN: Main System Interface */}
|
||||
<div className="col-span-1 lg:col-span-8 text-left z-30 flex flex-col justify-center h-full">
|
||||
|
||||
{/* System Status Tag */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex flex-wrap items-center gap-3 mb-8"
|
||||
>
|
||||
<div className="px-3 py-1 border border-nofx-gold/30 bg-nofx-gold/5 rounded-sm text-nofx-gold text-xs font-mono flex items-center gap-2 shadow-[0_0_15px_rgba(240,185,11,0.2)]">
|
||||
<div className="w-1.5 h-1.5 bg-nofx-gold rounded-full animate-pulse" />
|
||||
SYSTEM ONLINE
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Headline with Project Specifics */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="relative"
|
||||
>
|
||||
<h1 className="text-6xl md:text-8xl xl:text-9xl font-black tracking-tighter leading-[0.85] mb-8 text-white">
|
||||
AGENTIC <br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-nofx-gold via-white to-nofx-gold animate-shimmer bg-[length:200%_100%]">TRADING OS</span>
|
||||
</h1>
|
||||
|
||||
{/* SVG Connector Line */}
|
||||
<div className="absolute -left-10 top-2 bottom-2 w-px bg-zinc-800 hidden lg:block">
|
||||
<div className="absolute top-0 left-[-1px] w-[3px] h-8 bg-nofx-gold" />
|
||||
<div className="absolute bottom-0 left-[-1px] w-[3px] h-8 bg-zinc-600" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Typing Terminal Output */}
|
||||
<div className="h-24 mb-10 font-mono text-zinc-400 text-sm flex flex-col justify-start gap-3 max-w-2xl border-l-2 border-zinc-800 pl-6">
|
||||
<div className="flex items-center gap-2 text-nofx-gold">
|
||||
<span>></span> {text}<span className="animate-pulse bg-nofx-gold w-2 h-4 block"></span>
|
||||
</div>
|
||||
|
||||
{/* Clean Markets Row */}
|
||||
<div className="flex gap-6 text-[10px] md:text-xs text-zinc-500 font-bold tracking-widest uppercase">
|
||||
<span className="flex items-center gap-2 hover:text-white transition-colors"><Network className="w-3 h-3" /> CRYPTO</span>
|
||||
<span className="flex items-center gap-2 hover:text-white transition-colors"><Activity className="w-3 h-3" /> STOCKS</span>
|
||||
<span className="flex items-center gap-2 hover:text-white transition-colors"><Layers className="w-3 h-3" /> FOREX</span>
|
||||
<span className="flex items-center gap-2 hover:text-white transition-colors"><Cpu className="w-3 h-3" /> METALS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Primary Actions */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 w-full max-w-lg">
|
||||
<button
|
||||
onClick={() => document.getElementById('market-scanner')?.scrollIntoView({ behavior: 'smooth' })}
|
||||
className="group relative px-8 py-4 bg-nofx-gold text-black font-bold font-mono hover:bg-white transition-all flex items-center justify-between min-w-[200px] hover:shadow-[0_0_20px_rgba(240,185,11,0.4)]"
|
||||
style={{ clipPath: 'polygon(0 0, 100% 0, 100% 80%, 90% 100%, 0% 100%)' }}
|
||||
>
|
||||
<span>DEPLOY TRADERS</span>
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
|
||||
<a
|
||||
href={OFFICIAL_LINKS.github}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="px-8 py-4 border border-zinc-700 bg-black/50 backdrop-blur-sm text-zinc-300 font-mono hover:border-nofx-accent hover:text-nofx-accent transition-all flex items-center justify-between min-w-[200px]"
|
||||
style={{ clipPath: 'polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0% 80%)' }}
|
||||
>
|
||||
<span>SOURCE CODE</span>
|
||||
<TerminalIcon className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT COLUMN: Modules & Data HUD */}
|
||||
<div className="col-span-1 lg:col-span-4 flex flex-col gap-6 mt-12 lg:mt-0 z-20">
|
||||
|
||||
{/* Module 1: GitHub Intelligence */}
|
||||
<div className="border border-zinc-800 bg-black/80 backdrop-blur-md p-6 relative group overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-20 h-20 bg-nofx-gold/5 rounded-bl-full -mr-10 -mt-10 transition-transform group-hover:scale-150" />
|
||||
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className="text-xs font-mono text-zinc-500 flex items-center gap-2">
|
||||
<Users className="w-4 h-4 text-nofx-gold" /> COMMUNITY UPLINK
|
||||
<div className="p-4 border border-zinc-800/50 rounded bg-zinc-900/20">
|
||||
<div className="flex items-center gap-3 text-zinc-500 mb-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span className="text-[10px] font-mono tracking-widest">SECURITY PROTOCOLS</span>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse" />
|
||||
<div className="h-1 flex-1 bg-nofx-gold"></div>
|
||||
<div className="h-1 flex-1 bg-nofx-gold"></div>
|
||||
<div className="h-1 flex-1 bg-nofx-gold"></div>
|
||||
<div className="h-1 flex-1 bg-zinc-800"></div>
|
||||
</div>
|
||||
<div className="mt-2 text-right text-[10px] text-nofx-gold/80 font-mono">LEVEL 3 ACTIVATE</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-white flex items-center gap-1">
|
||||
{githubData.stars} <Star className="w-3 h-3 text-nofx-gold fill-nofx-gold" />
|
||||
</div>
|
||||
<div className="text-[10px] text-zinc-500 uppercase tracking-wider">Active Star-gazers</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-white flex items-center gap-1">
|
||||
{githubData.forks} <GitFork className="w-3 h-3 text-zinc-500" />
|
||||
</div>
|
||||
<div className="text-[10px] text-zinc-500 uppercase tracking-wider">Protocol Forks</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Module 2: System Capabilities (Specific to NoFX) */}
|
||||
<div className="border border-zinc-800 bg-black/60 backdrop-blur-sm p-6 space-y-3 hidden md:block">
|
||||
<div className="text-xs font-mono text-zinc-500 mb-2">ACTIVE MODULES</div>
|
||||
|
||||
<div className="flex justify-between items-center text-sm font-mono border-b border-zinc-900 pb-2">
|
||||
<span className="text-zinc-300">STRATEGY STUDIO</span>
|
||||
<span className="text-green-500 text-xs">READY</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-sm font-mono border-b border-zinc-900 pb-2">
|
||||
<span className="text-zinc-300">DEBATE ARENA</span>
|
||||
<span className="text-green-500 text-xs text-nofx-accent animate-pulse">Running</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-sm font-mono pb-2">
|
||||
<span className="text-zinc-300">BACKTEST LAB</span>
|
||||
<span className="text-zinc-500 text-xs">Idle</span>
|
||||
{/* Bottom: Network Log */}
|
||||
<div className="font-mono text-[10px] text-zinc-600 space-y-1 opacity-70">
|
||||
<div>> CONNECTING TO MAINNET... OK</div>
|
||||
<div>> SYNCING NODES (424/424)... OK</div>
|
||||
<div>> LOADING ASSETS... DONE</div>
|
||||
<div className="animate-pulse">> AWAITING USER INPUT_</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* CENTER COLUMN: MAIN ACTION */}
|
||||
<div className="col-span-1 lg:col-span-6 flex flex-col items-center justify-center text-center relative z-20 pointer-events-auto">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Decorative Footer */}
|
||||
<div className="absolute bottom-0 w-full border-t border-zinc-800 bg-black/90 backdrop-blur-md p-3 flex flex-wrap justify-between items-center text-[10px] md:text-xs text-zinc-500 font-mono z-20">
|
||||
<div className="flex gap-6 px-4">
|
||||
<span className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-nofx-gold/50 rounded-full" />
|
||||
NOFX-OS
|
||||
{/* Project Identity Chip */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-8 inline-flex items-center gap-3 px-4 py-2 rounded-full border border-nofx-gold/20 bg-nofx-gold/5 backdrop-blur-md"
|
||||
>
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-nofx-gold opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-nofx-gold"></span>
|
||||
</span>
|
||||
<span className="hidden sm:inline">24H VOL: $42.8M</span>
|
||||
<span className="hidden sm:inline">ACTIVE AGENTS: 1,024</span>
|
||||
<span className="text-xs font-mono text-nofx-gold tracking-widest">NOFX OPEN-SOURCE AGENTIC OS</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Title - Massive & Impactful */}
|
||||
<h1 className="text-6xl md:text-8xl lg:text-9xl font-black tracking-tighter leading-[0.8] mb-6 select-none bg-clip-text text-transparent bg-gradient-to-b from-white via-white to-zinc-600">
|
||||
AGENTIC<br />
|
||||
<span className="text-stroke-1 text-transparent bg-clip-text bg-gradient-to-r from-nofx-gold via-white to-nofx-gold animate-shimmer bg-[length:200%_auto]">TRADING</span>
|
||||
</h1>
|
||||
|
||||
<p className="max-w-xl text-zinc-400 text-lg mb-10 font-light leading-relaxed">
|
||||
The World's First Open-Source Agentic Trading OS.
|
||||
Deploy autonomous high-frequency trading agents powered by advanced LLMs.
|
||||
</p>
|
||||
|
||||
{/* Command Line Input Simulation */}
|
||||
<div className="w-full max-w-lg h-12 bg-black/50 border border-zinc-800 rounded flex items-center px-4 mb-10 font-mono text-sm shadow-2xl backdrop-blur-sm group hover:border-nofx-gold/50 transition-colors cursor-text" onClick={() => document.getElementById('market-scanner')?.scrollIntoView({ behavior: 'smooth' })}>
|
||||
<span className="text-nofx-success mr-2">➜</span>
|
||||
<span className="text-nofx-accent mr-2">~</span>
|
||||
<span className="text-zinc-500">deploy agent --strategy=hft</span>
|
||||
<span className="w-2 h-4 bg-nofx-gold ml-1 animate-pulse"></span>
|
||||
</div>
|
||||
<div className="px-4 flex gap-4">
|
||||
<span className="text-nofx-gold">ENCRYPTED CONNECTION</span>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 w-full justify-center">
|
||||
<button
|
||||
onClick={() => document.getElementById('market-scanner')?.scrollIntoView({ behavior: 'smooth' })}
|
||||
className="group relative overflow-hidden bg-nofx-gold text-black px-8 py-4 font-bold font-mono tracking-wider hover:scale-105 transition-transform duration-200"
|
||||
style={{ clipPath: 'polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%)' }}
|
||||
>
|
||||
<span className="relative z-10 flex items-center gap-2">
|
||||
INITIALIZE PROTOCOL <ArrowRight className="w-4 h-4" />
|
||||
</span>
|
||||
<div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Community Stats Row */}
|
||||
<CommunityStats />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* RIGHT COLUMN: HOLOGRAPHIC DISPLAY - Absolute Overlay for "Far Right" Effect */}
|
||||
<div className="absolute top-0 right-0 h-full w-[45vw] hidden lg:flex pointer-events-none items-center justify-center z-0">
|
||||
<div className="relative w-full h-full flex items-center justify-center perspective-1000">
|
||||
{/* 3D Hologram Effect Container */}
|
||||
<div className="relative w-full h-[90%] flex items-center justify-center transform-style-3d rotate-y-[-12deg]">
|
||||
|
||||
{/* Scanning Grid behind Mascot */}
|
||||
<div className="absolute inset-x-0 top-[10%] bottom-[10%] bg-[linear-gradient(rgba(0,240,255,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.05)_1px,transparent_1px)] bg-[size:20px_20px] [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_80%)]"></div>
|
||||
|
||||
{/* The Mascot Image with Glitch/Holo Effects */}
|
||||
<div className="relative z-10 w-full h-full opacity-90 transition-all duration-500 hover:opacity-100 group flex flex-col justify-end pointer-events-auto">
|
||||
<div className="absolute inset-0 bg-nofx-accent/10 blur-[80px] rounded-full animate-pulse-slow transition-colors duration-500 group-hover:bg-nofx-gold/40"></div>
|
||||
<img
|
||||
src="/images/nofx_mascot.png"
|
||||
alt="Agent NoFX"
|
||||
className="w-full h-full object-contain object-bottom filter drop-shadow-[0_0_25px_rgba(0,240,255,0.2)] contrast-110 saturate-0 group-hover:saturate-100 group-hover:drop-shadow-[0_0_35px_rgba(234,179,8,0.5)] transition-all duration-500"
|
||||
style={{ maskImage: 'linear-gradient(to bottom, black 90%, transparent 100%)' }}
|
||||
/>
|
||||
{/* Holo Scan Line */}
|
||||
<div className="absolute w-full h-2 bg-nofx-accent/30 drop-shadow-[0_0_10px_rgba(0,240,255,0.8)] top-0 animate-scan-fast pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Data Widgets around Hologram */}
|
||||
<motion.div
|
||||
animate={{ y: [0, -10, 0] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="absolute top-[30%] left-[10%] bg-black/80 border border-nofx-accent/30 p-2 rounded backdrop-blur-md shadow-neon-blue"
|
||||
>
|
||||
<Cpu className="w-5 h-5 text-nofx-accent" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
animate={{ y: [0, 10, 0] }}
|
||||
transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 1 }}
|
||||
className="absolute bottom-[20%] right-[20%] bg-black/80 border border-nofx-gold/30 p-2 rounded backdrop-blur-md shadow-neon"
|
||||
>
|
||||
<Lock className="w-5 h-5 text-nofx-gold" />
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FLOATING TICKER FOOTER */}
|
||||
<div className="absolute bottom-0 w-full bg-black/80 border-t border-zinc-800/50 backdrop-blur-md z-30 overflow-hidden py-2 flex items-center">
|
||||
<div className="flex animate-marquee whitespace-nowrap gap-12 text-xs font-mono text-zinc-500 px-4">
|
||||
<span className="flex items-center gap-2"><Globe className="w-3 h-3 text-zinc-600" /> GLOBAL MARKET ACCESS</span>
|
||||
<span className="flex items-center gap-2 text-nofx-gold"><Zap className="w-3 h-3" /> FLASH LOANS ENABLED</span>
|
||||
<span className="flex items-center gap-2"><Wifi className="w-3 h-3 text-green-500" /> LOW LATENCY LINK: 12ms</span>
|
||||
|
||||
{/* Dynamic Coins */}
|
||||
{Object.entries(prices).map(([symbol, price]) => (
|
||||
<span key={symbol} className="flex items-center gap-2">
|
||||
{symbol.toUpperCase()}/USDT <span className="text-nofx-success">${price}</span>
|
||||
</span>
|
||||
))}
|
||||
|
||||
<span className="flex items-center gap-2"><CircuitBoard className="w-3 h-3 text-nofx-accent" /> AI MODEL: GEMINI-PRO-1.5</span>
|
||||
|
||||
{/* Duplicate sequence for seamless loop effect (basic set) */}
|
||||
{Object.entries(prices).map(([symbol, price]) => (
|
||||
<span key={`${symbol} -dup`} className="flex items-center gap-2 md:hidden">
|
||||
{symbol.toUpperCase()}/USDT <span className="text-nofx-success">${price}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CRT OVERLAY (Global) */}
|
||||
<div className="absolute inset-0 crt-overlay pointer-events-none z-50 opacity-40"></div>
|
||||
</section >
|
||||
)
|
||||
}
|
||||
|
||||
import { OFFICIAL_LINKS } from '../../../constants/branding'
|
||||
|
||||
function CommunityStats() {
|
||||
const { stars, forks, contributors, isLoading, error } = useGitHubStats('tinkle-community', 'nofx')
|
||||
|
||||
const stats = [
|
||||
{
|
||||
label: 'GITHUB STARS',
|
||||
value: isLoading ? '...' : (error ? '1.2k+' : stars.toLocaleString()),
|
||||
icon: Star,
|
||||
color: 'text-yellow-400',
|
||||
href: OFFICIAL_LINKS.github
|
||||
},
|
||||
{
|
||||
label: 'FORKS',
|
||||
value: isLoading ? '...' : (error ? '240+' : forks.toLocaleString()),
|
||||
icon: GitFork,
|
||||
color: 'text-blue-400',
|
||||
href: `${OFFICIAL_LINKS.github}/fork`
|
||||
},
|
||||
{
|
||||
label: 'CONTRIBUTORS',
|
||||
value: isLoading ? '...' : (contributors > 0 ? contributors : '50+'),
|
||||
icon: Users,
|
||||
color: 'text-green-400',
|
||||
href: `${OFFICIAL_LINKS.github}/graphs/contributors`
|
||||
},
|
||||
{
|
||||
label: 'DEV COMMUNITY',
|
||||
value: '5,800+', // Hardcoded as per user request
|
||||
icon: MessageCircle,
|
||||
color: 'text-blue-500',
|
||||
href: OFFICIAL_LINKS.telegram
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-4 w-full max-w-4xl">
|
||||
{stats.map((stat, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href={stat.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex flex-col items-center justify-center p-3 rounded bg-black/40 border border-zinc-800/50 backdrop-blur-sm group hover:border-nofx-gold/30 transition-all cursor-pointer hover:bg-white/5"
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<stat.icon className={`w-4 h-4 ${stat.color}`} />
|
||||
<span className="text-[10px] font-mono text-zinc-500 tracking-wider">{stat.label}</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold font-mono text-white group-hover:text-nofx-gold transition-colors">{stat.value}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react'
|
||||
interface GitHubStats {
|
||||
stars: number
|
||||
forks: number
|
||||
contributors: number
|
||||
createdAt: string
|
||||
daysOld: number
|
||||
isLoading: boolean
|
||||
@@ -13,6 +14,7 @@ export function useGitHubStats(owner: string, repo: string): GitHubStats {
|
||||
const [stats, setStats] = useState<GitHubStats>({
|
||||
stars: 0,
|
||||
forks: 0,
|
||||
contributors: 0,
|
||||
createdAt: '',
|
||||
daysOld: 0,
|
||||
isLoading: true,
|
||||
@@ -22,26 +24,52 @@ export function useGitHubStats(owner: string, repo: string): GitHubStats {
|
||||
useEffect(() => {
|
||||
const fetchGitHubStats = async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://api.github.com/repos/${owner}/${repo}`
|
||||
)
|
||||
// Fetch basic repo info
|
||||
const repoRes = await fetch(`https://api.github.com/repos/${owner}/${repo}`)
|
||||
if (!repoRes.ok) throw new Error('Failed to fetch GitHub stats')
|
||||
const repoData = await repoRes.json()
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch GitHub stats')
|
||||
// Fetch contributors count (using Link header trick for large numbers, or length for small)
|
||||
// Since we can't easily parse Link header in client-side without exposing logic,
|
||||
// we'll try a rough count or just a list length valid for first page (max 30 or 100).
|
||||
// For a more accurate count without pagination, we often check the 'Link' header of:
|
||||
// https://api.github.com/repos/{owner}/{repo}/contributors?per_page=1&anon=true
|
||||
let contributorsCount = 0
|
||||
try {
|
||||
const contribRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors?per_page=1&anon=true`)
|
||||
const linkHeader = contribRes.headers.get('Link')
|
||||
if (linkHeader) {
|
||||
const match = linkHeader.match(/page=(\d+)>; rel="last"/)
|
||||
if (match) {
|
||||
contributorsCount = parseInt(match[1])
|
||||
}
|
||||
}
|
||||
// If no link header, it means 1 page.
|
||||
if (contributorsCount === 0 && contribRes.ok) {
|
||||
// Fetch list to count (default page size 30)
|
||||
// actually per_page=1 returns 1.
|
||||
// We should fetch with per_page=100 to get exact count if <100.
|
||||
const listRes = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors?per_page=100&anon=true`)
|
||||
if (listRes.ok) {
|
||||
const list = await listRes.json()
|
||||
contributorsCount = list.length
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to fetch contributors:', e)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
// Calculate days since creation
|
||||
const createdDate = new Date(data.created_at)
|
||||
const createdDate = new Date(repoData.created_at)
|
||||
const now = new Date()
|
||||
const diffTime = Math.abs(now.getTime() - createdDate.getTime())
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
||||
|
||||
setStats({
|
||||
stars: data.stargazers_count,
|
||||
forks: data.forks_count,
|
||||
createdAt: data.created_at,
|
||||
stars: repoData.stargazers_count,
|
||||
forks: repoData.forks_count,
|
||||
contributors: contributorsCount > 0 ? contributorsCount : 0, // Fallback
|
||||
createdAt: repoData.created_at,
|
||||
daysOld: diffDays,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
|
||||
+86
-23
@@ -13,21 +13,27 @@ html {
|
||||
:root {
|
||||
/* NoFX Neo-Gold Design System */
|
||||
--nofx-gold: #F0B90B;
|
||||
--nofx-bg: #0B0E11;
|
||||
--nofx-bg: #05070A;
|
||||
--nofx-accent: #00F0FF;
|
||||
--nofx-glass: rgba(30, 35, 41, 0.6);
|
||||
--nofx-glass: rgba(5, 7, 10, 0.7);
|
||||
--nofx-border: rgba(240, 185, 11, 0.2);
|
||||
|
||||
--background: #0B0E11;
|
||||
--header-bg: rgba(11, 14, 17, 0.9);
|
||||
/* Glass header */
|
||||
--glass-bg: rgba(11, 14, 17, 0.6);
|
||||
--glass-border: rgba(240, 185, 11, 0.1);
|
||||
/* Cinematic Glows */
|
||||
--glow-primary: 0 0 20px rgba(240, 185, 11, 0.3);
|
||||
--glow-accent: 0 0 20px rgba(0, 240, 255, 0.3);
|
||||
--glow-text: 0 0 10px rgba(240, 185, 11, 0.5);
|
||||
|
||||
--panel-bg: #15181D;
|
||||
--panel-bg-hover: #1E2329;
|
||||
--panel-border: rgba(255, 255, 255, 0.08);
|
||||
--panel-border-hover: rgba(240, 185, 11, 0.4);
|
||||
--background: #05070A;
|
||||
--header-bg: rgba(2, 3, 4, 0.85);
|
||||
/* Deep Abyssal */
|
||||
|
||||
--glass-bg: rgba(5, 7, 10, 0.4);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
|
||||
--panel-bg: rgba(14, 18, 23, 0.6);
|
||||
--panel-bg-hover: rgba(20, 24, 29, 0.8);
|
||||
--panel-border: rgba(255, 255, 255, 0.1);
|
||||
--panel-border-hover: rgba(240, 185, 11, 0.5);
|
||||
|
||||
--foreground: #EAECEF;
|
||||
--text-primary: #EAECEF;
|
||||
@@ -42,19 +48,15 @@ html {
|
||||
--binance-red: #F6465D;
|
||||
--binance-red-bg: rgba(246, 70, 93, 0.12);
|
||||
--binance-red-border: rgba(246, 70, 93, 0.3);
|
||||
--binance-yellow: #F0B90B;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
--shadow-glow: 0 0 20px rgba(240, 185, 11, 0.2);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
|
||||
--shadow-glow: 0 0 30px rgba(240, 185, 11, 0.15);
|
||||
|
||||
font-family:
|
||||
'Inter',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
sans-serif;
|
||||
font-family: 'IBM Plex Mono', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
color-scheme: dark;
|
||||
@@ -64,8 +66,69 @@ html {
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: 'tnum';
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* CRT & Tech Effects */
|
||||
.crt-overlay {
|
||||
background:
|
||||
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
|
||||
linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
|
||||
background-size: 100% 2px, 3px 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tech-border {
|
||||
position: relative;
|
||||
background: rgba(5, 7, 10, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tech-border::before,
|
||||
.tech-border::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 1px solid var(--nofx-gold);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tech-border::before {
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tech-border::after {
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.tech-border:hover::before,
|
||||
.tech-border:hover::after {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.bg-vignette {
|
||||
background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.6) 80%, #000000 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.text-glow {
|
||||
text-shadow: 0 0 10px rgba(240, 185, 11, 0.6);
|
||||
}
|
||||
|
||||
.text-glow-accent {
|
||||
text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
|
||||
}
|
||||
|
||||
.border-glow {
|
||||
box-shadow: 0 0 15px rgba(240, 185, 11, 0.2);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -73,7 +136,7 @@ body {
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background-color: var(--background);
|
||||
background-image: none;
|
||||
background-image: radial-gradient(circle at 50% 0%, #151921 0%, #05070a 60%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
|
||||
+62
-5
@@ -7,11 +7,68 @@ export default {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'nofx-gold': '#F0B90B',
|
||||
'nofx-gold-dim': 'rgba(240, 185, 11, 0.15)',
|
||||
'nofx-bg': '#0B0E11',
|
||||
'nofx-accent': '#00F0FF',
|
||||
'nofx-text': '#EAECEF',
|
||||
'nofx-gold': {
|
||||
DEFAULT: '#F0B90B',
|
||||
dim: 'rgba(240, 185, 11, 0.1)',
|
||||
glow: 'rgba(240, 185, 11, 0.5)',
|
||||
highlight: '#FFD700',
|
||||
},
|
||||
'nofx-bg': {
|
||||
DEFAULT: '#05070A', // Deep Void
|
||||
deeper: '#020304', // Abyssal
|
||||
lighter: '#0E1217', // Surface
|
||||
},
|
||||
'nofx-accent': '#00F0FF', // Cyan Cyber
|
||||
'nofx-text': {
|
||||
DEFAULT: '#EAECEF',
|
||||
muted: '#848E9C',
|
||||
},
|
||||
'nofx-success': '#0ECB81',
|
||||
'nofx-danger': '#F6465D',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'ui-sans-serif', 'system-ui'],
|
||||
mono: ['JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', 'monospace'],
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(circle at center, var(--tw-gradient-stops))',
|
||||
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
'scanlines': "url(\"data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H4V2H0V0Z' fill='rgba(0,0,0,0.4)'/%3E%3C/svg%3E\")",
|
||||
'grid-pattern': "linear-gradient(to right, #1f2937 1px, transparent 1px), linear-gradient(to bottom, #1f2937 1px, transparent 1px)",
|
||||
},
|
||||
animation: {
|
||||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
'scan': 'scan 8s linear infinite',
|
||||
'scan-fast': 'scan 2s linear infinite',
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'glitch': 'glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite',
|
||||
'shimmer': 'shimmer 2s linear infinite',
|
||||
},
|
||||
keyframes: {
|
||||
scan: {
|
||||
'0%': { backgroundPosition: '0 0' },
|
||||
'100%': { backgroundPosition: '0 100%' },
|
||||
},
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-10px)' },
|
||||
},
|
||||
glitch: {
|
||||
'0%': { transform: 'translate(0)' },
|
||||
'20%': { transform: 'translate(-2px, 2px)' },
|
||||
'40%': { transform: 'translate(-2px, -2px)' },
|
||||
'60%': { transform: 'translate(2px, 2px)' },
|
||||
'80%': { transform: 'translate(2px, -2px)' },
|
||||
'100%': { transform: 'translate(0)' },
|
||||
},
|
||||
shimmer: {
|
||||
'0%': { backgroundPosition: '-200% 0' },
|
||||
'100%': { backgroundPosition: '200% 0' },
|
||||
},
|
||||
},
|
||||
boxShadow: {
|
||||
'neon': '0 0 5px theme("colors.nofx-gold.DEFAULT"), 0 0 20px theme("colors.nofx-gold.dim")',
|
||||
'neon-blue': '0 0 5px theme("colors.nofx-accent"), 0 0 20px rgba(0, 240, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user