feat: Add Step 3 (AI Infrastructure) page with theme/lang toggle

- Created Step3.tsx with dark/light mode support
- Created step3.css for cyber-tech styling
- Created StepProgress.tsx for 3-step navigation
- Added Step 3 route in App.tsx
- Updated Step1/Step2 with progress bar and navigation
- Updated SimpleHome with Step 3 card linking
- Added zh/en translations for Step 3 content

src/App.tsx

@@ -4,6 +4,7 @@ import NewHome from './pages/NewHome';
 import SimpleHome from './pages/SimpleHome';
 import Step1 from './pages/Step1';
 import Step2 from './pages/Step2';
+import Step3 from './pages/Step3';
 
 function App() {
     return (
@@ -15,6 +16,7 @@ function App() {
                 {/* Step 1 & Step 2 Pages */}
                 <Route path="/step1" element={<Step1 />} />
                 <Route path="/step2" element={<Step2 />} />
+                <Route path="/step3" element={<Step3 />} />
 
                 {/* Letter to Players (Formerly the homepage) */}
                 <Route path="/intro" element={<NewHome />} />

src/components/StepProgress.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Check } from 'lucide-react';
+
+interface StepProgressProps {
+    currentStep: 1 | 2 | 3;
+    theme?: 'light' | 'dark';
+}
+
+const StepProgress: React.FC<StepProgressProps> = ({ currentStep, theme = 'dark' }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+
+    const steps = [
+        { id: 1, path: '/step1', label: t('nav.consulting', 'AI Consulting') },
+        { id: 2, path: '/step2', label: t('nav.tourism', 'Tourism Ops') },
+        { id: 3, path: '/step3', label: t('nav.dev', 'Infrastructure') },
+    ];
+
+    const isDark = theme === 'dark';
+    const textColor = isDark ? 'text-stone-400' : 'text-stone-500';
+    const activeColor = isDark ? 'text-white' : 'text-black';
+    const accentColor = currentStep === 1 ? 'text-blue-500' : currentStep === 2 ? 'text-orange-500' : 'text-cyan-400';
+    const borderColor = isDark ? 'border-stone-800' : 'border-stone-200';
+
+    return (
+        <div className={`w-full py-4 mb-8 border-b ${borderColor} transition-colors duration-300`}>
+            <div className="max-w-4xl mx-auto px-4">
+                <div className="relative flex items-center justify-between">
+                    {/* Progress Bar Background */}
+                    <div className={`absolute left-0 top-1/2 -translate-y-1/2 w-full h-0.5 ${isDark ? 'bg-stone-800' : 'bg-stone-200'} -z-10`}></div>
+
+                    {/* Active Progress Line */}
+                    <div
+                        className={`absolute left-0 top-1/2 -translate-y-1/2 h-0.5 transition-all duration-500 ease-out -z-10 bg-gradient-to-r from-blue-500 via-orange-500 to-cyan-500`}
+                        style={{ width: `${((currentStep - 1) / 2) * 100}%` }}
+                    ></div>
+
+                    {steps.map((step) => {
+                        const isCompleted = currentStep > step.id;
+                        const isCurrent = currentStep === step.id;
+
+                        return (
+                            <div
+                                key={step.id}
+                                onClick={() => navigate(step.path)}
+                                className="flex flex-col items-center cursor-pointer group"
+                            >
+                                <div
+                                    className={`
+                                        w-8 h-8 rounded-full flex items-center justify-center border-2 transition-all duration-300 bg-white dark:bg-stone-900
+                                        ${isCompleted || isCurrent ? 'scale-110' : 'scale-100'}
+                                        ${isCurrent ? `${accentColor} border-current` : ''}
+                                        ${isCompleted ? 'border-stone-400 text-stone-400 hover:border-stone-500' : ''}
+                                        ${!isCurrent && !isCompleted ? `border-stone-200 dark:border-stone-700 text-stone-300` : ''}
+                                    `}
+                                >
+                                    {isCompleted ? (
+                                        <Check className="w-4 h-4" />
+                                    ) : (
+                                        <span className="text-xs font-bold font-mono">{step.id}</span>
+                                    )}
+                                </div>
+                                <span
+                                    className={`
+                                        mt-3 text-xs font-bold tracking-wider uppercase transition-colors
+                                        ${isCurrent ? activeColor : textColor}
+                                        group-hover:${activeColor}
+                                    `}
+                                >
+                                    {step.label}
+                                </span>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default StepProgress;

src/locales/en.json

@@ -272,5 +272,57 @@
         "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"
+    },
+    "step3": {
+        "label": "[ Pure Play · Infrastructure ]",
+        "hero_title": "You Create",
+        "hero_title_highlight": "We Compute",
+        "hero_desc": "Enterprise-grade AI Infrastructure for Solopreneurs, Tourism Real Estate, and every playful soul.",
+        "hero_desc_highlight": "",
+        "hero_subtitle": "Minimalist API, Transparent Pricing. Make ideas real in seconds.",
+        "btn_get_key": "Get API Key",
+        "btn_pricing": "View Pricing",
+        "services": {
+            "token": {
+                "title": "Token Relay",
+                "desc": "Aggregate OpenAI, Claude, DeepSeek. Unified OpenAI format API, zero migration cost.",
+                "highlight": "High Concurrency · Low Latency"
+            },
+            "compute": {
+                "title": "Elastic Compute",
+                "desc": "Kubernetes-based elastic GPU cluster. Fine-tuning or inference, billed by the second.",
+                "highlight": "Transparent Cost · Auto Scaling"
+            },
+            "saas": {
+                "title": "SaaS Kit",
+                "desc": "Out-of-the-box business scaffold. Includes Auth, Payments, Admin Panel. Focus on your core.",
+                "highlight": "One-Click Deploy · Is this code?"
+            }
+        },
+        "features_title": "Why Choose Us",
+        "features": [
+            {
+                "title": "Unified Interface",
+                "desc": "One codebase for all future models"
+            },
+            {
+                "title": "Enterprise Stability",
+                "desc": "99.9% SLA, Multi-line failover"
+            },
+            {
+                "title": "Local Compliance",
+                "desc": "Encrypted transport, Private deployment supported"
+            },
+            {
+                "title": "Dev Friendly",
+                "desc": "Python/JS SDK, Detailed docs, Hello World in 5 mins"
+            }
+        ],
+        "code_title": "Integrate with one line of code",
+        "cta_title": "Ready to Start?",
+        "cta_desc": "Whether you are an indie dev, studio, or real estate developer, find your compute solution here.",
+        "cta_input_placeholder": "Enter your email",
+        "cta_btn": "Get API Key",
+        "footer_rights": "© 2026 Pure Play Infrastructure. All Systems Operational."
     }
 }

src/locales/zh.json

@@ -271,5 +271,57 @@
         "footer_desc": "寻找愿意打破常规的合作伙伴。\n我们提供技术与创意，你提供场景与野心。",
         "footer_contact": "CONTACT@CCDW.XYZ",
         "footer_loc": "HANGZHOU / SHANGHAI"
+    },
+    "step3": {
+        "label": "[ 纯粹的玩 · 基础设施 ]",
+        "hero_title": "你负责创造",
+        "hero_title_highlight": "我们负责算力",
+        "hero_desc": "为 AI 一人公司、文旅地产和所有想玩的灵魂，提供企业级",
+        "hero_desc_highlight": "AI 基础设施",
+        "hero_subtitle": "极简 API，透明定价，让创意瞬间落地。",
+        "btn_get_key": "获取 API Key",
+        "btn_pricing": "查看定价",
+        "services": {
+            "token": {
+                "title": "Token 中转",
+                "desc": "聚合 OpenAI, Claude, DeepSeek 等主流模型。统一 OpenAI 格式接口，零成本切换。",
+                "highlight": "高并发 · 低延迟"
+            },
+            "compute": {
+                "title": "弹性算力",
+                "desc": "基于 Kubernetes 的弹性 GPU 集群。无论是微调还是推理，按秒计费，用完即走。",
+                "highlight": "成本透明 · 自动扩缩"
+            },
+            "saas": {
+                "title": "SaaS 套件",
+                "desc": "开箱即用的业务脚手架。包含用户认证、支付系统、后台管理，让你专注核心业务。",
+                "highlight": "一键部署 · 如果这也算代码"
+            }
+        },
+        "features_title": "为什么选择我们",
+        "features": [
+            {
+                "title": "统一接口",
+                "desc": "只需维护一套代码，即可接入未来所有新模型"
+            },
+            {
+                "title": "企业级稳定",
+                "desc": "99.9% SLA，多线路自动故障切换"
+            },
+            {
+                "title": "本地合规",
+                "desc": "数据加密传输，支持私有化部署，符合国内法规"
+            },
+            {
+                "title": "开发者友好",
+                "desc": "提供 Python/JS SDK，详细文档，5分钟跑通 Hello World"
+            }
+        ],
+        "code_title": "只需一行代码，即可接入",
+        "cta_title": "准备好开始了吗？",
+        "cta_desc": "无论你是独立开发者、工作室还是地产开发商，都能在这里找到适合你的算力方案。",
+        "cta_input_placeholder": "输入你的邮箱",
+        "cta_btn": "获取 API Key",
+        "footer_rights": "© 2026 纯粹的玩基础设施. All Systems Operational."
     }
 }

src/pages/SimpleHome.tsx

@@ -409,7 +409,7 @@ const SimpleHome = () => {
 
                         {/* Item 3 */}
                         <div
-                            onClick={() => scrollToSection('dev')}
+                            onClick={() => navigate('/step3')}
                             className={`group p-6 rounded-xl border transition-all cursor-pointer ${isDark ? 'bg-stone-800/50 border-stone-700 hover:border-cyan-500/50' : 'bg-white border-stone-200 hover:border-cyan-400 shadow-sm hover:shadow-md'}`}
                         >
                             <div className="flex items-center justify-between mb-2">
@@ -544,6 +544,15 @@ const SimpleHome = () => {
                             <p className="text-sm text-stone-500">{t.dev.features.saas.desc}</p>
                         </div>
                     </div>
+
+                    <div className="mt-12 text-center">
+                        <button
+                            onClick={() => navigate('/step3')}
+                            className={`text-sm font-bold uppercase tracking-wider flex items-center justify-center gap-2 mx-auto group ${isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-cyan-600 hover:text-cyan-700'}`}
+                        >
+                            {t.cards.devLink} <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
+                        </button>
+                    </div>
                 </div>
             </section>
 
@@ -610,9 +619,9 @@ const SimpleHome = () => {
                         <p className="mt-4">{t.contact.copyright}</p>
                     </div>
                 </div>
-            </section>
+            </section >
 
-        </div>
+        </div >
     );
 };
 

src/pages/Step1.tsx

@@ -8,11 +8,14 @@ import {
 } from 'lucide-react';
 
 import SharedHeader from '../components/SharedHeader';
+import StepProgress from '../components/StepProgress';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 
 const Step1 = () => {
     const { t, i18n } = useTranslation();
+    const navigate = useNavigate();
 
     // Theme state
     const [isDark, setIsDark] = useState(localStorage.getItem('theme') === 'dark');
@@ -63,6 +66,10 @@ const Step1 = () => {
                 currentLang={currentLang}
             />
 
+            <div className="pt-24 pb-8">
+                <StepProgress currentStep={1} theme={isDark ? 'dark' : 'light'} />
+            </div>
+
             {/* Hero / Manifesto Section */}
             <section id="manifesto" className={`pt-28 pb-20 border-b ${themeClasses.border}`}>
                 <div className="max-w-5xl mx-auto px-6">
@@ -348,8 +355,24 @@ const Step1 = () => {
                 </div>
             </section>
 
-            <footer className={`py-8 text-center text-xs border-t ${themeClasses.border} ${themeClasses.textLight}`}>
-                <p>{t('step1.footer')}</p>
+            <footer className={`py-12 border-t ${themeClasses.border} ${themeClasses.bgSecondary}`}>
+                <div className="max-w-5xl mx-auto px-6 flex justify-between items-center">
+                    <button
+                        onClick={() => navigate('/')}
+                        className={`text-sm font-bold opacity-50 hover:opacity-100 transition ${isDark ? 'text-white' : 'text-black'}`}
+                    >
+                        ← {t('nav.home', 'Back to Home')}
+                    </button>
+
+                    <button
+                        onClick={() => navigate('/step2')}
+                        className={`px-6 py-3 rounded text-sm font-bold flex items-center gap-2 transition ${themeClasses.buttonPrimary}`}
+                    >
+                        {t('nav.tourism', 'Next: Tourism Ops')}
+                        <ArrowRight className="w-4 h-4" />
+                    </button>
+                </div>
+                <p className={`text-center text-xs mt-8 ${themeClasses.textLight}`}>{t('step1.footer')}</p>
             </footer>
         </div>
     );

src/pages/Step2.tsx

@@ -1,10 +1,13 @@
 import './step2.css';
 import SharedHeader from '../components/SharedHeader';
+import StepProgress from '../components/StepProgress';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 
 const Step2 = () => {
     const { t, i18n } = useTranslation();
+    const navigate = useNavigate();
 
     // Theme state - Default to DARK if not specified, because Step 2's soul is cyber-dark
     const savedTheme = localStorage.getItem('theme');
@@ -48,6 +51,10 @@ const Step2 = () => {
                 currentLang={currentLang}
             />
 
+            <div className="bg-[var(--bg-color)] pt-24 pb-4">
+                <StepProgress currentStep={2} theme={isDark ? 'dark' : 'light'} />
+            </div>
+
             {/* 跑马灯 */}
             <div className="mt-20 marquee-container mono">
                 <div className="marquee-content">
@@ -234,6 +241,20 @@ const Step2 = () => {
                         </p>
                     </div>
                     <div className="mt-12 md:mt-0 flex flex-col space-y-4 text-right">
+                        <div className="flex justify-end gap-3 mb-8">
+                            <button
+                                onClick={() => navigate('/step1')}
+                                className="px-6 py-3 border border-[var(--bg-color)] text-[var(--bg-color)] hover:bg-[var(--bg-color)] hover:text-[var(--accent-color)] font-bold transition-colors"
+                            >
+                                ← PREV: STEP 1
+                            </button>
+                            <button
+                                onClick={() => navigate('/step3')}
+                                className="px-6 py-3 bg-[var(--bg-color)] text-[var(--accent-color)] hover:opacity-90 font-bold transition-colors"
+                            >
+                                NEXT: STEP 3 →
+                            </button>
+                        </div>
                         <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">

src/pages/Step3.tsx

@@ -0,0 +1,255 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+    Terminal,
+    Cpu,
+    Zap,
+    Code,
+    Server,
+    ArrowRight,
+    CheckCircle,
+    Copy
+} from 'lucide-react';
+import SharedHeader from '../components/SharedHeader';
+import './step3.css';
+import StepProgress from '../components/StepProgress';
+
+const Step3 = () => {
+    const { t, i18n } = useTranslation();
+    const currentLang = i18n.language === 'zh' ? 'zh' : 'en';
+
+    // Theme state - read from localStorage, default to dark
+    const [isDark, setIsDark] = useState(() => {
+        const saved = localStorage.getItem('theme');
+        return saved ? saved === 'dark' : true; // default dark for Step 3
+    });
+
+    useEffect(() => {
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        if (isDark) {
+            document.body.classList.add('step3-mode');
+            document.body.classList.remove('step3-light');
+        } else {
+            document.body.classList.remove('step3-mode');
+            document.body.classList.add('step3-light');
+        }
+        return () => {
+            document.body.classList.remove('step3-mode');
+            document.body.classList.remove('step3-light');
+        };
+    }, [isDark]);
+
+    const toggleTheme = () => setIsDark(!isDark);
+    const toggleLang = () => i18n.changeLanguage(i18n.language === 'zh' ? 'en' : 'zh');
+
+    // Code Snippet State
+    const [copied, setCopied] = useState(false);
+    const codeSnippet = `curl https://api.ccdw.xyz/v1/chat/completions \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer YOUR_API_KEY" \\
+  -d '{
+    "model": "gpt-4-turbo",
+    "messages": [{"role": "user", "content": "Hello!"}]
+  }'`;
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(codeSnippet);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    // Theme-based classes
+    const theme = {
+        bg: isDark ? 'bg-[#0a0a0a]' : 'bg-white',
+        bgSecondary: isDark ? 'bg-[#111]' : 'bg-stone-50',
+        bgTertiary: isDark ? 'bg-[#0d0d0d]' : 'bg-stone-100',
+        text: isDark ? 'text-white' : 'text-stone-900',
+        textMuted: isDark ? 'text-gray-400' : 'text-stone-600',
+        textLight: isDark ? 'text-gray-600' : 'text-stone-400',
+        border: isDark ? 'border-[#222]' : 'border-stone-200',
+        borderLight: isDark ? 'border-[#333]' : 'border-stone-300',
+        accent: 'text-[#00f0ff]',
+        accentBg: isDark ? 'bg-[#00f0ff]/10' : 'bg-cyan-50',
+        cardBg: isDark ? 'bg-[#111]' : 'bg-white',
+        cardBorder: isDark ? 'border-[#333]' : 'border-stone-200',
+        inputBg: isDark ? 'bg-[#1a1a1a]' : 'bg-white',
+        codeHeaderBg: isDark ? 'bg-[#1a1a1a]' : 'bg-stone-100',
+        selection: isDark ? 'selection:bg-[#00f0ff] selection:text-black' : 'selection:bg-cyan-200 selection:text-cyan-900',
+    };
+
+    return (
+        <div className={`step3-page min-h-screen ${theme.bg} ${theme.text} ${theme.selection} font-sans transition-colors duration-300`}>
+            <SharedHeader
+                theme={isDark ? 'dark' : 'light'}
+                onThemeToggle={toggleTheme}
+                onLangToggle={toggleLang}
+                currentLang={currentLang}
+            />
+
+            {/* Progress Indicator */}
+            <div className={`pt-24 pb-8 max-w-5xl mx-auto px-6 ${theme.bg}`}>
+                <StepProgress currentStep={3} theme={isDark ? 'dark' : 'light'} />
+            </div>
+
+            {/* Hero Section */}
+            <section className={`relative pt-10 pb-32 px-6 border-b ${theme.border} overflow-hidden`}>
+                {/* Background Grid */}
+                <div className={`absolute inset-0 ${isDark ? 'bg-grid-cyan opacity-20' : 'bg-grid-cyan-light opacity-10'} pointer-events-none`}></div>
+                <div className={`absolute top-0 left-0 w-full h-full ${isDark ? 'bg-gradient-to-b from-[#0a0a0a] via-transparent to-[#0a0a0a]' : 'bg-gradient-to-b from-white via-transparent to-white'} pointer-events-none`}></div>
+
+                <div className="max-w-5xl mx-auto relative z-10 text-center">
+                    <div className={`inline-block px-3 py-1 mb-8 border ${theme.borderLight} rounded-full ${theme.bgSecondary} ${theme.accent} text-xs font-mono tracking-widest uppercase`}>
+                        {t('step3.label')}
+                    </div>
+
+                    <h1 className="text-5xl md:text-8xl font-black mb-8 leading-none tracking-tight">
+                        {t('step3.hero_title')}<br />
+                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#00f0ff] to-[#00aaff]">
+                            {t('step3.hero_title_highlight')}
+                        </span>
+                    </h1>
+
+                    <p className={`max-w-2xl mx-auto text-lg md:text-xl ${theme.textMuted} mb-12 leading-relaxed`}>
+                        {t('step3.hero_desc')} <span className={`${theme.text} border-b border-[#00f0ff]`}>{t('step3.hero_desc_highlight')}</span>
+                        <br className="hidden md:block" />
+                        {t('step3.hero_subtitle')}
+                    </p>
+
+                    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+                        <button className="px-8 py-4 bg-[#00f0ff] text-black font-bold text-lg rounded hover:bg-[#00ccee] transition-colors flex items-center gap-2 group">
+                            <Terminal className="w-5 h-5" />
+                            {t('step3.btn_get_key')}
+                            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                        </button>
+                        <button className={`px-8 py-4 border ${theme.borderLight} hover:border-[#00f0ff] ${theme.textMuted} hover:${theme.text} rounded transition-colors font-mono`}>
+                            {t('step3.btn_pricing')}
+                        </button>
+                    </div>
+                </div>
+            </section>
+
+            {/* Services Grid */}
+            <section className={`py-24 px-6 ${theme.bg}`}>
+                <div className="max-w-6xl mx-auto">
+                    <div className="grid md:grid-cols-3 gap-8">
+                        {/* Token Relay */}
+                        <div className={`s3-card p-8 rounded-xl ${theme.cardBg} border ${theme.cardBorder} group`}>
+                            <div className={`w-12 h-12 ${theme.accentBg} rounded flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
+                                <Zap className="w-6 h-6 text-[#00f0ff]" />
+                            </div>
+                            <h3 className="text-2xl font-bold mb-4">{t('step3.services.token.title')}</h3>
+                            <p className={`${theme.textMuted} mb-6 leading-relaxed`}>
+                                {t('step3.services.token.desc')}
+                            </p>
+                            <div className="text-xs font-mono text-[#00f0ff] uppercase tracking-wider">
+                                {t('step3.services.token.highlight')}
+                            </div>
+                        </div>
+
+                        {/* Elastic Compute */}
+                        <div className={`s3-card p-8 rounded-xl ${theme.cardBg} border ${theme.cardBorder} group`}>
+                            <div className={`w-12 h-12 ${theme.accentBg} rounded flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
+                                <Cpu className="w-6 h-6 text-[#00f0ff]" />
+                            </div>
+                            <h3 className="text-2xl font-bold mb-4">{t('step3.services.compute.title')}</h3>
+                            <p className={`${theme.textMuted} mb-6 leading-relaxed`}>
+                                {t('step3.services.compute.desc')}
+                            </p>
+                            <div className="text-xs font-mono text-[#00f0ff] uppercase tracking-wider">
+                                {t('step3.services.compute.highlight')}
+                            </div>
+                        </div>
+
+                        {/* SaaS Kit */}
+                        <div className={`s3-card p-8 rounded-xl ${theme.cardBg} border ${theme.cardBorder} group`}>
+                            <div className={`w-12 h-12 ${theme.accentBg} rounded flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
+                                <Server className="w-6 h-6 text-[#00f0ff]" />
+                            </div>
+                            <h3 className="text-2xl font-bold mb-4">{t('step3.services.saas.title')}</h3>
+                            <p className={`${theme.textMuted} mb-6 leading-relaxed`}>
+                                {t('step3.services.saas.desc')}
+                            </p>
+                            <div className="text-xs font-mono text-[#00f0ff] uppercase tracking-wider">
+                                {t('step3.services.saas.highlight')}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Code & Integration */}
+            <section className={`py-24 px-6 border-y ${theme.border} ${theme.bgTertiary}`}>
+                <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-16">
+                    <div className="md:w-1/2">
+                        <div className="flex items-center gap-3 mb-6">
+                            <Code className="w-6 h-6 text-[#00f0ff]" />
+                            <h2 className="text-3xl font-bold">{t('step3.code_title')}</h2>
+                        </div>
+                        <div className="space-y-6">
+                            {(t('step3.features', { returnObjects: true }) as any[]).map((feature: any, idx: number) => (
+                                <div key={idx} className="flex gap-4">
+                                    <div className="mt-1">
+                                        <CheckCircle className="w-5 h-5 text-[#00f0ff]" />
+                                    </div>
+                                    <div>
+                                        <h4 className={`font-bold ${theme.text} mb-1`}>{feature.title}</h4>
+                                        <p className={`text-sm ${theme.textMuted}`}>{feature.desc}</p>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="md:w-1/2 w-full">
+                        <div className={`code-window border ${theme.cardBorder} rounded-lg overflow-hidden shadow-xl`}>
+                            <div className={`code-header ${theme.codeHeaderBg} border-b ${theme.cardBorder}`}>
+                                <div className="dot red"></div>
+                                <div className="dot yellow"></div>
+                                <div className="dot green"></div>
+                                <div className={`ml-auto text-xs ${theme.textLight} font-mono`}>bash</div>
+                            </div>
+                            <div className={`p-6 overflow-x-auto relative group ${isDark ? 'bg-black' : 'bg-stone-900'}`}>
+                                <pre className="font-mono text-sm leading-relaxed text-[#00f0ff]">
+                                    {codeSnippet}
+                                </pre>
+                                <button
+                                    onClick={handleCopy}
+                                    className="absolute top-4 right-4 p-2 bg-[#333] hover:bg-[#444] rounded text-white opacity-0 group-hover:opacity-100 transition-opacity"
+                                >
+                                    {copied ? <CheckCircle className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* CTA / Footer */}
+            <footer className={`py-32 px-6 text-center ${theme.bg}`}>
+                <div className="max-w-2xl mx-auto">
+                    <h2 className="text-4xl font-bold mb-6">{t('step3.cta_title')}</h2>
+                    <p className={`${theme.textMuted} mb-10 text-lg`}>
+                        {t('step3.cta_desc')}
+                    </p>
+
+                    <div className="flex flex-col sm:flex-row max-w-md mx-auto gap-4">
+                        <input
+                            type="email"
+                            placeholder={t('step3.cta_input_placeholder')}
+                            className={`flex-1 ${theme.inputBg} border ${theme.borderLight} rounded px-4 py-3 ${theme.text} focus:outline-none focus:border-[#00f0ff] transition-colors`}
+                        />
+                        <button className="px-6 py-3 bg-[#00f0ff] text-black font-bold rounded hover:bg-[#00ccee] transition-colors whitespace-nowrap">
+                            {t('step3.cta_btn')}
+                        </button>
+                    </div>
+
+                    <div className={`mt-24 pt-8 border-t ${theme.border} text-sm ${theme.textLight} font-mono`}>
+                        {t('step3.footer_rights')}
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+};
+
+export default Step3;

src/pages/step3.css

@@ -0,0 +1,110 @@
+/* Step 3 CSS - Infrastructure / Cyber / Tech */
+
+/* ===== Dark Mode (Default) ===== */
+body.step3-mode {
+    background-color: #0a0a0a;
+    color: #f0f0f0;
+}
+
+/* ===== Light Mode ===== */
+body.step3-light {
+    background-color: #ffffff;
+    color: #1a1a1a;
+}
+
+.step3-page {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    overflow-x: hidden;
+}
+
+.mono {
+    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+}
+
+/* ===== Grid Background - Dark ===== */
+.bg-grid-cyan {
+    background-image: linear-gradient(to right, #1a1a1a 1px, transparent 1px),
+        linear-gradient(to bottom, #1a1a1a 1px, transparent 1px);
+    background-size: 40px 40px;
+}
+
+/* ===== Grid Background - Light ===== */
+.bg-grid-cyan-light {
+    background-image: linear-gradient(to right, #e5e7eb 1px, transparent 1px),
+        linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
+    background-size: 40px 40px;
+}
+
+/* ===== Service Card Hover Effect ===== */
+.s3-card {
+    transition: all 0.3s ease;
+}
+
+.s3-card:hover {
+    border-color: #00f0ff !important;
+    box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
+    transform: translateY(-2px);
+}
+
+/* ===== Code Window ===== */
+.code-window {
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+}
+
+.code-header {
+    padding: 10px 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.dot.red {
+    background: #ff5f56;
+}
+
+.dot.yellow {
+    background: #ffbd2e;
+}
+
+.dot.green {
+    background: #27c93f;
+}
+
+/* ===== Custom Scrollbar for Code ===== */
+.custom-scroll::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.custom-scroll::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.custom-scroll::-webkit-scrollbar-thumb {
+    background: #333;
+    border-radius: 4px;
+}
+
+.custom-scroll::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+/* ===== Smooth Transitions ===== */
+.step3-page * {
+    transition-property: background-color, border-color, color;
+    transition-duration: 0.3s;
+    transition-timing-function: ease;
+}
+
+/* Exclude elements that need instant transition */
+.step3-page button,
+.step3-page a,
+.step3-page .s3-card {
+    transition: all 0.3s ease;
+}