540 lines
24 KiB
TypeScript
540 lines
24 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { Navigation } from '../../../components/Navigation';
|
||
import { Footer } from '../../../components/Footer';
|
||
import { Head } from '../../../components/Head';
|
||
import { HardDrive, Shield, Zap, Globe, Code, BarChart3, Check, Star } from 'lucide-react';
|
||
|
||
export default function OSSPage() {
|
||
const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');
|
||
|
||
const translations = {
|
||
zh: {
|
||
title: '对象存储 OSS - 海量云存储服务 | CloudPro',
|
||
description:
|
||
'安全可靠的对象存储OSS，提供海量、安全、低成本的云存储服务，支持多种存储类型，适用于网站、移动应用、备份归档等场景。',
|
||
keywords: '对象存储,OSS,云存储,文件存储,数据备份',
|
||
nav: {
|
||
home: '首页',
|
||
products: '产品',
|
||
solutions: '解决方案',
|
||
support: '支持',
|
||
contact: '联系我们',
|
||
},
|
||
hero: {
|
||
title: '对象存储 OSS',
|
||
subtitle: '海量云存储服务',
|
||
description: '提供安全、可靠、低成本的海量云存储服务，支持任意类型文件的存储和访问',
|
||
},
|
||
features: [
|
||
{
|
||
icon: HardDrive,
|
||
title: '海量存储',
|
||
description: '支持EB级别的存储容量，无需担心存储空间不足',
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: '数据安全',
|
||
description: '99.999999999%的数据可靠性，多重备份保障数据安全',
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: '高性能访问',
|
||
description: '毫秒级响应，支持高并发访问，CDN加速全球访问',
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: '全球部署',
|
||
description: '多地域部署，就近存储和访问，降低延迟',
|
||
},
|
||
{
|
||
icon: Code,
|
||
title: 'API接口',
|
||
description: '丰富的API接口和SDK，轻松集成到应用中',
|
||
},
|
||
{
|
||
icon: BarChart3,
|
||
title: '智能分析',
|
||
description: '提供存储分析和访问统计，优化存储成本',
|
||
},
|
||
],
|
||
|
||
storageTypes: [
|
||
{
|
||
name: '标准存储',
|
||
description: '适合频繁访问的热点数据',
|
||
features: ['毫秒级访问', '99.99%可用性', '适合网站、应用'],
|
||
price: '¥0.12/GB/月',
|
||
},
|
||
{
|
||
name: '低频访问',
|
||
description: '适合不频繁访问但需要快速获取的数据',
|
||
features: ['毫秒级访问', '较低存储成本', '适合备份、归档'],
|
||
price: '¥0.08/GB/月',
|
||
},
|
||
{
|
||
name: '归档存储',
|
||
description: '适合长期保存的归档数据',
|
||
features: ['超低成本', '分钟级恢复', '适合合规、备份'],
|
||
price: '¥0.03/GB/月',
|
||
},
|
||
{
|
||
name: '冷归档',
|
||
description: '适合极少访问的冷数据',
|
||
features: ['极低成本', '小时级恢复', '适合长期归档'],
|
||
price: '¥0.01/GB/月',
|
||
},
|
||
],
|
||
|
||
useCases: [
|
||
{
|
||
title: '网站和应用',
|
||
description: '存储网站静态资源、用户上传文件',
|
||
icon: Globe,
|
||
},
|
||
{
|
||
title: '数据备份',
|
||
description: '企业数据备份和灾难恢复',
|
||
icon: Shield,
|
||
},
|
||
{
|
||
title: '内容分发',
|
||
description: '配合CDN进行全球内容分发',
|
||
icon: Zap,
|
||
},
|
||
{
|
||
title: '大数据分析',
|
||
description: '存储大数据分析的原始数据',
|
||
icon: BarChart3,
|
||
},
|
||
],
|
||
},
|
||
'zh-tw': {
|
||
title: '物件儲存 OSS - 海量雲儲存服務 | CloudPro',
|
||
description:
|
||
'安全可靠的物件儲存OSS，提供海量、安全、低成本的雲儲存服務，支援多種儲存類型，適用於網站、行動應用、備份歸檔等場景。',
|
||
keywords: '物件儲存,OSS,雲儲存,檔案儲存,資料備份',
|
||
nav: {
|
||
home: '首頁',
|
||
products: '產品',
|
||
solutions: '解決方案',
|
||
support: '支援',
|
||
contact: '聯絡我們',
|
||
},
|
||
hero: {
|
||
title: '物件儲存 OSS',
|
||
subtitle: '海量雲儲存服務',
|
||
description: '提供安全、可靠、低成本的海量雲儲存服務，支援任意類型檔案的儲存和存取',
|
||
},
|
||
features: [
|
||
{
|
||
icon: HardDrive,
|
||
title: '海量儲存',
|
||
description: '支援EB級別的儲存容量，無需擔心儲存空間不足',
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: '資料安全',
|
||
description: '99.999999999%的資料可靠性，多重備份保障資料安全',
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: '高效能存取',
|
||
description: '毫秒級回應，支援高併發存取，CDN加速全球存取',
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: '全球部署',
|
||
description: '多地域部署，就近儲存和存取，降低延遲',
|
||
},
|
||
{
|
||
icon: Code,
|
||
title: 'API介面',
|
||
description: '豐富的API介面和SDK，輕鬆整合到應用中',
|
||
},
|
||
{
|
||
icon: BarChart3,
|
||
title: '智慧分析',
|
||
description: '提供儲存分析和存取統計，優化儲存成本',
|
||
},
|
||
],
|
||
|
||
storageTypes: [
|
||
{
|
||
name: '標準儲存',
|
||
description: '適合頻繁存取的熱點資料',
|
||
features: ['毫秒級存取', '99.99%可用性', '適合網站、應用'],
|
||
price: 'NT$3.6/GB/月',
|
||
},
|
||
{
|
||
name: '低頻存取',
|
||
description: '適合不頻繁存取但需要快速獲取的資料',
|
||
features: ['毫秒級存取', '較低儲存成本', '適合備份、歸檔'],
|
||
price: 'NT$2.4/GB/月',
|
||
},
|
||
{
|
||
name: '歸檔儲存',
|
||
description: '適合長期保存的歸檔資料',
|
||
features: ['超低成本', '分鐘級恢復', '適合合規、備份'],
|
||
price: 'NT$0.9/GB/月',
|
||
},
|
||
{
|
||
name: '冷歸檔',
|
||
description: '適合極少存取的冷資料',
|
||
features: ['極低成本', '小時級恢復', '適合長期歸檔'],
|
||
price: 'NT$0.3/GB/月',
|
||
},
|
||
],
|
||
|
||
useCases: [
|
||
{
|
||
title: '網站和應用',
|
||
description: '儲存網站靜態資源、用戶上傳檔案',
|
||
icon: Globe,
|
||
},
|
||
{
|
||
title: '資料備份',
|
||
description: '企業資料備份和災難恢復',
|
||
icon: Shield,
|
||
},
|
||
{
|
||
title: '內容分發',
|
||
description: '配合CDN進行全球內容分發',
|
||
icon: Zap,
|
||
},
|
||
{
|
||
title: '大數據分析',
|
||
description: '儲存大數據分析的原始資料',
|
||
icon: BarChart3,
|
||
},
|
||
],
|
||
},
|
||
en: {
|
||
title: 'Object Storage OSS - Massive Cloud Storage Service | CloudPro',
|
||
description:
|
||
'Secure and reliable Object Storage OSS providing massive, secure, low-cost cloud storage service with multiple storage types for websites, mobile apps, backup and archival scenarios.',
|
||
keywords: 'object storage,OSS,cloud storage,file storage,data backup',
|
||
nav: {
|
||
home: 'Home',
|
||
products: 'Products',
|
||
solutions: 'Solutions',
|
||
support: 'Support',
|
||
contact: 'Contact',
|
||
},
|
||
hero: {
|
||
title: 'Object Storage OSS',
|
||
subtitle: 'Massive Cloud Storage Service',
|
||
description:
|
||
'Secure, reliable, and cost-effective massive cloud storage service supporting storage and access of any file type',
|
||
},
|
||
features: [
|
||
{
|
||
icon: HardDrive,
|
||
title: 'Massive Storage',
|
||
description:
|
||
'Support EB-level storage capacity without worrying about storage space',
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: 'Data Security',
|
||
description:
|
||
'99.999999999% data reliability with multiple backups ensuring data security',
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: 'High Performance Access',
|
||
description:
|
||
'Millisecond response with high concurrency support and CDN acceleration for global access',
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: 'Global Deployment',
|
||
description:
|
||
'Multi-region deployment for nearby storage and access, reducing latency',
|
||
},
|
||
{
|
||
icon: Code,
|
||
title: 'API Interface',
|
||
description:
|
||
'Rich API interfaces and SDKs for easy integration into applications',
|
||
},
|
||
{
|
||
icon: BarChart3,
|
||
title: 'Smart Analytics',
|
||
description:
|
||
'Provide storage analytics and access statistics to optimize storage costs',
|
||
},
|
||
],
|
||
|
||
storageTypes: [
|
||
{
|
||
name: 'Standard Storage',
|
||
description: 'For frequently accessed hot data',
|
||
features: ['Millisecond access', '99.99% availability', 'For websites, apps'],
|
||
price: '$0.02/GB/month',
|
||
},
|
||
{
|
||
name: 'Infrequent Access',
|
||
description: 'For infrequently accessed but quickly retrievable data',
|
||
features: ['Millisecond access', 'Lower storage cost', 'For backup, archival'],
|
||
price: '$0.012/GB/month',
|
||
},
|
||
{
|
||
name: 'Archive Storage',
|
||
description: 'For long-term archival data',
|
||
features: ['Ultra-low cost', 'Minute-level recovery', 'For compliance, backup'],
|
||
price: '$0.004/GB/month',
|
||
},
|
||
{
|
||
name: 'Cold Archive',
|
||
description: 'For rarely accessed cold data',
|
||
features: [
|
||
'Extremely low cost',
|
||
'Hour-level recovery',
|
||
'For long-term archival',
|
||
],
|
||
|
||
price: '$0.0015/GB/month',
|
||
},
|
||
],
|
||
|
||
useCases: [
|
||
{
|
||
title: 'Websites & Apps',
|
||
description: 'Store website static resources and user uploaded files',
|
||
icon: Globe,
|
||
},
|
||
{
|
||
title: 'Data Backup',
|
||
description: 'Enterprise data backup and disaster recovery',
|
||
icon: Shield,
|
||
},
|
||
{
|
||
title: 'Content Distribution',
|
||
description: 'Global content distribution with CDN',
|
||
icon: Zap,
|
||
},
|
||
{
|
||
title: 'Big Data Analytics',
|
||
description: 'Store raw data for big data analytics',
|
||
icon: BarChart3,
|
||
},
|
||
],
|
||
},
|
||
};
|
||
|
||
const t = translations[currentLang];
|
||
|
||
useEffect(() => {
|
||
const browserLang = navigator.language.toLowerCase();
|
||
if (browserLang.includes('en')) {
|
||
setCurrentLang('en');
|
||
} else if (browserLang.includes('zh-tw') || browserLang.includes('zh-hk')) {
|
||
setCurrentLang('zh-tw');
|
||
}
|
||
}, []);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-amber-50 to-yellow-50">
|
||
<Head
|
||
title={t.title}
|
||
description={t.description}
|
||
keywords={t.keywords}
|
||
currentLang={currentLang}
|
||
/>
|
||
|
||
<Navigation
|
||
currentLang={currentLang}
|
||
onLanguageChange={setCurrentLang}
|
||
translations={translations}
|
||
/>
|
||
|
||
{/* Hero Section */}
|
||
<section className="bg-gradient-to-r from-amber-900 to-yellow-800 text-white py-20">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center">
|
||
<h1 className="text-4xl md:text-5xl font-bold mb-6">{t.hero.title}</h1>
|
||
<p className="text-xl md:text-2xl text-yellow-100 mb-8">
|
||
{t.hero.subtitle}
|
||
</p>
|
||
<p className="text-lg text-yellow-200 max-w-3xl mx-auto">
|
||
{t.hero.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Features Section */}
|
||
<section className="py-20">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{t.features.map((feature, index) => {
|
||
const IconComponent = feature.icon;
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-200"
|
||
>
|
||
<div className="w-12 h-12 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center mb-6">
|
||
<IconComponent className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-amber-900 mb-4">
|
||
{feature.title}
|
||
</h3>
|
||
<p className="text-amber-700 leading-relaxed">
|
||
{feature.description}
|
||
</p>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Storage Types */}
|
||
<section className="py-20 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl md:text-4xl font-bold text-amber-900 mb-4">
|
||
{currentLang === 'zh'
|
||
? '存储类型'
|
||
: currentLang === 'zh-tw'
|
||
? '儲存類型'
|
||
: 'Storage Types'}
|
||
</h2>
|
||
<p className="text-xl text-amber-700">
|
||
{currentLang === 'zh'
|
||
? '根据访问频率选择最经济的存储类型'
|
||
: currentLang === 'zh-tw'
|
||
? '根據存取頻率選擇最經濟的儲存類型'
|
||
: 'Choose the most economical storage type based on access frequency'}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
{t.storageTypes.map((type, index) => (
|
||
<div
|
||
key={index}
|
||
className="bg-gradient-to-br from-amber-50 to-yellow-50 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-200"
|
||
>
|
||
<h3 className="text-xl font-bold text-amber-900 mb-3">
|
||
{type.name}
|
||
</h3>
|
||
<p className="text-amber-700 mb-4 text-sm">{type.description}</p>
|
||
|
||
<div className="mb-4">
|
||
{type.features.map((feature, featureIndex) => (
|
||
<div key={featureIndex} className="flex items-center mb-2">
|
||
<Check className="w-3 h-3 text-green-500 mr-2 flex-shrink-0" />
|
||
|
||
<span className="text-amber-700 text-sm">
|
||
{feature}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-amber-600 mb-2">
|
||
{type.price}
|
||
</div>
|
||
<button className="w-full bg-gradient-to-r from-amber-500 to-yellow-500 text-white py-2 px-4 rounded-lg text-sm font-semibold hover:from-amber-600 hover:to-yellow-600 transition-all duration-200">
|
||
{currentLang === 'zh'
|
||
? '选择'
|
||
: currentLang === 'zh-tw'
|
||
? '選擇'
|
||
: 'Select'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Use Cases */}
|
||
<section className="py-20">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl md:text-4xl font-bold text-amber-900 mb-4">
|
||
{currentLang === 'zh'
|
||
? '应用场景'
|
||
: currentLang === 'zh-tw'
|
||
? '應用場景'
|
||
: 'Use Cases'}
|
||
</h2>
|
||
<p className="text-xl text-amber-700">
|
||
{currentLang === 'zh'
|
||
? '适用于各种业务场景的存储需求'
|
||
: currentLang === 'zh-tw'
|
||
? '適用於各種業務場景的儲存需求'
|
||
: 'Storage solutions for various business scenarios'}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
{t.useCases.map((useCase, index) => {
|
||
const IconComponent = useCase.icon;
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="text-center p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-200"
|
||
>
|
||
<div className="w-16 h-16 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-white" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-amber-900 mb-4">
|
||
{useCase.title}
|
||
</h3>
|
||
<p className="text-amber-700 leading-relaxed">
|
||
{useCase.description}
|
||
</p>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-20 bg-gradient-to-r from-amber-900 to-yellow-800 text-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-6">
|
||
{currentLang === 'zh'
|
||
? '立即开始使用对象存储'
|
||
: currentLang === 'zh-tw'
|
||
? '立即開始使用物件儲存'
|
||
: 'Start Using Object Storage Now'}
|
||
</h2>
|
||
<p className="text-xl text-yellow-100 mb-8 max-w-2xl mx-auto">
|
||
{currentLang === 'zh'
|
||
? '注册即可获得免费存储额度，体验高性能云存储服务'
|
||
: currentLang === 'zh-tw'
|
||
? '註冊即可獲得免費儲存額度，體驗高效能雲儲存服務'
|
||
: 'Register now to get free storage quota and experience high-performance cloud storage'}
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<button className="bg-yellow-500 hover:bg-yellow-600 text-white px-8 py-4 rounded-lg text-lg font-semibold transition-all duration-200 transform hover:scale-105">
|
||
{currentLang === 'zh'
|
||
? '免费试用'
|
||
: currentLang === 'zh-tw'
|
||
? '免費試用'
|
||
: 'Free Trial'}
|
||
</button>
|
||
<button className="border-2 border-white text-white hover:bg-white hover:text-amber-900 px-8 py-4 rounded-lg text-lg font-semibold transition-all duration-200">
|
||
{currentLang === 'zh'
|
||
? '查看文档'
|
||
: currentLang === 'zh-tw'
|
||
? '查看文件'
|
||
: 'View Documentation'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer currentLang={currentLang} translations={translations} />
|
||
</div>
|
||
);
|
||
}
|