907 lines
49 KiB
TypeScript
907 lines
49 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState, useEffect } from 'react';
|
||
|
|
import Link from 'next/link';
|
||
|
|
import SEOHead from '../../../components/SEOHead';
|
||
|
|
// 移除不再需要的import
|
||
|
|
|
||
|
|
// Team member icons
|
||
|
|
const teamIcons = {
|
||
|
|
ceo: (
|
||
|
|
<svg
|
||
|
|
className="w-12 h-12 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="arefwy3"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="el5tl.i"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
|
||
|
|
cto: (
|
||
|
|
<svg
|
||
|
|
className="w-12 h-12 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="cum4rol"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="rz0ktpq"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
|
||
|
|
coo: (
|
||
|
|
<svg
|
||
|
|
className="w-12 h-12 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="-:xudau"
|
||
|
|
>
|
||
|
|
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" data-oid="w17754c" />
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
};
|
||
|
|
|
||
|
|
// Value icons
|
||
|
|
const valueIcons = [
|
||
|
|
<svg key="check" className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" data-oid="40p0z-e">
|
||
|
|
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" data-oid="4i79syw" />
|
||
|
|
</svg>,
|
||
|
|
<svg key="lightning" className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" data-oid="7w4b8xs">
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="ayzcnrl"
|
||
|
|
/>
|
||
|
|
</svg>,
|
||
|
|
<svg key="shield" className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" data-oid="ak_01xr">
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="xq8b:y7"
|
||
|
|
/>
|
||
|
|
</svg>,
|
||
|
|
<svg key="users" className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" data-oid="tyu:xvm">
|
||
|
|
<path
|
||
|
|
d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"
|
||
|
|
data-oid="y-8jfh9"
|
||
|
|
/>
|
||
|
|
</svg>,
|
||
|
|
];
|
||
|
|
|
||
|
|
interface AboutPageProps {
|
||
|
|
params: { locale: string };
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function AboutPage({ params }: AboutPageProps) {
|
||
|
|
const currentLang = params.locale || 'zh-CN';
|
||
|
|
const [translations, setTranslations] = useState<any>({});
|
||
|
|
const [commonTranslations, setCommonTranslations] = useState<any>({});
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||
|
|
const [activeTab, setActiveTab] = useState('intro');
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const loadTranslations = async () => {
|
||
|
|
try {
|
||
|
|
const [aboutRes, commonRes] = await Promise.all([
|
||
|
|
fetch(`/locales/${currentLang}/about.json`),
|
||
|
|
fetch(`/locales/${currentLang}/common.json`),
|
||
|
|
]);
|
||
|
|
|
||
|
|
if (aboutRes.ok && commonRes.ok) {
|
||
|
|
const aboutData = await aboutRes.json();
|
||
|
|
const commonData = await commonRes.json();
|
||
|
|
|
||
|
|
setTranslations(aboutData);
|
||
|
|
setCommonTranslations(commonData);
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load translations:', error);
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
loadTranslations();
|
||
|
|
}, [currentLang]);
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50"
|
||
|
|
data-oid="ntavjq3"
|
||
|
|
>
|
||
|
|
<div className="text-center" data-oid="p93wv2x">
|
||
|
|
<div
|
||
|
|
className="w-16 h-16 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||
|
|
data-oid="86hpq18"
|
||
|
|
></div>
|
||
|
|
<p className="text-gray-600" data-oid="zjc0wib">
|
||
|
|
Loading about us...
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const t = translations;
|
||
|
|
const common = commonTranslations;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<SEOHead
|
||
|
|
page="about"
|
||
|
|
locale={currentLang as 'zh-CN' | 'zh-TW' | 'en'}
|
||
|
|
canonicalUrl="/about"
|
||
|
|
data-oid="99p7g4x"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"
|
||
|
|
data-oid="l3w2iju"
|
||
|
|
>
|
||
|
|
{/* Navigation */}
|
||
|
|
<nav
|
||
|
|
className="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-50"
|
||
|
|
data-oid="c8lwtmj"
|
||
|
|
>
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="o:exg:4">
|
||
|
|
<div className="flex justify-between items-center h-16" data-oid="qt96q75">
|
||
|
|
{/* Logo */}
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}`}
|
||
|
|
className="flex items-center space-x-2"
|
||
|
|
data-oid="3hv2g39"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
|
||
|
|
data-oid="48y0jv-"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="ojp:e.d"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
|
||
|
|
data-oid="e5y3qvq"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span
|
||
|
|
className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
|
||
|
|
data-oid=".202hmi"
|
||
|
|
>
|
||
|
|
CloudTech
|
||
|
|
</span>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
{/* Desktop Navigation */}
|
||
|
|
<div
|
||
|
|
className="hidden md:flex items-center space-x-8"
|
||
|
|
data-oid="1-rd:te"
|
||
|
|
>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}`}
|
||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
||
|
|
data-oid="i_jy8ex"
|
||
|
|
>
|
||
|
|
{common.nav?.home}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/products`}
|
||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
||
|
|
data-oid="5j54ufc"
|
||
|
|
>
|
||
|
|
{common.nav?.products}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/news`}
|
||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
||
|
|
data-oid="qza1-8y"
|
||
|
|
>
|
||
|
|
{common.nav?.news}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/support`}
|
||
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
||
|
|
data-oid="zbf_oen"
|
||
|
|
>
|
||
|
|
{common.nav?.support}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/${currentLang}/about`}
|
||
|
|
className="text-blue-600 font-medium"
|
||
|
|
data-oid="4h4ecnc"
|
||
|
|
>
|
||
|
|
{common.nav?.about}
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Language Switcher & Mobile Menu */}
|
||
|
|
<div className="flex items-center space-x-4" data-oid="15b57-b">
|
||
|
|
<select
|
||
|
|
value={currentLang}
|
||
|
|
onChange={(e) => {
|
||
|
|
const newLocale = e.target.value;
|
||
|
|
const currentPath = window.location.pathname;
|
||
|
|
const pathWithoutLocale = currentPath.replace(/^\/[^\/]+/, '');
|
||
|
|
window.location.href = `/${newLocale}${pathWithoutLocale}`;
|
||
|
|
}}
|
||
|
|
className="bg-white/50 border border-white/30 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
|
|
data-oid="-.f4z5b"
|
||
|
|
title="选择语言"
|
||
|
|
>
|
||
|
|
<option value="zh-CN" data-oid="utzg:h1">
|
||
|
|
简体中文
|
||
|
|
</option>
|
||
|
|
<option value="zh-TW" data-oid=":7z2.98">
|
||
|
|
繁體中文
|
||
|
|
</option>
|
||
|
|
<option value="en" data-oid="bm.0tuo">
|
||
|
|
English
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
{/* Mobile menu button */}
|
||
|
|
<button
|
||
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||
|
|
className="md:hidden p-2 rounded-lg bg-white/50 border border-white/30"
|
||
|
|
data-oid="53ciiq9"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
data-oid="wv-7:x3"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={2}
|
||
|
|
d="M4 6h16M4 12h16M4 18h16"
|
||
|
|
data-oid="5tm48nn"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Mobile Navigation */}
|
||
|
|
{isMenuOpen && (
|
||
|
|
<div
|
||
|
|
className="md:hidden py-4 border-t border-white/20"
|
||
|
|
data-oid="i6lsys4"
|
||
|
|
>
|
||
|
|
<div className="flex flex-col space-y-2" data-oid="s5dv7_e">
|
||
|
|
<Link
|
||
|
|
href="/"
|
||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
||
|
|
data-oid="c3wfs_m"
|
||
|
|
>
|
||
|
|
{common.nav?.home}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href="/products"
|
||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
||
|
|
data-oid="2_cz9a:"
|
||
|
|
>
|
||
|
|
{common.nav?.products}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href="/news"
|
||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
||
|
|
data-oid="8nxuu.e"
|
||
|
|
>
|
||
|
|
{common.nav?.news}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href="/support"
|
||
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
||
|
|
data-oid="oov4wpi"
|
||
|
|
>
|
||
|
|
{common.nav?.support}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href="/about"
|
||
|
|
className="px-4 py-2 text-blue-600 bg-blue-50 rounded-lg"
|
||
|
|
data-oid="mo.fffw"
|
||
|
|
>
|
||
|
|
{common.nav?.about}
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
{/* Hero Section */}
|
||
|
|
<div
|
||
|
|
className="relative bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-24 overflow-hidden"
|
||
|
|
data-oid="nmknnmk"
|
||
|
|
>
|
||
|
|
{/* Background decorative elements */}
|
||
|
|
<div className="absolute inset-0 opacity-10" data-oid="1ui5m2i">
|
||
|
|
<div
|
||
|
|
className="absolute top-10 left-10 w-20 h-20 bg-white rounded-full"
|
||
|
|
data-oid="whtzay4"
|
||
|
|
></div>
|
||
|
|
<div
|
||
|
|
className="absolute top-32 right-20 w-16 h-16 bg-white rounded-full"
|
||
|
|
data-oid="c11hjvl"
|
||
|
|
></div>
|
||
|
|
<div
|
||
|
|
className="absolute bottom-20 left-1/4 w-12 h-12 bg-white rounded-full"
|
||
|
|
data-oid="05i1c.i"
|
||
|
|
></div>
|
||
|
|
<div
|
||
|
|
className="absolute bottom-32 right-1/3 w-24 h-24 bg-white rounded-full"
|
||
|
|
data-oid="dwa.34n"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
|
||
|
|
data-oid="v-xv8bk"
|
||
|
|
>
|
||
|
|
<h1
|
||
|
|
className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg"
|
||
|
|
data-oid="u9m6y_8"
|
||
|
|
>
|
||
|
|
{t.title}
|
||
|
|
</h1>
|
||
|
|
<p
|
||
|
|
className="text-xl md:text-2xl opacity-90 max-w-4xl mx-auto mb-8 drop-shadow-md"
|
||
|
|
data-oid="1n_mcsa"
|
||
|
|
>
|
||
|
|
{t.subtitle}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Stats */}
|
||
|
|
<div
|
||
|
|
className="grid grid-cols-2 md:grid-cols-4 gap-8 mt-12"
|
||
|
|
data-oid="dvbq0.r"
|
||
|
|
>
|
||
|
|
<div className="text-center" data-oid=":tsvzxi">
|
||
|
|
<div
|
||
|
|
className="text-3xl md:text-4xl font-bold mb-2"
|
||
|
|
data-oid="qcjwp_h"
|
||
|
|
>
|
||
|
|
2018
|
||
|
|
</div>
|
||
|
|
<div className="text-white/80" data-oid="uama652">
|
||
|
|
{currentLang === 'en' ? 'Founded' : '成立年份'}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center" data-oid="fxm_99y">
|
||
|
|
<div
|
||
|
|
className="text-3xl md:text-4xl font-bold mb-2"
|
||
|
|
data-oid="ri1h_tu"
|
||
|
|
>
|
||
|
|
100K+
|
||
|
|
</div>
|
||
|
|
<div className="text-white/80" data-oid="qxfh9ao">
|
||
|
|
{currentLang === 'en' ? 'Customers' : '客户数量'}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center" data-oid="dcpq2i-">
|
||
|
|
<div
|
||
|
|
className="text-3xl md:text-4xl font-bold mb-2"
|
||
|
|
data-oid="rb5gde6"
|
||
|
|
>
|
||
|
|
99.9%
|
||
|
|
</div>
|
||
|
|
<div className="text-white/80" data-oid="v8r14qm">
|
||
|
|
{currentLang === 'en' ? 'Uptime' : '可用性'}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center" data-oid="bx4izfi">
|
||
|
|
<div
|
||
|
|
className="text-3xl md:text-4xl font-bold mb-2"
|
||
|
|
data-oid="ob1lf6u"
|
||
|
|
>
|
||
|
|
24/7
|
||
|
|
</div>
|
||
|
|
<div className="text-white/80" data-oid="68.dfte">
|
||
|
|
{currentLang === 'en' ? 'Support' : '技术支持'}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Company Info Tabs */}
|
||
|
|
<div className="py-20" data-oid="8b7shn:">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="dexnb28">
|
||
|
|
{/* Tab Navigation */}
|
||
|
|
<div
|
||
|
|
className="flex flex-wrap justify-center gap-4 mb-12"
|
||
|
|
data-oid="nr2.d4o"
|
||
|
|
>
|
||
|
|
{['intro', 'mission', 'vision', 'values'].map((tab) => (
|
||
|
|
<button
|
||
|
|
key={tab}
|
||
|
|
onClick={() => setActiveTab(tab)}
|
||
|
|
className={`px-6 py-3 rounded-full font-medium transition-all duration-200 ${
|
||
|
|
activeTab === tab
|
||
|
|
? 'bg-indigo-500 text-white shadow-lg scale-105'
|
||
|
|
: 'bg-white/80 text-gray-700 hover:bg-white hover:shadow-md'
|
||
|
|
}`}
|
||
|
|
data-oid="h0g70ow"
|
||
|
|
>
|
||
|
|
{t.company?.[tab]?.title}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Tab Content */}
|
||
|
|
<div className="max-w-4xl mx-auto" data-oid="x4t1n8g">
|
||
|
|
<div
|
||
|
|
className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-2xl border border-white/20"
|
||
|
|
data-oid="-lo_s53"
|
||
|
|
>
|
||
|
|
<h2
|
||
|
|
className="text-3xl font-bold text-gray-900 mb-6 text-center"
|
||
|
|
data-oid="ps_j2f5"
|
||
|
|
>
|
||
|
|
{t.company?.[activeTab]?.title}
|
||
|
|
</h2>
|
||
|
|
{activeTab === 'values' ? (
|
||
|
|
<div
|
||
|
|
className="grid grid-cols-1 md:grid-cols-2 gap-6"
|
||
|
|
data-oid="..m1wa5"
|
||
|
|
>
|
||
|
|
{t.company?.values?.items?.map(
|
||
|
|
(value: string, index: number) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="flex items-start space-x-4 p-4 bg-white/50 rounded-2xl"
|
||
|
|
data-oid="iek84ex"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="w-12 h-12 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-xl flex items-center justify-center flex-shrink-0"
|
||
|
|
data-oid=".35r-sh"
|
||
|
|
>
|
||
|
|
{valueIcons[index]}
|
||
|
|
</div>
|
||
|
|
<div data-oid="wpqec5x">
|
||
|
|
<p
|
||
|
|
className="text-gray-700 font-medium leading-relaxed"
|
||
|
|
data-oid="e_id_9q"
|
||
|
|
>
|
||
|
|
{value}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<p
|
||
|
|
className="text-gray-600 text-lg leading-relaxed text-center"
|
||
|
|
data-oid="cn.uz9j"
|
||
|
|
>
|
||
|
|
{t.company?.[activeTab]?.content}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Team Section */}
|
||
|
|
<div
|
||
|
|
className="py-20 bg-gradient-to-b from-white/50 to-transparent"
|
||
|
|
data-oid="5uxk:8g"
|
||
|
|
>
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="clvtmxw">
|
||
|
|
<div className="text-center mb-16" data-oid="4edm371">
|
||
|
|
<h2
|
||
|
|
className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
|
||
|
|
data-oid="59_3lab"
|
||
|
|
>
|
||
|
|
{t.team?.title}
|
||
|
|
</h2>
|
||
|
|
<p
|
||
|
|
className="text-xl text-gray-600 max-w-3xl mx-auto"
|
||
|
|
data-oid="-umt-zl"
|
||
|
|
>
|
||
|
|
{currentLang === 'en'
|
||
|
|
? "Meet the passionate team behind CloudTech's success"
|
||
|
|
: '认识CloudTech成功背后的热情团队'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="_9cnf8d">
|
||
|
|
{Object.entries(t.team?.members || {}).map(
|
||
|
|
([key, member]: [string, any]) => (
|
||
|
|
<div
|
||
|
|
key={key}
|
||
|
|
className="group bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border border-white/20 text-center hover:scale-105"
|
||
|
|
data-oid="rfli0zt"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="w-32 h-32 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300"
|
||
|
|
data-oid="wup23n4"
|
||
|
|
>
|
||
|
|
{teamIcons[key as keyof typeof teamIcons]}
|
||
|
|
</div>
|
||
|
|
<h3
|
||
|
|
className="text-2xl font-bold text-gray-900 mb-2 group-hover:text-indigo-600 transition-colors"
|
||
|
|
data-oid="1e8tj_s"
|
||
|
|
>
|
||
|
|
{member.name}
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
className="text-indigo-600 font-medium mb-4 text-lg"
|
||
|
|
data-oid="-s2ky.s"
|
||
|
|
>
|
||
|
|
{member.position}
|
||
|
|
</p>
|
||
|
|
<p
|
||
|
|
className="text-gray-600 leading-relaxed"
|
||
|
|
data-oid="sf59dbc"
|
||
|
|
>
|
||
|
|
{member.bio}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Social Links */}
|
||
|
|
<div
|
||
|
|
className="flex justify-center space-x-4 mt-6"
|
||
|
|
data-oid="5_0lwaf"
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-indigo-100 transition-colors"
|
||
|
|
data-oid="zj39uhu"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5 text-gray-600"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="sh:dvfg"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="8evj7sz"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-indigo-100 transition-colors"
|
||
|
|
data-oid="ariwqa-"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5 text-gray-600"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="gxh1k5."
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"
|
||
|
|
data-oid="5_.ak8e"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Timeline Section */}
|
||
|
|
<div className="py-20" data-oid="vcxfi09">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="-..fohn">
|
||
|
|
<div className="text-center mb-16" data-oid="rove_:9">
|
||
|
|
<h2
|
||
|
|
className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
|
||
|
|
data-oid="wwokhj1"
|
||
|
|
>
|
||
|
|
{t.milestones?.title}
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl text-gray-600" data-oid="ympbjy3">
|
||
|
|
{currentLang === 'en'
|
||
|
|
? 'Our journey of innovation and growth'
|
||
|
|
: '我们的创新与成长之路'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="relative" data-oid="nj.oaa:">
|
||
|
|
<div
|
||
|
|
className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-indigo-400 to-purple-600 rounded-full"
|
||
|
|
data-oid="a94f89h"
|
||
|
|
></div>
|
||
|
|
<div className="space-y-12" data-oid="uiffjcd">
|
||
|
|
{Object.entries(t.milestones?.events || {}).map(
|
||
|
|
([year, event], index) => (
|
||
|
|
<div
|
||
|
|
key={year}
|
||
|
|
className={`flex items-center ${index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'}`}
|
||
|
|
data-oid="t4es30d"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className={`w-1/2 ${index % 2 === 0 ? 'pr-8 text-right' : 'pl-8 text-left'}`}
|
||
|
|
data-oid="-5mp4qk"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-white/20 hover:shadow-xl transition-shadow duration-300"
|
||
|
|
data-oid="ffeq9.p"
|
||
|
|
>
|
||
|
|
<h3
|
||
|
|
className="text-2xl font-bold text-indigo-600 mb-3"
|
||
|
|
data-oid="tty2r2x"
|
||
|
|
>
|
||
|
|
{year}
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
className="text-gray-600 leading-relaxed"
|
||
|
|
data-oid="-vtnqaj"
|
||
|
|
>
|
||
|
|
{String(event)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="relative z-10" data-oid="0xe7_al">
|
||
|
|
<div
|
||
|
|
className="w-6 h-6 bg-white border-4 border-indigo-500 rounded-full shadow-lg"
|
||
|
|
data-oid="huam73s"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<div className="w-1/2" data-oid="kft8wu:"></div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Contact Section */}
|
||
|
|
<div
|
||
|
|
className="py-20 bg-gradient-to-b from-white/50 to-transparent"
|
||
|
|
data-oid="osvm-o6"
|
||
|
|
>
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="rarqm32">
|
||
|
|
<div
|
||
|
|
className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-2xl border border-white/20"
|
||
|
|
data-oid="755:vd:"
|
||
|
|
>
|
||
|
|
<h2
|
||
|
|
className="text-3xl md:text-4xl font-bold text-gray-900 mb-8 text-center"
|
||
|
|
data-oid="r.mljut"
|
||
|
|
>
|
||
|
|
{t.contact?.title}
|
||
|
|
</h2>
|
||
|
|
<div
|
||
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
|
||
|
|
data-oid="l3kr:7_"
|
||
|
|
>
|
||
|
|
<div className="text-center group" data-oid="j-z-m2s">
|
||
|
|
<div
|
||
|
|
className="w-16 h-16 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"
|
||
|
|
data-oid="nmoj5-l"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-8 h-8 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="ileb95n"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="yh:6wvz"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3
|
||
|
|
className="font-semibold text-gray-900 mb-2"
|
||
|
|
data-oid="eg1v1.6"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Address' : '地址'}
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
className="text-sm text-gray-600 leading-relaxed"
|
||
|
|
data-oid="dc.zo6y"
|
||
|
|
>
|
||
|
|
{t.contact?.address}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-center group" data-oid="wt1rlzd">
|
||
|
|
<div
|
||
|
|
className="w-16 h-16 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"
|
||
|
|
data-oid="xk-1_-m"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-8 h-8 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="omdqrwu"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"
|
||
|
|
data-oid="vkggbq-"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3
|
||
|
|
className="font-semibold text-gray-900 mb-2"
|
||
|
|
data-oid="y.s6pu4"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Phone' : '电话'}
|
||
|
|
</h3>
|
||
|
|
<p className="text-sm text-gray-600" data-oid="8g::x9u">
|
||
|
|
{t.contact?.phone}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-center group" data-oid="0g14w-u">
|
||
|
|
<div
|
||
|
|
className="w-16 h-16 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"
|
||
|
|
data-oid="mppu3xa"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-8 h-8 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid=".guh555"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
|
||
|
|
data-oid="ut43j0i"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<path
|
||
|
|
d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
|
||
|
|
data-oid="8q-xhhd"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3
|
||
|
|
className="font-semibold text-gray-900 mb-2"
|
||
|
|
data-oid=".-2zonq"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Email' : '邮箱'}
|
||
|
|
</h3>
|
||
|
|
<p className="text-sm text-gray-600" data-oid="n40859-">
|
||
|
|
{t.contact?.email}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-center group" data-oid="drpyqd:">
|
||
|
|
<div
|
||
|
|
className="w-16 h-16 bg-gradient-to-r from-indigo-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"
|
||
|
|
data-oid="e_pie_i"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-8 h-8 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="u3rxbe4"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.559-.499-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.559.499.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.497-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
data-oid="mmeb0sx"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3
|
||
|
|
className="font-semibold text-gray-900 mb-2"
|
||
|
|
data-oid="3ng6tfr"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Website' : '网站'}
|
||
|
|
</h3>
|
||
|
|
<p className="text-sm text-gray-600" data-oid="i4r92ir">
|
||
|
|
{t.contact?.website}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Call to Action */}
|
||
|
|
<div
|
||
|
|
className="py-20 bg-gradient-to-r from-indigo-500 to-purple-600"
|
||
|
|
data-oid="fdz76dc"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
|
||
|
|
data-oid="natnu5b"
|
||
|
|
>
|
||
|
|
<h2
|
||
|
|
className="text-3xl md:text-4xl font-bold text-white mb-6"
|
||
|
|
data-oid="d9b4upj"
|
||
|
|
>
|
||
|
|
{currentLang === 'en'
|
||
|
|
? 'Ready to Transform Your Business?'
|
||
|
|
: '准备转型您的业务？'}
|
||
|
|
</h2>
|
||
|
|
<p
|
||
|
|
className="text-xl text-white/90 mb-8 max-w-3xl mx-auto"
|
||
|
|
data-oid="0ic043q"
|
||
|
|
>
|
||
|
|
{currentLang === 'en'
|
||
|
|
? 'Join thousands of companies that trust CloudTech for their cloud computing needs.'
|
||
|
|
: '加入信任CloudTech云计算服务的数千家公司。'}
|
||
|
|
</p>
|
||
|
|
<div
|
||
|
|
className="flex flex-col sm:flex-row gap-4 justify-center"
|
||
|
|
data-oid="oqgkj55"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
className="px-8 py-4 bg-white text-indigo-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
||
|
|
data-oid="eggec8:"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Get Started Today' : '立即开始'}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
className="px-8 py-4 bg-white/20 backdrop-blur-sm text-white rounded-2xl font-semibold border border-white/30 hover:bg-white/30 transition-all duration-200"
|
||
|
|
data-oid="h2oy4no"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Contact Us' : '联系我们'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
<footer className="bg-gray-900 text-white py-12" data-oid="qdub_zj">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="vdnul.9">
|
||
|
|
<div className="text-center" data-oid="2p7h3dw">
|
||
|
|
<div
|
||
|
|
className="flex items-center justify-center space-x-2 mb-4"
|
||
|
|
data-oid="-.8bivv"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
|
||
|
|
data-oid="isgthwq"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-5 h-5 text-white"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
data-oid="4xa8kvu"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
|
||
|
|
data-oid="ktiu:72"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<span className="text-xl font-bold" data-oid="98-jbnq">
|
||
|
|
CloudTech
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-400 mb-8 max-w-2xl mx-auto" data-oid="ss9ipwq">
|
||
|
|
{common.footer?.company_desc}
|
||
|
|
</p>
|
||
|
|
<p className="text-gray-400" data-oid="w_nfup6">
|
||
|
|
{common.footer?.copyright}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|