From 37db073de40c721f394eefac9b28e3fc9fc2c819 Mon Sep 17 00:00:00 2001
From: Ember <197652334@qq.com>
Date: Sun, 2 Nov 2025 00:58:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E9=87=8D=E5=81=9A=20#138/#133=20?=
 =?UTF-8?q?=E7=9A=84=E5=89=8D=E7=AB=AF=E6=94=B9=E5=8A=A8=EF=BC=88LOGO=20?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2=20+=20Loading=20Logo=20+=20=E6=A0=A1?=
 =?UTF-8?q?=E9=AA=8C=E4=BC=98=E5=8C=96=E4=BF=9D=E7=95=99=EF=BC=89=EF=BC=8C?=
 =?UTF-8?q?=E5=B0=BD=E9=87=8F=E4=B8=8D=E8=A6=86=E7=9B=96=E4=BB=96=E4=BA=BA?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx                             |  5 +-
 web/src/components/Header.tsx               |  4 +-
 web/src/components/LoginPage.tsx            |  2 +-
 web/src/components/RegisterPage.tsx         |  2 +-
 web/src/components/landing/AboutSection.tsx | 90 ++++++++++++++++-----
 5 files changed, 76 insertions(+), 27 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 40b9dad0..29f8386d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -170,10 +170,7 @@ function App() {
     return (
       <div className="min-h-screen flex items-center justify-center" style={{ background: '#0B0E11' }}>
         <div className="text-center">
-          <div className="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center text-3xl animate-spin"
-               style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
-            ⚡
-          </div>
+          <img src="/images/logo.png" alt="NoFx Logo" className="w-16 h-16 mx-auto mb-4 animate-pulse" />
           <p style={{ color: '#EAECEF' }}>{t('loading', language)}</p>
         </div>
       </div>
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 3911cddd..48dc6a5b 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -15,7 +15,7 @@ export function Header({ simple = false }: HeaderProps) {
           {/* Left - Logo and Title */}
           <div className="flex items-center gap-3">
             <div className="flex items-center justify-center">
-              <img src="/icons/nofx.svg?v=2" alt="NOFX" className="h-10 w-auto" />
+              <img src="/images/logo.png" alt="NoFx Logo" className="w-8 h-8" />
             </div>
             <div>
               <h1 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
@@ -56,4 +56,4 @@ export function Header({ simple = false }: HeaderProps) {
       </div>
     </header>
   );
-}
\ No newline at end of file
+}
diff --git a/web/src/components/LoginPage.tsx b/web/src/components/LoginPage.tsx
index 87af4dd0..ea36356c 100644
--- a/web/src/components/LoginPage.tsx
+++ b/web/src/components/LoginPage.tsx
@@ -72,7 +72,7 @@ export function LoginPage() {
           {/* Logo */}
           <div className="text-center mb-8">
             <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-              <img src="/icons/nofx.svg?v=2" alt="NOFX" className="w-16 h-16" />
+              <img src="/images/logo.png" alt="NoFx Logo" className="w-16 h-16 object-contain" />
             </div>
             <h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
               {t('loginTitle', language)}
diff --git a/web/src/components/RegisterPage.tsx b/web/src/components/RegisterPage.tsx
index 16616b86..438bed05 100644
--- a/web/src/components/RegisterPage.tsx
+++ b/web/src/components/RegisterPage.tsx
@@ -92,7 +92,7 @@ export function RegisterPage() {
         {/* Logo */}
         <div className="text-center mb-8">
           <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-            <img src="/icons/nofx.svg?v=2" alt="NOFX" className="w-16 h-16" />
+            <img src="/images/logo.png" alt="NoFx Logo" className="w-16 h-16 object-contain" />
           </div>
           <h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
             {t('appTitle', language)}
diff --git a/web/src/components/landing/AboutSection.tsx b/web/src/components/landing/AboutSection.tsx
index 1ee3431a..d087a66f 100644
--- a/web/src/components/landing/AboutSection.tsx
+++ b/web/src/components/landing/AboutSection.tsx
@@ -8,36 +8,79 @@ export default function AboutSection() {
     <AnimatedSection id='about' backgroundColor='var(--brand-dark-gray)'>
       <div className='max-w-7xl mx-auto'>
         <div className='grid lg:grid-cols-2 gap-12 items-center'>
-          <motion.div className='space-y-6' initial={{ opacity: 0, x: -50 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }}>
+          <motion.div
+            className='space-y-6'
+            initial={{ opacity: 0, x: -50 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+          >
             <motion.div
               className='inline-flex items-center gap-2 px-4 py-2 rounded-full'
-              style={{ background: 'rgba(240, 185, 11, 0.1)', border: '1px solid rgba(240, 185, 11, 0.2)' }}
+              style={{
+                background: 'rgba(240, 185, 11, 0.1)',
+                border: '1px solid rgba(240, 185, 11, 0.2)',
+              }}
               whileHover={{ scale: 1.05 }}
             >
-              <Target className='w-4 h-4' style={{ color: 'var(--brand-yellow)' }} />
-              <span className='text-sm font-semibold' style={{ color: 'var(--brand-yellow)' }}>
+              <Target
+                className='w-4 h-4'
+                style={{ color: 'var(--brand-yellow)' }}
+              />
+              <span
+                className='text-sm font-semibold'
+                style={{ color: 'var(--brand-yellow)' }}
+              >
                 关于 NOFX
               </span>
             </motion.div>
 
-            <h2 className='text-4xl font-bold' style={{ color: 'var(--brand-light-gray)' }}>
+            <h2
+              className='text-4xl font-bold'
+              style={{ color: 'var(--brand-light-gray)' }}
+            >
               什么是 NOFX？
             </h2>
-            <p className='text-lg leading-relaxed' style={{ color: 'var(--text-secondary)' }}>
-              NOFX 不是另一个交易机器人，而是 AI 交易的 'Linux' —— 一个透明、可信任的开源 OS，提供统一的 '决策-风险-执行' 层，支持所有资产类别。
+            <p
+              className='text-lg leading-relaxed'
+              style={{ color: 'var(--text-secondary)' }}
+            >
+              NOFX 不是另一个交易机器人，而是 AI 交易的 'Linux' ——
+              一个透明、可信任的开源 OS，提供统一的 '决策-风险-执行'
+              层，支持所有资产类别。
             </p>
-            <p className='text-lg leading-relaxed' style={{ color: 'var(--text-secondary)' }}>
-              从加密市场起步（24/7、高波动性完美测试场），未来扩展到股票、期货、外汇。核心：开放架构、AI 达尔文主义（多代理自竞争、策略进化）、CodeFi 飞轮（开发者 PR 贡献获积分奖励）。
+            <p
+              className='text-lg leading-relaxed'
+              style={{ color: 'var(--text-secondary)' }}
+            >
+              从加密市场起步（24/7、高波动性完美测试场），未来扩展到股票、期货、外汇。核心：开放架构、AI
+              达尔文主义（多代理自竞争、策略进化）、CodeFi 飞轮（开发者 PR
+              贡献获积分奖励）。
             </p>
-            <motion.div className='flex items-center gap-3 pt-4' whileHover={{ x: 5 }}>
-              <div className='w-12 h-12 rounded-full flex items-center justify-center' style={{ background: 'rgba(240, 185, 11, 0.1)' }}>
-                <Shield className='w-6 h-6' style={{ color: 'var(--brand-yellow)' }} />
+            <motion.div
+              className='flex items-center gap-3 pt-4'
+              whileHover={{ x: 5 }}
+            >
+              <div
+                className='w-12 h-12 rounded-full flex items-center justify-center'
+                style={{ background: 'rgba(240, 185, 11, 0.1)' }}
+              >
+                <Shield
+                  className='w-6 h-6'
+                  style={{ color: 'var(--brand-yellow)' }}
+                />
               </div>
               <div>
-                <div className='font-semibold' style={{ color: 'var(--brand-light-gray)' }}>
+                <div
+                  className='font-semibold'
+                  style={{ color: 'var(--brand-light-gray)' }}
+                >
                   你 100% 掌控
                 </div>
-                <div className='text-sm' style={{ color: 'var(--text-secondary)' }}>
+                <div
+                  className='text-sm'
+                  style={{ color: 'var(--text-secondary)' }}
+                >
                   完全掌控 AI 提示词和资金
                 </div>
               </div>
@@ -45,21 +88,30 @@ export default function AboutSection() {
           </motion.div>
 
           <div className='relative'>
-            <div className='rounded-2xl p-8' style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)' }}>
+            <div
+              className='rounded-2xl p-8'
+              style={{
+                background: 'var(--brand-black)',
+                border: '1px solid var(--panel-border)',
+              }}
+            >
               <Typewriter
                 lines={[
                   '$ git clone https://github.com/tinkle-community/nofx.git',
                   '$ cd nofx',
                   '$ chmod +x start.sh',
                   '$ ./start.sh start --build',
-                  '🚀 启动自动交易系统...',
-                  '✓ API服务器启动在端口 8080',
-                  '🌐 Web 控制台 http://localhost:3000',
+                  ' 启动自动交易系统...',
+                  ' API服务器启动在端口 8080',
+                  ' Web 控制台 http://localhost:3000',
                 ]}
                 typingSpeed={70}
                 lineDelay={900}
                 className='text-sm font-mono'
-                style={{ color: '#00FF41', textShadow: '0 0 6px rgba(0,255,65,0.6)' }}
+                style={{
+                  color: '#00FF41',
+                  textShadow: '0 0 6px rgba(0,255,65,0.6)',
+                }}
               />
             </div>
           </div>