238 lines
10 KiB
TypeScript
238 lines
10 KiB
TypeScript
'use client';
|
|
import Link from 'next/link';
|
|
import { useState, useEffect } from 'react';
|
|
import { Header } from '../components/Header';
|
|
import { Footer } from '../components/Footer';
|
|
|
|
export default function Page() {
|
|
const [currentLang, setCurrentLang] = useState('zh-CN');
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
// Simulate language detection from Accept-Language header
|
|
const detectLanguage = () => {
|
|
const browserLang = navigator.language || navigator.languages[0];
|
|
if (browserLang.startsWith('zh-TW') || browserLang.startsWith('zh-HK')) {
|
|
setCurrentLang('zh-TW');
|
|
} else if (browserLang.startsWith('en')) {
|
|
setCurrentLang('en');
|
|
} else {
|
|
setCurrentLang('zh-CN');
|
|
}
|
|
setIsLoading(false);
|
|
};
|
|
|
|
detectLanguage();
|
|
}, []);
|
|
|
|
const languages = {
|
|
'zh-CN': {
|
|
title: '企业级多语言静态站点解决方案',
|
|
subtitle: '基于 React/Next.js + gray-matter 构建的高性能多语言静态网站',
|
|
description:
|
|
'支持简体中文、繁体中文、英文三种语言，提供完整的 SEO 优化、动态路由和静态生成功能',
|
|
features: [
|
|
'多语言动态路由系统',
|
|
'SEO 友好的静态生成',
|
|
'智能语言检测与切换',
|
|
'自动站点地图生成',
|
|
],
|
|
|
|
cta: '立即开始',
|
|
learnMore: '了解更多',
|
|
nav: {
|
|
home: '首页',
|
|
docs: '文档',
|
|
about: '关于',
|
|
contact: '联系我们',
|
|
},
|
|
},
|
|
'zh-TW': {
|
|
title: '企業級多語言靜態站點解決方案',
|
|
subtitle: '基於 React/Next.js + gray-matter 構建的高性能多語言靜態網站',
|
|
description:
|
|
'支援簡體中文、繁體中文、英文三種語言，提供完整的 SEO 優化、動態路由和靜態生成功能',
|
|
features: [
|
|
'多語言動態路由系統',
|
|
'SEO 友好的靜態生成',
|
|
'智能語言檢測與切換',
|
|
'自動站點地圖生成',
|
|
],
|
|
|
|
cta: '立即開始',
|
|
learnMore: '了解更多',
|
|
nav: {
|
|
home: '首頁',
|
|
docs: '文檔',
|
|
about: '關於',
|
|
contact: '聯繫我們',
|
|
},
|
|
},
|
|
en: {
|
|
title: 'Enterprise Multi-language Static Site Solution',
|
|
subtitle:
|
|
'High-performance multi-language static website built with React/Next.js + gray-matter',
|
|
description:
|
|
'Supports Simplified Chinese, Traditional Chinese, and English with complete SEO optimization, dynamic routing, and static generation',
|
|
features: [
|
|
'Multi-language Dynamic Routing',
|
|
'SEO-friendly Static Generation',
|
|
'Intelligent Language Detection',
|
|
'Automatic Sitemap Generation',
|
|
],
|
|
|
|
cta: 'Get Started',
|
|
learnMore: 'Learn More',
|
|
nav: {
|
|
home: 'Home',
|
|
docs: 'Docs',
|
|
about: 'About',
|
|
contact: 'Contact',
|
|
},
|
|
},
|
|
};
|
|
|
|
const currentContent = languages[currentLang];
|
|
|
|
const switchLanguage = (lang) => {
|
|
setCurrentLang(lang);
|
|
// In real implementation, this would redirect to /{lang}/
|
|
// window.location.href = `/${lang}/`;
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<Header
|
|
currentLang={currentLang}
|
|
setCurrentLang={setCurrentLang}
|
|
currentPage="home"
|
|
navContent={currentContent.nav}
|
|
/>
|
|
|
|
{/* Hero Section */}
|
|
<section className="bg-gradient-to-br from-blue-50 to-indigo-100 py-20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
|
|
{currentContent.title}
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-gray-600 mb-8 max-w-4xl mx-auto">
|
|
{currentContent.subtitle}
|
|
</p>
|
|
<p className="text-lg text-gray-500 mb-12 max-w-3xl mx-auto">
|
|
{currentContent.description}
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-medium hover:bg-blue-700 transition-colors shadow-lg">
|
|
{currentContent.cta}
|
|
</button>
|
|
<Link
|
|
href="/docs"
|
|
className="border border-gray-300 text-gray-700 px-8 py-3 rounded-lg text-lg font-medium hover:bg-gray-50 transition-colors inline-block text-center"
|
|
>
|
|
{currentContent.learnMore}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section className="py-20 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{currentContent.features.map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className="text-center p-6 rounded-lg border border-gray-200 hover:shadow-lg transition-shadow"
|
|
>
|
|
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
|
|
<div className="w-6 h-6 bg-blue-600 rounded"></div>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
{feature}
|
|
</h3>
|
|
<p className="text-gray-600 text-sm">
|
|
{currentLang === 'en'
|
|
? 'Advanced functionality for modern web applications'
|
|
: '为现代网络应用提供先进功能'}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Architecture Diagram */}
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
|
{currentLang === 'en' ? 'System Architecture' : '系统架构'}
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow-lg p-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div className="text-center">
|
|
<div className="bg-blue-100 rounded-lg p-6 mb-4">
|
|
<div className="text-2xl font-bold text-blue-600">pages/</div>
|
|
<div className="text-sm text-gray-600 mt-2">
|
|
[lang]/[...slug].tsx
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-gray-700">
|
|
{currentLang === 'en' ? 'Dynamic Routing' : '动态路由'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<div className="bg-green-100 rounded-lg p-6 mb-4">
|
|
<div className="text-2xl font-bold text-green-600">
|
|
content/
|
|
</div>
|
|
<div className="text-sm text-gray-600 mt-2">
|
|
zh-CN/ zh-TW/ en/
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-gray-700">
|
|
{currentLang === 'en' ? 'Content Management' : '内容管理'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<div className="bg-purple-100 rounded-lg p-6 mb-4">
|
|
<div className="text-2xl font-bold text-purple-600">
|
|
public/
|
|
</div>
|
|
<div className="text-sm text-gray-600 mt-2">sitemap-*.xml</div>
|
|
</div>
|
|
<p className="text-sm text-gray-700">
|
|
{currentLang === 'en' ? 'SEO Optimization' : 'SEO优化'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer
|
|
currentLang={currentLang}
|
|
navContent={{
|
|
docs: currentContent.nav.docs,
|
|
contact: currentContent.nav.contact,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|