Ver código fonte

fix(ui/i18n): unify color themes and complete translations

1. Fix Step 2 UI color theme (changed from Green to Orange to match Home/Stepper).
2. Fix Step 2 layout bug (reduced excessive spacing above marquee).
3. Complete i18n translations for navigation buttons, footers, and marquees across all steps.
4. Add navigation buttons to Step 3 footer.
5. Fix hardcoded text in SimpleHome and Step pages.
6. Adjust spacing in Step 1 and StepProgress for better layout.
bob 4 meses atrás
pai
commit
7d1701a464

+ 1 - 1
src/components/StepProgress.tsx

@@ -25,7 +25,7 @@ const StepProgress: React.FC<StepProgressProps> = ({ currentStep, theme = 'dark'
     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={`w-full py-4 mb-2 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 */}

+ 12 - 3
src/locales/en.json

@@ -194,7 +194,9 @@
                 "Legal Services"
             ]
         },
-        "footer": "© 2024 Digital Efficacy Consulting. Built with rationality."
+        "footer": "© 2024 Digital Efficacy Consulting. Built with rationality.",
+        "nav_home": "← Back to Home",
+        "nav_next": "Next: Tourism Ops →"
     },
     "step2": {
         "label": "[ Hangzhou Pure Play · AI Lab ]",
@@ -274,7 +276,12 @@
         "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"
+        "footer_loc": "HANGZHOU / SHANGHAI",
+        "footer_copyright": "© 2026 Pure Play Technology Co., Ltd.",
+        "footer_rights": "All Rights Reserved",
+        "nav_prev": "← PREV: CONSULTING",
+        "nav_next": "NEXT: INFRASTRUCTURE →",
+        "marquee": "AI GENERATED CONTENT /// DIGITAL ART /// INTERACTIVE INSTALLATIONS /// DATA ASSETS /// VIRTUAL HUMANS /// IMMERSIVE EXPERIENCE /// MAKE IT FUN ///"
     },
     "step3": {
         "label": "[ Pure Play · Infrastructure ]",
@@ -326,6 +333,8 @@
         "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": "Submit Application",
-        "footer_rights": "© 2026 Pure Play Infrastructure. All Systems Operational."
+        "footer_rights": "© 2026 Pure Play Infrastructure. All Systems Operational.",
+        "nav_prev": "← PREV: TOURISM OPS",
+        "nav_home": "Back to Home"
     }
 }

+ 13 - 4
src/locales/zh.json

@@ -193,7 +193,9 @@
                 "法律服务"
             ]
         },
-        "footer": "© 2024 数智效能咨询. Built with rationality."
+        "footer": "© 2024 数智效能咨询. Built with rationality.",
+        "nav_home": "← 返回首页",
+        "nav_next": "下一步:文旅运营 →"
     },
     "step2": {
         "label": "[ 杭州纯粹的玩 · AI 实验室 ]",
@@ -270,10 +272,15 @@
                 "desc": "联动高校资源与AI工具,实现低成本、高创意的海量文旅内容生产。"
             }
         },
-        "footer_title": "LET'S\nPLAY.",
+        "footer_title": "一起\n玩吧。",
         "footer_desc": "寻找愿意打破常规的合作伙伴。\n我们提供技术与创意,你提供场景与野心。",
         "footer_contact": "CONTACT@CCDW.XYZ",
-        "footer_loc": "HANGZHOU / SHANGHAI"
+        "footer_loc": "杭州 / 上海",
+        "footer_copyright": "© 2026 杭州纯粹的玩品牌科技有限公司",
+        "footer_rights": "保留所有权利",
+        "nav_prev": "← 上一步:企业咨询",
+        "nav_next": "下一步:基础设施 →",
+        "marquee": "AI 生成内容 /// 数字艺术 /// 交互装置 /// 数据资产 /// 虚拟人 /// 沉浸体验 /// 快乐至上 ///"
     },
     "step3": {
         "label": "[ 纯粹的玩 · 基础设施 ]",
@@ -325,6 +332,8 @@
         "cta_desc": "无论你是独立开发者、工作室还是地产开发商,都能在这里找到适合你的算力方案。",
         "cta_input_placeholder": "输入你的邮箱",
         "cta_btn": "提交申请",
-        "footer_rights": "© 2026 纯粹的玩基础设施. All Systems Operational."
+        "footer_rights": "© 2026 纯粹的玩基础设施. All Systems Operational.",
+        "nav_prev": "← 上一步:文旅运营",
+        "nav_home": "返回首页"
     }
 }

+ 2 - 2
src/pages/SimpleHome.tsx

@@ -531,7 +531,7 @@ const SimpleHome = () => {
                             disabled={status === 'loading' || status === 'success'}
                             className={`px-8 py-3 rounded-lg font-bold transition-all disabled:opacity-50 disabled:cursor-not-allowed ${isDark ? 'bg-stone-100 text-stone-900 hover:bg-white' : 'bg-stone-900 text-white hover:bg-stone-800'}`}
                         >
-                            {status === 'loading' ? '发送中...' : t.contact.submit}
+                            {status === 'loading' ? (lang === 'zh' ? '发送中...' : 'Sending...') : t.contact.submit}
                         </button>
                     </div>
 
@@ -570,7 +570,7 @@ const SimpleHome = () => {
                         <p>{t.contact.footerNote}</p>
                         <p className="mt-4">{t.contact.copyright}</p>
                         <p className="mt-1 text-[10px] opacity-50">
-                            杭州纯粹的玩品牌科技有限公司
+                            {lang === 'zh' ? '杭州纯粹的玩品牌科技有限公司' : 'Hangzhou Pure Play Brand Technology Co., Ltd.'}
                         </p>
                     </div>
                 </div>

+ 4 - 5
src/pages/Step1.tsx

@@ -78,12 +78,12 @@ const Step1 = () => {
                 currentLang={currentLang}
             />
 
-            <div className="pt-24 pb-8">
+            <div className="pt-20 pb-2">
                 <StepProgress currentStep={1} theme={isDark ? 'dark' : 'light'} />
             </div>
 
             {/* Hero / Manifesto Section */}
-            <section id="manifesto" className={`pt-28 pb-20 border-b ${themeClasses.border}`}>
+            <section id="manifesto" className={`pt-8 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}`}>
@@ -400,15 +400,14 @@ const Step1 = () => {
                         onClick={() => navigate('/')}
                         className={`text-sm font-bold opacity-50 hover:opacity-100 transition ${isDark ? 'text-white' : 'text-black'}`}
                     >
-                        ← {t('nav.home', 'Back to Home')}
+                        {t('step1.nav_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" />
+                        {t('step1.nav_next')}
                     </button>
                 </div>
                 <p className={`text-center text-xs mt-8 ${themeClasses.textLight}`}>{t('step1.footer')}</p>

+ 8 - 9
src/pages/Step2.tsx

@@ -17,7 +17,7 @@ const Step2 = () => {
         '--bg-color': '#050505',
         '--text-primary': '#ffffff',
         '--text-secondary': '#888888',
-        '--accent-color': '#ccff00',
+        '--accent-color': '#fb923c', // Orange-400 for Dark Mode
         '--grid-line': '#222222',
         '--card-bg': '#0a0a0a',
         '--card-border': '#333333',
@@ -25,7 +25,7 @@ const Step2 = () => {
         '--bg-color': '#FAFAFA',
         '--text-primary': '#1a1a1a',
         '--text-secondary': '#666666',
-        '--accent-color': '#16a34a', // 使用绿色保持活力感
+        '--accent-color': '#ea580c', // Orange-600 for Light Mode (Deep Orange)
         '--grid-line': '#e5e5e5',
         '--card-bg': '#ffffff',
         '--card-border': '#d4d4d4',
@@ -54,10 +54,9 @@ const Step2 = () => {
             </div>
 
             {/* 跑马灯 */}
-            <div className="mt-20 marquee-container mono">
+            <div className="mt-8 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 ///
+                    {t('step2.marquee')} {t('step2.marquee')}
                 </div>
             </div>
 
@@ -244,20 +243,20 @@ const Step2 = () => {
                                 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
+                                {t('step2.nav_prev')}
                             </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 →
+                                {t('step2.nav_next')}
                             </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">
-                            <p className="text-sm">© 2026 杭州纯粹的玩品牌科技有限公司.</p>
-                            <p className="text-sm">All Rights Reserved.</p>
+                            <p className="text-sm">{t('step2.footer_copyright')}</p>
+                            <p className="text-sm">{t('step2.footer_rights')}</p>
                         </div>
                     </div>
                 </div>

+ 19 - 1
src/pages/Step3.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
     Terminal,
@@ -21,6 +22,7 @@ const Step3 = () => {
 
     // 使用统一的全局状态管理
     const { isDark, currentLang, toggleTheme, toggleLang } = useGlobalSettings();
+    const navigate = useNavigate();
 
     // Code Snippet State
     const [copied, setCopied] = useState(false);
@@ -254,7 +256,23 @@ const Step3 = () => {
                         </div>
                     )}
 
-                    <div className={`mt-24 pt-8 border-t ${theme.border} text-sm ${theme.textLight} font-mono`}>
+                    {/* Navigation buttons */}
+                    <div className="flex justify-center gap-4 mb-12">
+                        <button
+                            onClick={() => navigate('/step2')}
+                            className={`px-6 py-3 border ${theme.borderLight} hover:border-[#00f0ff] ${theme.textMuted} hover:text-[#00f0ff] rounded transition-colors font-mono`}
+                        >
+                            {t('step3.nav_prev')}
+                        </button>
+                        <button
+                            onClick={() => navigate('/')}
+                            className={`px-6 py-3 border ${theme.borderLight} hover:border-[#00f0ff] ${theme.textMuted} hover:text-[#00f0ff] rounded transition-colors font-mono`}
+                        >
+                            {t('step3.nav_home')}
+                        </button>
+                    </div>
+
+                    <div className={`pt-8 border-t ${theme.border} text-sm ${theme.textLight} font-mono`}>
                         {t('step3.footer_rights')}
                     </div>
                 </div>