1246 lines
68 KiB
TypeScript
1246 lines
68 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import SEOHead from '../../../components/SEOHead';
|
|
|
|
// Support type icons mapping
|
|
const supportIcons = {
|
|
technical: (
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="byc8jfu"
|
|
>
|
|
<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="orpqy:6"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
consulting: (
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="nx8e._u"
|
|
>
|
|
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" data-oid="sjtzje1" />
|
|
</svg>
|
|
),
|
|
|
|
training: (
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="n74q41:"
|
|
>
|
|
<path
|
|
d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"
|
|
data-oid="_.jo5z4"
|
|
/>
|
|
</svg>
|
|
),
|
|
};
|
|
|
|
// Resource icons mapping
|
|
const resourceIcons = {
|
|
documentation: (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="bjwy3ib"
|
|
>
|
|
<path
|
|
d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z"
|
|
data-oid="bzqx-dn"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
api_reference: (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="qon7rg4"
|
|
>
|
|
<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="z4cjcav"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
tutorials: (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="x7k..kw"
|
|
>
|
|
<path
|
|
d="M2 6a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"
|
|
data-oid="bsgje24"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
community: (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="8ckm4_t"
|
|
>
|
|
<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="dgbafjq"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
status: (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="8j08396"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
data-oid="m4_b4k:"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
downloads: (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="q-_1a5k"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M3 17a1 1 0 011-1h12a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L7.707 6.707a1 1 0 01-1.414 0z"
|
|
clipRule="evenodd"
|
|
data-oid="014xyd:"
|
|
/>
|
|
</svg>
|
|
),
|
|
};
|
|
|
|
interface SupportPageProps {
|
|
params: { locale: string };
|
|
}
|
|
|
|
export default function SupportPage({ params }: SupportPageProps) {
|
|
const currentLang = params.locale || 'zh-CN';
|
|
const [translations, setTranslations] = useState<any>({});
|
|
const [commonTranslations, setCommonTranslations] = useState<any>({});
|
|
const [loading, setLoading] = useState(true);
|
|
const [openFaq, setOpenFaq] = useState<string | null>(null);
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [contactForm, setContactForm] = useState({
|
|
name: '',
|
|
email: '',
|
|
subject: '',
|
|
message: '',
|
|
priority: 'medium',
|
|
});
|
|
|
|
useEffect(() => {
|
|
const loadTranslations = async () => {
|
|
try {
|
|
const [supportRes, commonRes] = await Promise.all([
|
|
fetch(`/locales/${currentLang}/support.json`),
|
|
fetch(`/locales/${currentLang}/common.json`),
|
|
]);
|
|
|
|
const [supportData, commonData] = await Promise.all([
|
|
supportRes.json(),
|
|
commonRes.json(),
|
|
]);
|
|
|
|
setTranslations(supportData);
|
|
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="8ya2u7d"
|
|
>
|
|
<div className="text-center" data-oid="bnv5rw3">
|
|
<div
|
|
className="w-16 h-16 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
|
data-oid="9gmazdd"
|
|
></div>
|
|
<p className="text-gray-600" data-oid="hw0xdo:">
|
|
Loading support...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const t = translations;
|
|
const common = commonTranslations;
|
|
|
|
// Filter FAQs based on search term
|
|
const filteredFaqs = Object.entries(t.faq?.questions || {}).filter(
|
|
([_, faq]: [string, any]) =>
|
|
faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
faq.answer.toLowerCase().includes(searchTerm.toLowerCase()),
|
|
);
|
|
|
|
const handleContactSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Handle form submission
|
|
console.log('Contact form submitted:', contactForm);
|
|
// Reset form
|
|
setContactForm({
|
|
name: '',
|
|
email: '',
|
|
subject: '',
|
|
message: '',
|
|
priority: 'medium',
|
|
});
|
|
alert(currentLang === 'en' ? 'Message sent successfully!' : '消息发送成功！');
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<SEOHead
|
|
page="support"
|
|
locale={currentLang as 'zh-CN' | 'zh-TW' | 'en'}
|
|
canonicalUrl="/support"
|
|
data-oid="b5637xa"
|
|
/>
|
|
|
|
<div
|
|
className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"
|
|
data-oid="3_kcee2"
|
|
>
|
|
{/* Navigation */}
|
|
<nav
|
|
className="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-50"
|
|
data-oid="j8d1dmj"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="g_lhvuy">
|
|
<div className="flex justify-between items-center h-16" data-oid="wjy7yek">
|
|
{/* Logo */}
|
|
<Link
|
|
href={`/${currentLang}`}
|
|
className="flex items-center space-x-2"
|
|
data-oid="54qm8jr"
|
|
>
|
|
<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="9ruogs3"
|
|
>
|
|
<svg
|
|
className="w-5 h-5 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="nueqnu3"
|
|
>
|
|
<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="3momqil"
|
|
/>
|
|
</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="a:iui3w"
|
|
>
|
|
CloudTech
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div
|
|
className="hidden md:flex items-center space-x-8"
|
|
data-oid="b5rbdwx"
|
|
>
|
|
<Link
|
|
href={`/${currentLang}`}
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|
data-oid="79ei-:i"
|
|
>
|
|
{common.nav?.home}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/products`}
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|
data-oid="vgyfvmu"
|
|
>
|
|
{common.nav?.products}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/news`}
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|
data-oid="rqhxgye"
|
|
>
|
|
{common.nav?.news}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/support`}
|
|
className="text-blue-600 font-medium"
|
|
data-oid="t45h25w"
|
|
>
|
|
{common.nav?.support}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/about`}
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|
data-oid="nev-7r0"
|
|
>
|
|
{common.nav?.about}
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Language Switcher & Mobile Menu */}
|
|
<div className="flex items-center space-x-4" data-oid="xj9_t9w">
|
|
<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="1pbj6ms"
|
|
>
|
|
<option value="zh-CN" data-oid="alh7211">
|
|
简体中文
|
|
</option>
|
|
<option value="zh-TW" data-oid="bd5cbru">
|
|
繁體中文
|
|
</option>
|
|
<option value="en" data-oid="dqgfs0m">
|
|
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="mhaf2dy"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="64a:svt"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
data-oid="tk_84hs"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isMenuOpen && (
|
|
<div
|
|
className="md:hidden py-4 border-t border-white/20"
|
|
data-oid="1qqpmin"
|
|
>
|
|
<div className="flex flex-col space-y-2" data-oid="7n705ad">
|
|
<Link
|
|
href={`/${currentLang}`}
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
|
data-oid="366d-hn"
|
|
>
|
|
{common.nav?.home}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/products`}
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
|
data-oid="y80jit2"
|
|
>
|
|
{common.nav?.products}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/news`}
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
|
data-oid="gqg8r-2"
|
|
>
|
|
{common.nav?.news}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/support`}
|
|
className="px-4 py-2 text-blue-600 bg-blue-50 rounded-lg"
|
|
data-oid="6-t20r0"
|
|
>
|
|
{common.nav?.support}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/about`}
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
|
data-oid="57l622."
|
|
>
|
|
{common.nav?.about}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section with Enhanced Design */}
|
|
<div
|
|
className="relative bg-gradient-to-r from-purple-500 to-pink-600 text-white py-24 overflow-hidden"
|
|
data-oid="6l5f4ze"
|
|
>
|
|
{/* Background decorative elements */}
|
|
<div className="absolute inset-0 opacity-10" data-oid="29xk_2-">
|
|
<div
|
|
className="absolute top-10 left-10 w-20 h-20 bg-white rounded-full"
|
|
data-oid="izxgubq"
|
|
></div>
|
|
<div
|
|
className="absolute top-32 right-20 w-16 h-16 bg-white rounded-full"
|
|
data-oid="cpdvvzk"
|
|
></div>
|
|
<div
|
|
className="absolute bottom-20 left-1/4 w-12 h-12 bg-white rounded-full"
|
|
data-oid="w8q73gp"
|
|
></div>
|
|
<div
|
|
className="absolute bottom-32 right-1/3 w-24 h-24 bg-white rounded-full"
|
|
data-oid="9:51:kn"
|
|
></div>
|
|
</div>
|
|
|
|
<div
|
|
className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
|
|
data-oid="x5rc7o3"
|
|
>
|
|
<h1
|
|
className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg"
|
|
data-oid="twqmtoc"
|
|
>
|
|
{t.title}
|
|
</h1>
|
|
<p
|
|
className="text-xl md:text-2xl opacity-90 max-w-4xl mx-auto mb-8 drop-shadow-md"
|
|
data-oid="aw9:2fl"
|
|
>
|
|
{t.subtitle}
|
|
</p>
|
|
|
|
{/* Quick Action Buttons */}
|
|
<div
|
|
className="flex flex-col sm:flex-row gap-4 justify-center"
|
|
data-oid="oaxuzqu"
|
|
>
|
|
<button
|
|
className="px-8 py-4 bg-white text-purple-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
|
data-oid="1k0jxod"
|
|
>
|
|
{currentLang === 'en' ? 'Submit Ticket' : '提交工单'}
|
|
</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="a23egei"
|
|
>
|
|
{currentLang === 'en' ? 'Live Chat' : '在线客服'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Contact Bar */}
|
|
<div className="py-8 bg-white/50" data-oid="a:.ntli">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="sl5c.yn">
|
|
<div
|
|
className="flex flex-col lg:flex-row justify-center items-center gap-8"
|
|
data-oid="ot4klm-"
|
|
>
|
|
<div className="flex items-center space-x-3" data-oid="is5ysy6">
|
|
<div
|
|
className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center"
|
|
data-oid="f114g3-"
|
|
>
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="2r-:ni2"
|
|
>
|
|
<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=".xtko3i"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div data-oid="ne2a3-e">
|
|
<p className="font-semibold text-gray-900" data-oid="s_w30ib">
|
|
{t.contact?.phone}
|
|
</p>
|
|
<p className="text-sm text-gray-600" data-oid="sdlhbkv">
|
|
{currentLang === 'en' ? 'Call us now' : '立即致电'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3" data-oid="f1fzjou">
|
|
<div
|
|
className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center"
|
|
data-oid="m6t-iu8"
|
|
>
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="u6gpubx"
|
|
>
|
|
<path
|
|
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
|
|
data-oid="r37347s"
|
|
/>
|
|
|
|
<path
|
|
d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
|
|
data-oid="u5h7cxj"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div data-oid="93b8pbb">
|
|
<p className="font-semibold text-gray-900" data-oid="mx155c8">
|
|
{t.contact?.email}
|
|
</p>
|
|
<p className="text-sm text-gray-600" data-oid="qcqjesi">
|
|
{currentLang === 'en' ? 'Email support' : '邮件支持'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3" data-oid="wpvrf6r">
|
|
<div
|
|
className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center"
|
|
data-oid="to2w.hg"
|
|
>
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="ak1k17o"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
|
|
clipRule="evenodd"
|
|
data-oid="nzcy:b1"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div data-oid="7xett0b">
|
|
<p className="font-semibold text-gray-900" data-oid=".3ua39k">
|
|
{t.contact?.hours}
|
|
</p>
|
|
<p className="text-sm text-gray-600" data-oid="auj9d1e">
|
|
{currentLang === 'en' ? 'Service hours' : '服务时间'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Support Types */}
|
|
<div className="py-20" data-oid="-7tt8qo">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="p77mnq2">
|
|
<div className="text-center mb-16" data-oid="-uxhrc.">
|
|
<h2
|
|
className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
|
|
data-oid="1jr7aqy"
|
|
>
|
|
{currentLang === 'en'
|
|
? 'How Can We Help You?'
|
|
: '我们如何为您提供帮助？'}
|
|
</h2>
|
|
<p
|
|
className="text-xl text-gray-600 max-w-3xl mx-auto"
|
|
data-oid="nrpb_tu"
|
|
>
|
|
{currentLang === 'en'
|
|
? 'Choose the support option that best fits your needs'
|
|
: '选择最适合您需求的支持选项'}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20"
|
|
data-oid="m74yqxh"
|
|
>
|
|
{Object.entries(t.support_types || {}).map(
|
|
([key, supportType]: [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 hover:scale-105"
|
|
data-oid="nwwv68m"
|
|
>
|
|
<div
|
|
className="w-20 h-20 bg-gradient-to-r from-purple-400 to-pink-600 rounded-3xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
|
|
data-oid="z.x03vo"
|
|
>
|
|
{supportIcons[key as keyof typeof supportIcons] || (
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="hp1rlbm"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
|
clipRule="evenodd"
|
|
data-oid="anq5spq"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
<h3
|
|
className="text-2xl font-bold text-gray-900 mb-4 group-hover:text-purple-600 transition-colors"
|
|
data-oid="zo6obuz"
|
|
>
|
|
{supportType.title}
|
|
</h3>
|
|
<p
|
|
className="text-gray-600 mb-6 leading-relaxed"
|
|
data-oid="bfn9am4"
|
|
>
|
|
{supportType.desc}
|
|
</p>
|
|
<div className="space-y-3 mb-8" data-oid="qxm4ajg">
|
|
{supportType.features?.map(
|
|
(feature: string, index: number) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center space-x-3"
|
|
data-oid="p6kg1lb"
|
|
>
|
|
<div
|
|
className="w-2 h-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex-shrink-0"
|
|
data-oid="j5pctly"
|
|
></div>
|
|
<span
|
|
className="text-sm text-gray-700 font-medium"
|
|
data-oid="2-c_ubu"
|
|
>
|
|
{feature}
|
|
</span>
|
|
</div>
|
|
),
|
|
)}
|
|
</div>
|
|
<button
|
|
className="w-full px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-600 text-white rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
|
data-oid="_sillnt"
|
|
>
|
|
{currentLang === 'en' ? 'Get Started' : '开始使用'}
|
|
</button>
|
|
</div>
|
|
),
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Form Section */}
|
|
<div
|
|
className="py-20 bg-gradient-to-b from-white/50 to-transparent"
|
|
data-oid="ik0l7m1"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="qvty7z2">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12" data-oid="ds_cqfy">
|
|
{/* Contact Form */}
|
|
<div
|
|
className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-2xl border border-white/20"
|
|
data-oid="rnom_5i"
|
|
>
|
|
<h3
|
|
className="text-2xl font-bold text-gray-900 mb-6"
|
|
data-oid="pq7vi0v"
|
|
>
|
|
{currentLang === 'en' ? 'Send us a Message' : '发送消息'}
|
|
</h3>
|
|
<form
|
|
onSubmit={handleContactSubmit}
|
|
className="space-y-6"
|
|
data-oid="42_39d8"
|
|
>
|
|
<div
|
|
className="grid grid-cols-1 md:grid-cols-2 gap-4"
|
|
data-oid="p5dqstt"
|
|
>
|
|
<div data-oid="jfz0-ud">
|
|
<label
|
|
className="block text-sm font-medium text-gray-700 mb-2"
|
|
data-oid="2ul1s_b"
|
|
>
|
|
{currentLang === 'en' ? 'Name' : '姓名'}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={contactForm.name}
|
|
onChange={(e) =>
|
|
setContactForm({
|
|
...contactForm,
|
|
name: e.target.value,
|
|
})
|
|
}
|
|
className="w-full px-4 py-3 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
placeholder={
|
|
currentLang === 'en' ? 'Your name' : '您的姓名'
|
|
}
|
|
data-oid="6_gk0ts"
|
|
/>
|
|
</div>
|
|
<div data-oid="4oy9wd:">
|
|
<label
|
|
className="block text-sm font-medium text-gray-700 mb-2"
|
|
data-oid="vsg5gor"
|
|
>
|
|
{currentLang === 'en' ? 'Email' : '邮箱'}
|
|
</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
value={contactForm.email}
|
|
onChange={(e) =>
|
|
setContactForm({
|
|
...contactForm,
|
|
email: e.target.value,
|
|
})
|
|
}
|
|
className="w-full px-4 py-3 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
placeholder={
|
|
currentLang === 'en'
|
|
? 'your@email.com'
|
|
: '您的邮箱'
|
|
}
|
|
data-oid="8er5llc"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div data-oid="k4i.fxo">
|
|
<label
|
|
className="block text-sm font-medium text-gray-700 mb-2"
|
|
data-oid="bkoz0_4"
|
|
>
|
|
{currentLang === 'en' ? 'Subject' : '主题'}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={contactForm.subject}
|
|
onChange={(e) =>
|
|
setContactForm({
|
|
...contactForm,
|
|
subject: e.target.value,
|
|
})
|
|
}
|
|
className="w-full px-4 py-3 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
placeholder={
|
|
currentLang === 'en'
|
|
? 'How can we help?'
|
|
: '我们如何帮助您？'
|
|
}
|
|
data-oid="b6fexcw"
|
|
/>
|
|
</div>
|
|
<div data-oid="s91aanj">
|
|
<label
|
|
className="block text-sm font-medium text-gray-700 mb-2"
|
|
data-oid="6-414rz"
|
|
>
|
|
{currentLang === 'en' ? 'Priority' : '优先级'}
|
|
</label>
|
|
<select
|
|
value={contactForm.priority}
|
|
onChange={(e) =>
|
|
setContactForm({
|
|
...contactForm,
|
|
priority: e.target.value,
|
|
})
|
|
}
|
|
title={currentLang === 'en' ? 'Select priority level' : '选择优先级'}
|
|
className="w-full px-4 py-3 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
data-oid="acez6we"
|
|
>
|
|
<option value="low" data-oid="8ol_04s">
|
|
{currentLang === 'en' ? 'Low' : '低'}
|
|
</option>
|
|
<option value="medium" data-oid="nsx.5_-">
|
|
{currentLang === 'en' ? 'Medium' : '中'}
|
|
</option>
|
|
<option value="high" data-oid="rj08b_n">
|
|
{currentLang === 'en' ? 'High' : '高'}
|
|
</option>
|
|
<option value="urgent" data-oid="posq9-s">
|
|
{currentLang === 'en' ? 'Urgent' : '紧急'}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div data-oid="agl_eta">
|
|
<label
|
|
className="block text-sm font-medium text-gray-700 mb-2"
|
|
data-oid="gzqhbzi"
|
|
>
|
|
{currentLang === 'en' ? 'Message' : '消息'}
|
|
</label>
|
|
<textarea
|
|
required
|
|
rows={5}
|
|
value={contactForm.message}
|
|
onChange={(e) =>
|
|
setContactForm({
|
|
...contactForm,
|
|
message: e.target.value,
|
|
})
|
|
}
|
|
className="w-full px-4 py-3 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
placeholder={
|
|
currentLang === 'en'
|
|
? 'Describe your issue or question...'
|
|
: '描述您的问题...'
|
|
}
|
|
data-oid="zr8j46j"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="w-full px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-600 text-white rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
|
data-oid="x57-iml"
|
|
>
|
|
{currentLang === 'en' ? 'Send Message' : '发送消息'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* FAQ Search and Quick Links */}
|
|
<div className="space-y-8" data-oid="yw1y0en">
|
|
{/* FAQ Search */}
|
|
<div
|
|
className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg border border-white/20"
|
|
data-oid="yrpd-o7"
|
|
>
|
|
<h3
|
|
className="text-2xl font-bold text-gray-900 mb-6"
|
|
data-oid="0ax-fhd"
|
|
>
|
|
{currentLang === 'en' ? 'Search FAQ' : '搜索常见问题'}
|
|
</h3>
|
|
<div className="relative mb-6" data-oid=".gv31-o">
|
|
<input
|
|
type="text"
|
|
placeholder={
|
|
currentLang === 'en'
|
|
? 'Search frequently asked questions...'
|
|
: '搜索常见问题...'
|
|
}
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full px-4 py-3 pl-12 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
data-oid="l_2:uzh"
|
|
/>
|
|
|
|
<svg
|
|
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="m6z_myj"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
data-oid="22evfvl"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="space-y-2" data-oid="84g7l21">
|
|
{filteredFaqs
|
|
.slice(0, 3)
|
|
.map(([key, faq]: [string, any]) => (
|
|
<button
|
|
key={key}
|
|
onClick={() =>
|
|
setOpenFaq(openFaq === key ? null : key)
|
|
}
|
|
className="w-full text-left p-3 bg-white/50 rounded-lg hover:bg-white/70 transition-colors"
|
|
data-oid="8zbtzix"
|
|
>
|
|
<p
|
|
className="font-medium text-gray-900 text-sm"
|
|
data-oid="5p0naa6"
|
|
>
|
|
{faq.question}
|
|
</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Links */}
|
|
<div
|
|
className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg border border-white/20"
|
|
data-oid="zvhj211"
|
|
>
|
|
<h3
|
|
className="text-2xl font-bold text-gray-900 mb-6"
|
|
data-oid="uh95vhr"
|
|
>
|
|
{currentLang === 'en' ? 'Quick Links' : '快速链接'}
|
|
</h3>
|
|
<div className="space-y-3" data-oid="fv1k8k8">
|
|
<a
|
|
href="#"
|
|
className="flex items-center space-x-3 p-3 bg-white/50 rounded-lg hover:bg-white/70 transition-colors"
|
|
data-oid="uhtqs6k"
|
|
>
|
|
<div
|
|
className="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center"
|
|
data-oid="udhw5i0"
|
|
>
|
|
<svg
|
|
className="w-4 h-4 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="onztd2o"
|
|
>
|
|
<path
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
data-oid="p2bx7mf"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span
|
|
className="font-medium text-gray-900"
|
|
data-oid="2n7mfw0"
|
|
>
|
|
{currentLang === 'en'
|
|
? 'Service Status'
|
|
: '服务状态'}
|
|
</span>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="flex items-center space-x-3 p-3 bg-white/50 rounded-lg hover:bg-white/70 transition-colors"
|
|
data-oid="ea-3g_v"
|
|
>
|
|
<div
|
|
className="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center"
|
|
data-oid=".jlceef"
|
|
>
|
|
<svg
|
|
className="w-4 h-4 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="uunghqc"
|
|
>
|
|
<path
|
|
d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
|
|
data-oid="s_ng-rn"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span
|
|
className="font-medium text-gray-900"
|
|
data-oid="c9zt8bw"
|
|
>
|
|
{currentLang === 'en'
|
|
? 'Documentation'
|
|
: '技术文档'}
|
|
</span>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="flex items-center space-x-3 p-3 bg-white/50 rounded-lg hover:bg-white/70 transition-colors"
|
|
data-oid="-17se6s"
|
|
>
|
|
<div
|
|
className="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center"
|
|
data-oid="abcswi-"
|
|
>
|
|
<svg
|
|
className="w-4 h-4 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="mv:ol5s"
|
|
>
|
|
<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="a0fld_8"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span
|
|
className="font-medium text-gray-900"
|
|
data-oid="38c9ow1"
|
|
>
|
|
{currentLang === 'en'
|
|
? 'Community Forum'
|
|
: '社区论坛'}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* FAQ Section */}
|
|
<div className="py-20" data-oid="1tnpxfb">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="avvuc5m">
|
|
<div className="text-center mb-12" data-oid=":amrns:">
|
|
<h2
|
|
className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
|
|
data-oid="e8x8_w-"
|
|
>
|
|
{t.faq?.title}
|
|
</h2>
|
|
<p className="text-xl text-gray-600" data-oid="_m9k_dp">
|
|
{currentLang === 'en'
|
|
? 'Find answers to commonly asked questions'
|
|
: '查找常见问题的答案'}
|
|
</p>
|
|
</div>
|
|
<div className="max-w-4xl mx-auto space-y-4" data-oid="flseshv">
|
|
{filteredFaqs.map(([key, faq]: [string, any]) => (
|
|
<div
|
|
key={key}
|
|
className="bg-white/80 backdrop-blur-sm rounded-2xl border border-white/20 overflow-hidden shadow-lg"
|
|
data-oid="_:dkex6"
|
|
>
|
|
<button
|
|
onClick={() => setOpenFaq(openFaq === key ? null : key)}
|
|
className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/50 transition-colors"
|
|
data-oid="7ei40x0"
|
|
>
|
|
<span
|
|
className="font-semibold text-gray-900 pr-4"
|
|
data-oid="c3er9j8"
|
|
>
|
|
{faq.question}
|
|
</span>
|
|
<svg
|
|
className={`w-5 h-5 text-gray-500 transform transition-transform flex-shrink-0 ${
|
|
openFaq === key ? 'rotate-180' : ''
|
|
}`}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="fngc:yc"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
data-oid="0l9ejd:"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
{openFaq === key && (
|
|
<div
|
|
className="px-6 pb-4 border-t border-gray-100"
|
|
data-oid="cwi6xe-"
|
|
>
|
|
<p
|
|
className="text-gray-600 pt-4 leading-relaxed"
|
|
data-oid="l06s6b8"
|
|
>
|
|
{faq.answer}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Resources Section */}
|
|
<div
|
|
className="py-20 bg-gradient-to-b from-white/50 to-transparent"
|
|
data-oid=":_nxek7"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="4d_wmb7">
|
|
<div className="text-center mb-12" data-oid="djbcanp">
|
|
<h2
|
|
className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
|
|
data-oid="0kjt94y"
|
|
>
|
|
{t.resources?.title}
|
|
</h2>
|
|
<p className="text-xl text-gray-600" data-oid="y2t7r4n">
|
|
{currentLang === 'en'
|
|
? 'Access helpful resources and tools'
|
|
: '访问有用的资源和工具'}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"
|
|
data-oid="oa7:u85"
|
|
>
|
|
{Object.entries(t.resources || {})
|
|
.filter(([key]) => key !== 'title')
|
|
.map(([key, resource]: [string, any]) => (
|
|
<a
|
|
key={key}
|
|
href="#"
|
|
className="group bg-white/80 backdrop-blur-sm rounded-2xl p-6 text-center shadow-lg hover:shadow-2xl transition-all duration-300 border border-white/20 hover:scale-105"
|
|
data-oid="_0brn4g"
|
|
>
|
|
<div
|
|
className="w-16 h-16 bg-gradient-to-r from-purple-400 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"
|
|
data-oid="a00qj5t"
|
|
>
|
|
{resourceIcons[key as keyof typeof resourceIcons] || (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="6jj6db_"
|
|
>
|
|
<path
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
data-oid="vnkhtyh"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
<span
|
|
className="text-sm font-medium text-gray-900 group-hover:text-purple-600 transition-colors"
|
|
data-oid="lw9d_a0"
|
|
>
|
|
{resource}
|
|
</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Call to Action */}
|
|
<div
|
|
className="py-20 bg-gradient-to-r from-purple-500 to-pink-600"
|
|
data-oid="ulz73bq"
|
|
>
|
|
<div
|
|
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
|
|
data-oid="4nfsi96"
|
|
>
|
|
<h2
|
|
className="text-3xl md:text-4xl font-bold text-white mb-6"
|
|
data-oid=":j1c01r"
|
|
>
|
|
{currentLang === 'en' ? 'Still Need Help?' : '仍需要帮助？'}
|
|
</h2>
|
|
<p
|
|
className="text-xl text-white/90 mb-8 max-w-3xl mx-auto"
|
|
data-oid="c3:4vql"
|
|
>
|
|
{currentLang === 'en'
|
|
? 'Our support team is here to help you succeed. Contact us for personalized assistance.'
|
|
: '我们的支持团队随时为您提供帮助。联系我们获得个性化协助。'}
|
|
</p>
|
|
<div
|
|
className="flex flex-col sm:flex-row gap-4 justify-center"
|
|
data-oid="nwc2_ke"
|
|
>
|
|
<button
|
|
className="px-8 py-4 bg-white text-purple-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
|
data-oid="yqnjbld"
|
|
>
|
|
{currentLang === 'en' ? 'Contact Sales' : '联系销售'}
|
|
</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="yk7rdib"
|
|
>
|
|
{currentLang === 'en' ? 'Schedule Call' : '预约通话'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-gray-900 text-white py-12" data-oid=":v2h9:_">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="31d91ss">
|
|
<div className="text-center" data-oid="_po3gx_">
|
|
<div
|
|
className="flex items-center justify-center space-x-2 mb-4"
|
|
data-oid="2h08cn."
|
|
>
|
|
<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="pwq98_h"
|
|
>
|
|
<svg
|
|
className="w-5 h-5 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="xvw7xtz"
|
|
>
|
|
<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="_px-no1"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="text-xl font-bold" data-oid="jqi4aqj">
|
|
CloudTech
|
|
</span>
|
|
</div>
|
|
<p className="text-gray-400 mb-8 max-w-2xl mx-auto" data-oid="_xx96jg">
|
|
{common.footer?.company_desc}
|
|
</p>
|
|
<p className="text-gray-400" data-oid="xu8l5h5">
|
|
{common.footer?.copyright}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|