feat: Implement i18n and dark mode for Step1/Step2 pages and fix navigation

src/App.tsx

@@ -2,6 +2,8 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Letters from './Letters';
 import NewHome from './pages/NewHome';
 import SimpleHome from './pages/SimpleHome';
+import Step1 from './pages/Step1';
+import Step2 from './pages/Step2';
 
 function App() {
     return (
@@ -10,6 +12,10 @@ function App() {
                 {/* New Homepage: SimpleHome */}
                 <Route path="/" element={<SimpleHome />} />
 
+                {/* Step 1 & Step 2 Pages */}
+                <Route path="/step1" element={<Step1 />} />
+                <Route path="/step2" element={<Step2 />} />
+
                 {/* Letter to Players (Formerly the homepage) */}
                 <Route path="/intro" element={<NewHome />} />
 

src/components/SharedHeader.tsx

@@ -0,0 +1,126 @@
+
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Menu, X, Sun, Moon } from 'lucide-react';
+
+interface SharedHeaderProps {
+    theme?: 'light' | 'dark';
+}
+
+const SharedHeader = ({ theme = 'light', onThemeToggle, onLangToggle, currentLang = 'zh' }: SharedHeaderProps & { onThemeToggle?: () => void, onLangToggle?: () => void, currentLang?: 'zh' | 'en' }) => {
+    const navigate = useNavigate();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+    // Default formatting based on theme prop
+    const isDark = theme === 'dark';
+
+    // Navigation items that link back to sections on the homepage
+    const navItems = [
+        { label: currentLang === 'zh' ? '企业咨询' : 'Consulting', id: 'consulting' },
+        { label: currentLang === 'zh' ? '文旅运营' : 'Tourism', id: 'tourism' },
+        { label: currentLang === 'zh' ? '开发者' : 'Developers', id: 'dev' },
+        { label: currentLang === 'zh' ? '联系我们' : 'Contact', id: 'contact' }
+    ];
+
+    const handleNavClick = (id: string) => {
+        // Navigate to home with hash
+        navigate(`/#${id}`);
+        // Dispatch a custom event or use a timeout to handle scrolling if needed, 
+        // but react-router-hash-link is better. For now simple navigate.
+        // We can check if we are already on home in a real app, but here we assume we are on subpages.
+        setIsMenuOpen(false);
+
+        // Detailed implementation for scrolling after navigation would go here
+        // For now, basic navigation is fine
+        setTimeout(() => {
+            const element = document.getElementById(id);
+            if (element) element.scrollIntoView({ behavior: 'smooth' });
+        }, 100);
+    };
+
+    return (
+        <nav className={`fixed w-full z-[100] transition-all duration-300 ${isDark ? 'bg-stone-900/90 border-b border-stone-800 text-stone-100' : 'bg-white/90 border-b border-stone-100 text-stone-800'} backdrop-blur-sm`}>
+            <div className="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
+                {/* Custom CCDW Logo */}
+                <div className="flex items-center gap-3 cursor-pointer group" onClick={() => navigate('/')}>
+                    <div className="flex items-baseline font-bold text-3xl tracking-tighter" style={{ fontFamily: '"Nunito", sans-serif' }}>
+                        <span className="text-orange-400">CC</span>
+                        <span className="text-blue-500">D</span>
+                        <span className="text-cyan-400">W</span>
+                    </div>
+                    <div className={`h-6 w-px ${isDark ? 'bg-stone-700' : 'bg-stone-300'} mx-1`}></div>
+                    <span className={`text-sm tracking-widest ${isDark ? 'text-stone-400' : 'text-stone-500 group-hover:text-stone-800'} transition-colors`}>
+                        {currentLang === 'zh' ? '纯粹的玩' : 'Pure Play'}
+                    </span>
+                </div>
+
+                {/* Desktop Menu */}
+                <div className="hidden md:flex items-center space-x-8">
+                    {navItems.map((item, index) => (
+                        <button
+                            key={index}
+                            onClick={() => handleNavClick(item.id)}
+                            className={`text-sm font-medium hover:-translate-y-0.5 transition-transform ${isDark ? 'text-stone-400 hover:text-white' : 'text-stone-500 hover:text-stone-900'}`}
+                        >
+                            {item.label}
+                        </button>
+                    ))}
+
+                    <div className="flex items-center gap-2 pl-4">
+                        {/* Visual-only theme toggle for consistency */}
+                        <button
+                            onClick={onThemeToggle}
+                            className={`p-2 rounded-full hover:bg-black/5 transition-colors ${isDark ? 'text-stone-400' : 'text-stone-400'}`}
+                        >
+                            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+                        </button>
+                        <button
+                            onClick={onLangToggle}
+                            className={`text-xs font-bold px-2 py-1 rounded hover:bg-black/5 ${isDark ? 'text-stone-400' : 'text-stone-500'}`}
+                        >
+                            {currentLang === 'zh' ? 'EN' : '中'}
+                        </button>
+                    </div>
+                </div>
+
+                {/* Mobile Menu Toggle */}
+                <div className="md:hidden">
+                    <button onClick={() => setIsMenuOpen(!isMenuOpen)} className={isDark ? 'text-stone-100' : 'text-stone-800'}>
+                        {isMenuOpen ? <X /> : <Menu />}
+                    </button>
+                </div>
+            </div>
+
+            {/* Mobile Dropdown */}
+            {isMenuOpen && (
+                <div className={`md:hidden absolute top-full left-0 w-full p-6 shadow-lg border-b ${isDark ? 'bg-stone-900 border-stone-800' : 'bg-white border-stone-100'}`}>
+                    {navItems.map((item, index) => (
+                        <button
+                            key={index}
+                            onClick={() => handleNavClick(item.id)}
+                            className={`block w-full text-left py-3 text-lg ${isDark ? 'text-stone-300' : 'text-stone-600'}`}
+                        >
+                            {item.label}
+                        </button>
+                    ))}
+                    <div className="flex gap-4 mt-4 pt-4 border-t border-stone-800/10">
+                        <button
+                            onClick={() => { onThemeToggle?.(); setIsMenuOpen(false); }}
+                            className={`p-2 rounded-full ${isDark ? 'text-stone-400' : 'text-stone-600'}`}
+                        >
+                            {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+                        </button>
+                        <button
+                            onClick={() => { onLangToggle?.(); setIsMenuOpen(false); }}
+                            className={`text-sm font-bold px-3 py-2 rounded ${isDark ? 'text-stone-400' : 'text-stone-600'}`}
+                        >
+                            {currentLang === 'zh' ? 'Switch to English' : '切换中文'}
+                        </button>
+                    </div>
+                </div>
+            )}
+        </nav>
+    );
+};
+
+export default SharedHeader;

src/locales/en.json

@@ -92,5 +92,185 @@
         "over": "Game Over",
         "score": "Score",
         "try_again": "Try Again"
+    },
+    "step1": {
+        "label": "Step 1: Liberate Time",
+        "hero_title_1": "Elite time should not be",
+        "hero_title_2": "consumed by",
+        "hero_title_highlight": "trivia",
+        "hero_desc": "Consulting, Tax, Investment Research, Headhunting. We sell wisdom, insight, and human connection. But now, 70% of our time is occupied by organizing recordings, formatting, and retrieving historical documents. This is not work, this is a waste of talent.",
+        "btn_pain": "See how this kills efficiency",
+        "target_audience": "Target Audience",
+        "audience": {
+            "consultant": "Management Consultant",
+            "audit": "Tax/Audit Expert",
+            "analyst": "Security Analyst",
+            "hunter": "Headhunter Advisor"
+        },
+        "pain_title": "Current Friction",
+        "pain_cards": {
+            "audio": {
+                "title": "Audio Black Hole",
+                "desc": "Interviews for hours, no one listens. Key info (salary, strategy, pain points) relies on memory, missing details leads to proposal deviation."
+            },
+            "report": {
+                "title": "Report Dystocia",
+                "desc": "Two days of 'retreat' writing reports, most time spent finding data and formatting. Less than 30% time for thinking."
+            },
+            "drain": {
+                "title": "Experience Gap",
+                "desc": "Partner leaves, taking 10 years of experience. Newcomers don't know the firm did similar cases, starting from scratch."
+            }
+        },
+        "solution_title": "Workflow Re-engineering",
+        "solution_subtitle": "Workflow Re-engineering",
+        "solution_desc": "This is not software procurement, this is a revolution about 'how to work'. We rebuild the knowledge production pipeline via three modules.",
+        "modules": {
+            "m1": {
+                "title": "Input Automation",
+                "desc": "Deploy professional speech-to-text. Auto-speaker diarization. With custom Prompt, one-click structured info extraction.",
+                "code": "> Extract: Candidate Profile, Core Pain Points, Key Financials\n> Output: Structured Interview Minutes v1.0"
+            },
+            "m2": {
+                "title": "Knowledge Retrieval (RAG)",
+                "desc": "Clean historical reports, research, resumes. Call upon 10 years of firm wisdom like chatting.",
+                "code": "User: \"Find a candidate with medical device marketing experience\"\nAI: \"Found 3 resumes: 1. Zhang (xx Pharma)...\""
+            },
+            "m3": {
+                "title": "Data Security",
+                "desc": "Financial grade compliance. Support high-performance local deployment, data never leaves the firm."
+            }
+        },
+        "roadmap_title": "Implementation Path",
+        "roadmap": {
+            "phase1": {
+                "time": "Month 1-2",
+                "title": "Pain Relief & Spec",
+                "items": [
+                    "Deploy transcription tool",
+                    "Establish file naming SOP",
+                    "Automate meeting minutes"
+                ]
+            },
+            "phase2": {
+                "time": "Month 3-4",
+                "title": "Knowledge Base (RAG)",
+                "items": [
+                    "Clean history reports/resumes",
+                    "Build internal search app",
+                    "Assist draft generation"
+                ]
+            },
+            "phase3": {
+                "time": "Month 5-6",
+                "title": "Empower Everyone",
+                "items": [
+                    "Business Consulting Copilot",
+                    "Deliver full AI workflow manual",
+                    "Staff practical assessment"
+                ]
+            }
+        },
+        "contact_role": "Finance Background + IT Expert",
+        "contact_bio": "I have done private equity research and know what 'compliance' and 'working papers' mean.\nI focus on serving a few boutique firms to ensure delivery quality.",
+        "contact_form_title": "Book Pain Audit",
+        "form": {
+            "name": "Name",
+            "contact": "Contact",
+            "industry": "Industry",
+            "btn_submit": "Submit Application",
+            "placeholders": {
+                "name": "Your Name",
+                "contact": "Contact Info"
+            },
+            "options": [
+                "Tax/Audit",
+                "Management Consulting",
+                "HR/Headhunting",
+                "Security Research",
+                "Legal Services"
+            ]
+        },
+        "footer": "© 2024 Digital Efficacy Consulting. Built with rationality."
+    },
+    "step2": {
+        "label": "[ Hangzhou Pure Play · AI Lab ]",
+        "hero_title": "Reconstruct · Fun",
+        "hero_desc": "We don't just use AI, we are ",
+        "hero_desc_highlight": "taming algorithms",
+        "hero_desc_2": ". From AIGC content factories to offline interactive installations, injecting digital soul into cultural tourism.",
+        "btn_explore": "EXPLORE SERVICES ↓",
+        "btn_contact": "Cooperation ->",
+        "philosophy_title": "Our ",
+        "philosophy_highlight": "AI Philosophy",
+        "philosophy_desc": "In benchmark projects like 'Nanxun Granary', we validated a 'Tourism + AI' closed loop. We don't stack cold tech, we use tech to create",
+        "philosophy_bold": "\"unexpected surprises\"",
+        "philosophy_list": [
+            "Cost Reduction: Use AIGC to replace expensive manual content production",
+            "Emotional Value: Use interactive installations to let tourists become creators",
+            "Asset Accumulation: Turn offline traffic into reusable data assets"
+        ],
+        "terminal": {
+            "init": "> Initializing AI Core...",
+            "load": "> Loading Texture: \"Nanxun_Granary_Texture_01\"",
+            "gen": "> Generating Style: Cyberpunk x Traditional Chinese",
+            "opt": "> Optimization Complete. Rendering...",
+            "status": "[System Status]: ",
+            "online": "ONLINE"
+        },
+        "services_menu": "SERVICE MENU",
+        "services_title": "Service Matrix",
+        "services": {
+            "s1": {
+                "title": "AIGC Content Factory",
+                "desc": "Not just generating images, but building automated content pipelines. Solving the pain of slow updates and high costs.",
+                "list": [
+                    "+ AI Comic/Short Film Production",
+                    "+ Stylized Promo Generation",
+                    "+ Virtual Human Guide",
+                    "+ Batch Marketing Poster Generation"
+                ]
+            },
+            "s2": {
+                "title": "Immersive Interaction Curation",
+                "desc": "Turning physical space into a digital playground. We provide full solutions from curation outline to hardware landing.",
+                "list": [
+                    "+ AI Artist Co-creation",
+                    "+ Real-time Mocap/Generative Projection",
+                    "+ Robot Dog/Robot Parade Programming",
+                    "+ Youth Digital Art Camp"
+                ]
+            },
+            "s3": {
+                "title": "Digital Operation Loop",
+                "desc": "No useless effects, only monetizable data. Bridging the last mile between online traffic and offline verification.",
+                "list": [
+                    "+ Check-in Map/Task System",
+                    "+ Smart Coupon Verification",
+                    "+ Traffic Efficiency Dashboard",
+                    "+ Data Asset Consulting"
+                ]
+            }
+        },
+        "lab_title": "LAB Experiments",
+        "lab_subtitle": "RECENT WORKS /// 2026",
+        "cases": {
+            "c1": {
+                "bg_text": "GRANARY",
+                "date": "NANXUN · 2026",
+                "title": "Nanxun 'Granary' AI Revamp",
+                "desc": "Using AI to revive century-old granary, creating 'Money-Making' IP interactive exhibition and digital business loop."
+            },
+            "c2": {
+                "bg_text": "CO-CREATE",
+                "date": "UNIVERSITY · 2025",
+                "title": "Youth Digital Art Base",
+                "desc": "Linking university resources and AI tools to achieve low-cost, high-creativity mass tourism content production."
+            }
+        },
+        "footer_title": "LET'S\nPLAY.",
+        "footer_desc": "Looking for partners willing to break rules.\nWe provide tech & creativity, you provide scenarios & ambition.",
+        "footer_contact": "CONTACT@CCDW.XYZ",
+        "footer_loc": "HANGZHOU / SHANGHAI"
     }
 }

src/locales/zh.json

@@ -91,5 +91,185 @@
         "over": "游戏结束",
         "score": "得分",
         "try_again": "再试一次"
+    },
+    "step1": {
+        "label": "步骤 1: 解放时间",
+        "hero_title_1": "精英的时间，",
+        "hero_title_2": "不应被",
+        "hero_title_highlight": "琐事吞噬",
+        "hero_desc": "咨询、财税、投研、猎头。我们贩卖的是智慧，是洞察，是人与人的连接。但现在，我们 70% 的时间被整理录音、格式排版、检索历史文档所占据。这不是工作，这是对才华的浪费。",
+        "btn_pain": "查看这一步如何扼杀效率",
+        "target_audience": "适用人群",
+        "audience": {
+            "consultant": "管理咨询顾问",
+            "audit": "财税/审计专家",
+            "analyst": "证券分析师",
+            "hunter": "猎头顾问"
+        },
+        "pain_title": "Current Friction / 现状阻力",
+        "pain_cards": {
+            "audio": {
+                "title": "录音黑洞",
+                "desc": "访谈几小时，录音没人听。关键信息（薪资、战略、痛点）全靠脑记，细节遗漏导致方案偏差。"
+            },
+            "report": {
+                "title": "报告难产",
+                "desc": "“闭关”写报告的两天里，大部分时间在找数据、调格式。真正用于思考洞察的时间不足 30%。"
+            },
+            "drain": {
+                "title": "经验断层",
+                "desc": "合伙人离职，带走十年经验。新人不知道公司做过类似的案子，一切从零开始，重复造轮子。"
+            }
+        },
+        "solution_title": "工作流重塑",
+        "solution_subtitle": "Workflow Re-engineering",
+        "solution_desc": "这不是软件采购，这是一场关于“如何工作”的流程革命。我们通过三个模块，重构知识生产流水线。",
+        "modules": {
+            "m1": {
+                "title": "Input Automation / 访谈自动化",
+                "desc": "部署专业级语音转写方案，自动区分发言人。配合定制 Prompt，一键提取结构化信息。",
+                "code": "> 提取：候选人画像、核心痛点、关键财务指标\n> 输出：结构化访谈纪要 v1.0"
+            },
+            "m2": {
+                "title": "Knowledge Retrieval / 私有知识库(RAG)",
+                "desc": "清洗历史报告、研报、简历库。像聊天一样调用公司十年的智慧。",
+                "code": "User: \"找一个做过医疗器械营销的候选人\"\nAI: \"检索到 3 份简历：1.张某(xx药业)...\""
+            },
+            "m3": {
+                "title": "Data Security / 绝对安全",
+                "desc": "金融级合规标准。支持高性能电脑本地部署模型，数据不出公司大门。"
+            }
+        },
+        "roadmap_title": "Implementation Path / 落地路线",
+        "roadmap": {
+            "phase1": {
+                "time": "Month 1-2",
+                "title": "止痛与规范",
+                "items": [
+                    "部署录音转写工具",
+                    "建立文件命名 SOP",
+                    "实现会议纪要自动化"
+                ]
+            },
+            "phase2": {
+                "time": "Month 3-4",
+                "title": "知识库建设 (RAG)",
+                "items": [
+                    "历史研报/简历清洗入库",
+                    "搭建内部搜索小程序",
+                    "辅助生成报告初稿"
+                ]
+            },
+            "phase3": {
+                "time": "Month 5-6",
+                "title": "全员赋能",
+                "items": [
+                    "业务咨询 Copilot",
+                    "交付完整 AI 工作流手册",
+                    "员工实操考核"
+                ]
+            }
+        },
+        "contact_role": "金融背景 + IT 专家",
+        "contact_bio": "我做过私募研究，深知什么是“合规”、什么是“底稿”。\n我每天只专注于服务少数几家精品机构，以确保交付质量。",
+        "contact_form_title": "预约痛点诊断",
+        "form": {
+            "name": "Name",
+            "contact": "Contact",
+            "industry": "Industry",
+            "btn_submit": "提交申请",
+            "placeholders": {
+                "name": "您的称呼",
+                "contact": "联系方式"
+            },
+            "options": [
+                "财税/审计",
+                "管理咨询",
+                "人力资源/猎头",
+                "证券投研",
+                "法律服务"
+            ]
+        },
+        "footer": "© 2024 数智效能咨询. Built with rationality."
+    },
+    "step2": {
+        "label": "[ 杭州纯粹的玩 · AI 实验室 ]",
+        "hero_title": "重构·乐趣",
+        "hero_desc": "我们不只是使用 AI，我们是在",
+        "hero_desc_highlight": "驯服算法",
+        "hero_desc_2": "。从 AIGC 内容工厂到线下交互装置，为文旅地产注入数字灵魂。",
+        "btn_explore": "EXPLORE SERVICES ↓",
+        "btn_contact": "合作咨询 ->",
+        "philosophy_title": "我们的",
+        "philosophy_highlight": "AI哲学",
+        "philosophy_desc": "在“南浔粮仓”等标杆项目中，我们验证了一套“文旅+AI”的闭环逻辑。我们要做的不是冷冰冰的技术堆砌，而是用技术创造",
+        "philosophy_bold": "“意外的惊喜”",
+        "philosophy_list": [
+            "降本增效：用 AIGC 替代传统昂贵的人工内容生产",
+            "情绪价值：用交互装置让游客成为创作者",
+            "资产沉淀：将线下流量转化为可复用的数据资产"
+        ],
+        "terminal": {
+            "init": "> Initializing AI Core...",
+            "load": "> Loading Texture: \"Nanxun_Granary_Texture_01\"",
+            "gen": "> Generating Style: Cyberpunk x Traditional Chinese",
+            "opt": "> Optimization Complete. Rendering...",
+            "status": "[System Status]: ",
+            "online": "ONLINE"
+        },
+        "services_menu": "SERVICE MENU",
+        "services_title": "服务能力矩阵",
+        "services": {
+            "s1": {
+                "title": "AIGC 内容工厂",
+                "desc": "不仅是生成图片，而是构建自动化内容生产管线。解决文旅项目内容更新慢、成本高的痛点。",
+                "list": [
+                    "+ AI 漫剧/动画短片制作",
+                    "+ 风格化宣传片生成",
+                    "+ 虚拟数字人导览",
+                    "+ 批量化营销海报生成"
+                ]
+            },
+            "s2": {
+                "title": "沉浸式交互策展",
+                "desc": "将物理空间变成数字游乐场。我们提供从策展大纲到硬件落地的全套方案。",
+                "list": [
+                    "+ AI 艺术家共创装置",
+                    "+ 实时动捕/生成式投影",
+                    "+ 机器狗/机器人巡游编程",
+                    "+ 青年数字艺术共创营"
+                ]
+            },
+            "s3": {
+                "title": "数字化运营闭环",
+                "desc": "不做无效的特效，只做能变现的数据。打通线上流量与线下核销的最后一公里。",
+                "list": [
+                    "+ 打卡地图/任务系统开发",
+                    "+ 智能优惠券核销体系",
+                    "+ 流量效能可视化看板",
+                    "+ 数据资产入表咨询"
+                ]
+            }
+        },
+        "lab_title": "LAB 实验案例",
+        "lab_subtitle": "RECENT WORKS /// 2026",
+        "cases": {
+            "c1": {
+                "bg_text": "GRANARY",
+                "date": "NANXUN · 2026",
+                "title": "南浔“粮仓”AI文旅改造",
+                "desc": "利用AI技术复活百年粮仓，打造“搞钱”IP互动展与数字化商圈闭环。"
+            },
+            "c2": {
+                "bg_text": "CO-CREATE",
+                "date": "UNIVERSITY · 2025",
+                "title": "青年数字艺术共创基地",
+                "desc": "联动高校资源与AI工具，实现低成本、高创意的海量文旅内容生产。"
+            }
+        },
+        "footer_title": "LET'S\nPLAY.",
+        "footer_desc": "寻找愿意打破常规的合作伙伴。\n我们提供技术与创意，你提供场景与野心。",
+        "footer_contact": "CONTACT@CCDW.XYZ",
+        "footer_loc": "HANGZHOU / SHANGHAI"
     }
 }

