200 lines
10 KiB
TypeScript
200 lines
10 KiB
TypeScript
'use client';
|
||
|
||
import Navigation from '../../../components/Navigation';
|
||
import Footer from '../../../components/Footer';
|
||
import { useLanguage } from '@/hooks/useLanguage';
|
||
|
||
interface AboutPageProps {
|
||
params: {
|
||
lang: string;
|
||
};
|
||
}
|
||
|
||
export default function AboutPage({ params }: AboutPageProps) {
|
||
const { currentLang, setCurrentLang, currentContent, createLocalizedPath } = useLanguage(
|
||
params.lang,
|
||
);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-900 text-white">
|
||
<Navigation
|
||
currentLang={currentLang}
|
||
setCurrentLang={setCurrentLang}
|
||
content={currentContent}
|
||
createLocalizedPath={createLocalizedPath}
|
||
/>
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative z-10 px-6 py-20">
|
||
<div className="max-w-7xl mx-auto text-center">
|
||
<h1 className="text-4xl md:text-6xl font-bold mb-8 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
||
{currentContent.about.title}
|
||
</h1>
|
||
<p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
|
||
{currentContent.about.subtitle}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* About Content */}
|
||
<section className="relative z-10 px-6 py-20">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="grid lg:grid-cols-2 gap-12 items-center mb-20">
|
||
<div>
|
||
<h2 className="text-3xl font-bold mb-6 text-cyan-400">我们的故事</h2>
|
||
<p className="text-gray-300 leading-relaxed mb-6">
|
||
{currentContent.about.description}
|
||
</p>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
自成立以来，我们已经为数百家企业提供了专业的云计算服务，帮助他们实现数字化转型，提高业务效率，降低运营成本。
|
||
</p>
|
||
</div>
|
||
<div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border border-cyan-500/20">
|
||
<div className="grid grid-cols-2 gap-6 text-center">
|
||
<div>
|
||
<div className="text-3xl font-bold text-cyan-400 mb-2">
|
||
500+
|
||
</div>
|
||
<div className="text-gray-400">服务客户</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-3xl font-bold text-cyan-400 mb-2">
|
||
99.9%
|
||
</div>
|
||
<div className="text-gray-400">服务可用性</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-3xl font-bold text-cyan-400 mb-2">
|
||
24/7
|
||
</div>
|
||
<div className="text-gray-400">技术支持</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-3xl font-bold text-cyan-400 mb-2">
|
||
5年+
|
||
</div>
|
||
<div className="text-gray-400">行业经验</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mission, Vision, Values */}
|
||
<div className="grid md:grid-cols-3 gap-8 mb-20">
|
||
<div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border border-cyan-500/20 text-center">
|
||
<div className="w-16 h-16 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center mx-auto mb-6">
|
||
<svg
|
||
className="w-8 h-8 text-white"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-xl font-bold mb-4 text-cyan-400">
|
||
{currentContent.about.mission.title}
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{currentContent.about.mission.content}
|
||
</p>
|
||
</div>
|
||
<div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border border-cyan-500/20 text-center">
|
||
<div className="w-16 h-16 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center mx-auto mb-6">
|
||
<svg
|
||
className="w-8 h-8 text-white"
|
||
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>
|
||
<h3 className="text-xl font-bold mb-4 text-cyan-400">
|
||
{currentContent.about.vision.title}
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{currentContent.about.vision.content}
|
||
</p>
|
||
</div>
|
||
<div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border border-cyan-500/20 text-center">
|
||
<div className="w-16 h-16 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center mx-auto mb-6">
|
||
<svg
|
||
className="w-8 h-8 text-white"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-xl font-bold mb-4 text-cyan-400">
|
||
{currentContent.about.values.title}
|
||
</h3>
|
||
<ul className="space-y-2">
|
||
{currentContent.about.values.items.map((value, index) => (
|
||
<li key={index} className="text-gray-300">
|
||
{value}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Team Section */}
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
||
{currentContent.about.team.title}
|
||
</h2>
|
||
</div>
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{currentContent.about.team.members.map((member, index) => (
|
||
<div
|
||
key={index}
|
||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border border-cyan-500/20 text-center"
|
||
>
|
||
<div className="w-20 h-20 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<span className="text-white font-bold text-2xl">
|
||
{member.name.charAt(0)}
|
||
</span>
|
||
</div>
|
||
<h3 className="text-xl font-bold mb-2 text-cyan-400">
|
||
{member.name}
|
||
</h3>
|
||
<p className="text-gray-400 mb-4">{member.position}</p>
|
||
<p className="text-gray-300 text-sm leading-relaxed">
|
||
{member.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
|
||
</div>
|
||
);
|
||
}
|