manual save(2026-01-15 15:54)

src/components/ProductsSection.tsx

@@ -0,0 +1,271 @@
+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>
+  )
+}