260 lines
12 KiB
TypeScript
260 lines
12 KiB
TypeScript
import { getTranslations, Locale, getNavigationPaths } from '@/lib/i18n';
|
|
import { generateMetadata as generateSEOMetadata } from '@/lib/seo';
|
|
import Layout from '@/components/Layout';
|
|
|
|
interface SupportPageProps {
|
|
params: {
|
|
locale: Locale;
|
|
};
|
|
}
|
|
|
|
export async function generateStaticParams() {
|
|
const locales = ['zh-CN', 'zh-TW', 'en'];
|
|
return locales.map((locale) => ({
|
|
locale,
|
|
}));
|
|
}
|
|
|
|
export async function generateMetadata({ params }: SupportPageProps) {
|
|
return generateSEOMetadata(params.locale, 'support');
|
|
}
|
|
|
|
export default async function SupportPage({ params }: SupportPageProps) {
|
|
const { locale } = params;
|
|
const [common, support] = await Promise.all([
|
|
getTranslations(locale, 'common'),
|
|
getTranslations(locale, 'support'),
|
|
]);
|
|
|
|
const navigationPaths = getNavigationPaths(locale);
|
|
const navigation = [
|
|
{
|
|
name: common.navigation.home,
|
|
href: navigationPaths.find((p) => p.key === 'home')?.path || '/',
|
|
},
|
|
{
|
|
name: common.navigation.products,
|
|
href: navigationPaths.find((p) => p.key === 'products')?.path || '/products',
|
|
},
|
|
{
|
|
name: common.navigation.news,
|
|
href: navigationPaths.find((p) => p.key === 'news')?.path || '/news',
|
|
},
|
|
{
|
|
name: common.navigation.support,
|
|
href: navigationPaths.find((p) => p.key === 'support')?.path || '/support',
|
|
},
|
|
{
|
|
name: common.navigation.about,
|
|
href: navigationPaths.find((p) => p.key === 'about')?.path || '/about',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Layout locale={locale} navigation={navigation} common={common} data-oid="lt:pgoh">
|
|
{/* Hero Section */}
|
|
<section
|
|
className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-indigo-100"
|
|
data-oid="ixvdy14"
|
|
>
|
|
<div className="max-w-4xl mx-auto text-center" data-oid="70bosni">
|
|
<h1
|
|
className="text-4xl md:text-6xl font-light leading-tight mb-8 text-gray-900"
|
|
data-oid="2w3nh03"
|
|
>
|
|
{support.title}
|
|
</h1>
|
|
<p
|
|
className="text-xl md:text-2xl text-gray-600 mb-12 font-light max-w-3xl mx-auto"
|
|
data-oid="p5hkz-y"
|
|
>
|
|
{support.subtitle}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Methods */}
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8" data-oid="7xr3drt">
|
|
<div className="max-w-6xl mx-auto" data-oid="tu7tfi.">
|
|
<div className="text-center mb-16" data-oid="qies69n">
|
|
<h2
|
|
className="text-3xl md:text-4xl font-light mb-4 text-gray-900"
|
|
data-oid="g9:2193"
|
|
>
|
|
{support.sections.contact.title}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 font-light" data-oid="ke6h5h6">
|
|
{support.sections.contact.subtitle}
|
|
</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8" data-oid="s3moj-.">
|
|
{support.sections.contact.methods.map((method: any, index: number) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow text-center"
|
|
data-oid="kl17s4s"
|
|
>
|
|
<div className="text-4xl mb-4" data-oid="rzr20u.">
|
|
{method.icon}
|
|
</div>
|
|
<h3
|
|
className="text-xl font-light mb-3 text-gray-900"
|
|
data-oid="67d-vb5"
|
|
>
|
|
{method.title}
|
|
</h3>
|
|
<p className="text-blue-600 font-medium mb-2" data-oid="ge86mew">
|
|
{method.value}
|
|
</p>
|
|
<p className="text-gray-600 font-light text-sm" data-oid="kuk_bv7">
|
|
{method.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Help Resources */}
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50" data-oid="7dgxwml">
|
|
<div className="max-w-6xl mx-auto" data-oid="hha3y0c">
|
|
<div className="text-center mb-16" data-oid="_loxumd">
|
|
<h2
|
|
className="text-3xl md:text-4xl font-light mb-4 text-gray-900"
|
|
data-oid="2mv_dyz"
|
|
>
|
|
{support.sections.resources.title}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 font-light" data-oid="1u6h1y3">
|
|
{support.sections.resources.subtitle}
|
|
</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8" data-oid="2ux8bqc">
|
|
{support.sections.resources.items.map((resource: any, index: number) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow text-center cursor-pointer group"
|
|
data-oid="3yqt3ct"
|
|
>
|
|
<div
|
|
className="text-4xl mb-4 group-hover:scale-110 transition-transform"
|
|
data-oid="nokwcp0"
|
|
>
|
|
{resource.icon}
|
|
</div>
|
|
<h3
|
|
className="text-lg font-light mb-3 text-gray-900 group-hover:text-blue-600 transition-colors"
|
|
data-oid="c2:u7-s"
|
|
>
|
|
{resource.title}
|
|
</h3>
|
|
<p
|
|
className="text-gray-600 font-light text-sm leading-relaxed"
|
|
data-oid="c.eue5q"
|
|
>
|
|
{resource.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ Section */}
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8" data-oid="ky447bf">
|
|
<div className="max-w-4xl mx-auto" data-oid="tyktapc">
|
|
<div className="text-center mb-16" data-oid="-egssn0">
|
|
<h2
|
|
className="text-3xl md:text-4xl font-light mb-4 text-gray-900"
|
|
data-oid="ddj969a"
|
|
>
|
|
{support.sections.faq.title}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 font-light" data-oid="d8nfvq-">
|
|
{support.sections.faq.subtitle}
|
|
</p>
|
|
</div>
|
|
<div className="space-y-6" data-oid="twq73md">
|
|
{support.sections.faq.items.map((item: any, index: number) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white p-6 rounded-lg shadow-sm border border-gray-100"
|
|
data-oid="vpw3zqy"
|
|
>
|
|
<h3
|
|
className="text-lg font-light mb-3 text-gray-900 flex items-center"
|
|
data-oid="-joy1m5"
|
|
>
|
|
<span
|
|
className="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium mr-3"
|
|
data-oid="dh_hhfs"
|
|
>
|
|
Q
|
|
</span>
|
|
{item.question}
|
|
</h3>
|
|
<div className="ml-9" data-oid="x7nwh-6">
|
|
<p
|
|
className="text-gray-600 font-light leading-relaxed"
|
|
data-oid="u_j--72"
|
|
>
|
|
{item.answer}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact CTA */}
|
|
<section
|
|
className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white"
|
|
data-oid="46znakk"
|
|
>
|
|
<div className="max-w-4xl mx-auto text-center" data-oid="qc_rcu2">
|
|
<h2 className="text-3xl md:text-4xl font-light mb-6" data-oid="_cfj:nm">
|
|
{locale === 'en'
|
|
? 'Still Need Help?'
|
|
: locale === 'zh-TW'
|
|
? '仍需要幫助？'
|
|
: '仍需要帮助？'}
|
|
</h2>
|
|
<p className="text-xl font-light mb-8 opacity-90" data-oid="7qhi_:e">
|
|
{locale === 'en'
|
|
? 'Our support team is ready to assist you with any questions or issues.'
|
|
: locale === 'zh-TW'
|
|
? '我們的支援團隊隨時準備協助您解決任何問題。'
|
|
: '我们的支持团队随时准备协助您解决任何问题。'}
|
|
</p>
|
|
<div
|
|
className="flex flex-col sm:flex-row gap-4 justify-center"
|
|
data-oid="_feu0-2"
|
|
>
|
|
<button
|
|
className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors font-light"
|
|
data-oid="cm4d1s6"
|
|
>
|
|
{locale === 'en'
|
|
? 'Contact Support'
|
|
: locale === 'zh-TW'
|
|
? '聯絡支援'
|
|
: '联系支持'}
|
|
</button>
|
|
<button
|
|
className="border border-white text-white px-8 py-3 rounded-lg hover:bg-white hover:text-gray-900 transition-colors font-light"
|
|
data-oid="q6.5vlz"
|
|
>
|
|
{locale === 'en'
|
|
? 'Schedule Call'
|
|
: locale === 'zh-TW'
|
|
? '預約通話'
|
|
: '预约通话'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
);
|
|
}
|