|
|
@@ -0,0 +1,567 @@
|
|
|
+import React, { useState } from 'react';
|
|
|
+import {
|
|
|
+ Bot,
|
|
|
+ MapPin,
|
|
|
+ Cpu,
|
|
|
+ ArrowRight,
|
|
|
+ BarChart3,
|
|
|
+ Gamepad2,
|
|
|
+ Terminal,
|
|
|
+ Ticket,
|
|
|
+ Zap,
|
|
|
+ Menu,
|
|
|
+ X,
|
|
|
+ Sun,
|
|
|
+ Moon,
|
|
|
+ Feather,
|
|
|
+ BookOpen, // Used for the letter link
|
|
|
+ BrainCircuit
|
|
|
+} from 'lucide-react';
|
|
|
+import { useNavigate } from 'react-router-dom';
|
|
|
+
|
|
|
+// 多语言配置
|
|
|
+const translations = {
|
|
|
+ zh: {
|
|
|
+ nav: {
|
|
|
+ core: '业务板块',
|
|
|
+ consulting: '企业咨询',
|
|
|
+ tourism: '文旅运营',
|
|
|
+ dev: '开发者',
|
|
|
+ contact: '联系我们',
|
|
|
+ },
|
|
|
+ hero: {
|
|
|
+ quote: '"玩"意味着一种无拘无束的自由状态。',
|
|
|
+ quoteSub: '你会发现，每个真正懂得玩的人，他们玩的方式都是独一无二的，充满了自发的创造力与鲜明的个性。',
|
|
|
+ // Logic update: Focusing on the "Why" and the ecosystem
|
|
|
+ sectionTitle: '为了让大家能 "纯粹的玩"，我们构建了三层业务生态',
|
|
|
+ },
|
|
|
+ cards: {
|
|
|
+ // Step 1: Liberate
|
|
|
+ consultingTitle: '第一步：解放时间',
|
|
|
+ consultingDesc: '首先，我们用AI为企业降本增效。只有把人从繁琐工作中解放出来，才有时间去玩。',
|
|
|
+ consultingLink: '查看企业AI方案',
|
|
|
+ // Step 2: Create Fun
|
|
|
+ tourismTitle: '第二步：创造乐趣',
|
|
|
+ tourismDesc: '然后，我们用技术重塑文旅体验。打卡地图与游戏化运营，让旅行回归玩的本质。',
|
|
|
+ tourismLink: '查看文旅案例',
|
|
|
+ // Step 3: Support Creation
|
|
|
+ devTitle: '第三步：支持创造',
|
|
|
+ devDesc: '最后，我们为AI一人公司提供基建。让每一个想玩的灵魂，拥有实现梦想的算力。',
|
|
|
+ devLink: '获取开发资源'
|
|
|
+ },
|
|
|
+ consulting: {
|
|
|
+ tag: 'Consulting',
|
|
|
+ title: '从繁杂中解放',
|
|
|
+ titleHighlight: '回归创造',
|
|
|
+ description: '我们为企业提供深度 IT 与 AI 咨询。这不是为了卷，而是为了降本提效，让团队从重复劳动中解脱出来。',
|
|
|
+ items: [
|
|
|
+ '企业私有知识库 (RAG)',
|
|
|
+ '自动化研报/公文撰写',
|
|
|
+ 'AI 辅助决策系统',
|
|
|
+ '传统 IT 架构改造'
|
|
|
+ ],
|
|
|
+ reportTitle: '效率诊断',
|
|
|
+ reportDesc: 'AI 自动生成深度行业研究报告，将 3 天的撰写周期缩短至 15 分钟。'
|
|
|
+ },
|
|
|
+ tourism: {
|
|
|
+ tag: 'Cultural Tourism',
|
|
|
+ title: '打通文旅地产',
|
|
|
+ titleHighlight: '变现渠道',
|
|
|
+ description: '我们推出了一套以打卡地图、商户优惠券发放、抽奖游戏活动为核心的文旅运营解决方案。',
|
|
|
+ features: {
|
|
|
+ map: { title: '打卡地图', desc: 'LBS 定位解锁景点' },
|
|
|
+ coupon: { title: '优惠券', desc: '连接商户与游客' },
|
|
|
+ game: { title: '抽奖活动', desc: '提升游客留存率' },
|
|
|
+ data: { title: 'CPS分成', desc: '按效果获取收益' }
|
|
|
+ },
|
|
|
+ mockup: {
|
|
|
+ title: '西湖寻宝季',
|
|
|
+ gift: '🎁 待领取: 咖啡券',
|
|
|
+ btn: '扫码打卡'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dev: {
|
|
|
+ tag: 'Infrastructure',
|
|
|
+ title: '支持每一个',
|
|
|
+ titleHighlight: '超级个体',
|
|
|
+ description: '针对 AI 一人公司，我们提供基础设施服务，让你像玩乐高一样构建产品。',
|
|
|
+ features: {
|
|
|
+ token: { title: 'Token 分发', desc: 'OpenAI / Claude / DeepSeek 聚合接口' },
|
|
|
+ compute: { title: '弹性算力', desc: '高性价比 GPU 租赁' },
|
|
|
+ saas: { title: 'SaaS 套件', desc: '一键部署的创业脚手架' }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ contact: {
|
|
|
+ title: '保持联系',
|
|
|
+ description: '既然来了，我会尽一切努力让你纯粹的玩。',
|
|
|
+ formTitle: '发送邮件',
|
|
|
+ placeholderName: '你的称呼',
|
|
|
+ placeholderEmail: '你的邮箱',
|
|
|
+ submit: '发送',
|
|
|
+ footerLetter: '阅读：给玩友们的一封信',
|
|
|
+ footerShareholder: '阅读：2025年5月29日给股东们的信',
|
|
|
+ footerNote: '"纯粹的玩"由几位股东共同创立，我作为现在的法人和大股东，拥有最终决策权。',
|
|
|
+ copyright: '© 2026 杭州纯粹的玩品牌科技有限公司'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ en: {
|
|
|
+ nav: {
|
|
|
+ core: 'Sectors',
|
|
|
+ consulting: 'Consulting',
|
|
|
+ tourism: 'Tourism',
|
|
|
+ dev: 'Developers',
|
|
|
+ contact: 'Contact',
|
|
|
+ },
|
|
|
+ hero: {
|
|
|
+ quote: '"Play" means a state of unrestrained freedom.',
|
|
|
+ quoteSub: 'You will find that for everyone who truly knows how to play, their way of playing is unique, full of spontaneous creativity and distinct personality.',
|
|
|
+ sectionTitle: 'To enable "Pure Play" for everyone, we focus on three pillars',
|
|
|
+ },
|
|
|
+ cards: {
|
|
|
+ consultingTitle: 'Step 1: Liberate Time',
|
|
|
+ consultingDesc: 'First, we use AI to optimize enterprise workflows. Freeing people from tedious work gives them time to play.',
|
|
|
+ consultingLink: 'View Solutions',
|
|
|
+ tourismTitle: 'Step 2: Create Fun',
|
|
|
+ tourismDesc: 'Then, we reshape tourism with tech. Check-in maps and gamification bring the fun back to travel.',
|
|
|
+ tourismLink: 'View Cases',
|
|
|
+ devTitle: 'Step 3: Support Creation',
|
|
|
+ devDesc: 'Finally, we empower AI solopreneurs. Providing the infrastructure for every soul to build their dreams.',
|
|
|
+ devLink: 'Get Resources'
|
|
|
+ },
|
|
|
+ consulting: {
|
|
|
+ tag: 'Consulting',
|
|
|
+ title: 'Liberate from Chaos',
|
|
|
+ titleHighlight: 'Return to Creation',
|
|
|
+ description: 'We provide deep IT & AI consulting. Not to hustle harder, but to cut costs and increase efficiency, freeing teams from repetitive labor.',
|
|
|
+ items: [
|
|
|
+ 'Private Knowledge Base (RAG)',
|
|
|
+ 'Automated Research/Docs',
|
|
|
+ 'AI Decision Support',
|
|
|
+ 'Legacy IT Upgrade'
|
|
|
+ ],
|
|
|
+ reportTitle: 'Efficiency',
|
|
|
+ reportDesc: 'AI automatically generates in-depth research reports, reducing a 3-day writing cycle to 15 minutes.'
|
|
|
+ },
|
|
|
+ tourism: {
|
|
|
+ tag: 'Cultural Tourism',
|
|
|
+ title: 'Monetizing',
|
|
|
+ titleHighlight: 'Tourism Assets',
|
|
|
+ description: 'We launched a tourism operation solution centered on check-in maps, coupon distribution, and lucky draw games.',
|
|
|
+ features: {
|
|
|
+ map: { title: 'Check-in Map', desc: 'LBS unlock spots' },
|
|
|
+ coupon: { title: 'Coupons', desc: 'Connecting merchants' },
|
|
|
+ game: { title: 'Lucky Draw', desc: 'Boost retention' },
|
|
|
+ data: { title: 'CPS RevShare', desc: 'Earn by results' }
|
|
|
+ },
|
|
|
+ mockup: {
|
|
|
+ title: 'West Lake Hunt',
|
|
|
+ gift: '🎁 Reward: Coffee',
|
|
|
+ btn: 'Scan to Play'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dev: {
|
|
|
+ tag: 'Infrastructure',
|
|
|
+ title: 'Supporting Every',
|
|
|
+ titleHighlight: 'Super Individual',
|
|
|
+ description: 'For AI Solopreneurs, we provide infrastructure services, letting you build products like playing Lego.',
|
|
|
+ features: {
|
|
|
+ token: { title: 'Token Relay', desc: 'OpenAI / Claude / DeepSeek Aggregation' },
|
|
|
+ compute: { title: 'Elastic Compute', desc: 'Cost-effective GPU rental' },
|
|
|
+ saas: { title: 'SaaS Kit', desc: 'All-in-one scaffold' }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ contact: {
|
|
|
+ title: 'Keep in Touch',
|
|
|
+ description: 'Since you are here, I will do my best to let you play purely.',
|
|
|
+ formTitle: 'Send Email',
|
|
|
+ placeholderName: 'Your Name',
|
|
|
+ placeholderEmail: 'Your Email',
|
|
|
+ submit: 'Send',
|
|
|
+ footerLetter: 'Read: A Letter to Players',
|
|
|
+ footerShareholder: 'Read: Letter to Shareholders (May 29, 2025)',
|
|
|
+ footerNote: '"Pure Play" was co-founded by several shareholders. As the current legal representative, I have the final decision-making power.',
|
|
|
+ copyright: '© 2026 Pure Play Technology Co., Ltd. Hangzhou.'
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+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 [email, setEmail] = useState('');
|
|
|
+ const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
|
|
|
+ const [message, setMessage] = useState('');
|
|
|
+
|
|
|
+ const navigate = useNavigate();
|
|
|
+
|
|
|
+ const t = translations[lang];
|
|
|
+
|
|
|
+ const scrollToSection = (id: string) => {
|
|
|
+ const element = document.getElementById(id);
|
|
|
+ if (element) {
|
|
|
+ element.scrollIntoView({ behavior: 'smooth' });
|
|
|
+ setIsMenuOpen(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const toggleTheme = () => setIsDark(!isDark);
|
|
|
+ const toggleLang = () => setLang(lang === 'zh' ? 'en' : 'zh');
|
|
|
+
|
|
|
+ const handleEmailSubmit = async () => {
|
|
|
+ if (!email) return;
|
|
|
+
|
|
|
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
+ if (!emailRegex.test(email)) {
|
|
|
+ setStatus('error');
|
|
|
+ setMessage('请输入有效的邮箱地址');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ setStatus('loading');
|
|
|
+ setMessage('');
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await fetch('/api/send-welcome-email', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ },
|
|
|
+ body: JSON.stringify({ email }),
|
|
|
+ });
|
|
|
+
|
|
|
+ const data = await response.json();
|
|
|
+
|
|
|
+ if (data.success) {
|
|
|
+ setStatus('success');
|
|
|
+ setMessage(data.message);
|
|
|
+ setEmail('');
|
|
|
+ } else {
|
|
|
+ setStatus('error');
|
|
|
+ setMessage(data.message || '发送失败，请稍后重试');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('API Error:', error);
|
|
|
+ setStatus('error');
|
|
|
+ setMessage('网络错误，请稍后重试');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={`min-h-screen font-sans transition-colors duration-500 ${isDark ? 'bg-stone-900 text-stone-100' : 'bg-[#FAFAFA] text-stone-800'}`}>
|
|
|
+
|
|
|
+ {/* Navigation - Minimalist */}
|
|
|
+ <nav className={`fixed w-full z-50 transition-all duration-300 ${isDark ? 'bg-stone-900/90 border-b border-stone-800' : 'bg-white/90 border-b border-stone-100'} backdrop-blur-sm`}>
|
|
|
+ <div className="max-w-4xl 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={() => scrollToSection('hero')}>
|
|
|
+ <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`}>
|
|
|
+ {lang === 'zh' ? '纯粹的玩' : 'Pure Play'}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Desktop Menu - Simple Links */}
|
|
|
+ <div className="hidden md:flex items-center space-x-8">
|
|
|
+ {[t.nav.consulting, t.nav.tourism, t.nav.dev].map((item, index) => {
|
|
|
+ const ids = ['consulting', 'tourism', 'dev'];
|
|
|
+ return (
|
|
|
+ <button
|
|
|
+ key={index}
|
|
|
+ onClick={() => scrollToSection(ids[index])}
|
|
|
+ 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}
|
|
|
+ </button>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+
|
|
|
+ <div className="flex items-center gap-2 pl-4">
|
|
|
+ <button onClick={toggleTheme} 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={toggleLang} className={`text-xs font-bold px-2 py-1 rounded hover:bg-black/5 ${isDark ? 'text-stone-400' : 'text-stone-500'}`}>
|
|
|
+ {lang === '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'}`}>
|
|
|
+ {[t.nav.consulting, t.nav.tourism, t.nav.dev, t.nav.contact].map((item, index) => {
|
|
|
+ const ids = ['consulting', 'tourism', 'dev', 'contact'];
|
|
|
+ return (
|
|
|
+ <button
|
|
|
+ key={index}
|
|
|
+ onClick={() => scrollToSection(ids[index])}
|
|
|
+ className={`block w-full text-left py-3 text-lg ${isDark ? 'text-stone-300' : 'text-stone-600'}`}
|
|
|
+ >
|
|
|
+ {item}
|
|
|
+ </button>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ {/* Hero Section - Clean & Minimal */}
|
|
|
+ <section id="hero" className="pt-40 pb-20 px-6">
|
|
|
+ <div className="max-w-3xl mx-auto text-center mb-16">
|
|
|
+ <p className={`text-xl md:text-2xl font-serif italic mb-8 leading-relaxed ${isDark ? 'text-stone-300' : 'text-stone-600'}`}>
|
|
|
+ {t.hero.quote}
|
|
|
+ </p>
|
|
|
+ <p className={`text-sm md:text-base max-w-xl mx-auto leading-loose ${isDark ? 'text-stone-500' : 'text-stone-400'}`}>
|
|
|
+ {t.hero.quoteSub}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="max-w-2xl mx-auto">
|
|
|
+ <div className={`w-24 h-px mx-auto ${isDark ? 'bg-stone-800' : 'bg-stone-200'} mb-16`}></div>
|
|
|
+
|
|
|
+ <div className="mb-12 text-center">
|
|
|
+ <h2 className={`text-lg font-bold ${isDark ? 'text-stone-200' : 'text-stone-800'}`}>
|
|
|
+ {t.hero.sectionTitle}
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="space-y-8">
|
|
|
+ {/* Item 1 */}
|
|
|
+ <div
|
|
|
+ onClick={() => scrollToSection('consulting')}
|
|
|
+ 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">
|
|
|
+ <h3 className={`font-serif font-bold text-xl ${isDark ? 'text-stone-200' : 'text-stone-800'}`}>{t.cards.consultingTitle}</h3>
|
|
|
+ <BrainCircuit className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
|
|
|
+ </div>
|
|
|
+ <p className={`text-sm leading-relaxed mb-4 ${isDark ? 'text-stone-400' : 'text-stone-500'}`}>{t.cards.consultingDesc}</p>
|
|
|
+ <span className={`text-xs font-bold uppercase tracking-wider flex items-center ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
|
|
|
+ {t.cards.consultingLink} <ArrowRight className="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Item 2 */}
|
|
|
+ <div
|
|
|
+ onClick={() => scrollToSection('tourism')}
|
|
|
+ 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">
|
|
|
+ <h3 className={`font-serif font-bold text-xl ${isDark ? 'text-stone-200' : 'text-stone-800'}`}>{t.cards.tourismTitle}</h3>
|
|
|
+ <Ticket className={`w-5 h-5 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
|
|
|
+ </div>
|
|
|
+ <p className={`text-sm leading-relaxed mb-4 ${isDark ? 'text-stone-400' : 'text-stone-500'}`}>{t.cards.tourismDesc}</p>
|
|
|
+ <span className={`text-xs font-bold uppercase tracking-wider flex items-center ${isDark ? 'text-orange-400' : 'text-orange-600'}`}>
|
|
|
+ {t.cards.tourismLink} <ArrowRight className="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Item 3 */}
|
|
|
+ <div
|
|
|
+ onClick={() => scrollToSection('dev')}
|
|
|
+ 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">
|
|
|
+ <h3 className={`font-serif font-bold text-xl ${isDark ? 'text-stone-200' : 'text-stone-800'}`}>{t.cards.devTitle}</h3>
|
|
|
+ <Terminal className={`w-5 h-5 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
|
|
|
+ </div>
|
|
|
+ <p className={`text-sm leading-relaxed mb-4 ${isDark ? 'text-stone-400' : 'text-stone-500'}`}>{t.cards.devDesc}</p>
|
|
|
+ <span className={`text-xs font-bold uppercase tracking-wider flex items-center ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`}>
|
|
|
+ {t.cards.devLink} <ArrowRight className="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ {/* Detailed Sections - Minimalist Layout */}
|
|
|
+
|
|
|
+ {/* Consulting */}
|
|
|
+ <section id="consulting" className={`py-20 px-6 ${isDark ? 'bg-stone-900' : 'bg-white'}`}>
|
|
|
+ <div className="max-w-4xl mx-auto">
|
|
|
+ <div className="grid md:grid-cols-2 gap-12 items-center">
|
|
|
+ <div>
|
|
|
+ <span className={`text-xs font-bold tracking-widest uppercase mb-4 block ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>{t.consulting.tag}</span>
|
|
|
+ <h2 className="text-3xl font-serif font-bold mb-6 leading-tight">
|
|
|
+ {t.consulting.title} <br />
|
|
|
+ <span className={`decoration-4 underline decoration-blue-200 ${isDark ? 'decoration-blue-900' : ''}`}>{t.consulting.titleHighlight}</span>
|
|
|
+ </h2>
|
|
|
+ <p className={`mb-8 leading-relaxed ${isDark ? 'text-stone-400' : 'text-stone-600'}`}>{t.consulting.description}</p>
|
|
|
+ <ul className="space-y-3">
|
|
|
+ {t.consulting.items.map((item, i) => (
|
|
|
+ <li key={i} className="flex items-center gap-3">
|
|
|
+ <div className={`w-1.5 h-1.5 rounded-full ${isDark ? 'bg-blue-400' : 'bg-blue-600'}`}></div>
|
|
|
+ <span className={`text-sm ${isDark ? 'text-stone-300' : 'text-stone-700'}`}>{item}</span>
|
|
|
+ </li>
|
|
|
+ ))}
|
|
|
+ </ul>
|
|
|
+ </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'}`} />
|
|
|
+ <div className={`text-sm font-bold mb-2 ${isDark ? 'text-stone-200' : 'text-stone-800'}`}>{t.consulting.reportTitle}</div>
|
|
|
+ <p className={`text-xs leading-relaxed ${isDark ? 'text-stone-400' : 'text-stone-500'}`}>{t.consulting.reportDesc}</p>
|
|
|
+ <div className="mt-6 flex items-end gap-2">
|
|
|
+ <div className="h-16 w-4 bg-stone-200 rounded-sm"></div>
|
|
|
+ <div className="h-10 w-4 bg-stone-200 rounded-sm"></div>
|
|
|
+ <div className={`h-24 w-4 rounded-sm ${isDark ? 'bg-blue-500' : 'bg-blue-600'}`}></div>
|
|
|
+ <div className="h-14 w-4 bg-stone-200 rounded-sm"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ {/* Tourism */}
|
|
|
+ <section id="tourism" className={`py-20 px-6 ${isDark ? 'bg-stone-800/30' : 'bg-stone-50'}`}>
|
|
|
+ <div className="max-w-4xl mx-auto">
|
|
|
+ <div className="grid md:grid-cols-2 gap-12 items-center">
|
|
|
+ <div className="order-2 md:order-1 grid grid-cols-2 gap-4">
|
|
|
+ <div className={`p-4 rounded-lg border text-center ${isDark ? 'bg-stone-800 border-stone-700' : 'bg-white border-stone-200'}`}>
|
|
|
+ <MapPin className={`w-6 h-6 mx-auto mb-2 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
|
|
|
+ <div className="font-bold text-sm mb-1">{t.tourism.features.map.title}</div>
|
|
|
+ <div className="text-[10px] text-stone-400">{t.tourism.features.map.desc}</div>
|
|
|
+ </div>
|
|
|
+ <div className={`p-4 rounded-lg border text-center ${isDark ? 'bg-stone-800 border-stone-700' : 'bg-white border-stone-200'}`}>
|
|
|
+ <Ticket className={`w-6 h-6 mx-auto mb-2 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
|
|
|
+ <div className="font-bold text-sm mb-1">{t.tourism.features.coupon.title}</div>
|
|
|
+ <div className="text-[10px] text-stone-400">{t.tourism.features.coupon.desc}</div>
|
|
|
+ </div>
|
|
|
+ <div className={`p-4 rounded-lg border text-center ${isDark ? 'bg-stone-800 border-stone-700' : 'bg-white border-stone-200'}`}>
|
|
|
+ <Gamepad2 className={`w-6 h-6 mx-auto mb-2 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
|
|
|
+ <div className="font-bold text-sm mb-1">{t.tourism.features.game.title}</div>
|
|
|
+ <div className="text-[10px] text-stone-400">{t.tourism.features.game.desc}</div>
|
|
|
+ </div>
|
|
|
+ <div className={`p-4 rounded-lg border text-center ${isDark ? 'bg-stone-800 border-stone-700' : 'bg-white border-stone-200'}`}>
|
|
|
+ <Bot className={`w-6 h-6 mx-auto mb-2 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
|
|
|
+ <div className="font-bold text-sm mb-1">{t.tourism.features.data.title}</div>
|
|
|
+ <div className="text-[10px] text-stone-400">{t.tourism.features.data.desc}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="order-1 md:order-2">
|
|
|
+ <span className={`text-xs font-bold tracking-widest uppercase mb-4 block ${isDark ? 'text-orange-400' : 'text-orange-500'}`}>{t.tourism.tag}</span>
|
|
|
+ <h2 className="text-3xl font-serif font-bold mb-6 leading-tight">
|
|
|
+ {t.tourism.title} <br />
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ {/* Dev Services */}
|
|
|
+ <section id="dev" className={`py-20 px-6 ${isDark ? 'bg-stone-900' : 'bg-white'}`}>
|
|
|
+ <div className="max-w-4xl mx-auto">
|
|
|
+ <div className="text-center mb-16">
|
|
|
+ <span className={`text-xs font-bold tracking-widest uppercase mb-4 block ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`}>{t.dev.tag}</span>
|
|
|
+ <h2 className="text-3xl font-serif font-bold mb-4">
|
|
|
+ {t.dev.title} <span className={`decoration-4 underline decoration-cyan-200 ${isDark ? 'decoration-cyan-900' : ''}`}>{t.dev.titleHighlight}</span>
|
|
|
+ </h2>
|
|
|
+ <p className={`max-w-xl mx-auto ${isDark ? 'text-stone-400' : 'text-stone-600'}`}>{t.dev.description}</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="grid md:grid-cols-3 gap-8">
|
|
|
+ <div className={`p-6 border-t-2 ${isDark ? 'border-t-cyan-500 bg-stone-800/30' : 'border-t-cyan-500 bg-stone-50'}`}>
|
|
|
+ <Zap className={`w-6 h-6 mb-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
|
|
|
+ <h3 className="font-bold mb-2">{t.dev.features.token.title}</h3>
|
|
|
+ <p className="text-sm text-stone-500">{t.dev.features.token.desc}</p>
|
|
|
+ </div>
|
|
|
+ <div className={`p-6 border-t-2 ${isDark ? 'border-t-cyan-500 bg-stone-800/30' : 'border-t-cyan-500 bg-stone-50'}`}>
|
|
|
+ <Cpu className={`w-6 h-6 mb-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
|
|
|
+ <h3 className="font-bold mb-2">{t.dev.features.compute.title}</h3>
|
|
|
+ <p className="text-sm text-stone-500">{t.dev.features.compute.desc}</p>
|
|
|
+ </div>
|
|
|
+ <div className={`p-6 border-t-2 ${isDark ? 'border-t-cyan-500 bg-stone-800/30' : 'border-t-cyan-500 bg-stone-50'}`}>
|
|
|
+ <Terminal className={`w-6 h-6 mb-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
|
|
|
+ <h3 className="font-bold mb-2">{t.dev.features.saas.title}</h3>
|
|
|
+ <p className="text-sm text-stone-500">{t.dev.features.saas.desc}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ {/* Footer / Contact */}
|
|
|
+ <section id="contact" className={`py-24 px-6 border-t ${isDark ? 'bg-stone-900 border-stone-800' : 'bg-[#FAFAFA] border-stone-200'}`}>
|
|
|
+ <div className="max-w-2xl mx-auto text-center">
|
|
|
+ <Feather className={`w-8 h-8 mx-auto mb-6 ${isDark ? 'text-stone-600' : 'text-stone-300'}`} />
|
|
|
+ <h2 className="text-2xl font-serif font-bold mb-8">{t.contact.title}</h2>
|
|
|
+ <p className={`mb-10 ${isDark ? 'text-stone-400' : 'text-stone-600'}`}>
|
|
|
+ {t.contact.description}
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <div className="flex flex-col sm:flex-row gap-4 mb-4">
|
|
|
+ <input
|
|
|
+ type="email"
|
|
|
+ placeholder={t.contact.placeholderEmail}
|
|
|
+ value={email}
|
|
|
+ onChange={(e) => setEmail(e.target.value)}
|
|
|
+ disabled={status === 'loading' || status === 'success'}
|
|
|
+ className={`flex-1 px-4 py-3 rounded-lg border outline-none focus:ring-1 focus:ring-stone-400 transition-all ${isDark ? 'bg-stone-800 border-stone-700 text-stone-200' : 'bg-white border-stone-200 text-stone-800'}`}
|
|
|
+ />
|
|
|
+ <button
|
|
|
+ onClick={handleEmailSubmit}
|
|
|
+ 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}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Status Message */}
|
|
|
+ {message && (
|
|
|
+ <div className={`mb-12 text-sm font-medium ${status === 'success' ? 'text-green-500' : 'text-red-500'}`}>
|
|
|
+ {message}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {!message && <div className="mb-16"></div>}
|
|
|
+
|
|
|
+ <div className={`text-xs leading-loose pt-12 border-t ${isDark ? 'border-stone-800 text-stone-600' : 'border-stone-200 text-stone-400'}`}>
|
|
|
+ {/* The Original Letter Links */}
|
|
|
+ <div className="mb-4 flex flex-col items-center gap-2">
|
|
|
+ {/* Letter to Players -> Letters.tsx -> /letters */}
|
|
|
+ <a
|
|
|
+ href="/letters"
|
|
|
+ onClick={(e) => { e.preventDefault(); navigate('/letters'); }}
|
|
|
+ className="inline-flex items-center gap-2 hover:underline decoration-stone-400 underline-offset-4 cursor-pointer"
|
|
|
+ >
|
|
|
+ <BookOpen className="w-3 h-3" />
|
|
|
+ {t.contact.footerLetter}
|
|
|
+ </a>
|
|
|
+ {/* Shareholder Letter -> PDF Download */}
|
|
|
+ <a
|
|
|
+ href="/ltr/20250529ltr.pdf"
|
|
|
+ target="_blank"
|
|
|
+ rel="noopener noreferrer"
|
|
|
+ className="inline-flex items-center gap-2 hover:underline decoration-stone-400 underline-offset-4 cursor-pointer"
|
|
|
+ >
|
|
|
+ <BookOpen className="w-3 h-3" />
|
|
|
+ {t.contact.footerShareholder}
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <p>{t.contact.footerNote}</p>
|
|
|
+ <p className="mt-4">{t.contact.copyright}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default SimpleHome;
|
