267 lines
13 KiB
TypeScript
267 lines
13 KiB
TypeScript
|
import { getTranslations, Locale, getNavigationPaths } from '@/lib/i18n';
|
||
|
|
import { generateMetadata as generateSEOMetadata } from '@/lib/seo';
|
||
|
|
import Layout from '@/components/Layout';
|
||
|
|
|
||
|
|
interface ProductsPageProps {
|
||
|
|
params: {
|
||
|
|
locale: Locale;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export async function generateStaticParams() {
|
||
|
|
const locales = ['zh-CN', 'zh-TW', 'en'];
|
||
|
|
return locales.map((locale) => ({
|
||
|
|
locale,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
export async function generateMetadata({ params }: ProductsPageProps) {
|
||
|
|
return generateSEOMetadata(params.locale, 'products');
|
||
|
|
}
|
||
|
|
|
||
|
|
export default async function ProductsPage({ params }: ProductsPageProps) {
|
||
|
|
const { locale } = params;
|
||
|
|
const [common, products] = await Promise.all([
|
||
|
|
getTranslations(locale, 'common'),
|
||
|
|
getTranslations(locale, 'products'),
|
||
|
|
]);
|
||
|
|
|
||
|
|
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="gyz1ylb">
|
||
|
|
{/* 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="w78w6n1"
|
||
|
|
>
|
||
|
|
<div className="max-w-4xl mx-auto text-center" data-oid="qed-6ck">
|
||
|
|
<h1
|
||
|
|
className="text-4xl md:text-6xl font-light leading-tight mb-8 text-gray-900"
|
||
|
|
data-oid="0qyfsz9"
|
||
|
|
>
|
||
|
|
{products.title}
|
||
|
|
</h1>
|
||
|
|
<p
|
||
|
|
className="text-xl md:text-2xl text-gray-600 mb-12 font-light max-w-3xl mx-auto"
|
||
|
|
data-oid="9fpzlrh"
|
||
|
|
>
|
||
|
|
{products.subtitle}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Categories Section */}
|
||
|
|
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white" data-oid="1zebg6q">
|
||
|
|
<div className="max-w-6xl mx-auto" data-oid="9umo9-6">
|
||
|
|
<div className="text-center mb-12" data-oid="t1f7o-t">
|
||
|
|
<h2 className="text-3xl font-light mb-4 text-gray-900" data-oid="64l9n6c">
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Service Categories'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '服務類別'
|
||
|
|
: '服务类别'}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6" data-oid=".gn5nfr">
|
||
|
|
{products.categories.map((category: any, index: number) => (
|
||
|
|
<div
|
||
|
|
key={category.id}
|
||
|
|
className="text-center p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
|
||
|
|
data-oid="iv_2ed8"
|
||
|
|
>
|
||
|
|
<div className="text-4xl mb-4" data-oid="tyq6p2w">
|
||
|
|
{category.icon}
|
||
|
|
</div>
|
||
|
|
<h3
|
||
|
|
className="text-lg font-light mb-2 text-gray-900"
|
||
|
|
data-oid="q1z7z1_"
|
||
|
|
>
|
||
|
|
{category.name}
|
||
|
|
</h3>
|
||
|
|
<p className="text-gray-600 font-light text-sm" data-oid="xl3fv7e">
|
||
|
|
{category.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Products Grid */}
|
||
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50" data-oid="qeuq_-:">
|
||
|
|
<div className="max-w-6xl mx-auto" data-oid="oh:6vdi">
|
||
|
|
<div className="text-center mb-16" data-oid=".vcnoeu">
|
||
|
|
<h2
|
||
|
|
className="text-3xl md:text-4xl font-light mb-4 text-gray-900"
|
||
|
|
data-oid="uadz:hj"
|
||
|
|
>
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Our Solutions'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '我們的解決方案'
|
||
|
|
: '我们的解决方案'}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8" data-oid="rxvkzz0">
|
||
|
|
{products.items.map((product: any, index: number) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="bg-white rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden group hover:-translate-y-1"
|
||
|
|
data-oid="pfuhhev"
|
||
|
|
>
|
||
|
|
{/* Product Icon/Image */}
|
||
|
|
<div
|
||
|
|
className="h-48 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center"
|
||
|
|
data-oid="tmootoi"
|
||
|
|
>
|
||
|
|
<span className="text-6xl" data-oid="bou76:j">
|
||
|
|
{product.icon || '💼'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-6" data-oid="sevoy96">
|
||
|
|
<h3
|
||
|
|
className="text-xl font-light mb-3 text-gray-900 group-hover:text-blue-600 transition-colors"
|
||
|
|
data-oid="0:6.pf7"
|
||
|
|
>
|
||
|
|
{product.title}
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
className="text-gray-600 font-light leading-relaxed mb-4 text-sm"
|
||
|
|
data-oid="zr62xye"
|
||
|
|
>
|
||
|
|
{product.description}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Features */}
|
||
|
|
<div className="mb-6" data-oid="7f0q-g0">
|
||
|
|
<h4
|
||
|
|
className="text-sm font-medium text-gray-900 mb-2"
|
||
|
|
data-oid="4rx:_c5"
|
||
|
|
>
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Key Features:'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '主要功能：'
|
||
|
|
: '主要功能：'}
|
||
|
|
</h4>
|
||
|
|
<div className="flex flex-wrap gap-2" data-oid="i5a_c6v">
|
||
|
|
{product.features
|
||
|
|
.slice(0, 4)
|
||
|
|
.map((feature: string, featureIndex: number) => (
|
||
|
|
<span
|
||
|
|
key={featureIndex}
|
||
|
|
className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
|
||
|
|
data-oid="659zawc"
|
||
|
|
>
|
||
|
|
{feature}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
{product.features.length > 4 && (
|
||
|
|
<span
|
||
|
|
className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full"
|
||
|
|
data-oid="47o4wca"
|
||
|
|
>
|
||
|
|
+{product.features.length - 4}{' '}
|
||
|
|
{locale === 'en'
|
||
|
|
? 'more'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '更多'
|
||
|
|
: '更多'}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* CTA Button */}
|
||
|
|
<button
|
||
|
|
className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-light"
|
||
|
|
data-oid="ig90.fv"
|
||
|
|
>
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Learn More'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '了解更多'
|
||
|
|
: '了解更多'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* CTA Section */}
|
||
|
|
<section
|
||
|
|
className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white"
|
||
|
|
data-oid="bp05uvo"
|
||
|
|
>
|
||
|
|
<div className="max-w-4xl mx-auto text-center" data-oid="skrviw7">
|
||
|
|
<h2 className="text-3xl md:text-4xl font-light mb-6" data-oid="_dv23f0">
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Ready to Transform Your Business?'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '準備好轉型您的業務了嗎？'
|
||
|
|
: '准备好转型您的业务了吗？'}
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl font-light mb-8 opacity-90" data-oid=":qjk4nd">
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Contact our experts to discuss your specific needs and get a customized solution.'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '聯絡我們的專家討論您的具體需求，獲得客製化解決方案。'
|
||
|
|
: '联系我们的专家讨论您的具体需求，获得定制化解决方案。'}
|
||
|
|
</p>
|
||
|
|
<div
|
||
|
|
className="flex flex-col sm:flex-row gap-4 justify-center"
|
||
|
|
data-oid="_m7xjky"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors font-light"
|
||
|
|
data-oid="m1p0dgi"
|
||
|
|
>
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Get Started'
|
||
|
|
: 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=".31hjbd"
|
||
|
|
>
|
||
|
|
{locale === 'en'
|
||
|
|
? 'Schedule Consultation'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '預約諮詢'
|
||
|
|
: '预约咨询'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</Layout>
|
||
|
|
);
|
||
|
|
}
|