271 lines
12 KiB
TypeScript
271 lines
12 KiB
TypeScript
import React, { useState } from 'react'
|
||
|
||
interface ProductsSectionProps {
|
||
language?: 'zh' | 'en'
|
||
}
|
||
|
||
export const ProductsSection: React.FC<ProductsSectionProps> = ({ language = 'zh' }) => {
|
||
const [activeTab, setActiveTab] = useState(0)
|
||
|
||
const content = {
|
||
zh: {
|
||
title: '我们的产品与服务',
|
||
subtitle: '全面覆盖企业AI转型的各个阶段',
|
||
tabs: ['AI平台', '数据分析', '自动化流程', '智能客服'],
|
||
products: [
|
||
{
|
||
title: 'TuringFlow AI平台',
|
||
description: '企业级AI开发与部署平台，支持多模态AI模型训练、推理和监控',
|
||
features: [
|
||
'支持主流深度学习框架',
|
||
'可视化模型训练界面',
|
||
'自动化模型调优',
|
||
'实时性能监控',
|
||
],
|
||
cta: '了解详情',
|
||
},
|
||
{
|
||
title: '智能数据分析套件',
|
||
description: '一站式数据分析解决方案，从数据采集到智能洞察的全流程覆盖',
|
||
features: [
|
||
'实时数据流处理',
|
||
'智能异常检测',
|
||
'预测性分析',
|
||
'可视化报表',
|
||
],
|
||
cta: '查看案例',
|
||
},
|
||
{
|
||
title: '流程自动化引擎',
|
||
description: '基于RPA和AI的流程自动化平台，实现业务流程的智能化改造',
|
||
features: [
|
||
'无代码流程设计',
|
||
'智能文档处理',
|
||
'跨系统集成',
|
||
'流程监控与优化',
|
||
],
|
||
cta: '免费试用',
|
||
},
|
||
{
|
||
title: '智能客服解决方案',
|
||
description: '融合NLP和知识图谱的智能客服系统，提升客户服务效率和质量',
|
||
features: [
|
||
'多轮对话理解',
|
||
'情感分析',
|
||
'知识库管理',
|
||
'人工客服协同',
|
||
],
|
||
cta: '预约演示',
|
||
},
|
||
],
|
||
},
|
||
en: {
|
||
title: 'Our Products & Services',
|
||
subtitle: 'Comprehensive coverage of all stages of enterprise AI transformation',
|
||
tabs: ['AI Platform', 'Data Analytics', 'Automation', 'Intelligent Support'],
|
||
products: [
|
||
{
|
||
title: 'TuringFlow AI Platform',
|
||
description: 'Enterprise-grade AI development and deployment platform supporting multimodal AI model training, inference, and monitoring',
|
||
features: [
|
||
'Support for mainstream deep learning frameworks',
|
||
'Visual model training interface',
|
||
'Automated model tuning',
|
||
'Real-time performance monitoring',
|
||
],
|
||
cta: 'Learn More',
|
||
},
|
||
{
|
||
title: 'Intelligent Analytics Suite',
|
||
description: 'End-to-end data analytics solution covering the entire process from data collection to intelligent insights',
|
||
features: [
|
||
'Real-time data stream processing',
|
||
'Intelligent anomaly detection',
|
||
'Predictive analytics',
|
||
'Visual reporting',
|
||
],
|
||
cta: 'View Cases',
|
||
},
|
||
{
|
||
title: 'Process Automation Engine',
|
||
description: 'RPA and AI-based process automation platform for intelligent business process transformation',
|
||
features: [
|
||
'No-code process design',
|
||
'Intelligent document processing',
|
||
'Cross-system integration',
|
||
'Process monitoring and optimization',
|
||
],
|
||
cta: 'Free Trial',
|
||
},
|
||
{
|
||
title: 'Intelligent Support Solution',
|
||
description: 'NLP and knowledge graph integrated intelligent customer service system to enhance service efficiency and quality',
|
||
features: [
|
||
'Multi-turn conversation understanding',
|
||
'Sentiment analysis',
|
||
'Knowledge base management',
|
||
'Human agent collaboration',
|
||
],
|
||
cta: 'Book Demo',
|
||
},
|
||
],
|
||
},
|
||
}
|
||
|
||
const t = content[language]
|
||
|
||
return (
|
||
<section id="products" className="py-16 md:py-24 bg-gradient-to-b from-white to-brand-light">
|
||
<div className="container mx-auto px-4">
|
||
<div className="text-center max-w-3xl mx-auto mb-12">
|
||
<h2 className="text-3xl md:text-4xl font-bold text-brand-dark mb-4">{t.title}</h2>
|
||
<p className="text-xl text-gray-600">{t.subtitle}</p>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div className="flex flex-wrap justify-center gap-2 mb-12">
|
||
{t.tabs.map((tab, index) => (
|
||
<button
|
||
key={index}
|
||
onClick={() => setActiveTab(index)}
|
||
className={`px-6 py-3 rounded-lg font-medium transition-all duration-300 ${activeTab === index ? 'bg-gradient-to-r from-brand-primary to-brand-secondary text-white shadow-lg' : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200'}`}
|
||
aria-label={`切换到${tab}`}
|
||
aria-selected={activeTab === index}
|
||
>
|
||
{tab}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Active Product */}
|
||
<div className="bg-white rounded-2xl shadow-xl overflow-hidden animate-fade-in">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2">
|
||
{/* Left Side - Content */}
|
||
<div className="p-8 md:p-12 lg:p-16">
|
||
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-brand-primary/10 to-brand-secondary/10 text-brand-primary px-4 py-2 rounded-full mb-6">
|
||
<span className="w-2 h-2 bg-brand-primary rounded-full"></span>
|
||
<span className="text-sm font-medium">旗舰产品</span>
|
||
</div>
|
||
|
||
<h3 className="text-2xl md:text-3xl font-bold text-brand-dark mb-4">
|
||
{t.products[activeTab].title}
|
||
</h3>
|
||
|
||
<p className="text-gray-600 mb-8 text-lg">
|
||
{t.products[activeTab].description}
|
||
</p>
|
||
|
||
<ul className="space-y-3 mb-8">
|
||
{t.products[activeTab].features.map((feature, index) => (
|
||
<li key={index} className="flex items-start gap-3">
|
||
<svg className="w-5 h-5 text-brand-primary mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
<span className="text-gray-700">{feature}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
<div className="flex flex-wrap gap-4">
|
||
<a
|
||
href="#contact"
|
||
className="px-8 py-3 bg-gradient-to-r from-brand-primary to-brand-secondary text-white font-semibold rounded-lg hover:shadow-lg transition-all duration-300 hover:scale-105 inline-flex items-center gap-2"
|
||
aria-label={t.products[activeTab].cta}
|
||
>
|
||
<span>{t.products[activeTab].cta}</span>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||
</svg>
|
||
</a>
|
||
<a
|
||
href="#demo"
|
||
className="px-8 py-3 bg-white border-2 border-gray-200 text-gray-700 font-semibold rounded-lg hover:border-brand-primary hover:text-brand-primary transition-all duration-300 inline-flex items-center gap-2"
|
||
aria-label="查看技术文档"
|
||
>
|
||
技术文档
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Side - Visual */}
|
||
<div className="bg-gradient-to-br from-brand-primary/5 to-brand-secondary/5 p-8 md:p-12 lg:p-16 flex items-center justify-center">
|
||
<div className="relative w-full max-w-md">
|
||
{/* Decorative Circles */}
|
||
<div className="absolute top-0 left-0 w-32 h-32 bg-gradient-to-r from-brand-primary/20 to-brand-secondary/20 rounded-full blur-xl"></div>
|
||
<div className="absolute bottom-0 right-0 w-40 h-40 bg-gradient-to-l from-brand-accent/20 to-brand-primary/20 rounded-full blur-xl"></div>
|
||
|
||
{/* Product Visualization */}
|
||
<div className="relative bg-white rounded-xl shadow-lg p-6 border border-gray-100">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-10 h-10 bg-gradient-to-br from-brand-primary to-brand-secondary rounded-lg flex items-center justify-center">
|
||
<span className="text-white font-bold">TF</span>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-bold text-brand-dark">实时监控面板</h4>
|
||
<p className="text-sm text-gray-500">性能指标可视化</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats Grid */}
|
||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||
<div className="bg-gray-50 rounded-lg p-4">
|
||
<div className="text-2xl font-bold text-brand-primary mb-1">99.9%</div>
|
||
<div className="text-sm text-gray-600">可用性</div>
|
||
</div>
|
||
<div className="bg-gray-50 rounded-lg p-4">
|
||
<div className="text-2xl font-bold text-brand-secondary mb-1">50ms</div>
|
||
<div className="text-sm text-gray-600">响应时间</div>
|
||
</div>
|
||
<div className="bg-gray-50 rounded-lg p-4">
|
||
<div className="text-2xl font-bold text-brand-accent mb-1">1M+</div>
|
||
<div className="text-sm text-gray-600">请求/秒</div>
|
||
</div>
|
||
<div className="bg-gray-50 rounded-lg p-4">
|
||
<div className="text-2xl font-bold text-brand-primary mb-1">24/7</div>
|
||
<div className="text-sm text-gray-600">监控</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Performance Chart */}
|
||
<div className="bg-gray-50 rounded-lg p-4">
|
||
<div className="flex justify-between items-center mb-3">
|
||
<span className="text-sm font-medium text-gray-700">性能趋势</span>
|
||
<span className="text-xs text-green-600 bg-green-100 px-2 py-1 rounded-full">+12%</span>
|
||
</div>
|
||
<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
|
||
<div className="h-full bg-gradient-to-r from-brand-primary to-brand-secondary w-3/4"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* All Products Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
|
||
{t.products.map((product, index) => (
|
||
<div
|
||
key={index}
|
||
className={`bg-white border rounded-xl p-6 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 cursor-pointer ${activeTab === index ? 'border-brand-primary' : 'border-gray-200'}`}
|
||
onClick={() => setActiveTab(index)}
|
||
aria-label={`查看${product.title}`}
|
||
role="button"
|
||
tabIndex={0}
|
||
onKeyDown={(e) => e.key === 'Enter' && setActiveTab(index)}
|
||
>
|
||
<div className="w-12 h-12 bg-gradient-to-br from-brand-primary/10 to-brand-secondary/10 rounded-lg flex items-center justify-center mb-4">
|
||
<span className="text-brand-primary font-bold">{index + 1}</span>
|
||
</div>
|
||
<h4 className="font-bold text-brand-dark mb-2">{product.title}</h4>
|
||
<p className="text-sm text-gray-600 line-clamp-2">{product.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
} |