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'); 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 (
{/* 顶部导航 */}
{/* 跑马灯 */}
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 ///
{/* Hero Section */}
{t('step2.label')}

{t('step2.hero_title')}

{t('step2.hero_desc')}{t('step2.hero_desc_highlight')}{t('step2.hero_desc_2')}

{/* 装饰性背景元素 */}
{/* 核心理念 */}

{t('step2.philosophy_title')}{t('step2.philosophy_highlight')}

{t('step2.philosophy_desc')}{t('step2.philosophy_bold')}。

    {(t('step2.philosophy_list', { returnObjects: true }) as string[]).map((item, i) => (
  • {item}
    • ))}

{t('step2.terminal.init')}

{t('step2.terminal.load')}

{t('step2.terminal.gen')}

{t('step2.terminal.opt')}

{t('step2.terminal.status')}{t('step2.terminal.online')}

{/* 模拟代码滚动效果 */}
{/* 服务清单 */}
{t('step2.services_menu')}

{t('step2.services_title')}

{/* Service 01 */}
01

{t('step2.services.s1.title')}

{t('step2.services.s1.desc')}

    {(t('step2.services.s1.list', { returnObjects: true }) as string[]).map((item, i) => (
  • {item}
    • ))}
{/* Service 02 */}
02

{t('step2.services.s2.title')}

{t('step2.services.s2.desc')}

    {(t('step2.services.s2.list', { returnObjects: true }) as string[]).map((item, i) => (
  • {item}
    • ))}
{/* Service 03 */}
03

{t('step2.services.s3.title')}

{t('step2.services.s3.desc')}

    {(t('step2.services.s3.list', { returnObjects: true }) as string[]).map((item, i) => (
  • {item}
    • ))}
{/* 案例展示 (Abstract) */}

{t('step2.lab_title')}

{t('step2.lab_subtitle')}
{/* Case 1 */}
{t('step2.cases.c1.bg_text')}
{t('step2.cases.c1.date')}

{t('step2.cases.c1.title')}

{t('step2.cases.c1.desc')}

{/* Case 2 */}
{t('step2.cases.c2.bg_text')}
{t('step2.cases.c2.date')}

{t('step2.cases.c2.title')}

{t('step2.cases.c2.desc')}

{/* Footer / Contact */}
); }; export default Step2;