101 lines
3.7 KiB
TypeScript
101 lines
3.7 KiB
TypeScript
'use client'
|
|
import { useLanguage } from '../i18n/LanguageProvider'
|
|
import { translations } from '../i18n/translations'
|
|
|
|
const features = [
|
|
{
|
|
icon: '🛠️',
|
|
title: {
|
|
en: 'XCloudFlow - Multi-Cloud IaC',
|
|
zh: 'XCloudFlow - 多云 IaC',
|
|
},
|
|
desc: {
|
|
en: 'Provision cloud resources across AWS, GCP, Azure, and Kubernetes using Golang with Pulumi SDK, fully integrated into CI/CD pipelines.',
|
|
zh: '使用 Golang 和 Pulumi SDK 跨 AWS、GCP、Azure 与 Kubernetes 统一部署云资源，完美集成 CI/CD 流水线。',
|
|
},
|
|
},
|
|
{
|
|
icon: '🔐',
|
|
title: {
|
|
en: 'KubeGuard - Kubernetes Backup',
|
|
zh: 'KubeGuard - Kubernetes 备份',
|
|
},
|
|
desc: {
|
|
en: 'Velero + Rsync combined solution for full-stack Kubernetes application & node data backup, fast restore, and cluster migration.',
|
|
zh: '结合 Velero 与 Rsync 实现 Kubernetes 应用与节点数据完整备份、快速恢复与集群迁移。',
|
|
},
|
|
},
|
|
{
|
|
icon: '📦',
|
|
title: {
|
|
en: 'XConfig - Configuration Orchestration',
|
|
zh: 'XConfig - 配置编排',
|
|
},
|
|
desc: {
|
|
en: 'YAML Playbook driven configuration delivery and task orchestration, optimized for bare metal, edge nodes and hybrid clusters.',
|
|
zh: '基于 YAML Playbook 驱动的配置交付与任务编排，适配裸金属、边缘节点与混合集群。',
|
|
},
|
|
},
|
|
{
|
|
icon: '📡',
|
|
title: {
|
|
en: 'XScopeHub - Observability Hub',
|
|
zh: 'XScopeHub - 可观察性平台',
|
|
},
|
|
desc: {
|
|
en: 'Bridges exporters, OpenTelemetry, and OpenObserve with ETL pipelines for metrics, logs, and traces.',
|
|
zh: '通过 OpenTelemetry 框架连接 Exporter、OpenObserve 与 ETL 流程，实现指标、日志与调用的统一聚合。',
|
|
},
|
|
},
|
|
{
|
|
icon: '🧭',
|
|
title: {
|
|
en: 'Navi - Task Assistant',
|
|
zh: 'Navi - 任务助手',
|
|
},
|
|
desc: {
|
|
en: 'Guiding your tasks, helping you get things done faster.',
|
|
zh: '引导你的任务，帮助你更快完成工作。',
|
|
},
|
|
},
|
|
{
|
|
icon: '🚀',
|
|
title: {
|
|
en: 'XStream - Network Accelerator',
|
|
zh: 'XStream - 网络加速器',
|
|
},
|
|
desc: {
|
|
en: 'Cross-border developer proxy built with VLESS+gRPC to ensure fast, stable access to GitHub, DockerHub, AI models and global resources.',
|
|
zh: '基于 VLESS+gRPC 的跨境开发者代理，确保稳定快速访问 GitHub、DockerHub、AI 模型与全球资源。',
|
|
},
|
|
},
|
|
]
|
|
|
|
export default function Features() {
|
|
const { language } = useLanguage()
|
|
const t = translations[language]
|
|
|
|
return (
|
|
<section id="features" className="bg-[var(--color-background)] py-20 text-[var(--color-text)] transition-colors">
|
|
<div className="mx-auto max-w-7xl px-4">
|
|
<div className="mb-12 text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-2">{t.featuresTitle}</h2>
|
|
<p className="text-[var(--color-text-subtle)]">{t.featuresSubtitle}</p>
|
|
</div>
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{features.map((f, i) => (
|
|
<div
|
|
key={i}
|
|
className="rounded-[var(--radius-xl)] border border-[color:var(--color-surface-border)] bg-[var(--color-surface)] p-6 text-left transition-colors hover:border-[color:var(--color-primary-border)] hover:bg-[var(--color-surface-muted)]"
|
|
>
|
|
<div className="mb-4 text-4xl">{f.icon}</div>
|
|
<h3 className="mb-2 text-xl font-semibold text-[var(--color-text)]">{f.title[language]}</h3>
|
|
<p className="text-[var(--color-text-subtle)]">{f.desc[language]}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|