477 lines
21 KiB
TypeScript
477 lines
21 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { Header } from '../../components/Header';
|
||
import { Footer } from '../../components/Footer';
|
||
|
||
export default function AboutPage() {
|
||
const [currentLang, setCurrentLang] = useState('zh-CN');
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
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 content = {
|
||
'zh-CN': {
|
||
title: '关于我们',
|
||
subtitle: '致力于构建下一代多语言网站解决方案',
|
||
nav: {
|
||
home: '首页',
|
||
docs: '文档',
|
||
about: '关于',
|
||
contact: '联系我们',
|
||
},
|
||
mission: {
|
||
title: '我们的使命',
|
||
description:
|
||
'MultiSite 致力于为全球企业提供最先进的多语言静态网站解决方案，让跨语言沟通变得简单高效。',
|
||
},
|
||
vision: {
|
||
title: '我们的愿景',
|
||
description: '成为全球领先的多语言网站技术提供商，帮助企业轻松实现国际化业务拓展。',
|
||
},
|
||
values: {
|
||
title: '核心价值观',
|
||
items: [
|
||
{
|
||
title: '创新驱动',
|
||
description: '持续探索前沿技术，为用户提供最优质的解决方案',
|
||
},
|
||
{
|
||
title: '用户至上',
|
||
description: '以用户需求为中心，不断优化产品体验',
|
||
},
|
||
{
|
||
title: '开放合作',
|
||
description: '拥抱开源社区，与全球开发者共同成长',
|
||
},
|
||
{
|
||
title: '品质保证',
|
||
description: '严格的质量标准，确保产品稳定可靠',
|
||
},
|
||
],
|
||
},
|
||
team: {
|
||
title: '团队介绍',
|
||
description: '我们是一支充满激情的技术团队，专注于多语言网站技术的研发与创新。',
|
||
members: [
|
||
{
|
||
name: '张伟',
|
||
role: '技术总监',
|
||
description: '10年前端开发经验，React/Next.js 技术专家',
|
||
},
|
||
{
|
||
name: '李娜',
|
||
role: '产品经理',
|
||
description: '专注用户体验设计，国际化产品规划专家',
|
||
},
|
||
{
|
||
name: '王强',
|
||
role: '架构师',
|
||
description: '全栈开发工程师，云原生技术专家',
|
||
},
|
||
],
|
||
},
|
||
technology: {
|
||
title: '技术优势',
|
||
items: [
|
||
{
|
||
title: 'React/Next.js',
|
||
description: '基于最新的 React 18 和 Next.js 14，提供卓越的性能和开发体验',
|
||
},
|
||
{
|
||
title: '静态生成',
|
||
description: '利用 SSG 技术，实现极速加载和优秀的 SEO 表现',
|
||
},
|
||
{
|
||
title: '多语言支持',
|
||
description: '智能语言检测和切换，支持全球主要语言',
|
||
},
|
||
{
|
||
title: '响应式设计',
|
||
description: '完美适配各种设备，提供一致的用户体验',
|
||
},
|
||
],
|
||
},
|
||
},
|
||
'zh-TW': {
|
||
title: '關於我們',
|
||
subtitle: '致力於構建下一代多語言網站解決方案',
|
||
nav: {
|
||
home: '首頁',
|
||
docs: '文檔',
|
||
about: '關於',
|
||
contact: '聯繫我們',
|
||
},
|
||
mission: {
|
||
title: '我們的使命',
|
||
description:
|
||
'MultiSite 致力於為全球企業提供最先進的多語言靜態網站解決方案，讓跨語言溝通變得簡單高效。',
|
||
},
|
||
vision: {
|
||
title: '我們的願景',
|
||
description: '成為全球領先的多語言網站技術提供商，幫助企業輕鬆實現國際化業務拓展。',
|
||
},
|
||
values: {
|
||
title: '核心價值觀',
|
||
items: [
|
||
{
|
||
title: '創新驅動',
|
||
description: '持續探索前沿技術，為用戶提供最優質的解決方案',
|
||
},
|
||
{
|
||
title: '用戶至上',
|
||
description: '以用戶需求為中心，不斷優化產品體驗',
|
||
},
|
||
{
|
||
title: '開放合作',
|
||
description: '擁抱開源社區，與全球開發者共同成長',
|
||
},
|
||
{
|
||
title: '品質保證',
|
||
description: '嚴格的質量標準，確保產品穩定可靠',
|
||
},
|
||
],
|
||
},
|
||
team: {
|
||
title: '團隊介紹',
|
||
description: '我們是一支充滿激情的技術團隊，專注於多語言網站技術的研發與創新。',
|
||
members: [
|
||
{
|
||
name: '張偉',
|
||
role: '技術總監',
|
||
description: '10年前端開發經驗，React/Next.js 技術專家',
|
||
},
|
||
{
|
||
name: '李娜',
|
||
role: '產品經理',
|
||
description: '專注用戶體驗設計，國際化產品規劃專家',
|
||
},
|
||
{
|
||
name: '王強',
|
||
role: '架構師',
|
||
description: '全棧開發工程師，雲原生技術專家',
|
||
},
|
||
],
|
||
},
|
||
technology: {
|
||
title: '技術優勢',
|
||
items: [
|
||
{
|
||
title: 'React/Next.js',
|
||
description: '基於最新的 React 18 和 Next.js 14，提供卓越的性能和開發體驗',
|
||
},
|
||
{
|
||
title: '靜態生成',
|
||
description: '利用 SSG 技術，實現極速加載和優秀的 SEO 表現',
|
||
},
|
||
{
|
||
title: '多語言支援',
|
||
description: '智能語言檢測和切換，支援全球主要語言',
|
||
},
|
||
{
|
||
title: '響應式設計',
|
||
description: '完美適配各種設備，提供一致的用戶體驗',
|
||
},
|
||
],
|
||
},
|
||
},
|
||
en: {
|
||
title: 'About Us',
|
||
subtitle: 'Dedicated to building next-generation multi-language website solutions',
|
||
nav: {
|
||
home: 'Home',
|
||
docs: 'Docs',
|
||
about: 'About',
|
||
contact: 'Contact',
|
||
},
|
||
mission: {
|
||
title: 'Our Mission',
|
||
description:
|
||
'MultiSite is dedicated to providing the most advanced multi-language static website solutions for global enterprises, making cross-language communication simple and efficient.',
|
||
},
|
||
vision: {
|
||
title: 'Our Vision',
|
||
description:
|
||
"To become the world's leading multi-language website technology provider, helping enterprises easily achieve international business expansion.",
|
||
},
|
||
values: {
|
||
title: 'Core Values',
|
||
items: [
|
||
{
|
||
title: 'Innovation Driven',
|
||
description:
|
||
'Continuously explore cutting-edge technologies to provide users with the best solutions',
|
||
},
|
||
{
|
||
title: 'User First',
|
||
description:
|
||
'Focus on user needs and continuously optimize product experience',
|
||
},
|
||
{
|
||
title: 'Open Collaboration',
|
||
description:
|
||
'Embrace the open source community and grow together with global developers',
|
||
},
|
||
{
|
||
title: 'Quality Assurance',
|
||
description:
|
||
'Strict quality standards to ensure stable and reliable products',
|
||
},
|
||
],
|
||
},
|
||
team: {
|
||
title: 'Our Team',
|
||
description:
|
||
'We are a passionate technical team focused on the research and innovation of multi-language website technologies.',
|
||
members: [
|
||
{
|
||
name: 'Zhang Wei',
|
||
role: 'Technical Director',
|
||
description:
|
||
'10 years of frontend development experience, React/Next.js expert',
|
||
},
|
||
{
|
||
name: 'Li Na',
|
||
role: 'Product Manager',
|
||
description:
|
||
'Focus on user experience design, internationalization product planning expert',
|
||
},
|
||
{
|
||
name: 'Wang Qiang',
|
||
role: 'Architect',
|
||
description:
|
||
'Full-stack development engineer, cloud-native technology expert',
|
||
},
|
||
],
|
||
},
|
||
technology: {
|
||
title: 'Technical Advantages',
|
||
items: [
|
||
{
|
||
title: 'React/Next.js',
|
||
description:
|
||
'Based on the latest React 18 and Next.js 14, providing excellent performance and development experience',
|
||
},
|
||
{
|
||
title: 'Static Generation',
|
||
description:
|
||
'Utilizing SSG technology for ultra-fast loading and excellent SEO performance',
|
||
},
|
||
{
|
||
title: 'Multi-language Support',
|
||
description:
|
||
'Intelligent language detection and switching, supporting major global languages',
|
||
},
|
||
{
|
||
title: 'Responsive Design',
|
||
description:
|
||
'Perfect adaptation to various devices, providing consistent user experience',
|
||
},
|
||
],
|
||
},
|
||
},
|
||
};
|
||
|
||
const currentContent = content[currentLang];
|
||
|
||
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="about"
|
||
navContent={currentContent.nav}
|
||
/>
|
||
|
||
{/* Hero Section */}
|
||
<section className="bg-gradient-to-br from-blue-50 to-indigo-100 py-16">
|
||
<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-5xl font-bold text-gray-900 mb-4">
|
||
{currentContent.title}
|
||
</h1>
|
||
<p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
||
{currentContent.subtitle}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Mission & Vision */}
|
||
<section className="py-16 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 gap-12">
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<svg
|
||
className="w-8 h-8 text-blue-600"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||
{currentContent.mission.title}
|
||
</h2>
|
||
<p className="text-gray-600 leading-relaxed">
|
||
{currentContent.mission.description}
|
||
</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<svg
|
||
className="w-8 h-8 text-green-600"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||
/>
|
||
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||
{currentContent.vision.title}
|
||
</h2>
|
||
<p className="text-gray-600 leading-relaxed">
|
||
{currentContent.vision.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Core Values */}
|
||
<section className="py-16 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">
|
||
{currentContent.values.title}
|
||
</h2>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
{currentContent.values.items.map((value, index) => (
|
||
<div
|
||
key={index}
|
||
className="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow"
|
||
>
|
||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||
<div className="w-6 h-6 bg-blue-600 rounded"></div>
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-3">
|
||
{value.title}
|
||
</h3>
|
||
<p className="text-gray-600 text-sm leading-relaxed">
|
||
{value.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Team */}
|
||
<section className="py-16 bg-white">
|
||
<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">
|
||
{currentContent.team.title}
|
||
</h2>
|
||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
{currentContent.team.description}
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{currentContent.team.members.map((member, index) => (
|
||
<div key={index} className="text-center">
|
||
<div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
|
||
<svg
|
||
className="w-12 h-12 text-gray-400"
|
||
fill="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-gray-900 mb-1">
|
||
{member.name}
|
||
</h3>
|
||
<p className="text-blue-600 font-medium mb-3">{member.role}</p>
|
||
<p className="text-gray-600 text-sm">{member.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Technology */}
|
||
<section className="py-16 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">
|
||
{currentContent.technology.title}
|
||
</h2>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{currentContent.technology.items.map((tech, index) => (
|
||
<div key={index} className="bg-white rounded-lg p-6 shadow-sm">
|
||
<h3 className="text-xl font-semibold text-gray-900 mb-3">
|
||
{tech.title}
|
||
</h3>
|
||
<p className="text-gray-600 leading-relaxed">{tech.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer
|
||
currentLang={currentLang}
|
||
navContent={{
|
||
docs: currentContent.nav.docs,
|
||
contact: currentContent.nav.contact,
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|