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

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 (
+    <motion.div className='flex gap-6 items-start' initial={{ opacity: 0, x: -50 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay }} whileHover={{ x: 10 }}>
+      <motion.div
+        className='flex-shrink-0 w-14 h-14 rounded-full flex items-center justify-center font-bold text-2xl'
+        style={{ background: 'var(--binance-yellow)', color: 'var(--brand-black)' }}
+        whileHover={{ scale: 1.2, rotate: 360 }}
+        transition={{ type: 'spring', stiffness: 260, damping: 20 }}
+      >
+        {number}
+      </motion.div>
+      <div>
+        <h3 className='text-2xl font-semibold mb-2' style={{ color: 'var(--brand-light-gray)' }}>
+          {title}
+        </h3>
+        <p className='text-lg leading-relaxed' style={{ color: 'var(--text-secondary)' }}>
+          {description}
+        </p>
+      </div>
+    </motion.div>
+  )
+}
+
+export default function HowItWorksSection() {
+  return (
+    <AnimatedSection id='how-it-works' backgroundColor='var(--brand-dark-gray)'>
+      <div className='max-w-7xl mx-auto'>
+        <motion.div className='text-center mb-16' initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
+          <h2 className='text-4xl font-bold mb-4' style={{ color: 'var(--brand-light-gray)' }}>
+            如何开始使用 NOFX
+          </h2>
+          <p className='text-lg' style={{ color: 'var(--text-secondary)' }}>
+            四个简单步骤，开启 AI 自动交易之旅
+          </p>
+        </motion.div>
+
+        <div className='space-y-8'>
+          {[
+            { 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) => (
+            <StepCard key={step.number} {...step} delay={index * 0.1} />
+          ))}
+        </div>
+
+        <motion.div
+          className='mt-12 p-6 rounded-xl flex items-start gap-4'
+          style={{ background: 'rgba(246, 70, 93, 0.1)', border: '1px solid rgba(246, 70, 93, 0.3)' }}
+          initial={{ opacity: 0, scale: 0.9 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          viewport={{ once: true }}
+          whileHover={{ scale: 1.02 }}
+        >
+          <div className='w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0' style={{ background: 'rgba(246, 70, 93, 0.2)' }}>
+            <span className='text-xl'>⚠️</span>
+          </div>
+          <div>
+            <div className='font-semibold mb-2' style={{ color: '#F6465D' }}>
+              重要风险提示
+            </div>
+            <p className='text-sm' style={{ color: 'var(--text-secondary)' }}>
+              dev 分支不稳定，勿用无法承受损失的资金。NOFX 非托管，无官方策略。交易有风险，投资需谨慎。
+            </p>
+          </div>
+        </motion.div>
+      </div>
+    </AnimatedSection>
+  )
+}
+