110 lines
5.6 KiB
TypeScript
110 lines
5.6 KiB
TypeScript
'use client';
|
||
|
||
import { useParams, useRouter } from 'next/navigation';
|
||
import { useState, useEffect } from 'react';
|
||
import PageLayout from '../../../components/PageLayout';
|
||
import Icon from '../../../components/Icon';
|
||
import { content } from '../../../data/content';
|
||
import { productsContent } from '../../../data/pageContent';
|
||
|
||
export default function ProductsPage() {
|
||
const router = useRouter();
|
||
const params = useParams();
|
||
const currentLang = typeof params.lang === 'string' ? params.lang : 'en';
|
||
|
||
// Validate language and redirect if invalid
|
||
useEffect(() => {
|
||
const supportedLangs = ['zh-CN', 'zh-TW', 'en', 'ko', 'ja'];
|
||
if (!supportedLangs.includes(currentLang)) {
|
||
router.push('/en/products');
|
||
}
|
||
}, [currentLang, router]);
|
||
|
||
const currentContent = content[currentLang as keyof typeof content] || content.en;
|
||
const pageContent =
|
||
productsContent[currentLang as keyof typeof productsContent] || productsContent.en;
|
||
|
||
const handleLanguageChange = (lang: string) => {
|
||
router.push(`/${lang}/products`);
|
||
};
|
||
|
||
return (
|
||
<PageLayout
|
||
title={pageContent.title}
|
||
description={pageContent.description}
|
||
keywords={pageContent.keywords}
|
||
currentLang={currentLang}
|
||
currentContent={currentContent}
|
||
handleLanguageChange={handleLanguageChange}
|
||
>
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
{/* Page Header */}
|
||
<div className="text-center mb-16">
|
||
<h1 className="text-4xl font-bold text-gray-900 mb-4">{pageContent.heading}</h1>
|
||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
{pageContent.subheading}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Product Categories */}
|
||
<div className="space-y-16">
|
||
{pageContent.categories.map((category, index) => (
|
||
<div key={index} className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||
<div className="bg-blue-600 text-white px-6 py-4">
|
||
<h2 className="text-2xl font-bold">{category.title}</h2>
|
||
<p className="mt-1">{category.description}</p>
|
||
</div>
|
||
<div className="grid md:grid-cols-3 gap-6 p-6">
|
||
{category.products.map((product, productIndex) => (
|
||
<div
|
||
key={productIndex}
|
||
className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow"
|
||
>
|
||
<div className="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mb-4">
|
||
<Icon name={product.icon} />
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-2">
|
||
{product.name}
|
||
</h3>
|
||
<p className="text-gray-600">{product.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* CTA Section */}
|
||
<div className="mt-16 bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-xl text-white p-8 text-center">
|
||
<h2 className="text-3xl font-bold mb-4">{currentContent.hero.cta}</h2>
|
||
<p className="text-lg mb-6 max-w-2xl mx-auto">
|
||
{currentLang === 'en'
|
||
? 'Contact our AWS experts to discuss your specific cloud computing needs and requirements.'
|
||
: currentLang === 'zh-CN'
|
||
? '联系我们的AWS专家，讨论您的特定云计算需求和要求。'
|
||
: currentLang === 'zh-TW'
|
||
? '聯繫我們的AWS專家，討論您的特定雲計算需求和要求。'
|
||
: currentLang === 'ko'
|
||
? 'AWS 전문가에게 문의하여 특정 클라우드 컴퓨팅 요구 사항에 대해 논의하세요.'
|
||
: '特定のクラウドコンピューティングのニーズと要件について、AWS専門家にお問い合わせください。'}
|
||
</p>
|
||
<button
|
||
onClick={() => router.push(`/${currentLang}/contact`)}
|
||
className="bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors"
|
||
>
|
||
{currentLang === 'en'
|
||
? 'Contact Us'
|
||
: currentLang === 'zh-CN'
|
||
? '联系我们'
|
||
: currentLang === 'zh-TW'
|
||
? '聯繫我們'
|
||
: currentLang === 'ko'
|
||
? '문의하기'
|
||
: 'お問い合わせ'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</PageLayout>
|
||
);
|
||
}
|