refactor(web): 拆分 LandingPage 为可复用组件（HeaderBar/Hero/AnimatedSection 等），新增 pages 结构并完成集成；构建通过

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 (
+    <section className='relative pt-32 pb-20 px-4'>
+      <div className='max-w-7xl mx-auto'>
+        <div className='grid lg:grid-cols-2 gap-12 items-center'>
+          {/* Left Content */}
+          <motion.div className='space-y-6 relative z-10' style={{ opacity, scale }} initial='initial' animate='animate' variants={staggerContainer}>
+            <motion.div variants={fadeInUp}>
+              <motion.div
+                className='inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6'
+                style={{ background: 'rgba(240, 185, 11, 0.1)', border: '1px solid rgba(240, 185, 11, 0.2)' }}
+                whileHover={{ scale: 1.05, boxShadow: '0 0 20px rgba(240, 185, 11, 0.2)' }}
+              >
+                <Sparkles className='w-4 h-4' style={{ color: 'var(--brand-yellow)' }} />
+                <span className='text-sm font-semibold' style={{ color: 'var(--brand-yellow)' }}>
+                  3 天内 2.5K+ GitHub Stars
+                </span>
+              </motion.div>
+            </motion.div>
+
+            <h1 className='text-5xl lg:text-7xl font-bold leading-tight' style={{ color: 'var(--brand-light-gray)' }}>
+              Read the Market.
+              <br />
+              <span style={{ color: 'var(--brand-yellow)' }}>Write the Trade.</span>
+            </h1>
+
+            <motion.p className='text-xl leading-relaxed' style={{ color: 'var(--text-secondary)' }} variants={fadeInUp}>
+              NOFX 是 AI 交易的未来标准——一个开放、社区驱动的代理式交易操作系统。支持 Binance、Aster DEX 等交易所，
+              自托管、多代理竞争，让 AI 为你自动决策、执行和优化交易。
+            </motion.p>
+
+            <div className='flex items-center gap-3 flex-wrap'>
+              <motion.a href='https://github.com/tinkle-community/nofx' target='_blank' rel='noopener noreferrer' whileHover={{ scale: 1.05 }} transition={{ type: 'spring', stiffness: 400 }}>
+                <img
+                  src='https://img.shields.io/github/stars/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=1E2329'
+                  alt='GitHub Stars'
+                  className='h-7'
+                />
+              </motion.a>
+              <motion.a href='https://github.com/tinkle-community/nofx/network/members' target='_blank' rel='noopener noreferrer' whileHover={{ scale: 1.05 }} transition={{ type: 'spring', stiffness: 400 }}>
+                <img
+                  src='https://img.shields.io/github/forks/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=1E2329'
+                  alt='GitHub Forks'
+                  className='h-7'
+                />
+              </motion.a>
+              <motion.a href='https://github.com/tinkle-community/nofx/graphs/contributors' target='_blank' rel='noopener noreferrer' whileHover={{ scale: 1.05 }} transition={{ type: 'spring', stiffness: 400 }}>
+                <img
+                  src='https://img.shields.io/github/contributors/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=1E2329'
+                  alt='GitHub Contributors'
+                  className='h-7'
+                />
+              </motion.a>
+            </div>
+
+            <motion.p className='text-xs pt-4' style={{ color: 'var(--text-tertiary)' }} variants={fadeInUp}>
+              由 Aster DEX 和 Binance 提供支持，Amber.ac 战略投资。
+            </motion.p>
+          </motion.div>
+
+          {/* Right Visual */}
+          <motion.img src='/images/main.png' alt='NOFX Platform' className='w-full opacity-90' whileHover={{ scale: 1.05, rotate: 5 }} transition={{ type: 'spring', stiffness: 300 }} />
+        </div>
+      </div>
+    </section>
+  )
+}
+