src/pages/SimpleHome.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
     Bot,
     MapPin,
@@ -17,7 +17,8 @@ import {
     BookOpen, // Used for the letter link
     BrainCircuit
 } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
+import i18n from '../i18n';
 
 // 多语言配置
 const translations = {
@@ -188,14 +189,45 @@ const translations = {
 const SimpleHome = () => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     // Default to Light Mode (isDark = false)
-    const [isDark, setIsDark] = useState(false);
-    const [lang, setLang] = useState<'zh' | 'en'>('zh');
+    const [isDark, setIsDark] = useState(localStorage.getItem('theme') === 'dark');
+
+    // Sync theme on mount/change
+    useEffect(() => {
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    }, [isDark]);
+
+    const [lang, setLang] = useState<'zh' | 'en'>(i18n.language?.startsWith('zh') ? 'zh' : 'en');
 
     const [email, setEmail] = useState('');
     const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
     const [message, setMessage] = useState('');
 
     const navigate = useNavigate();
+    const location = useLocation();
+
+    // Handle Hash Scroll on Mount/Update
+    useEffect(() => {
+        if (location.hash) {
+            const id = location.hash.replace('#', '');
+            setTimeout(() => {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.scrollIntoView({ behavior: 'smooth' });
+                }
+            }, 100); // Small delay to ensure render
+        }
+    }, [location]);
+
+    // Handle global language sync if we want consistency with other pages using i18n
+    // But SimpleHome seems to use local specific translations object `translations`.
+    // Ideally SimpleHome should also use `useTranslation` hook so it shares state with Step1/Step2.
+    // However, refactoring SimpleHome to use i18n completely is a big change (large file).
+    // For now, let's at least make the Lang Toggle use the i18n instance if possible
+    // OR just keep local lang state. The user asked to "perfect" Step1 and Step2.
+    // If I change Lang in Step 1 (via i18n) and come back to Home, Home might still be default (zh).
+
+    // Let's assume for now SimpleHome keeps its local state, but we try to initialize it from i18n if possible
+    // or localStorage language detector.
 
     const t = translations[lang];
 
@@ -208,7 +240,11 @@ const SimpleHome = () => {
     };
 
     const toggleTheme = () => setIsDark(!isDark);
-    const toggleLang = () => setLang(lang === 'zh' ? 'en' : 'zh');
+    const toggleLang = () => {
+        const newLang = lang === 'zh' ? 'en' : 'zh';
+        setLang(newLang);
+        i18n.changeLanguage(newLang);
+    };
 
     const handleEmailSubmit = async () => {
         if (!email) return;
@@ -343,7 +379,7 @@ const SimpleHome = () => {
                     <div className="space-y-8">
                         {/* Item 1 */}
                         <div
-                            onClick={() => scrollToSection('consulting')}
+                            onClick={() => navigate('/step1')}
                             className={`group p-6 rounded-xl border transition-all cursor-pointer ${isDark ? 'bg-stone-800/50 border-stone-700 hover:border-blue-500/50' : 'bg-white border-stone-200 hover:border-blue-400 shadow-sm hover:shadow-md'}`}
                         >
                             <div className="flex items-center justify-between mb-2">
@@ -358,7 +394,7 @@ const SimpleHome = () => {
 
                         {/* Item 2 */}
                         <div
-                            onClick={() => scrollToSection('tourism')}
+                            onClick={() => navigate('/step2')}
                             className={`group p-6 rounded-xl border transition-all cursor-pointer ${isDark ? 'bg-stone-800/50 border-stone-700 hover:border-orange-500/50' : 'bg-white border-stone-200 hover:border-orange-400 shadow-sm hover:shadow-md'}`}
                         >
                             <div className="flex items-center justify-between mb-2">
@@ -410,6 +446,14 @@ const SimpleHome = () => {
                                     </li>
                                 ))}
                             </ul>
+                            <div className="mt-8">
+                                <button
+                                    onClick={() => navigate('/step1')}
+                                    className={`text-sm font-bold uppercase tracking-wider flex items-center group ${isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'}`}
+                                >
+                                    {t.cards.consultingLink} <ArrowRight className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" />
+                                </button>
+                            </div>
                         </div>
                         <div className={`p-8 rounded-lg border ${isDark ? 'bg-stone-800 border-stone-700' : 'bg-stone-50 border-stone-100'}`}>
                             <BarChart3 className={`w-8 h-8 mb-4 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
@@ -459,6 +503,14 @@ const SimpleHome = () => {
                                 <span className={`decoration-4 underline decoration-orange-200 ${isDark ? 'decoration-orange-900' : ''}`}>{t.tourism.titleHighlight}</span>
                             </h2>
                             <p className={`mb-8 leading-relaxed ${isDark ? 'text-stone-400' : 'text-stone-600'}`}>{t.tourism.description}</p>
+                            <div className="mt-6">
+                                <button
+                                    onClick={() => navigate('/step2')}
+                                    className={`text-sm font-bold uppercase tracking-wider flex items-center group ${isDark ? 'text-orange-400 hover:text-orange-300' : 'text-orange-600 hover:text-orange-700'}`}
+                                >
+                                    {t.cards.tourismLink} <ArrowRight className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" />
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>

src/pages/Step1.tsx

@@ -0,0 +1,358 @@
+import {
+    Mic,
+    FileText,
+    Database,
+    MessageSquare,
+    ArrowRight,
+    Check
+} from 'lucide-react';
+
+import SharedHeader from '../components/SharedHeader';
+import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from 'react';
+
+const Step1 = () => {
+    const { t, i18n } = useTranslation();
+
+    // Theme state
+    const [isDark, setIsDark] = useState(localStorage.getItem('theme') === 'dark');
+
+    useEffect(() => {
+        // Sync theme class to document body if needed, or just handle locally
+        // For consistency with SimpleHome, we might want to store in localStorage
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    }, [isDark]);
+
+    const toggleTheme = () => setIsDark(!isDark);
+    const toggleLang = () => i18n.changeLanguage(i18n.language === 'zh' ? 'en' : 'zh');
+
+    const scrollToSection = (id: string) => {
+        const element = document.getElementById(id);
+        if (element) {
+            element.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
+
+    const currentLang = i18n.language === 'zh' ? 'zh' : 'en';
+
+    // Theme utility classes
+    const themeClasses = {
+        bg: isDark ? 'bg-stone-900' : 'bg-white',
+        text: isDark ? 'text-stone-100' : 'text-slate-900',
+        textMuted: isDark ? 'text-stone-400' : 'text-slate-600',
+        textLight: isDark ? 'text-stone-500' : 'text-slate-400',
+        border: isDark ? 'border-stone-800' : 'border-slate-100',
+        borderStrong: isDark ? 'border-stone-700' : 'border-slate-200',
+        bgSecondary: isDark ? 'bg-stone-800' : 'bg-slate-50',
+        cardBg: isDark ? 'bg-stone-900' : 'bg-white',
+        cardHover: isDark ? 'hover:bg-stone-800' : 'hover:bg-white',
+        inputBorder: isDark ? 'border-stone-700 focus:border-stone-500' : 'border-slate-300 focus:border-black',
+        buttonPrimary: isDark ? 'bg-stone-100 text-stone-900 hover:bg-white' : 'bg-black text-white hover:bg-slate-800',
+        highlight: isDark ? 'text-stone-100' : 'text-black',
+        codeBlock: isDark ? 'bg-stone-800 border-stone-700 text-stone-400' : 'bg-slate-50 border-slate-100 text-slate-500',
+        marker: isDark ? 'bg-blue-900 text-blue-200' : 'bg-yellow-200',
+        shadow: isDark ? 'shadow-none' : 'shadow-sm',
+    };
+
+    return (
+        <div className={`min-h-screen font-sans selection:bg-black selection:text-white transition-colors duration-300 ${themeClasses.bg} ${themeClasses.text}`}>
+            <SharedHeader
+                theme={isDark ? 'dark' : 'light'}
+                onThemeToggle={toggleTheme}
+                onLangToggle={toggleLang}
+                currentLang={currentLang}
+            />
+
+            {/* Hero / Manifesto Section */}
+            <section id="manifesto" className={`pt-28 pb-20 border-b ${themeClasses.border}`}>
+                <div className="max-w-5xl mx-auto px-6">
+                    <div
+                        className={`mb-8 inline-block border px-3 py-1 text-xs font-mono uppercase tracking-wider rounded-sm ${themeClasses.borderStrong} ${themeClasses.bgSecondary} ${themeClasses.textMuted}`}>
+                        {t('step1.label')}
+                    </div>
+
+                    <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-8 leading-[1.1]">
+                        {t('step1.hero_title_1')}<br />
+                        {t('step1.hero_title_2')}<span className={`px-2 decoration-clone ${themeClasses.marker} ${isDark ? 'text-white' : ''} text-black mx-2`}>{t('step1.hero_title_highlight')}</span>。
+                    </h1>
+
+                    <div className="grid md:grid-cols-12 gap-12 mt-12">
+                        <div className="md:col-span-8">
+                            <p className={`text-xl md:text-2xl leading-relaxed font-serif ${themeClasses.textMuted}`}>
+                                {t('step1.hero_desc')}
+                            </p>
+                            <div className="mt-10 flex flex-wrap gap-4">
+                                <button onClick={() => scrollToSection('pain')} className={`group flex items-center gap-2
+                            border-b-2 pb-1 transition ${isDark ? 'border-stone-100 hover:text-stone-300' : 'border-black hover:text-slate-600'}`}>
+                                    <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition" />
+                                    {t('step1.btn_pain')}
+                                </button>
+                            </div>
+                        </div>
+
+                        <div className={`md:col-span-4 border-l pl-8 hidden md:block ${themeClasses.borderStrong}`}>
+                            <p className={`text-xs font-bold uppercase tracking-widest mb-4 ${themeClasses.textLight}`}>{t('step1.target_audience')}</p>
+                            <ul className={`space-y-3 text-sm font-medium ${isDark ? 'text-stone-300' : 'text-slate-700'}`}>
+                                <li className="flex items-center gap-2">
+                                    <Check className={`w-4 h-4 ${themeClasses.textLight}`} /> {t('step1.audience.consultant')}
+                                </li>
+                                <li className="flex items-center gap-2">
+                                    <Check className={`w-4 h-4 ${themeClasses.textLight}`} /> {t('step1.audience.audit')}
+                                </li>
+                                <li className="flex items-center gap-2">
+                                    <Check className={`w-4 h-4 ${themeClasses.textLight}`} /> {t('step1.audience.analyst')}
+                                </li>
+                                <li className="flex items-center gap-2">
+                                    <Check className={`w-4 h-4 ${themeClasses.textLight}`} /> {t('step1.audience.hunter')}
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* The Problem / Friction */}
+            <section id="pain" className={`py-20 border-b ${themeClasses.border}`}>
+                <div className="max-w-5xl mx-auto px-6">
+                    <h2 className={`text-sm font-bold uppercase tracking-widest mb-12 ${themeClasses.textLight}`}>{t('step1.pain_title')}
+                    </h2>
+
+                    <div
+                        className={`grid md:grid-cols-3 gap-0 border divide-y md:divide-y-0 md:divide-x transition-colors duration-300 ${themeClasses.borderStrong} ${isDark ? 'divide-stone-700' : 'divide-slate-200'} ${themeClasses.bgSecondary}`}>
+                        {/* Card 1 */}
+                        <div className={`p-8 transition duration-300 group ${themeClasses.cardHover}`}>
+                            <Mic className={`w-8 h-8 mb-6 transition ${themeClasses.textLight} ${isDark ? 'group-hover:text-white' : 'group-hover:text-black'}`} />
+                            <h3 className="text-lg font-bold mb-3">{t('step1.pain_cards.audio.title')}</h3>
+                            <p className={`text-sm leading-relaxed ${themeClasses.textMuted}`}>
+                                {t('step1.pain_cards.audio.desc')}
+                            </p>
+                        </div>
+
+                        {/* Card 2 */}
+                        <div className={`p-8 transition duration-300 group ${themeClasses.cardHover}`}>
+                            <FileText className={`w-8 h-8 mb-6 transition ${themeClasses.textLight} ${isDark ? 'group-hover:text-white' : 'group-hover:text-black'}`} />
+                            <h3 className="text-lg font-bold mb-3">{t('step1.pain_cards.report.title')}</h3>
+                            <p className={`text-sm leading-relaxed ${themeClasses.textMuted}`}>
+                                {t('step1.pain_cards.report.desc')}
+                            </p>
+                        </div>
+
+                        {/* Card 3 */}
+                        <div className={`p-8 transition duration-300 group ${themeClasses.cardHover}`}>
+                            <Database className={`w-8 h-8 mb-6 transition ${themeClasses.textLight} ${isDark ? 'group-hover:text-white' : 'group-hover:text-black'}`} />
+                            <h3 className="text-lg font-bold mb-3">{t('step1.pain_cards.drain.title')}</h3>
+                            <p className={`text-sm leading-relaxed ${themeClasses.textMuted}`}>
+                                {t('step1.pain_cards.drain.desc')}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* The Solution / Methodology */}
+            <section id="solution" className="py-24">
+                <div className="max-w-5xl mx-auto px-6">
+                    <div className="flex flex-col md:flex-row gap-16">
+                        <div className="md:w-1/3">
+                            <div className="sticky top-24">
+                                <h2 className="text-3xl font-bold mb-4">{t('step1.solution_title')}<br /><span className={themeClasses.textLight}>{t('step1.solution_subtitle')}</span></h2>
+                                <p className={`mb-8 ${themeClasses.textMuted}`}>
+                                    {t('step1.solution_desc')}
+                                </p>
+                                <div className={`h-1 w-20 ${isDark ? 'bg-stone-100' : 'bg-black'}`}></div>
+                            </div>
+                        </div>
+
+                        <div className="md:w-2/3 space-y-12">
+                            {/* Module 1 */}
+                            <div className="group">
+                                <div className="flex items-baseline gap-4 mb-4">
+                                    <span className={`text-xs font-mono ${themeClasses.textLight}`}>01</span>
+                                    <h3 className="text-xl font-bold">{t('step1.modules.m1.title')}</h3>
+                                </div>
+                                <div
+                                    className={`pl-8 border-l ${themeClasses.borderStrong} ${isDark ? 'group-hover:border-stone-100' : 'group-hover:border-black'} transition-colors duration-500`}>
+                                    <p className={`mb-4 ${themeClasses.textMuted}`}>
+                                        {t('step1.modules.m1.desc')}
+                                    </p>
+                                    <div
+                                        className={`p-4 rounded-sm border font-mono text-xs whitespace-pre-line ${themeClasses.codeBlock}`}>
+                                        {t('step1.modules.m1.code')}
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Module 2 */}
+                            <div className="group">
+                                <div className="flex items-baseline gap-4 mb-4">
+                                    <span className={`text-xs font-mono ${themeClasses.textLight}`}>02</span>
+                                    <h3 className="text-xl font-bold">{t('step1.modules.m2.title')}</h3>
+                                </div>
+                                <div
+                                    className={`pl-8 border-l ${themeClasses.borderStrong} ${isDark ? 'group-hover:border-stone-100' : 'group-hover:border-black'} transition-colors duration-500`}>
+                                    <p className={`mb-4 ${themeClasses.textMuted}`}>
+                                        {t('step1.modules.m2.desc')}
+                                    </p>
+                                    <div
+                                        className={`p-4 rounded-sm border font-mono text-xs whitespace-pre-line ${themeClasses.codeBlock}`}>
+                                        {t('step1.modules.m2.code')}
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Module 3 */}
+                            <div className="group">
+                                <div className="flex items-baseline gap-4 mb-4">
+                                    <span className={`text-xs font-mono ${themeClasses.textLight}`}>03</span>
+                                    <h3 className="text-xl font-bold">{t('step1.modules.m3.title')}</h3>
+                                </div>
+                                <div
+                                    className={`pl-8 border-l ${themeClasses.borderStrong} ${isDark ? 'group-hover:border-stone-100' : 'group-hover:border-black'} transition-colors duration-500`}>
+                                    <p className={`mb-4 ${themeClasses.textMuted}`}>
+                                        {t('step1.modules.m3.desc')}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Roadmap Section - Timeline Style */}
+            <section id="roadmap" className={`py-20 border-y ${themeClasses.bgSecondary} ${themeClasses.borderStrong}`}>
+                <div className="max-w-4xl mx-auto px-6">
+                    <h2 className={`text-sm font-bold uppercase tracking-widest mb-12 text-center ${themeClasses.textLight}`}>{t('step1.roadmap_title')}</h2>
+
+                    <div className="relative">
+                        <div className={`absolute left-8 top-0 bottom-0 w-px ${isDark ? 'bg-stone-700' : 'bg-slate-300'} md:left-1/2 md:-ml-px`}></div>
+
+                        {/* Step 1 */}
+                        <div className="relative mb-12 md:mb-8">
+                            <div className="flex flex-col md:flex-row items-center">
+                                <div className="flex md:w-1/2 justify-start md:justify-end px-8 md:text-right mb-4 md:mb-0">
+                                    <div>
+                                        <h4 className="font-bold text-lg">{t('step1.roadmap.phase1.time')}</h4>
+                                        <p className={`text-sm ${themeClasses.textLight}`}>{t('step1.roadmap.phase1.title')}</p>
+                                    </div>
+                                </div>
+                                <div
+                                    className={`absolute left-8 w-4 h-4 bg-white border-2 rounded-full -translate-x-1/2 md:left-1/2 z-10 ${isDark ? 'border-stone-500 bg-stone-900' : 'border-black'}`}>
+                                </div>
+                                <div className="md:w-1/2 px-8">
+                                    <ul className={`text-sm space-y-1 list-disc pl-4 ${themeClasses.textMuted}`}>
+                                        {(t('step1.roadmap.phase1.items', { returnObjects: true }) as string[]).map((item, i) => (
+                                            <li key={i}>{item}</li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Step 2 */}
+                        <div className="relative mb-12 md:mb-8">
+                            <div className="flex flex-col md:flex-row items-center">
+                                <div
+                                    className="flex md:w-1/2 justify-start md:justify-end px-8 md:text-right mb-4 md:mb-0 md:order-1">
+                                    <ul className={`text-sm space-y-1 list-disc pl-4 md:pl-0 md:pr-4 ${themeClasses.textMuted}`} dir="rtl">
+                                        {(t('step1.roadmap.phase2.items', { returnObjects: true }) as string[]).map((item, i) => (
+                                            <li key={i}>{item}</li>
+                                        ))}
+                                    </ul>
+                                </div>
+                                <div
+                                    className={`absolute left-8 w-4 h-4 rounded-full -translate-x-1/2 md:left-1/2 z-10 ${isDark ? 'bg-stone-100 shadow-[0_0_0_4px_#292524]' : 'bg-black shadow-[0_0_0_4px_white]'}`}>
+                                </div>
+                                <div className="md:w-1/2 px-8 md:order-0 md:text-right">
+                                    <div>
+                                        <h4 className="font-bold text-lg">{t('step1.roadmap.phase2.time')}</h4>
+                                        <p className={`text-sm ${themeClasses.textLight}`}>{t('step1.roadmap.phase2.title')}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Step 3 */}
+                        <div className="relative">
+                            <div className="flex flex-col md:flex-row items-center">
+                                <div className="flex md:w-1/2 justify-start md:justify-end px-8 md:text-right mb-4 md:mb-0">
+                                    <div>
+                                        <h4 className="font-bold text-lg">{t('step1.roadmap.phase3.time')}</h4>
+                                        <p className={`text-sm ${themeClasses.textLight}`}>{t('step1.roadmap.phase3.title')}</p>
+                                    </div>
+                                </div>
+                                <div
+                                    className={`absolute left-8 w-4 h-4 bg-white border-2 rounded-full -translate-x-1/2 md:left-1/2 z-10 ${isDark ? 'border-stone-500 bg-stone-900' : 'border-black'}`}>
+                                </div>
+                                <div className="md:w-1/2 px-8">
+                                    <ul className={`text-sm space-y-1 list-disc pl-4 ${themeClasses.textMuted}`}>
+                                        {(t('step1.roadmap.phase3.items', { returnObjects: true }) as string[]).map((item, i) => (
+                                            <li key={i}>{item}</li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* About & Contact */}
+            <section id="contact" className="py-24">
+                <div className="max-w-3xl mx-auto px-6 text-center">
+                    <div
+                        className={`w-20 h-20 rounded-full mx-auto mb-6 overflow-hidden flex items-center justify-center text-3xl ${isDark ? 'bg-stone-800' : 'bg-slate-100'}`}>
+                        👨‍💼
+                    </div>
+                    <h2 className="text-3xl font-bold mb-2">Bob</h2>
+                    <p className={`${themeClasses.textLight} mb-8`}>{t('step1.contact_role')}</p>
+
+                    <div className={`prose mx-auto mb-12 text-left md:text-center ${themeClasses.textMuted} whitespace-pre-line`}>
+                        <p>
+                            {t('step1.contact_bio')}
+                        </p>
+                    </div>
+
+                    <div className={`border p-8 md:p-12 rounded-sm text-left ${themeClasses.borderStrong} ${themeClasses.cardBg} ${themeClasses.shadow}`}>
+                        <h3 className="font-bold text-lg mb-6 flex items-center gap-2">
+                            <MessageSquare className="w-5 h-5" />
+                            {t('step1.contact_form_title')}
+                        </h3>
+                        <form className="space-y-4">
+                            <div>
+                                <label className={`block text-xs font-bold uppercase mb-1 ${themeClasses.textLight}`}>{t('step1.form.name')}</label>
+                                <input type="text"
+                                    className={`w-full border-b py-2 focus:outline-none transition bg-transparent ${themeClasses.inputBorder}`}
+                                    placeholder={t('step1.form.placeholders.name')} />
+                            </div>
+                            <div>
+                                <label className={`block text-xs font-bold uppercase mb-1 ${themeClasses.textLight}`}>{t('step1.form.contact')}</label>
+                                <input type="text"
+                                    className={`w-full border-b py-2 focus:outline-none transition bg-transparent ${themeClasses.inputBorder}`}
+                                    placeholder={t('step1.form.placeholders.contact')} />
+                            </div>
+                            <div>
+                                <label className={`block text-xs font-bold uppercase mb-1 ${themeClasses.textLight}`}>{t('step1.form.industry')}</label>
+                                <select
+                                    className={`w-full border-b py-2 focus:outline-none transition bg-transparent ${themeClasses.inputBorder} ${isDark ? 'text-stone-300' : 'text-slate-700'}`}>
+                                    {(t('step1.form.options', { returnObjects: true }) as string[]).map((opt, i) => (
+                                        <option key={i} className="text-black">{opt}</option>
+                                    ))}
+                                </select>
+                            </div>
+                            <button
+                                className={`w-full py-4 mt-8 font-medium transition rounded-sm ${themeClasses.buttonPrimary}`}>
+                                {t('step1.form.btn_submit')}
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </section>
+
+            <footer className={`py-8 text-center text-xs border-t ${themeClasses.border} ${themeClasses.textLight}`}>
+                <p>{t('step1.footer')}</p>
+            </footer>
+        </div>
+    );
+};
+
+export default Step1;

src/pages/Step2.tsx

@@ -0,0 +1,250 @@
+import './step2.css';
+import SharedHeader from '../components/SharedHeader';
+import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from 'react';
+
+const Step2 = () => {
+    const { t, i18n } = useTranslation();
+
+    // Theme state - Default to DARK if not specified, because Step 2's soul is cyber-dark
+    const savedTheme = localStorage.getItem('theme');
+    const [isDark, setIsDark] = useState(savedTheme ? savedTheme === 'dark' : true);
+
+    useEffect(() => {
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    }, [isDark]);
+
+    const toggleTheme = () => setIsDark(!isDark);
+    const toggleLang = () => i18n.changeLanguage(i18n.language === 'zh' ? 'en' : 'zh');
+
+    const currentLang = i18n.language === 'zh' ? 'zh' : 'en';
+
+    // CSS Variables for Theming
+    const themeStyles = {
+        '--bg-color': isDark ? '#050505' : '#ffffff',
+        '--text-primary': isDark ? '#ffffff' : '#000000',
+        '--text-secondary': isDark ? '#888888' : '#666666',
+        '--accent-color': isDark ? '#ccff00' : '#000000', // Black accent in light mode for brutalist look
+        '--grid-line': isDark ? '#222222' : '#e5e5e5',
+        '--card-bg': isDark ? '#050505' : '#f5f5f5',
+        '--card-border': isDark ? '#333333' : '#e5e5e5',
+    } as React.CSSProperties;
+
+    // Helper for scrolling
+    const scrollToId = (id: string) => {
+        const element = document.getElementById(id);
+        if (element) {
+            element.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
+
+    return (
+        <div style={themeStyles} className="step2-page min-h-screen flex flex-col selection:bg-[var(--accent-color)] selection:text-[var(--bg-color)] transition-colors duration-500">
+            {/* 顶部导航 */}
+            <SharedHeader
+                theme={isDark ? 'dark' : 'light'}
+                onThemeToggle={toggleTheme}
+                onLangToggle={toggleLang}
+                currentLang={currentLang}
+            />
+
+            {/* 跑马灯 */}
+            <div className="mt-20 marquee-container mono">
+                <div className="marquee-content">
+                    AI GENERATED CONTENT /// DIGITAL ART /// INTERACTIVE INSTALLATIONS /// DATA ASSETS /// VIRTUAL HUMANS /// IMMERSIVE EXPERIENCE /// MAKE IT FUN ///
+                    AI GENERATED CONTENT /// DIGITAL ART /// INTERACTIVE INSTALLATIONS /// DATA ASSETS /// VIRTUAL HUMANS /// IMMERSIVE EXPERIENCE /// MAKE IT FUN ///
+                </div>
+            </div>
+
+            {/* Hero Section */}
+            <header className="relative min-h-[80vh] flex items-center justify-center bg-grid border-b border-[var(--grid-line)]">
+                <div className="text-center px-4 max-w-5xl mx-auto z-10">
+                    <div className="mono text-[var(--accent-color)] mb-4 text-sm md:text-base tracking-widest">
+                        {t('step2.label')}
+                    </div>
+                    <h1 className="text-5xl md:text-8xl font-black mb-6 leading-tight glitch-wrapper">
+                        <span className="glitch" data-text={t('step2.hero_title')}>{t('step2.hero_title')}</span>
+                    </h1>
+                    <p className="text-[var(--text-secondary)] text-lg md:text-2xl max-w-3xl mx-auto font-light leading-relaxed">
+                        {t('step2.hero_desc')}<span className="text-[var(--text-primary)] font-bold border-b-2 border-[var(--accent-color)]">{t('step2.hero_desc_highlight')}</span>{t('step2.hero_desc_2')}
+                    </p>
+                    <div className="mt-12 flex flex-col md:flex-row gap-6 justify-center">
+                        <button onClick={() => scrollToId('services')} className="px-8 py-4 bg-[var(--text-primary)] text-[var(--bg-color)] font-bold hover:bg-[var(--accent-color)] hover:text-[var(--bg-color)] transition-colors mono border border-[var(--text-primary)] hover:border-[var(--accent-color)]">
+                            {t('step2.btn_explore')}
+                        </button>
+                        <button onClick={() => scrollToId('contact')} className="px-8 py-4 border border-[var(--text-primary)] text-[var(--text-primary)] hover:border-[var(--accent-color)] hover:text-[var(--accent-color)] transition-colors mono">
+                            {t('step2.btn_contact')}
+                        </button>
+                    </div>
+                </div>
+
+                {/* 装饰性背景元素 */}
+                <div className="absolute top-1/4 left-10 w-24 h-24 border border-[var(--grid-line)] rounded-full flex items-center justify-center animate-spin-slow opacity-50">
+                    <div className="w-2 h-2 bg-[var(--accent-color)] rounded-full"></div>
+                </div>
+            </header>
+
+            {/* 核心理念 */}
+            <section className="py-20 px-6 border-b border-[var(--grid-line)]">
+                <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                    <div>
+                        <h2 className="text-3xl md:text-4xl font-bold mb-6">{t('step2.philosophy_title')}<span className="text-[var(--accent-color)]">{t('step2.philosophy_highlight')}</span></h2>
+                        <div className="space-y-6 text-[var(--text-secondary)]">
+                            <p>
+                                {t('step2.philosophy_desc')}<strong>{t('step2.philosophy_bold')}</strong>。
+                            </p>
+                            <ul className="space-y-4 mono text-sm">
+                                {(t('step2.philosophy_list', { returnObjects: true }) as string[]).map((item, i) => (
+                                    <li key={i} className="flex items-center">
+                                        <span className="w-2 h-2 bg-[var(--accent-color)] mr-3"></span>
+                                        {item}
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+                    <div className="relative h-64 md:h-96 bg-[var(--card-bg)] border border-[var(--card-border)] p-4 font-mono text-xs text-[var(--accent-color)] overflow-hidden">
+                        <div className="absolute inset-0 opacity-20 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjODg4Ii8+Cjwvc3ZnPg==')]"></div>
+                        <p>{t('step2.terminal.init')}</p>
+                        <p>{t('step2.terminal.load')}</p>
+                        <p>{t('step2.terminal.gen')}</p>
+                        <p>{t('step2.terminal.opt')}</p>
+                        <p className="mt-4 text-[var(--text-primary)]">
+                            {t('step2.terminal.status')}<span className="text-[var(--accent-color)]">{t('step2.terminal.online')}</span>
+                        </p>
+                        {/* 模拟代码滚动效果 */}
+                        <div className="absolute bottom-4 right-4 w-4 h-4 bg-[var(--accent-color)] cursor-blink"></div>
+                    </div>
+                </div>
+            </section>
+
+            {/* 服务清单 */}
+            <section id="services" className="py-20 px-6 bg-[var(--bg-color)]">
+                <div className="max-w-7xl mx-auto">
+                    <div className="mb-16">
+                        <span className="mono text-[var(--accent-color)] text-sm">{t('step2.services_menu')}</span>
+                        <h2 className="text-4xl md:text-5xl font-bold mt-2">{t('step2.services_title')}</h2>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+
+                        {/* Service 01 */}
+                        <div className="service-card p-8 bg-[var(--card-bg)] border border-[var(--card-border)] flex flex-col justify-between h-full">
+                            <div>
+                                <div className="text-4xl mb-6 opacity-30 font-black">01</div>
+                                <h3 className="text-xl font-bold mb-4 text-[var(--text-primary)]">{t('step2.services.s1.title')}</h3>
+                                <p className="text-[var(--text-secondary)] text-sm leading-relaxed mb-6">
+                                    {t('step2.services.s1.desc')}
+                                </p>
+                                <ul className="text-sm text-[var(--text-secondary)] space-y-2 mono border-t border-[var(--card-border)] pt-4">
+                                    {(t('step2.services.s1.list', { returnObjects: true }) as string[]).map((item, i) => (
+                                        <li key={i}>{item}</li>
+                                    ))}
+                                </ul>
+                            </div>
+                        </div>
+
+                        {/* Service 02 */}
+                        <div className="service-card p-8 bg-[var(--card-bg)] border border-[var(--card-border)] flex flex-col justify-between h-full">
+                            <div>
+                                <div className="text-4xl mb-6 opacity-30 font-black">02</div>
+                                <h3 className="text-xl font-bold mb-4 text-[var(--text-primary)]">{t('step2.services.s2.title')}</h3>
+                                <p className="text-[var(--text-secondary)] text-sm leading-relaxed mb-6">
+                                    {t('step2.services.s2.desc')}
+                                </p>
+                                <ul className="text-sm text-[var(--text-secondary)] space-y-2 mono border-t border-[var(--card-border)] pt-4">
+                                    {(t('step2.services.s2.list', { returnObjects: true }) as string[]).map((item, i) => (
+                                        <li key={i}>{item}</li>
+                                    ))}
+                                </ul>
+                            </div>
+                        </div>
+
+                        {/* Service 03 */}
+                        <div className="service-card p-8 bg-[var(--card-bg)] border border-[var(--card-border)] flex flex-col justify-between h-full">
+                            <div>
+                                <div className="text-4xl mb-6 opacity-30 font-black">03</div>
+                                <h3 className="text-xl font-bold mb-4 text-[var(--text-primary)]">{t('step2.services.s3.title')}</h3>
+                                <p className="text-[var(--text-secondary)] text-sm leading-relaxed mb-6">
+                                    {t('step2.services.s3.desc')}
+                                </p>
+                                <ul className="text-sm text-[var(--text-secondary)] space-y-2 mono border-t border-[var(--card-border)] pt-4">
+                                    {(t('step2.services.s3.list', { returnObjects: true }) as string[]).map((item, i) => (
+                                        <li key={i}>{item}</li>
+                                    ))}
+                                </ul>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+
+            {/* 案例展示 (Abstract) */}
+            <section className="py-20 px-6 border-t border-[var(--grid-line)]">
+                <div className="max-w-7xl mx-auto">
+                    <div className="flex flex-col md:flex-row justify-between items-end mb-12">
+                        <h2 className="text-4xl font-bold">{t('step2.lab_title')}</h2>
+                        <span className="mono text-[var(--text-secondary)]">{t('step2.lab_subtitle')}</span>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        {/* Case 1 */}
+                        <div className="group cursor-pointer">
+                            <div className="h-64 bg-[var(--card-bg)] border border-[var(--card-border)] overflow-hidden relative">
+                                <div className="absolute inset-0 flex items-center justify-center text-[var(--text-primary)] text-6xl font-black opacity-10 group-hover:scale-110 transition-transform duration-500">
+                                    {t('step2.cases.c1.bg_text')}
+                                </div>
+                                <div className="absolute bottom-0 left-0 p-4 w-full bg-gradient-to-t from-[var(--bg-color)] to-transparent">
+                                    <div className="text-[var(--accent-color)] mono text-xs mb-1">{t('step2.cases.c1.date')}</div>
+                                    <h3 className="text-xl font-bold">{t('step2.cases.c1.title')}</h3>
+                                </div>
+                            </div>
+                            <p className="mt-4 text-[var(--text-secondary)] text-sm">
+                                {t('step2.cases.c1.desc')}
+                            </p>
+                        </div>
+
+                        {/* Case 2 */}
+                        <div className="group cursor-pointer">
+                            <div className="h-64 bg-[var(--card-bg)] border border-[var(--card-border)] overflow-hidden relative">
+                                <div className="absolute inset-0 flex items-center justify-center text-[var(--text-primary)] text-6xl font-black opacity-10 group-hover:scale-110 transition-transform duration-500">
+                                    {t('step2.cases.c2.bg_text')}
+                                </div>
+                                <div className="absolute bottom-0 left-0 p-4 w-full bg-gradient-to-t from-[var(--bg-color)] to-transparent">
+                                    <div className="text-[var(--accent-color)] mono text-xs mb-1">{t('step2.cases.c2.date')}</div>
+                                    <h3 className="text-xl font-bold">{t('step2.cases.c2.title')}</h3>
+                                </div>
+                            </div>
+                            <p className="mt-4 text-[var(--text-secondary)] text-sm">
+                                {t('step2.cases.c2.desc')}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Footer / Contact */}
+            <footer id="contact" className="py-20 px-6 bg-[var(--accent-color)] text-[var(--bg-color)]">
+                <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-start">
+                    <div>
+                        <h2 className="text-5xl md:text-7xl font-black mb-6 tracking-tighter whitespace-pre-line">{t('step2.footer_title')}</h2>
+                        <p className="text-lg font-medium max-w-md whitespace-pre-line">
+                            {t('step2.footer_desc')}
+                        </p>
+                    </div>
+                    <div className="mt-12 md:mt-0 flex flex-col space-y-4 text-right">
+                        <a href={`mailto:${t('step2.footer_contact')}`} className="text-2xl font-bold underline hover:opacity-70">{t('step2.footer_contact')}</a>
+                        <div className="mono text-sm font-bold">{t('step2.footer_loc')}</div>
+                        <div className="mt-8 pt-8 border-t border-[var(--bg-color)]/20">
+                            <p className="text-sm">© 2026 杭州纯粹的玩品牌科技有限公司.</p>
+                            <p className="text-sm">All Rights Reserved.</p>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+};
+
+export default Step2;

src/pages/step2.css

@@ -0,0 +1,111 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Sans+SC:wght@300;500;900&display=swap');
+
+:root {
+  --bg-color: #050505;
+  --text-primary: #ffffff;
+  --text-secondary: #888888;
+  --accent-color: #ccff00; /* Cyber Lime */
+  --grid-line: #222222;
+}
+
+.step2-page {
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+  font-family: 'Noto Sans SC', sans-serif;
+  overflow-x: hidden;
+}
+
+.step2-page .mono {
+  font-family: 'JetBrains Mono', monospace;
+}
+
+/* 跑马灯动画 */
+.step2-page .marquee-container {
+  overflow: hidden;
+  white-space: nowrap;
+  background: var(--accent-color);
+  color: var(--bg-color);
+  padding: 0.5rem 0;
+}
+
+.step2-page .marquee-content {
+  display: inline-block;
+  animation: marquee 20s linear infinite;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+@keyframes marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
+/* 网格背景 */
+.step2-page .bg-grid {
+  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
+  linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+/* 故障文字效果 */
+.step2-page .glitch-wrapper {
+  position: relative;
+}
+
+.step2-page .glitch::before,
+.step2-page .glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.step2-page .glitch::before {
+  left: 2px;
+  text-shadow: -1px 0 #ff00c1;
+  clip: rect(44px, 450px, 56px, 0);
+  animation: glitch-anim 5s infinite linear alternate-reverse;
+}
+
+.step2-page .glitch::after {
+  left: -2px;
+  text-shadow: -1px 0 #00fff9;
+  clip: rect(44px, 450px, 56px, 0);
+  animation: glitch-anim2 5s infinite linear alternate-reverse;
+}
+
+@keyframes glitch-anim {
+  0% { clip: rect(10px, 9999px, 30px, 0); }
+  20% { clip: rect(30px, 9999px, 10px, 0); }
+  40% { clip: rect(50px, 9999px, 80px, 0); }
+  100% { clip: rect(90px, 9999px, 100px, 0); }
+}
+
+@keyframes glitch-anim2 {
+  0% { clip: rect(80px, 9999px, 10px, 0); }
+  20% { clip: rect(20px, 9999px, 50px, 0); }
+  40% { clip: rect(10px, 9999px, 60px, 0); }
+  100% { clip: rect(40px, 9999px, 90px, 0); }
+}
+
+/* 卡片悬停效果 */
+.step2-page .service-card {
+  border: 1px solid #333;
+  transition: all 0.3s ease;
+}
+
+.step2-page .service-card:hover {
+  border-color: var(--accent-color);
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px -10px rgba(204, 255, 0, 0.2);
+}
+
+.step2-page .cursor-blink {
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}