770 lines
37 KiB
TypeScript
770 lines
37 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import SEOHead from '../../../components/SEOHead';
|
|
|
|
// Product icons mapping
|
|
const productIcons = {
|
|
ecs: (
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid=":qi_wdn"
|
|
>
|
|
<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="e7ot:id"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
rds: (
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="f1.4ipz"
|
|
>
|
|
<path
|
|
d="M3 4a1 1 0 000 2v9a2 2 0 002 2h6a2 2 0 002-2V6a1 1 0 100-2H3zm3 2h2v2H6V6zm0 4h2v2H6v-2zm2 4H6v2h2v-2z"
|
|
data-oid="g-ib6xn"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
oss: (
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="ab3d_kg"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M3 17a1 1 0 011-1h12a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-1zM3 7a1 1 0 011-1h12a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1V7zM4 9a1 1 0 011-1h6a1 1 0 110 2H5a1 1 0 01-1-1z"
|
|
clipRule="evenodd"
|
|
data-oid="ss7atzd"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
cdn: (
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="3ovp.4t"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
|
|
clipRule="evenodd"
|
|
data-oid="naqq2-5"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
waf: (
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="mnio4tf"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
data-oid="am.c-50"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
slb: (
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="qb5c3yy"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
|
|
clipRule="evenodd"
|
|
data-oid="45zc5rm"
|
|
/>
|
|
</svg>
|
|
),
|
|
};
|
|
|
|
// Category icons mapping
|
|
const categoryIcons = {
|
|
compute: (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="xkzp1-2"
|
|
>
|
|
<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="mn-kjx-"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
storage: (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="ugd50qu"
|
|
>
|
|
<path
|
|
d="M3 4a1 1 0 000 2v9a2 2 0 002 2h6a2 2 0 002-2V6a1 1 0 100-2H3zm3 2h2v2H6V6zm0 4h2v2H6v-2zm2 4H6v2h2v-2z"
|
|
data-oid="49eea24"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
network: (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="ixq3zn3"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
|
|
clipRule="evenodd"
|
|
data-oid="x:410r4"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
security: (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid=":wppv:a"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
data-oid="fju.vt4"
|
|
/>
|
|
</svg>
|
|
),
|
|
};
|
|
|
|
interface ProductsPageProps {
|
|
params: { locale: string };
|
|
}
|
|
|
|
export default function ProductsPage({ params }: ProductsPageProps) {
|
|
const currentLang = params.locale || 'zh-CN';
|
|
const [translations, setTranslations] = useState<any>({});
|
|
const [commonTranslations, setCommonTranslations] = useState<any>({});
|
|
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 (
|
|
<div
|
|
className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50"
|
|
data-oid="d_7085p"
|
|
>
|
|
<div className="text-center" data-oid="35alwf5">
|
|
<div
|
|
className="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
|
data-oid="rce6i0p"
|
|
></div>
|
|
<p className="text-gray-600" data-oid="2uh99nb">
|
|
Loading...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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 (
|
|
<>
|
|
<SEOHead
|
|
page="products"
|
|
locale={currentLang as 'zh-CN' | 'zh-TW' | 'en'}
|
|
canonicalUrl="/products"
|
|
data-oid="dk89py."
|
|
/>
|
|
|
|
<div
|
|
className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"
|
|
data-oid="48v1z9x"
|
|
>
|
|
{/* Navigation */}
|
|
<nav
|
|
className="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-50"
|
|
data-oid="e-1n5hd"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="49oqm7c">
|
|
<div className="flex justify-between items-center h-16" data-oid="9cyw84:">
|
|
{/* Logo */}
|
|
<Link
|
|
href={`/${currentLang}`}
|
|
className="flex items-center space-x-2"
|
|
data-oid="hep:8uu"
|
|
>
|
|
<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="u54:lah"
|
|
>
|
|
<svg
|
|
className="w-5 h-5 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid=".89px2n"
|
|
>
|
|
<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="yzyqwz9"
|
|
/>
|
|
</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="r-_.a0q"
|
|
>
|
|
CloudTech
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div
|
|
className="hidden md:flex items-center space-x-8"
|
|
data-oid="ldm8wp9"
|
|
>
|
|
<Link
|
|
href={`/${currentLang}`}
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|
data-oid="-a-d.0o"
|
|
>
|
|
{common.nav?.home}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/products`}
|
|
className="text-blue-600 font-medium"
|
|
data-oid="qwqd661"
|
|
>
|
|
{common.nav?.products}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/news`}
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|
data-oid="99fj8mq"
|
|
>
|
|
{common.nav?.news}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/support`}
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|
data-oid="dbeilj5"
|
|
>
|
|
{common.nav?.support}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/about`}
|
|
className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
|
|
data-oid="rgvel20"
|
|
>
|
|
{common.nav?.about}
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Language Switcher & Mobile Menu */}
|
|
<div className="flex items-center space-x-4" data-oid="i4gr:vh">
|
|
<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="f4d53bx"
|
|
>
|
|
<option value="zh-CN" data-oid="4f7e5jj">
|
|
简体中文
|
|
</option>
|
|
<option value="zh-TW" data-oid="kb_044q">
|
|
繁體中文
|
|
</option>
|
|
<option value="en" data-oid="pvuz:49">
|
|
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=".ioh_z3"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="u5jgylm"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
data-oid="ufdwjsw"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isMenuOpen && (
|
|
<div
|
|
className="md:hidden py-4 border-t border-white/20"
|
|
data-oid="socq7mr"
|
|
>
|
|
<div className="flex flex-col space-y-2" data-oid=":p1s4ni">
|
|
<Link
|
|
href={`/${currentLang}`}
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
|
data-oid="nz1axx-"
|
|
>
|
|
{common.nav?.home}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/products`}
|
|
className="px-4 py-2 text-blue-600 bg-blue-50 rounded-lg"
|
|
data-oid="s3-07ud"
|
|
>
|
|
{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="7gzpfj5"
|
|
>
|
|
{common.nav?.news}
|
|
</Link>
|
|
<Link
|
|
href={`/${currentLang}/support`}
|
|
className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
|
|
data-oid="j26hcas"
|
|
>
|
|
{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="bdc2uwh"
|
|
>
|
|
{common.nav?.about}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section with Enhanced Design */}
|
|
<div
|
|
className="relative bg-gradient-to-r from-blue-500 to-purple-600 text-white py-24 overflow-hidden"
|
|
data-oid="khrbt1l"
|
|
>
|
|
{/* Background decorative elements */}
|
|
<div className="absolute inset-0 opacity-10" data-oid=":1vjr6a">
|
|
<div
|
|
className="absolute top-10 left-10 w-20 h-20 bg-white rounded-full"
|
|
data-oid="b992g_9"
|
|
></div>
|
|
<div
|
|
className="absolute top-32 right-20 w-16 h-16 bg-white rounded-full"
|
|
data-oid="h1frtkx"
|
|
></div>
|
|
<div
|
|
className="absolute bottom-20 left-1/4 w-12 h-12 bg-white rounded-full"
|
|
data-oid="yxgf1:f"
|
|
></div>
|
|
<div
|
|
className="absolute bottom-32 right-1/3 w-24 h-24 bg-white rounded-full"
|
|
data-oid="3p1-gzm"
|
|
></div>
|
|
</div>
|
|
|
|
<div
|
|
className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
|
|
data-oid="7ocn0wz"
|
|
>
|
|
<h1
|
|
className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg"
|
|
data-oid="dudgix1"
|
|
>
|
|
{t.title}
|
|
</h1>
|
|
<p
|
|
className="text-xl md:text-2xl opacity-90 max-w-4xl mx-auto mb-8 drop-shadow-md"
|
|
data-oid="7.0197b"
|
|
>
|
|
{t.subtitle}
|
|
</p>
|
|
<div
|
|
className="flex flex-col sm:flex-row gap-4 justify-center"
|
|
data-oid="dwqnwc."
|
|
>
|
|
<button
|
|
className="px-8 py-4 bg-white text-blue-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
|
data-oid="4nph9xs"
|
|
>
|
|
{currentLang === 'en' ? 'Start Free Trial' : '免费试用'}
|
|
</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="wuse411"
|
|
>
|
|
{currentLang === 'en' ? 'View Pricing' : '查看价格'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Category Filter */}
|
|
<div className="py-8 bg-white/50" data-oid="w.pj186">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="tre:2jz">
|
|
<div className="flex flex-wrap justify-center gap-4" data-oid="00wpqmf">
|
|
<button
|
|
onClick={() => setSelectedCategory('all')}
|
|
className={`px-6 py-3 rounded-full font-medium transition-all duration-200 ${
|
|
selectedCategory === 'all'
|
|
? 'bg-blue-500 text-white shadow-lg scale-105'
|
|
: 'bg-white/80 text-gray-700 hover:bg-white hover:shadow-md'
|
|
}`}
|
|
data-oid="e99snw5"
|
|
>
|
|
{currentLang === 'en' ? 'All Products' : '全部产品'}
|
|
</button>
|
|
{Object.entries(t.categories || {}).map(
|
|
([key, category]: [string, any]) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setSelectedCategory(key)}
|
|
className={`px-6 py-3 rounded-full font-medium transition-all duration-200 ${
|
|
selectedCategory === key
|
|
? 'bg-blue-500 text-white shadow-lg scale-105'
|
|
: 'bg-white/80 text-gray-700 hover:bg-white hover:shadow-md'
|
|
}`}
|
|
data-oid="xemqq0d"
|
|
>
|
|
{category.title}
|
|
</button>
|
|
),
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Categories Overview */}
|
|
<div
|
|
className="py-16 bg-gradient-to-b from-white/50 to-transparent"
|
|
data-oid="8v8iuh."
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="vjwey92">
|
|
<div className="text-center mb-12" data-oid="15fdg4.">
|
|
<h2
|
|
className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
|
|
data-oid="yh0xnnp"
|
|
>
|
|
{currentLang === 'en' ? 'Service Categories' : '服务分类'}
|
|
</h2>
|
|
<p
|
|
className="text-xl text-gray-600 max-w-3xl mx-auto"
|
|
data-oid="8v04hg3"
|
|
>
|
|
{currentLang === 'en'
|
|
? 'Comprehensive cloud solutions covering all your business needs'
|
|
: '全面的云计算解决方案，覆盖您的所有业务需求'}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
|
|
data-oid="_7hgpvf"
|
|
>
|
|
{Object.entries(t.categories || {}).map(
|
|
([key, category]: [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 cursor-pointer"
|
|
onClick={() => setSelectedCategory(key)}
|
|
data-oid="kp9v13a"
|
|
>
|
|
<div
|
|
className="w-16 h-16 bg-gradient-to-r from-blue-400 to-purple-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
|
|
data-oid="7xqvqm-"
|
|
>
|
|
{categoryIcons[key as keyof typeof categoryIcons]}
|
|
</div>
|
|
<h3
|
|
className="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors"
|
|
data-oid="566i96d"
|
|
>
|
|
{category.title}
|
|
</h3>
|
|
<p
|
|
className="text-gray-600 leading-relaxed"
|
|
data-oid="ylpxqjd"
|
|
>
|
|
{category.desc}
|
|
</p>
|
|
</div>
|
|
),
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Products Grid */}
|
|
<div className="py-20" data-oid="yddey:h">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="c:_y0cq">
|
|
<div className="text-center mb-12" data-oid="sjnhrj3">
|
|
<h2
|
|
className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
|
|
data-oid="zf5x.5u"
|
|
>
|
|
{selectedCategory === 'all'
|
|
? currentLang === 'en'
|
|
? 'All Products'
|
|
: '全部产品'
|
|
: t.categories?.[selectedCategory]?.title}
|
|
</h2>
|
|
<p className="text-xl text-gray-600" data-oid="gnmhiij">
|
|
{currentLang === 'en'
|
|
? 'Choose the right solution for your business'
|
|
: '为您的业务选择合适的解决方案'}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
data-oid="w_oo0l_"
|
|
>
|
|
{filteredProducts.map(([key, product]: [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="0wnpmx5"
|
|
>
|
|
<div
|
|
className="w-20 h-20 bg-gradient-to-r from-blue-400 to-purple-600 rounded-3xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
|
|
data-oid="low7y7r"
|
|
>
|
|
{productIcons[key as keyof typeof productIcons] || (
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="asjey_m"
|
|
>
|
|
<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="71wtan:"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
<h3
|
|
className="text-2xl font-bold text-gray-900 mb-4 group-hover:text-blue-600 transition-colors"
|
|
data-oid="scwr4pc"
|
|
>
|
|
{product.name}
|
|
</h3>
|
|
<p
|
|
className="text-gray-600 mb-6 leading-relaxed"
|
|
data-oid="z2y7lw:"
|
|
>
|
|
{product.desc}
|
|
</p>
|
|
<div className="space-y-3 mb-8" data-oid="0c5c81p">
|
|
{product.features?.map((feature: string, index: number) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center space-x-3"
|
|
data-oid="8huiubu"
|
|
>
|
|
<div
|
|
className="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex-shrink-0"
|
|
data-oid="1ctccj_"
|
|
></div>
|
|
<span
|
|
className="text-sm text-gray-700 font-medium"
|
|
data-oid="uh71cwc"
|
|
>
|
|
{feature}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex space-x-3" data-oid="gwkycfm">
|
|
<button
|
|
className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
|
data-oid="w:l_09i"
|
|
>
|
|
{common.hero?.learn || 'Learn More'}
|
|
</button>
|
|
<button
|
|
className="px-6 py-3 bg-white border-2 border-blue-500 text-blue-500 rounded-2xl font-semibold hover:bg-blue-50 transition-all duration-200"
|
|
data-oid="f:rt0qp"
|
|
>
|
|
{currentLang === 'en' ? 'Try' : '试用'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Call to Action Section */}
|
|
<div
|
|
className="py-20 bg-gradient-to-r from-blue-500 to-purple-600"
|
|
data-oid="x.9ic8e"
|
|
>
|
|
<div
|
|
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
|
|
data-oid="rd--0y8"
|
|
>
|
|
<h2
|
|
className="text-3xl md:text-4xl font-bold text-white mb-6"
|
|
data-oid="x6nwdf-"
|
|
>
|
|
{currentLang === 'en' ? 'Ready to Get Started?' : '准备开始了吗？'}
|
|
</h2>
|
|
<p
|
|
className="text-xl text-white/90 mb-8 max-w-3xl mx-auto"
|
|
data-oid="j_zelgx"
|
|
>
|
|
{currentLang === 'en'
|
|
? 'Join thousands of companies already using our cloud solutions to transform their business.'
|
|
: '加入已经使用我们云解决方案转型业务的数千家公司。'}
|
|
</p>
|
|
<div
|
|
className="flex flex-col sm:flex-row gap-4 justify-center"
|
|
data-oid="0yweq9b"
|
|
>
|
|
<button
|
|
className="px-8 py-4 bg-white text-blue-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
|
|
data-oid="kkwna:v"
|
|
>
|
|
{currentLang === 'en' ? 'Start Free Trial' : '开始免费试用'}
|
|
</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="8q:3-gw"
|
|
>
|
|
{currentLang === 'en' ? 'Contact Sales' : '联系销售'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-gray-900 text-white py-12" data-oid="--lvq4t">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="_-t2d6-">
|
|
<div className="text-center" data-oid="lc0w7rf">
|
|
<div
|
|
className="flex items-center justify-center space-x-2 mb-4"
|
|
data-oid="60c70n3"
|
|
>
|
|
<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="-x6:sja"
|
|
>
|
|
<svg
|
|
className="w-5 h-5 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
data-oid="jnmdfe6"
|
|
>
|
|
<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="intquc9"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="text-xl font-bold" data-oid="fs8vzv0">
|
|
CloudTech
|
|
</span>
|
|
</div>
|
|
<p className="text-gray-400 mb-8 max-w-2xl mx-auto" data-oid="6l9oa:c">
|
|
{common.footer?.company_desc}
|
|
</p>
|
|
<p className="text-gray-400" data-oid="e5jhu:7">
|
|
{common.footer?.copyright}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|