'use client'; import { useState, useEffect } from 'react'; import Link from 'next/link'; import SEOHead from '../../../components/SEOHead'; // Product icons mapping const productIcons = { ecs: ( ), rds: ( ), oss: ( ), cdn: ( ), waf: ( ), slb: ( ), }; // Category icons mapping const categoryIcons = { compute: ( ), storage: ( ), network: ( ), security: ( ), }; interface ProductsPageProps { params: { locale: string }; } export default function ProductsPage({ params }: ProductsPageProps) { const currentLang = params.locale || 'zh-CN'; const [translations, setTranslations] = useState({}); const [commonTranslations, setCommonTranslations] = useState({}); const [loading, setLoading] = useState(true); const [selectedCategory, setSelectedCategory] = useState('all'); const [isMenuOpen, setIsMenuOpen] = useState(false); useEffect(() => { const loadTranslations = async () => { try { const [productsRes, commonRes] = await Promise.all([ fetch(`/locales/${currentLang}/products.json`), fetch(`/locales/${currentLang}/common.json`), ]); const [productsData, commonData] = await Promise.all([ productsRes.json(), commonRes.json(), ]); setTranslations(productsData); setCommonTranslations(commonData); setLoading(false); } catch (error) { console.error('Failed to load translations:', error); setLoading(false); } }; loadTranslations(); }, [currentLang]); if (loading) { return (

Loading...

); } const t = translations; const common = commonTranslations; // Filter products by category const filteredProducts = selectedCategory === 'all' ? Object.entries(t.products || {}) : Object.entries(t.products || {}).filter(([key]) => { // Map products to categories const categoryMap: { [key: string]: string } = { ecs: 'compute', rds: 'storage', oss: 'storage', cdn: 'network', waf: 'security', slb: 'network', }; return categoryMap[key] === selectedCategory; }); return ( <>
{/* Navigation */} {/* Hero Section with Enhanced Design */}
{/* Background decorative elements */}

{t.title}

{t.subtitle}

{/* Category Filter */}
{Object.entries(t.categories || {}).map( ([key, category]: [string, any]) => ( ), )}
{/* Categories Overview */}

{currentLang === 'en' ? 'Service Categories' : '服务分类'}

{currentLang === 'en' ? 'Comprehensive cloud solutions covering all your business needs' : '全面的云计算解决方案，覆盖您的所有业务需求'}

{Object.entries(t.categories || {}).map( ([key, category]: [string, any]) => (
setSelectedCategory(key)} data-oid="kp9v13a" >
{categoryIcons[key as keyof typeof categoryIcons]}

{category.title}

{category.desc}

), )}
{/* Products Grid */}

{selectedCategory === 'all' ? currentLang === 'en' ? 'All Products' : '全部产品' : t.categories?.[selectedCategory]?.title}

{currentLang === 'en' ? 'Choose the right solution for your business' : '为您的业务选择合适的解决方案'}

{filteredProducts.map(([key, product]: [string, any]) => (
{productIcons[key as keyof typeof productIcons] || ( )}

{product.name}

{product.desc}

{product.features?.map((feature: string, index: number) => (
{feature}
))}
))}
{/* Call to Action Section */}

{currentLang === 'en' ? 'Ready to Get Started?' : '准备开始了吗？'}

{currentLang === 'en' ? 'Join thousands of companies already using our cloud solutions to transform their business.' : '加入已经使用我们云解决方案转型业务的数千家公司。'}

{/* Footer */}
); }