893 lines
37 KiB
TypeScript
893 lines
37 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
// Icon components using Google Material Icons style
|
|
const ComputeIcon = () => (
|
|
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid=":uqtrc0">
|
|
<path
|
|
d="M20,18c1.1,0,2-0.9,2-2V6c0-1.1-0.9-2-2-2H4C2.9,4,2,4.9,2,6v10c0,1.1,0.9,2,2,2H0v2h24v-2H20z M4,6h16v10H4V6z"
|
|
data-oid="mb.r3ux"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const ServerlessIcon = () => (
|
|
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="z-jvetb">
|
|
<path
|
|
d="M12,2L13.09,8.26L22,9L13.09,9.74L12,16L10.91,9.74L2,9L10.91,8.26L12,2M12,21L10.91,14.74L2,14L10.91,13.26L12,7L13.09,13.26L22,14L13.09,14.74L12,21Z"
|
|
data-oid="un4jkzr"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const ContainerIcon = () => (
|
|
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="2ntaum4">
|
|
<path
|
|
d="M2,3H8V5H16V3H22V9H16V7H8V9H2V3M2,10H8V12H16V10H22V16H16V14H8V16H2V10M2,17H8V19H16V17H22V23H16V21H8V23H2V17Z"
|
|
data-oid="c7iye:-"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const StorageIcon = () => (
|
|
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="fjq7.:i">
|
|
<path
|
|
d="M4,6V4H20V6H4M20,18A2,2 0 0,0 22,16V8A2,2 0 0,0 20,6H4A2,2 0 0,0 2,8V16A2,2 0 0,0 4,18H20M4,8H20V16H4V8Z"
|
|
data-oid="pdefuu3"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const DatabaseIcon = () => (
|
|
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="3wuep.a">
|
|
<path
|
|
d="M12,3C7.58,3 4,4.79 4,7C4,9.21 7.58,11 12,11C16.42,11 20,9.21 20,7C20,4.79 16.42,3 12,3M4,9V12C4,14.21 7.58,16 12,16C16.42,16 20,14.21 20,12V9C20,11.21 16.42,13 12,13C7.58,13 4,11.21 4,9M4,14V17C4,19.21 7.58,21 12,21C16.42,21 20,19.21 20,17V14C20,16.21 16.42,18 12,18C7.58,18 4,16.21 4,14Z"
|
|
data-oid="h9vvsrk"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const CacheIcon = () => (
|
|
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="97fj9u1">
|
|
<path
|
|
d="M12,16A3,3 0 0,1 9,13C9,11.88 9.61,10.9 10.5,10.39L20.21,4.77L21.32,6.11L10.21,12.83A1,1 0 0,0 10,13A1,1 0 0,0 11,14A1,1 0 0,0 12,13A1,1 0 0,0 11,12A1,1 0 0,0 10.5,12.17L19.32,6.89L20.43,8.22L12,13.7A3,3 0 0,1 12,16M6,19A3,3 0 0,1 3,16C3,14.88 3.61,13.9 4.5,13.39L14.21,7.77L15.32,9.11L4.21,15.83A1,1 0 0,0 4,16A1,1 0 0,0 5,17A1,1 0 0,0 6,16A1,1 0 0,0 5,15A1,1 0 0,0 4.5,15.17L13.32,9.89L14.43,11.22L6,16.7A3,3 0 0,1 6,19Z"
|
|
data-oid="d4nc1te"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const AIIcon = () => (
|
|
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="-5xxuu3">
|
|
<path
|
|
d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z"
|
|
data-oid="o3v27ff"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const VisionIcon = () => (
|
|
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="_9bqctn">
|
|
<path
|
|
d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
|
|
data-oid="_.c3ww_"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const TextIcon = () => (
|
|
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="pn5z:ed">
|
|
<path
|
|
d="M18.5,4L19.66,8.35L24,9.5L19.66,10.65L18.5,15L17.34,10.65L13,9.5L17.34,8.35L18.5,4M12.5,11L14,17.5L20.5,19L14,20.5L12.5,27L11,20.5L4.5,19L11,17.5L12.5,11M6.5,2L7.66,6.35L12,7.5L7.66,8.65L6.5,13L5.34,8.65L1,7.5L5.34,6.35L6.5,2Z"
|
|
data-oid="pwbv4kz"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const FileIcon = () => (
|
|
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="gl6vj8l">
|
|
<path
|
|
d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
|
|
data-oid="q2n1_b:"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
// Icon mapping
|
|
const getProductIcon = (productName: string) => {
|
|
const iconMap: { [key: string]: JSX.Element } = {
|
|
'Amazon EC2': <ComputeIcon data-oid="kxjwrys" />,
|
|
'AWS Lambda': <ServerlessIcon data-oid="70.3y.d" />,
|
|
'Amazon ECS': <ContainerIcon data-oid="kt:t4s8" />,
|
|
'Amazon S3': <StorageIcon data-oid="isfclnf" />,
|
|
'Amazon EBS': <StorageIcon data-oid="r1wo4._" />,
|
|
'Amazon EFS': <FileIcon data-oid="smjn1sy" />,
|
|
'Amazon RDS': <DatabaseIcon data-oid="-2p7x9e" />,
|
|
'Amazon DynamoDB': <DatabaseIcon data-oid=".u:.rph" />,
|
|
'Amazon ElastiCache': <CacheIcon data-oid="ubu8a97" />,
|
|
'Amazon SageMaker': <AIIcon data-oid="efcyyex" />,
|
|
'Amazon Rekognition': <VisionIcon data-oid="ek8fbjm" />,
|
|
'Amazon Comprehend': <TextIcon data-oid="0_2pelu" />,
|
|
};
|
|
|
|
return iconMap[productName] || <ComputeIcon data-oid="h:ij85s" />;
|
|
};
|
|
|
|
interface AWSProductsSectionProps {
|
|
currentLang: string;
|
|
}
|
|
|
|
export default function AWSProductsSection({ currentLang }: AWSProductsSectionProps) {
|
|
const [activeCategory, setActiveCategory] = useState('compute');
|
|
|
|
const content = {
|
|
'zh-CN': {
|
|
title: 'AWS 主流产品',
|
|
subtitle: '全面的云计算服务产品组合',
|
|
categories: {
|
|
compute: '计算服务',
|
|
storage: '存储服务',
|
|
database: '数据库服务',
|
|
ai: 'AI/ML服务',
|
|
},
|
|
products: {
|
|
compute: [
|
|
{
|
|
name: 'Amazon EC2',
|
|
description: '可扩展的云计算容量',
|
|
features: ['按需付费', '多种实例类型', '全球部署', '高可用性'],
|
|
icon: 'Amazon EC2',
|
|
},
|
|
{
|
|
name: 'AWS Lambda',
|
|
description: '无服务器计算服务',
|
|
features: ['事件驱动', '自动扩展', '按使用付费', '多语言支持'],
|
|
icon: 'AWS Lambda',
|
|
},
|
|
{
|
|
name: 'Amazon ECS',
|
|
description: '容器编排服务',
|
|
features: ['Docker支持', '微服务架构', '负载均衡', '服务发现'],
|
|
icon: 'Amazon ECS',
|
|
},
|
|
],
|
|
|
|
storage: [
|
|
{
|
|
name: 'Amazon S3',
|
|
description: '对象存储服务',
|
|
features: ['99.999999999%持久性', '无限扩展', '多种存储类别', '数据加密'],
|
|
icon: 'Amazon S3',
|
|
},
|
|
{
|
|
name: 'Amazon EBS',
|
|
description: '块存储服务',
|
|
features: ['高性能', '快照备份', '加密支持', '多种卷类型'],
|
|
icon: 'Amazon EBS',
|
|
},
|
|
{
|
|
name: 'Amazon EFS',
|
|
description: '文件存储服务',
|
|
features: ['完全托管', '自动扩展', 'POSIX兼容', '高吞吐量'],
|
|
icon: 'Amazon EFS',
|
|
},
|
|
],
|
|
|
|
database: [
|
|
{
|
|
name: 'Amazon RDS',
|
|
description: '关系数据库服务',
|
|
features: ['多引擎支持', '自动备份', '读取副本', '监控告警'],
|
|
icon: 'Amazon RDS',
|
|
},
|
|
{
|
|
name: 'Amazon DynamoDB',
|
|
description: 'NoSQL数据库服务',
|
|
features: ['毫秒级延迟', '自动扩展', '全球表', '备份恢复'],
|
|
icon: 'Amazon DynamoDB',
|
|
},
|
|
{
|
|
name: 'Amazon ElastiCache',
|
|
description: '内存缓存服务',
|
|
features: ['Redis/Memcached', '高性能', '自动故障转移', '监控分析'],
|
|
icon: 'Amazon ElastiCache',
|
|
},
|
|
],
|
|
|
|
ai: [
|
|
{
|
|
name: 'Amazon SageMaker',
|
|
description: '机器学习平台',
|
|
features: ['端到端ML', '预构建算法', '模型部署', 'AutoML'],
|
|
icon: 'Amazon SageMaker',
|
|
},
|
|
{
|
|
name: 'Amazon Rekognition',
|
|
description: '图像和视频分析',
|
|
features: ['人脸识别', '对象检测', '文本识别', '内容审核'],
|
|
icon: 'Amazon Rekognition',
|
|
},
|
|
{
|
|
name: 'Amazon Comprehend',
|
|
description: '自然语言处理',
|
|
features: ['情感分析', '实体识别', '语言检测', '主题建模'],
|
|
icon: 'Amazon Comprehend',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
'zh-TW': {
|
|
title: 'AWS 主流產品',
|
|
subtitle: '全面的雲端運算服務產品組合',
|
|
categories: {
|
|
compute: '運算服務',
|
|
storage: '儲存服務',
|
|
database: '資料庫服務',
|
|
ai: 'AI/ML服務',
|
|
},
|
|
products: {
|
|
compute: [
|
|
{
|
|
name: 'Amazon EC2',
|
|
description: '可擴展的雲端運算容量',
|
|
features: ['按需付費', '多種實例類型', '全球部署', '高可用性'],
|
|
icon: 'Amazon EC2',
|
|
},
|
|
{
|
|
name: 'AWS Lambda',
|
|
description: '無伺服器運算服務',
|
|
features: ['事件驅動', '自動擴展', '按使用付費', '多語言支援'],
|
|
icon: 'AWS Lambda',
|
|
},
|
|
{
|
|
name: 'Amazon ECS',
|
|
description: '容器編排服務',
|
|
features: ['Docker支援', '微服務架構', '負載平衡', '服務發現'],
|
|
icon: 'Amazon ECS',
|
|
},
|
|
],
|
|
|
|
storage: [
|
|
{
|
|
name: 'Amazon S3',
|
|
description: '物件儲存服務',
|
|
features: ['99.999999999%持久性', '無限擴展', '多種儲存類別', '資料加密'],
|
|
icon: 'Amazon S3',
|
|
},
|
|
{
|
|
name: 'Amazon EBS',
|
|
description: '區塊儲存服務',
|
|
features: ['高效能', '快照備份', '加密支援', '多種卷類型'],
|
|
icon: 'Amazon EBS',
|
|
},
|
|
{
|
|
name: 'Amazon EFS',
|
|
description: '檔案儲存服務',
|
|
features: ['完全託管', '自動擴展', 'POSIX相容', '高吞吐量'],
|
|
icon: 'Amazon EFS',
|
|
},
|
|
],
|
|
|
|
database: [
|
|
{
|
|
name: 'Amazon RDS',
|
|
description: '關聯式資料庫服務',
|
|
features: ['多引擎支援', '自動備份', '讀取副本', '監控告警'],
|
|
icon: 'Amazon RDS',
|
|
},
|
|
{
|
|
name: 'Amazon DynamoDB',
|
|
description: 'NoSQL資料庫服務',
|
|
features: ['毫秒級延遲', '自動擴展', '全球表', '備份恢復'],
|
|
icon: 'Amazon DynamoDB',
|
|
},
|
|
{
|
|
name: 'Amazon ElastiCache',
|
|
description: '記憶體快取服務',
|
|
features: ['Redis/Memcached', '高效能', '自動故障轉移', '監控分析'],
|
|
icon: 'Amazon ElastiCache',
|
|
},
|
|
],
|
|
|
|
ai: [
|
|
{
|
|
name: 'Amazon SageMaker',
|
|
description: '機器學習平台',
|
|
features: ['端到端ML', '預構建演算法', '模型部署', 'AutoML'],
|
|
icon: 'Amazon SageMaker',
|
|
},
|
|
{
|
|
name: 'Amazon Rekognition',
|
|
description: '圖像和影片分析',
|
|
features: ['人臉識別', '物件檢測', '文字識別', '內容審核'],
|
|
icon: 'Amazon Rekognition',
|
|
},
|
|
{
|
|
name: 'Amazon Comprehend',
|
|
description: '自然語言處理',
|
|
features: ['情感分析', '實體識別', '語言檢測', '主題建模'],
|
|
icon: 'Amazon Comprehend',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
en: {
|
|
title: 'AWS Core Products',
|
|
subtitle: 'Comprehensive cloud computing service portfolio',
|
|
categories: {
|
|
compute: 'Compute Services',
|
|
storage: 'Storage Services',
|
|
database: 'Database Services',
|
|
ai: 'AI/ML Services',
|
|
},
|
|
products: {
|
|
compute: [
|
|
{
|
|
name: 'Amazon EC2',
|
|
description: 'Scalable cloud computing capacity',
|
|
features: [
|
|
'Pay-as-you-go',
|
|
'Multiple instance types',
|
|
'Global deployment',
|
|
'High availability',
|
|
],
|
|
|
|
icon: 'Amazon EC2',
|
|
},
|
|
{
|
|
name: 'AWS Lambda',
|
|
description: 'Serverless computing service',
|
|
features: [
|
|
'Event-driven',
|
|
'Auto scaling',
|
|
'Pay per use',
|
|
'Multi-language support',
|
|
],
|
|
|
|
icon: 'AWS Lambda',
|
|
},
|
|
{
|
|
name: 'Amazon ECS',
|
|
description: 'Container orchestration service',
|
|
features: [
|
|
'Docker support',
|
|
'Microservices',
|
|
'Load balancing',
|
|
'Service discovery',
|
|
],
|
|
|
|
icon: 'Amazon ECS',
|
|
},
|
|
],
|
|
|
|
storage: [
|
|
{
|
|
name: 'Amazon S3',
|
|
description: 'Object storage service',
|
|
features: [
|
|
'99.999999999% durability',
|
|
'Unlimited scaling',
|
|
'Multiple storage classes',
|
|
'Data encryption',
|
|
],
|
|
|
|
icon: 'Amazon S3',
|
|
},
|
|
{
|
|
name: 'Amazon EBS',
|
|
description: 'Block storage service',
|
|
features: [
|
|
'High performance',
|
|
'Snapshot backup',
|
|
'Encryption support',
|
|
'Multiple volume types',
|
|
],
|
|
|
|
icon: 'Amazon EBS',
|
|
},
|
|
{
|
|
name: 'Amazon EFS',
|
|
description: 'File storage service',
|
|
features: [
|
|
'Fully managed',
|
|
'Auto scaling',
|
|
'POSIX compatible',
|
|
'High throughput',
|
|
],
|
|
|
|
icon: 'Amazon EFS',
|
|
},
|
|
],
|
|
|
|
database: [
|
|
{
|
|
name: 'Amazon RDS',
|
|
description: 'Relational database service',
|
|
features: [
|
|
'Multi-engine support',
|
|
'Automated backups',
|
|
'Read replicas',
|
|
'Monitoring & alerts',
|
|
],
|
|
|
|
icon: 'Amazon RDS',
|
|
},
|
|
{
|
|
name: 'Amazon DynamoDB',
|
|
description: 'NoSQL database service',
|
|
features: [
|
|
'Millisecond latency',
|
|
'Auto scaling',
|
|
'Global tables',
|
|
'Backup & restore',
|
|
],
|
|
|
|
icon: 'Amazon DynamoDB',
|
|
},
|
|
{
|
|
name: 'Amazon ElastiCache',
|
|
description: 'In-memory caching service',
|
|
features: [
|
|
'Redis/Memcached',
|
|
'High performance',
|
|
'Auto failover',
|
|
'Monitoring & analytics',
|
|
],
|
|
|
|
icon: 'Amazon ElastiCache',
|
|
},
|
|
],
|
|
|
|
ai: [
|
|
{
|
|
name: 'Amazon SageMaker',
|
|
description: 'Machine learning platform',
|
|
features: [
|
|
'End-to-end ML',
|
|
'Pre-built algorithms',
|
|
'Model deployment',
|
|
'AutoML',
|
|
],
|
|
|
|
icon: 'Amazon SageMaker',
|
|
},
|
|
{
|
|
name: 'Amazon Rekognition',
|
|
description: 'Image and video analysis',
|
|
features: [
|
|
'Face recognition',
|
|
'Object detection',
|
|
'Text recognition',
|
|
'Content moderation',
|
|
],
|
|
|
|
icon: 'Amazon Rekognition',
|
|
},
|
|
{
|
|
name: 'Amazon Comprehend',
|
|
description: 'Natural language processing',
|
|
features: [
|
|
'Sentiment analysis',
|
|
'Entity recognition',
|
|
'Language detection',
|
|
'Topic modeling',
|
|
],
|
|
|
|
icon: 'Amazon Comprehend',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
ko: {
|
|
title: 'AWS 핵심 제품',
|
|
subtitle: '포괄적인 클라우드 컴퓨팅 서비스 포트폴리오',
|
|
categories: {
|
|
compute: '컴퓨팅 서비스',
|
|
storage: '스토리지 서비스',
|
|
database: '데이터베이스 서비스',
|
|
ai: 'AI/ML 서비스',
|
|
},
|
|
products: {
|
|
compute: [
|
|
{
|
|
name: 'Amazon EC2',
|
|
description: '확장 가능한 클라우드 컴퓨팅 용량',
|
|
features: [
|
|
'사용한 만큼 지불',
|
|
'다양한 인스턴스 유형',
|
|
'글로벌 배포',
|
|
'고가용성',
|
|
],
|
|
|
|
icon: 'Amazon EC2',
|
|
},
|
|
{
|
|
name: 'AWS Lambda',
|
|
description: '서버리스 컴퓨팅 서비스',
|
|
features: [
|
|
'이벤트 기반',
|
|
'자동 확장',
|
|
'사용량 기반 요금',
|
|
'다중 언어 지원',
|
|
],
|
|
|
|
icon: 'AWS Lambda',
|
|
},
|
|
{
|
|
name: 'Amazon ECS',
|
|
description: '컨테이너 오케스트레이션 서비스',
|
|
features: ['Docker 지원', '마이크로서비스', '로드 밸런싱', '서비스 검색'],
|
|
icon: 'Amazon ECS',
|
|
},
|
|
],
|
|
|
|
storage: [
|
|
{
|
|
name: 'Amazon S3',
|
|
description: '객체 스토리지 서비스',
|
|
features: [
|
|
'99.999999999% 내구성',
|
|
'무제한 확장',
|
|
'다양한 스토리지 클래스',
|
|
'데이터 암호화',
|
|
],
|
|
|
|
icon: '🗄️',
|
|
},
|
|
{
|
|
name: 'Amazon EBS',
|
|
description: '블록 스토리지 서비스',
|
|
features: ['고성능', '스냅샷 백업', '암호화 지원', '다양한 볼륨 유형'],
|
|
icon: '💾',
|
|
},
|
|
{
|
|
name: 'Amazon EFS',
|
|
description: '파일 스토리지 서비스',
|
|
features: ['완전 관리형', '자동 확장', 'POSIX 호환', '높은 처리량'],
|
|
icon: '📁',
|
|
},
|
|
],
|
|
|
|
database: [
|
|
{
|
|
name: 'Amazon RDS',
|
|
description: '관계형 데이터베이스 서비스',
|
|
features: [
|
|
'다중 엔진 지원',
|
|
'자동 백업',
|
|
'읽기 전용 복제본',
|
|
'모니터링 및 알림',
|
|
],
|
|
|
|
icon: 'Amazon RDS',
|
|
},
|
|
{
|
|
name: 'Amazon DynamoDB',
|
|
description: 'NoSQL 데이터베이스 서비스',
|
|
features: [
|
|
'밀리초 지연 시간',
|
|
'자동 확장',
|
|
'글로벌 테이블',
|
|
'백업 및 복원',
|
|
],
|
|
|
|
icon: 'Amazon DynamoDB',
|
|
},
|
|
{
|
|
name: 'Amazon ElastiCache',
|
|
description: '인메모리 캐싱 서비스',
|
|
features: [
|
|
'Redis/Memcached',
|
|
'고성능',
|
|
'자동 장애 조치',
|
|
'모니터링 및 분석',
|
|
],
|
|
|
|
icon: 'Amazon ElastiCache',
|
|
},
|
|
],
|
|
|
|
ai: [
|
|
{
|
|
name: 'Amazon SageMaker',
|
|
description: '머신러닝 플랫폼',
|
|
features: ['엔드투엔드 ML', '사전 구축된 알고리즘', '모델 배포', 'AutoML'],
|
|
icon: 'Amazon SageMaker',
|
|
},
|
|
{
|
|
name: 'Amazon Rekognition',
|
|
description: '이미지 및 비디오 분석',
|
|
features: ['얼굴 인식', '객체 감지', '텍스트 인식', '콘텐츠 조정'],
|
|
icon: 'Amazon Rekognition',
|
|
},
|
|
{
|
|
name: 'Amazon Comprehend',
|
|
description: '자연어 처리',
|
|
features: ['감정 분석', '개체 인식', '언어 감지', '주제 모델링'],
|
|
icon: 'Amazon Comprehend',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
ja: {
|
|
title: 'AWS コア製品',
|
|
subtitle: '包括的なクラウドコンピューティングサービスポートフォリオ',
|
|
categories: {
|
|
compute: 'コンピューティングサービス',
|
|
storage: 'ストレージサービス',
|
|
database: 'データベースサービス',
|
|
ai: 'AI/MLサービス',
|
|
},
|
|
products: {
|
|
compute: [
|
|
{
|
|
name: 'Amazon EC2',
|
|
description: 'スケーラブルなクラウドコンピューティング容量',
|
|
features: [
|
|
'従量課金制',
|
|
'複数のインスタンスタイプ',
|
|
'グローバル展開',
|
|
'高可用性',
|
|
],
|
|
|
|
icon: 'Amazon EC2',
|
|
},
|
|
{
|
|
name: 'AWS Lambda',
|
|
description: 'サーバーレスコンピューティングサービス',
|
|
features: [
|
|
'イベント駆動',
|
|
'自動スケーリング',
|
|
'使用量ベース課金',
|
|
'多言語サポート',
|
|
],
|
|
|
|
icon: 'AWS Lambda',
|
|
},
|
|
{
|
|
name: 'Amazon ECS',
|
|
description: 'コンテナオーケストレーションサービス',
|
|
features: [
|
|
'Dockerサポート',
|
|
'マイクロサービス',
|
|
'ロードバランシング',
|
|
'サービス検出',
|
|
],
|
|
|
|
icon: 'Amazon ECS',
|
|
},
|
|
],
|
|
|
|
storage: [
|
|
{
|
|
name: 'Amazon S3',
|
|
description: 'オブジェクトストレージサービス',
|
|
features: [
|
|
'99.999999999%の耐久性',
|
|
'無制限スケーリング',
|
|
'複数のストレージクラス',
|
|
'データ暗号化',
|
|
],
|
|
|
|
icon: 'Amazon S3',
|
|
},
|
|
{
|
|
name: 'Amazon EBS',
|
|
description: 'ブロックストレージサービス',
|
|
features: [
|
|
'高性能',
|
|
'スナップショットバックアップ',
|
|
'暗号化サポート',
|
|
'複数のボリュームタイプ',
|
|
],
|
|
|
|
icon: 'Amazon EBS',
|
|
},
|
|
{
|
|
name: 'Amazon EFS',
|
|
description: 'ファイルストレージサービス',
|
|
features: [
|
|
'フルマネージド',
|
|
'自動スケーリング',
|
|
'POSIX互換',
|
|
'高スループット',
|
|
],
|
|
|
|
icon: 'Amazon EFS',
|
|
},
|
|
],
|
|
|
|
database: [
|
|
{
|
|
name: 'Amazon RDS',
|
|
description: 'リレーショナルデータベースサービス',
|
|
features: [
|
|
'マルチエンジンサポート',
|
|
'自動バックアップ',
|
|
'リードレプリカ',
|
|
'モニタリング＆アラート',
|
|
],
|
|
|
|
icon: 'Amazon RDS',
|
|
},
|
|
{
|
|
name: 'Amazon DynamoDB',
|
|
description: 'NoSQLデータベースサービス',
|
|
features: [
|
|
'ミリ秒レイテンシ',
|
|
'自動スケーリング',
|
|
'グローバルテーブル',
|
|
'バックアップ＆リストア',
|
|
],
|
|
|
|
icon: 'Amazon DynamoDB',
|
|
},
|
|
{
|
|
name: 'Amazon ElastiCache',
|
|
description: 'インメモリキャッシングサービス',
|
|
features: [
|
|
'Redis/Memcached',
|
|
'高性能',
|
|
'自動フェイルオーバー',
|
|
'モニタリング＆分析',
|
|
],
|
|
|
|
icon: 'Amazon ElastiCache',
|
|
},
|
|
],
|
|
|
|
ai: [
|
|
{
|
|
name: 'Amazon SageMaker',
|
|
description: '機械学習プラットフォーム',
|
|
features: [
|
|
'エンドツーエンドML',
|
|
'事前構築アルゴリズム',
|
|
'モデルデプロイ',
|
|
'AutoML',
|
|
],
|
|
|
|
icon: 'Amazon SageMaker',
|
|
},
|
|
{
|
|
name: 'Amazon Rekognition',
|
|
description: '画像・動画分析',
|
|
features: [
|
|
'顔認識',
|
|
'オブジェクト検出',
|
|
'テキスト認識',
|
|
'コンテンツモデレーション',
|
|
],
|
|
|
|
icon: 'Amazon Rekognition',
|
|
},
|
|
{
|
|
name: 'Amazon Comprehend',
|
|
description: '自然言語処理',
|
|
features: [
|
|
'感情分析',
|
|
'エンティティ認識',
|
|
'言語検出',
|
|
'トピックモデリング',
|
|
],
|
|
|
|
icon: 'Amazon Comprehend',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
};
|
|
|
|
const currentContent = content[currentLang] || content.en;
|
|
const currentProducts = currentContent.products[activeCategory];
|
|
|
|
return (
|
|
<div className="py-24 bg-gray-50" data-oid="71r.u0l">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="qckqz.i">
|
|
{/* Header */}
|
|
<div className="text-center mb-16" data-oid="pdj2r80">
|
|
<h2
|
|
className="text-3xl md:text-4xl font-bold mb-4 text-gray-900"
|
|
data-oid="wifux01"
|
|
>
|
|
{currentContent.title}
|
|
</h2>
|
|
<p className="text-lg text-gray-600 max-w-3xl mx-auto" data-oid="q6_h008">
|
|
{currentContent.subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Category Tabs */}
|
|
<div
|
|
className="flex flex-wrap justify-center mb-12 border-b border-gray-200"
|
|
data-oid="zakbd_7"
|
|
>
|
|
{Object.entries(currentContent.categories).map(([key, label]) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setActiveCategory(key)}
|
|
className={`px-6 py-3 mx-2 mb-4 font-medium text-sm transition-colors border-b-2 ${
|
|
activeCategory === key
|
|
? 'text-blue-600 border-blue-600'
|
|
: 'text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
data-oid="r.8:guh"
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Products Grid */}
|
|
<div
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
data-oid="18bhsg8"
|
|
>
|
|
{currentProducts.map((product, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 p-6 border border-gray-100"
|
|
data-oid="6hyog7l"
|
|
>
|
|
{/* Product Icon & Name */}
|
|
<div className="flex items-center mb-4" data-oid="r10jsgm">
|
|
<div className="text-blue-600 mr-4" data-oid="-18lpiy">
|
|
{getProductIcon(product.icon)}
|
|
</div>
|
|
<div data-oid="30rob-s">
|
|
<h3
|
|
className="text-xl font-bold text-gray-900 mb-1"
|
|
data-oid="1dj5o3u"
|
|
>
|
|
{product.name}
|
|
</h3>
|
|
<p className="text-gray-600 text-sm" data-oid="w8h3y1g">
|
|
{product.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div className="space-y-2" data-oid="g9c1592">
|
|
{product.features.map((feature, featureIndex) => (
|
|
<div
|
|
key={featureIndex}
|
|
className="flex items-center"
|
|
data-oid="_:e4nww"
|
|
>
|
|
<div
|
|
className="w-2 h-2 bg-blue-500 rounded-full mr-3"
|
|
data-oid="-ix.9t."
|
|
></div>
|
|
<span className="text-gray-700 text-sm" data-oid="gmvd:xc">
|
|
{feature}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Learn More Button */}
|
|
<div className="mt-6" data-oid="7a-109-">
|
|
<button
|
|
className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 text-sm font-medium"
|
|
data-oid="4lpjr_b"
|
|
>
|
|
{currentLang === 'zh-CN'
|
|
? '了解更多'
|
|
: currentLang === 'zh-TW'
|
|
? '了解更多'
|
|
: currentLang === 'ko'
|
|
? '자세히 보기'
|
|
: currentLang === 'ja'
|
|
? '詳細を見る'
|
|
: 'Learn More'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|