feat: redesign landing page UI and improve header

web/src/components/landing/HowItWorksSection.tsx

@@ -1,140 +1,167 @@
 import { motion } from 'framer-motion'
-import AnimatedSection from './AnimatedSection'
+import { Download, Rocket, TrendingUp, AlertTriangle } from 'lucide-react'
 import { t, Language } from '../../i18n/translations'
 
-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>
-  )
-}
-
 interface HowItWorksSectionProps {
   language: Language
 }
 
-export default function HowItWorksSection({
-  language,
-}: HowItWorksSectionProps) {
+export default function HowItWorksSection({ language }: HowItWorksSectionProps) {
+  const steps = [
+    {
+      icon: Download,
+      number: '01',
+      title: language === 'zh' ? '克隆项目' : 'Clone Project',
+      desc: language === 'zh'
+        ? 'git clone 项目到本地'
+        : 'git clone the project locally',
+      code: 'git clone https://github.com/NoFxAiOS/nofx.git',
+    },
+    {
+      icon: Rocket,
+      number: '02',
+      title: language === 'zh' ? '启动服务' : 'Start Service',
+      desc: language === 'zh'
+        ? 'Docker 一键启动所有服务'
+        : 'Docker one-click start all services',
+      code: './start.sh start --build',
+    },
+    {
+      icon: TrendingUp,
+      number: '03',
+      title: language === 'zh' ? '开始交易' : 'Start Trading',
+      desc: language === 'zh'
+        ? '创建交易员，让 AI 开始工作'
+        : 'Create trader, let AI do the work',
+      code: 'http://localhost:3000',
+    },
+  ]
+
   return (
-    <AnimatedSection id="how-it-works" backgroundColor="var(--brand-dark-gray)">
-      <div className="max-w-7xl mx-auto">
+    <section className="py-24 relative overflow-hidden" style={{ background: '#0D1117' }}>
+      {/* Background Decoration */}
+      <div
+        className="absolute left-0 top-1/2 -translate-y-1/2 w-96 h-96 rounded-full blur-3xl opacity-20"
+        style={{ background: 'radial-gradient(circle, rgba(240, 185, 11, 0.15) 0%, transparent 70%)' }}
+      />
+
+      <div className="max-w-6xl mx-auto px-4 relative z-10">
+        {/* Header */}
         <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)' }}
-          >
+          <h2 className="text-4xl lg:text-5xl font-bold mb-4" style={{ color: '#EAECEF' }}>
             {t('howToStart', language)}
           </h2>
-          <p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
+          <p className="text-lg" style={{ color: '#848E9C' }}>
             {t('fourSimpleSteps', language)}
           </p>
         </motion.div>
 
-        <div className="space-y-8">
-          {[
-            {
-              number: 1,
-              title: t('step1Title', language),
-              description: t('step1Desc', language),
-            },
-            {
-              number: 2,
-              title: t('step2Title', language),
-              description: t('step2Desc', language),
-            },
-            {
-              number: 3,
-              title: t('step3Title', language),
-              description: t('step3Desc', language),
-            },
-            {
-              number: 4,
-              title: t('step4Title', language),
-              description: t('step4Desc', language),
-            },
-          ].map((step, index) => (
-            <StepCard key={step.number} {...step} delay={index * 0.1} />
-          ))}
+        {/* Steps Timeline */}
+        <div className="relative">
+          {/* Connecting Line */}
+          <div
+            className="absolute left-[39px] top-0 bottom-0 w-px hidden lg:block"
+            style={{ background: 'linear-gradient(to bottom, transparent, rgba(240, 185, 11, 0.3), transparent)' }}
+          />
+
+          <div className="space-y-6">
+            {steps.map((step, index) => (
+              <motion.div
+                key={step.number}
+                initial={{ opacity: 0, x: -30 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: index * 0.15 }}
+                className="relative"
+              >
+                <div
+                  className="flex flex-col lg:flex-row items-start gap-6 p-6 rounded-2xl transition-all duration-300 hover:translate-x-2"
+                  style={{
+                    background: 'rgba(255, 255, 255, 0.02)',
+                    border: '1px solid rgba(255, 255, 255, 0.05)',
+                  }}
+                >
+                  {/* Number Circle */}
+                  <div className="flex-shrink-0 relative z-10">
+                    <motion.div
+                      className="w-20 h-20 rounded-2xl flex items-center justify-center"
+                      style={{
+                        background: 'linear-gradient(135deg, rgba(240, 185, 11, 0.2) 0%, rgba(240, 185, 11, 0.05) 100%)',
+                        border: '1px solid rgba(240, 185, 11, 0.3)',
+                      }}
+                      whileHover={{ scale: 1.1 }}
+                    >
+                      <step.icon className="w-8 h-8" style={{ color: '#F0B90B' }} />
+                    </motion.div>
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-grow">
+                    <div className="flex items-center gap-3 mb-2">
+                      <span
+                        className="text-sm font-mono font-bold"
+                        style={{ color: '#F0B90B' }}
+                      >
+                        {step.number}
+                      </span>
+                      <h3 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
+                        {step.title}
+                      </h3>
+                    </div>
+                    <p className="mb-4" style={{ color: '#848E9C' }}>
+                      {step.desc}
+                    </p>
+
+                    {/* Code Block */}
+                    <div
+                      className="inline-flex items-center gap-2 px-4 py-2 rounded-lg font-mono text-sm"
+                      style={{
+                        background: 'rgba(0, 0, 0, 0.3)',
+                        border: '1px solid rgba(255, 255, 255, 0.06)',
+                      }}
+                    >
+                      <span style={{ color: '#5E6673' }}>$</span>
+                      <span style={{ color: '#EAECEF' }}>{step.code}</span>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
         </div>
 
+        {/* Risk Warning */}
         <motion.div
-          className="mt-12 p-6 rounded-xl flex items-start gap-4"
+          className="mt-12 p-6 rounded-2xl flex items-start gap-4"
           style={{
-            background: 'rgba(246, 70, 93, 0.1)',
-            border: '1px solid rgba(246, 70, 93, 0.3)',
+            background: 'rgba(240, 185, 11, 0.05)',
+            border: '1px solid rgba(240, 185, 11, 0.15)',
           }}
-          initial={{ opacity: 0, scale: 0.9 }}
-          whileInView={{ opacity: 1, scale: 1 }}
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
           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)', color: '#F6465D' }}
+            className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
+            style={{ background: 'rgba(240, 185, 11, 0.1)' }}
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="w-6 h-6"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" />
-              <line x1="12" x2="12" y1="9" y2="13" />
-              <line x1="12" x2="12.01" y1="17" y2="17" />
-            </svg>
+            <AlertTriangle className="w-6 h-6" style={{ color: '#F0B90B' }} />
           </div>
           <div>
-            <div className="font-semibold mb-2" style={{ color: '#F6465D' }}>
+            <div className="font-semibold mb-2" style={{ color: '#F0B90B' }}>
               {t('importantRiskWarning', language)}
             </div>
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+            <p className="text-sm leading-relaxed" style={{ color: '#5E6673' }}>
               {t('riskWarningText', language)}
             </p>
           </div>
         </motion.div>
       </div>
-    </AnimatedSection>
+    </section>
   )
 }