manual save(2026-01-15 15:54)
This commit is contained in:
SiteAgent Bot
63
index.html
63
index.html
@@ -1,10 +1,69 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>react-template</title>
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>图灵环流 (TuringFlow) - 企业级AI解决方案提供商</title>
|
||||
<meta name="description" content="图灵环流提供企业级人工智能解决方案，帮助全球企业实现数字化转型与创新增长。领先的AI平台、数据分析、流程自动化和智能客服解决方案。" />
|
||||
<meta name="keywords" content="AI解决方案,人工智能,数字化转型,企业级AI,数据分析,流程自动化,智能客服,图灵环流,TuringFlow" />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://turingflow.ai/" />
|
||||
<meta property="og:title" content="图灵环流 (TuringFlow) - 企业级AI解决方案提供商" />
|
||||
<meta property="og:description" content="图灵环流提供企业级人工智能解决方案，帮助全球企业实现数字化转型与创新增长。" />
|
||||
<meta property="og:image" content="https://turingflow.ai/og-image.jpg" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://turingflow.ai/" />
|
||||
<meta property="twitter:title" content="图灵环流 (TuringFlow) - 企业级AI解决方案提供商" />
|
||||
<meta property="twitter:description" content="图灵环流提供企业级人工智能解决方案，帮助全球企业实现数字化转型与创新增长。" />
|
||||
<meta property="twitter:image" content="https://turingflow.ai/twitter-image.jpg" />
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="https://turingflow.ai/" />
|
||||
|
||||
<!-- Alternate Languages -->
|
||||
<link rel="alternate" hreflang="zh-CN" href="https://turingflow.ai/" />
|
||||
<link rel="alternate" hreflang="en" href="https://turingflow.ai/en/" />
|
||||
<link rel="alternate" hreflang="x-default" href="https://turingflow.ai/" />
|
||||
|
||||
<!-- Schema.org markup -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "图灵环流科技有限公司",
|
||||
"alternateName": "TuringFlow Technology Co., Ltd.",
|
||||
"url": "https://turingflow.ai/",
|
||||
"logo": "https://turingflow.ai/logo.png",
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"telephone": "+86-21-1234-5678",
|
||||
"contactType": "customer service",
|
||||
"availableLanguage": ["Chinese", "English"]
|
||||
},
|
||||
"sameAs": [
|
||||
"https://twitter.com/turingflow",
|
||||
"https://linkedin.com/company/turingflow",
|
||||
"https://github.com/turingflow"
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Preconnect for performance -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
36
public/robots.txt
Normal file
36
public/robots.txt
Normal file
@@ -0,0 +1,36 @@
|
||||
# Robots.txt for TuringFlow
|
||||
User-agent: *
|
||||
Allow: /
|
||||
Disallow: /admin/
|
||||
Disallow: /api/
|
||||
Disallow: /private/
|
||||
|
||||
# Sitemap
|
||||
Sitemap: https://turingflow.ai/sitemap.xml
|
||||
|
||||
# Crawl-delay for search engines
|
||||
Crawl-delay: 10
|
||||
|
||||
# Host
|
||||
Host: https://turingflow.ai/
|
||||
|
||||
# User-agent specific rules
|
||||
User-agent: Googlebot
|
||||
Allow: /
|
||||
Disallow: /admin/
|
||||
Crawl-delay: 5
|
||||
|
||||
User-agent: Bingbot
|
||||
Allow: /
|
||||
Disallow: /admin/
|
||||
Crawl-delay: 5
|
||||
|
||||
User-agent: Baiduspider
|
||||
Allow: /
|
||||
Disallow: /admin/
|
||||
Crawl-delay: 5
|
||||
|
||||
User-agent: YandexBot
|
||||
Allow: /
|
||||
Disallow: /admin/
|
||||
Crawl-delay: 5
|
||||
60
public/sitemap.xml
Normal file
60
public/sitemap.xml
Normal file
@@ -0,0 +1,60 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||
<url>
|
||||
<loc>https://turingflow.ai/</loc>
|
||||
<lastmod>2026-01-15</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>1.0</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://turingflow.ai/" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://turingflow.ai/en/" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://turingflow.ai/products</loc>
|
||||
<lastmod>2026-01-15</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://turingflow.ai/products" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://turingflow.ai/en/products" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://turingflow.ai/solutions</loc>
|
||||
<lastmod>2026-01-15</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://turingflow.ai/solutions" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://turingflow.ai/en/solutions" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://turingflow.ai/about</loc>
|
||||
<lastmod>2026-01-15</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://turingflow.ai/about" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://turingflow.ai/en/about" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://turingflow.ai/contact</loc>
|
||||
<lastmod>2026-01-15</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://turingflow.ai/contact" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://turingflow.ai/en/contact" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://turingflow.ai/blog</loc>
|
||||
<lastmod>2026-01-15</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://turingflow.ai/blog" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://turingflow.ai/en/blog" />
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://turingflow.ai/docs</loc>
|
||||
<lastmod>2026-01-15</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://turingflow.ai/docs" />
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://turingflow.ai/en/docs" />
|
||||
</url>
|
||||
</urlset>
|
||||
243
src/components/CTASection.tsx
Normal file
243
src/components/CTASection.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import React, { useState } from 'react'
|
||||
|
||||
interface CTASectionProps {
|
||||
language?: 'zh' | 'en'
|
||||
}
|
||||
|
||||
export const CTASection: React.FC<CTASectionProps> = ({ language = 'zh' }) => {
|
||||
const [email, setEmail] = useState('')
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const content = {
|
||||
zh: {
|
||||
title: '开启您的AI转型之旅',
|
||||
subtitle: '立即体验图灵环流的强大能力，30天免费试用，无需信用卡',
|
||||
formTitle: '预约演示',
|
||||
namePlaceholder: '您的姓名',
|
||||
emailPlaceholder: '工作邮箱',
|
||||
companyPlaceholder: '公司名称',
|
||||
submitButton: '预约演示',
|
||||
submittedMessage: '感谢您的提交！我们的团队将在24小时内与您联系。',
|
||||
features: [
|
||||
'30天免费试用',
|
||||
'企业级安全保障',
|
||||
'专业技术支持',
|
||||
'定制化解决方案',
|
||||
'数据隐私保护',
|
||||
'全球部署支持',
|
||||
],
|
||||
contactInfo: {
|
||||
title: '或直接联系我们',
|
||||
phone: '+86 21 1234 5678',
|
||||
email: 'sales@turingflow.ai',
|
||||
hours: '周一至周五 9:00-18:00',
|
||||
},
|
||||
},
|
||||
en: {
|
||||
title: 'Start Your AI Transformation Journey',
|
||||
subtitle: 'Experience the power of TuringFlow today with a 30-day free trial, no credit card required',
|
||||
formTitle: 'Book a Demo',
|
||||
namePlaceholder: 'Your Name',
|
||||
emailPlaceholder: 'Work Email',
|
||||
companyPlaceholder: 'Company Name',
|
||||
submitButton: 'Book Demo',
|
||||
submittedMessage: 'Thank you for your submission! Our team will contact you within 24 hours.',
|
||||
features: [
|
||||
'30-Day Free Trial',
|
||||
'Enterprise Security',
|
||||
'Technical Support',
|
||||
'Custom Solutions',
|
||||
'Data Privacy',
|
||||
'Global Deployment',
|
||||
],
|
||||
contactInfo: {
|
||||
title: 'Or Contact Us Directly',
|
||||
phone: '+86 21 1234 5678',
|
||||
email: 'sales@turingflow.ai',
|
||||
hours: 'Mon-Fri 9:00-18:00',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const t = content[language]
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// In a real application, you would send this to your backend
|
||||
console.log('Form submitted:', { email })
|
||||
setSubmitted(true)
|
||||
setTimeout(() => {
|
||||
setSubmitted(false)
|
||||
setEmail('')
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-16 md:py-24 bg-gradient-to-br from-brand-primary via-brand-primary/90 to-brand-secondary">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="bg-white rounded-3xl shadow-2xl overflow-hidden">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2">
|
||||
{/* Left Side - Form */}
|
||||
<div className="p-8 md:p-12 lg:p-16">
|
||||
<div className="max-w-md mx-auto lg:mx-0">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-brand-dark mb-4">{t.title}</h2>
|
||||
<p className="text-gray-600 mb-8 text-lg">{t.subtitle}</p>
|
||||
|
||||
{submitted ? (
|
||||
<div className="bg-green-50 border border-green-200 rounded-xl p-6 text-center animate-fade-in">
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-green-800 mb-2">提交成功！</h3>
|
||||
<p className="text-green-700">{t.submittedMessage}</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{t.namePlaceholder}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent transition-all"
|
||||
placeholder={t.namePlaceholder}
|
||||
aria-label={t.namePlaceholder}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{t.emailPlaceholder}
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent transition-all"
|
||||
placeholder={t.emailPlaceholder}
|
||||
aria-label={t.emailPlaceholder}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{t.companyPlaceholder}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-transparent transition-all"
|
||||
placeholder={t.companyPlaceholder}
|
||||
aria-label={t.companyPlaceholder}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-4 bg-gradient-to-r from-brand-primary to-brand-secondary text-white font-semibold rounded-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] flex items-center justify-center gap-2"
|
||||
aria-label={t.submitButton}
|
||||
>
|
||||
<span>{t.submitButton}</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>
|
||||
</button>
|
||||
|
||||
<p className="text-xs text-gray-500 text-center">
|
||||
提交即表示您同意我们的
|
||||
<a href="#" className="text-brand-primary hover:underline ml-1">隐私政策</a>
|
||||
和
|
||||
<a href="#" className="text-brand-primary hover:underline ml-1">服务条款</a>
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Features & Contact */}
|
||||
<div className="bg-gradient-to-br from-brand-primary/10 to-brand-secondary/10 p-8 md:p-12 lg:p-16">
|
||||
<div className="max-w-md mx-auto lg:mx-0">
|
||||
<h3 className="text-2xl font-bold text-brand-dark mb-8">为什么选择我们</h3>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-12">
|
||||
{t.features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-xl p-4 flex items-center gap-3 shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-brand-primary/20 to-brand-secondary/20 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="font-medium text-gray-700">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl p-6 shadow-sm">
|
||||
<h4 className="text-xl font-bold text-brand-dark mb-4">{t.contactInfo.title}</h4>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-brand-primary/10 to-brand-secondary/10 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">{t.contactInfo.phone}</div>
|
||||
<div className="text-sm text-gray-500">{t.contactInfo.hours}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-brand-primary/10 to-brand-secondary/10 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">{t.contactInfo.email}</div>
|
||||
<div className="text-sm text-gray-500">销售团队</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-gray-200">
|
||||
<p className="text-sm text-gray-600 mb-3">快速响应：</p>
|
||||
<div className="flex gap-2">
|
||||
<a
|
||||
href={`https://wa.me/862112345678?text=${encodeURIComponent('您好，我想了解图灵环流的AI解决方案')}`}
|
||||
className="flex-1 px-4 py-2 bg-green-500 text-white rounded-lg text-center hover:bg-green-600 transition-colors"
|
||||
aria-label="WhatsApp联系我们"
|
||||
>
|
||||
WhatsApp
|
||||
</a>
|
||||
<a
|
||||
href="https://weixin.qq.com"
|
||||
className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg text-center hover:bg-green-700 transition-colors"
|
||||
aria-label="微信联系我们"
|
||||
>
|
||||
微信
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,13 +1,176 @@
|
||||
import React from 'react'
|
||||
|
||||
export const Footer: React.FC = () => {
|
||||
interface FooterProps {
|
||||
language?: 'zh' | 'en'
|
||||
}
|
||||
|
||||
export const Footer: React.FC<FooterProps> = ({ language = 'zh' }) => {
|
||||
const content = {
|
||||
zh: {
|
||||
company: '图灵环流科技有限公司',
|
||||
description: '领先的人工智能解决方案提供商，致力于为企业提供智能化的数字化转型服务。',
|
||||
products: '产品',
|
||||
solutions: '解决方案',
|
||||
resources: '资源',
|
||||
companyLinks: '公司',
|
||||
legal: '法律',
|
||||
contact: '联系方式',
|
||||
address: '上海市浦东新区张江高科技园区',
|
||||
phone: '+86 21 1234 5678',
|
||||
email: 'contact@turingflow.ai',
|
||||
copyright: '© 2024 图灵环流科技有限公司 版权所有',
|
||||
privacy: '隐私政策',
|
||||
terms: '服务条款',
|
||||
cookies: 'Cookie政策',
|
||||
blog: '博客',
|
||||
docs: '文档',
|
||||
support: '技术支持',
|
||||
careers: '招聘',
|
||||
about: '关于我们',
|
||||
partners: '合作伙伴',
|
||||
},
|
||||
en: {
|
||||
company: 'TuringFlow Technology Co., Ltd.',
|
||||
description: 'Leading AI solutions provider dedicated to intelligent digital transformation services for enterprises.',
|
||||
products: 'Products',
|
||||
solutions: 'Solutions',
|
||||
resources: 'Resources',
|
||||
companyLinks: 'Company',
|
||||
legal: 'Legal',
|
||||
contact: 'Contact',
|
||||
address: 'Zhangjiang High-Tech Park, Pudong, Shanghai',
|
||||
phone: '+86 21 1234 5678',
|
||||
email: 'contact@turingflow.ai',
|
||||
copyright: '© 2024 TuringFlow Technology Co., Ltd. All rights reserved.',
|
||||
privacy: 'Privacy Policy',
|
||||
terms: 'Terms of Service',
|
||||
cookies: 'Cookie Policy',
|
||||
blog: 'Blog',
|
||||
docs: 'Documentation',
|
||||
support: 'Support',
|
||||
careers: 'Careers',
|
||||
about: 'About Us',
|
||||
partners: 'Partners',
|
||||
},
|
||||
}
|
||||
|
||||
const t = content[language]
|
||||
|
||||
return (
|
||||
<footer className="bg-gray-50 border-t border-gray-200 py-8 mt-12">
|
||||
<div className="container mx-auto px-4 text-center text-gray-600">
|
||||
<p>Powered by TenantCMS</p>
|
||||
<p className="text-sm mt-2">
|
||||
Using X-Tenant-Slug for multi-tenant authentication
|
||||
</p>
|
||||
<footer className="bg-brand-dark text-white">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
||||
{/* Company Info */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-brand-primary to-brand-secondary rounded-xl flex items-center justify-center">
|
||||
<span className="text-white font-bold text-xl">TF</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">
|
||||
图灵环流 <span className="text-brand-accent">TuringFlow</span>
|
||||
</h2>
|
||||
<p className="text-gray-300 text-sm">{t.company}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-300 mb-6 max-w-md">
|
||||
{t.description}
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<a href="#" className="text-gray-300 hover:text-white transition-colors" aria-label="Twitter">
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" className="text-gray-300 hover:text-white transition-colors" aria-label="LinkedIn">
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" className="text-gray-300 hover:text-white transition-colors" aria-label="GitHub">
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products & Solutions */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 text-brand-accent">{t.products}</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">AI平台</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">数据分析</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">自动化流程</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">智能客服</a></li>
|
||||
</ul>
|
||||
<h3 className="text-lg font-semibold mb-4 mt-6 text-brand-accent">{t.solutions}</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">金融科技</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">医疗健康</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">智能制造</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">零售电商</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Resources & Company */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 text-brand-accent">{t.resources}</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">{t.blog}</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">{t.docs}</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">{t.support}</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">{t.careers}</a></li>
|
||||
</ul>
|
||||
<h3 className="text-lg font-semibold mb-4 mt-6 text-brand-accent">{t.companyLinks}</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">{t.about}</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">{t.partners}</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">新闻中心</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">投资者关系</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact & Legal */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 text-brand-accent">{t.contact}</h3>
|
||||
<ul className="space-y-3 text-gray-300">
|
||||
<li className="flex items-start gap-2">
|
||||
<svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<span>{t.address}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
<span>{t.phone}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span>{t.email}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 className="text-lg font-semibold mb-4 mt-6 text-brand-accent">{t.legal}</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">{t.privacy}</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">{t.terms}</a></li>
|
||||
<li><a href="#" className="text-gray-300 hover:text-white transition-colors">{t.cookies}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Copyright */}
|
||||
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm">
|
||||
<p>{t.copyright}</p>
|
||||
<p className="mt-2">
|
||||
备案号：沪ICP备12345678号 | 公安备案号：31011502001234
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
@@ -1,18 +1,188 @@
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
|
||||
interface HeaderProps {
|
||||
language?: 'zh' | 'en'
|
||||
onLanguageChange?: (lang: 'zh' | 'en') => void
|
||||
}
|
||||
|
||||
export const Header: React.FC<HeaderProps> = ({ language = 'zh', onLanguageChange }) => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
|
||||
const navigationItems = {
|
||||
zh: {
|
||||
home: '首页',
|
||||
products: '产品',
|
||||
solutions: '解决方案',
|
||||
about: '关于我们',
|
||||
contact: '联系我们',
|
||||
},
|
||||
en: {
|
||||
home: 'Home',
|
||||
products: 'Products',
|
||||
solutions: 'Solutions',
|
||||
about: 'About',
|
||||
contact: 'Contact',
|
||||
},
|
||||
}
|
||||
|
||||
const currentNav = navigationItems[language]
|
||||
|
||||
export const Header: React.FC = () => {
|
||||
return (
|
||||
<header className="bg-white border-b border-gray-200 sticky top-0 z-10">
|
||||
<header className="bg-white/90 backdrop-blur-md border-b border-gray-100 sticky top-0 z-50 shadow-sm">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
TenantCMS <span className="text-blue-600">Demo</span>
|
||||
</h1>
|
||||
<nav className="flex items-center gap-4">
|
||||
<a href="/" className="text-gray-600 hover:text-gray-900">首页</a>
|
||||
<a href="/categories" className="text-gray-600 hover:text-gray-900">分类</a>
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3">
|
||||
<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 text-lg">TF</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-brand-dark">
|
||||
图灵环流 <span className="text-brand-primary">TuringFlow</span>
|
||||
</h1>
|
||||
<p className="text-xs text-gray-500">Intelligent AI Solutions</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<a
|
||||
href="#home"
|
||||
className="text-gray-700 hover:text-brand-primary transition-colors font-medium"
|
||||
aria-label={currentNav.home}
|
||||
>
|
||||
{currentNav.home}
|
||||
</a>
|
||||
<a
|
||||
href="#products"
|
||||
className="text-gray-700 hover:text-brand-primary transition-colors font-medium"
|
||||
aria-label={currentNav.products}
|
||||
>
|
||||
{currentNav.products}
|
||||
</a>
|
||||
<a
|
||||
href="#solutions"
|
||||
className="text-gray-700 hover:text-brand-primary transition-colors font-medium"
|
||||
aria-label={currentNav.solutions}
|
||||
>
|
||||
{currentNav.solutions}
|
||||
</a>
|
||||
<a
|
||||
href="#about"
|
||||
className="text-gray-700 hover:text-brand-primary transition-colors font-medium"
|
||||
aria-label={currentNav.about}
|
||||
>
|
||||
{currentNav.about}
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{/* Right Section */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Language Selector */}
|
||||
<div className="hidden md:flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => onLanguageChange?.('zh')}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${language === 'zh' ? 'bg-brand-primary text-white' : 'text-gray-600 hover:text-brand-primary'}`}
|
||||
aria-label="切换到中文"
|
||||
>
|
||||
中文
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onLanguageChange?.('en')}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${language === 'en' ? 'bg-brand-primary text-white' : 'text-gray-600 hover:text-brand-primary'}`}
|
||||
aria-label="Switch to English"
|
||||
>
|
||||
EN
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<a
|
||||
href="#contact"
|
||||
className="hidden md:inline-flex items-center px-6 py-3 bg-gradient-to-r from-brand-primary to-brand-secondary text-white font-medium rounded-lg hover:shadow-lg transition-all duration-300 hover:scale-105"
|
||||
aria-label={currentNav.contact}
|
||||
>
|
||||
{currentNav.contact}
|
||||
</a>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded={isMenuOpen}
|
||||
>
|
||||
<div className="w-6 h-6 flex flex-col justify-center gap-1">
|
||||
<span className={`block h-0.5 bg-gray-700 transition-all ${isMenuOpen ? 'rotate-45 translate-y-1.5' : ''}`}></span>
|
||||
<span className={`block h-0.5 bg-gray-700 transition-all ${isMenuOpen ? 'opacity-0' : ''}`}></span>
|
||||
<span className={`block h-0.5 bg-gray-700 transition-all ${isMenuOpen ? '-rotate-45 -translate-y-1.5' : ''}`}></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden mt-4 pb-4 border-t border-gray-100 pt-4 animate-fade-in">
|
||||
<div className="flex flex-col gap-3">
|
||||
<a
|
||||
href="#home"
|
||||
className="px-4 py-3 text-gray-700 hover:text-brand-primary hover:bg-gray-50 rounded-lg transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
{currentNav.home}
|
||||
</a>
|
||||
<a
|
||||
href="#products"
|
||||
className="px-4 py-3 text-gray-700 hover:text-brand-primary hover:bg-gray-50 rounded-lg transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
{currentNav.products}
|
||||
</a>
|
||||
<a
|
||||
href="#solutions"
|
||||
className="px-4 py-3 text-gray-700 hover:text-brand-primary hover:bg-gray-50 rounded-lg transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
{currentNav.solutions}
|
||||
</a>
|
||||
<a
|
||||
href="#about"
|
||||
className="px-4 py-3 text-gray-700 hover:text-brand-primary hover:bg-gray-50 rounded-lg transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
{currentNav.about}
|
||||
</a>
|
||||
<div className="flex items-center gap-2 mt-2 px-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
onLanguageChange?.('zh')
|
||||
setIsMenuOpen(false)
|
||||
}}
|
||||
className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium ${language === 'zh' ? 'bg-brand-primary text-white' : 'bg-gray-100 text-gray-700'}`}
|
||||
>
|
||||
中文
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
onLanguageChange?.('en')
|
||||
setIsMenuOpen(false)
|
||||
}}
|
||||
className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium ${language === 'en' ? 'bg-brand-primary text-white' : 'bg-gray-100 text-gray-700'}`}
|
||||
>
|
||||
English
|
||||
</button>
|
||||
</div>
|
||||
<a
|
||||
href="#contact"
|
||||
className="mt-2 px-4 py-3 bg-gradient-to-r from-brand-primary to-brand-secondary text-white font-medium rounded-lg text-center"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
{currentNav.contact}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
117
src/components/HeroSection.tsx
Normal file
117
src/components/HeroSection.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import React from 'react'
|
||||
|
||||
interface HeroSectionProps {
|
||||
language?: 'zh' | 'en'
|
||||
}
|
||||
|
||||
export const HeroSection: React.FC<HeroSectionProps> = ({ language = 'zh' }) => {
|
||||
const content = {
|
||||
zh: {
|
||||
title: '引领AI时代的企业智能化转型',
|
||||
subtitle: '图灵环流提供企业级人工智能解决方案，帮助全球企业实现数字化转型与创新增长',
|
||||
primaryCTA: '免费试用',
|
||||
secondaryCTA: '查看演示',
|
||||
stats: [
|
||||
{ value: '500+', label: '企业客户' },
|
||||
{ value: '99.9%', label: '系统可用性' },
|
||||
{ value: '40+', label: '国家/地区' },
|
||||
{ value: '24/7', label: '技术支持' },
|
||||
],
|
||||
},
|
||||
en: {
|
||||
title: 'Leading Enterprise AI Transformation',
|
||||
subtitle: 'TuringFlow provides enterprise-grade AI solutions to help global businesses achieve digital transformation and innovative growth',
|
||||
primaryCTA: 'Free Trial',
|
||||
secondaryCTA: 'View Demo',
|
||||
stats: [
|
||||
{ value: '500+', label: 'Enterprise Clients' },
|
||||
{ value: '99.9%', label: 'System Uptime' },
|
||||
{ value: '40+', label: 'Countries' },
|
||||
{ value: '24/7', label: 'Support' },
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
const t = content[language]
|
||||
|
||||
return (
|
||||
<section id="home" className="relative overflow-hidden bg-gradient-to-br from-brand-light via-white to-brand-light/50">
|
||||
{/* Background Elements */}
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-20 left-10 w-72 h-72 bg-gradient-to-r from-brand-primary/10 to-brand-secondary/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-gradient-to-l from-brand-accent/10 to-brand-primary/10 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-16 md:py-24 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
{/* Badge */}
|
||||
<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-8 animate-fade-in">
|
||||
<span className="w-2 h-2 bg-brand-primary rounded-full animate-pulse"></span>
|
||||
<span className="text-sm font-medium">全球领先的AI解决方案提供商</span>
|
||||
</div>
|
||||
|
||||
{/* Main Title */}
|
||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-brand-dark mb-6 animate-slide-up">
|
||||
{t.title}
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto animate-slide-up" style={{ animationDelay: '0.1s' }}>
|
||||
{t.subtitle}
|
||||
</p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-16 animate-slide-up" style={{ animationDelay: '0.2s' }}>
|
||||
<a
|
||||
href="#contact"
|
||||
className="px-8 py-4 bg-gradient-to-r from-brand-primary to-brand-secondary text-white font-semibold rounded-xl hover:shadow-xl transition-all duration-300 hover:scale-105 inline-flex items-center justify-center gap-2"
|
||||
aria-label={t.primaryCTA}
|
||||
>
|
||||
<span>{t.primaryCTA}</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-4 bg-white border-2 border-gray-200 text-gray-700 font-semibold rounded-xl hover:border-brand-primary hover:text-brand-primary transition-all duration-300 inline-flex items-center justify-center gap-2"
|
||||
aria-label={t.secondaryCTA}
|
||||
>
|
||||
<span>{t.secondaryCTA}</span>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto animate-slide-up" style={{ animationDelay: '0.3s' }}>
|
||||
{t.stats.map((stat, index) => (
|
||||
<div key={index} className="bg-white/80 backdrop-blur-sm border border-gray-100 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div className="text-3xl font-bold text-brand-dark mb-2">{stat.value}</div>
|
||||
<div className="text-gray-600">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Trusted By */}
|
||||
<div className="mt-16 animate-fade-in" style={{ animationDelay: '0.4s' }}>
|
||||
<p className="text-gray-500 mb-6">全球企业信赖选择</p>
|
||||
<div className="flex flex-wrap justify-center gap-8 md:gap-12 opacity-70">
|
||||
<div className="text-gray-400 font-semibold">阿里巴巴</div>
|
||||
<div className="text-gray-400 font-semibold">腾讯</div>
|
||||
<div className="text-gray-400 font-semibold">华为</div>
|
||||
<div className="text-gray-400 font-semibold">字节跳动</div>
|
||||
<div className="text-gray-400 font-semibold">微软</div>
|
||||
<div className="text-gray-400 font-semibold">亚马逊</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative Elements */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white to-transparent"></div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
271
src/components/ProductsSection.tsx
Normal file
271
src/components/ProductsSection.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
199
src/components/SocialProof.tsx
Normal file
199
src/components/SocialProof.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
import React, { useState } from 'react'
|
||||
|
||||
interface SocialProofProps {
|
||||
language?: 'zh' | 'en'
|
||||
}
|
||||
|
||||
export const SocialProof: React.FC<SocialProofProps> = ({ language = 'zh' }) => {
|
||||
const [activeIndex, setActiveIndex] = useState(0)
|
||||
|
||||
const content = {
|
||||
zh: {
|
||||
title: '客户信赖与成功故事',
|
||||
subtitle: '全球500+企业选择图灵环流实现智能化转型',
|
||||
testimonials: [
|
||||
{
|
||||
quote: '图灵环流的AI平台帮助我们实现了生产线的智能化改造，生产效率提升了40%，成本降低了25%。',
|
||||
author: '张明',
|
||||
position: '首席技术官',
|
||||
company: '某大型制造企业',
|
||||
logo: '🏭',
|
||||
},
|
||||
{
|
||||
quote: '他们的数据分析套件让我们能够实时洞察市场变化，决策效率提升了3倍，营收增长了15%。',
|
||||
author: '李娜',
|
||||
position: '数据分析总监',
|
||||
company: '知名电商平台',
|
||||
logo: '🛒',
|
||||
},
|
||||
{
|
||||
quote: '流程自动化引擎帮助我们减少了80%的手动操作，员工可以更专注于高价值工作，客户满意度大幅提升。',
|
||||
author: '王强',
|
||||
position: '运营副总裁',
|
||||
company: '金融服务公司',
|
||||
logo: '💰',
|
||||
},
|
||||
],
|
||||
metrics: [
|
||||
{ value: '40%', label: '效率提升' },
|
||||
{ value: '25%', label: '成本降低' },
|
||||
{ value: '3倍', label: '决策加速' },
|
||||
{ value: '98%', label: '客户满意度' },
|
||||
],
|
||||
},
|
||||
en: {
|
||||
title: 'Customer Trust & Success Stories',
|
||||
subtitle: '500+ global enterprises choose TuringFlow for intelligent transformation',
|
||||
testimonials: [
|
||||
{
|
||||
quote: 'TuringFlow AI platform helped us achieve intelligent transformation of our production line, improving efficiency by 40% and reducing costs by 25%.',
|
||||
author: 'Zhang Ming',
|
||||
position: 'Chief Technology Officer',
|
||||
company: 'Large Manufacturing Enterprise',
|
||||
logo: '🏭',
|
||||
},
|
||||
{
|
||||
quote: 'Their data analytics suite enables us to gain real-time market insights, improving decision efficiency by 3x and increasing revenue by 15%.',
|
||||
author: 'Li Na',
|
||||
position: 'Data Analytics Director',
|
||||
company: 'Leading E-commerce Platform',
|
||||
logo: '🛒',
|
||||
},
|
||||
{
|
||||
quote: 'The process automation engine helped us reduce 80% of manual operations, allowing employees to focus on high-value work and significantly improving customer satisfaction.',
|
||||
author: 'Wang Qiang',
|
||||
position: 'VP of Operations',
|
||||
company: 'Financial Services Company',
|
||||
logo: '💰',
|
||||
},
|
||||
],
|
||||
metrics: [
|
||||
{ value: '40%', label: 'Efficiency Improvement' },
|
||||
{ value: '25%', label: 'Cost Reduction' },
|
||||
{ value: '3x', label: 'Decision Speed' },
|
||||
{ value: '98%', label: 'Customer Satisfaction' },
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
const t = content[language]
|
||||
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-brand-dark text-white">
|
||||
<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 mb-4">{t.title}</h2>
|
||||
<p className="text-xl text-gray-300">{t.subtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Testimonials */}
|
||||
<div>
|
||||
<div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-8 md:p-12">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-brand-primary/20 to-brand-secondary/20 rounded-full flex items-center justify-center text-2xl">
|
||||
{t.testimonials[activeIndex].logo}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-xl">{t.testimonials[activeIndex].author}</h4>
|
||||
<p className="text-gray-300">{t.testimonials[activeIndex].position}</p>
|
||||
<p className="text-brand-accent">{t.testimonials[activeIndex].company}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<blockquote className="text-xl italic text-gray-200 mb-8">
|
||||
"{t.testimonials[activeIndex].quote}"
|
||||
</blockquote>
|
||||
|
||||
{/* Testimonial Navigation */}
|
||||
<div className="flex gap-2">
|
||||
{t.testimonials.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setActiveIndex(index)}
|
||||
className={`w-3 h-3 rounded-full transition-all ${activeIndex === index ? 'bg-brand-accent' : 'bg-white/30 hover:bg-white/50'}`}
|
||||
aria-label={`查看第${index + 1}个客户评价`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonial Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
|
||||
{t.testimonials.map((testimonial, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setActiveIndex(index)}
|
||||
className={`p-4 rounded-lg text-left transition-all ${activeIndex === index ? 'bg-white/20 border border-brand-accent' : 'bg-white/5 hover:bg-white/10 border border-white/10'}`}
|
||||
aria-label={`查看${testimonial.author}的评价`}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-brand-primary/20 to-brand-secondary/20 rounded-full flex items-center justify-center">
|
||||
{testimonial.logo}
|
||||
</div>
|
||||
<span className="font-medium">{testimonial.author}</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-300 line-clamp-2">{testimonial.quote}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metrics & Partners */}
|
||||
<div>
|
||||
{/* Metrics Grid */}
|
||||
<div className="grid grid-cols-2 gap-6 mb-12">
|
||||
{t.metrics.map((metric, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 text-center hover:bg-white/10 transition-colors animate-slide-up"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
<div className="text-4xl font-bold text-brand-accent mb-2">{metric.value}</div>
|
||||
<div className="text-gray-300">{metric.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Partner Logos */}
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8">
|
||||
<h3 className="text-xl font-bold mb-6 text-center">我们的合作伙伴</h3>
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{[
|
||||
{ name: '阿里巴巴', color: 'text-orange-400' },
|
||||
{ name: '腾讯', color: 'text-blue-400' },
|
||||
{ name: '华为', color: 'text-red-400' },
|
||||
{ name: '微软', color: 'text-green-400' },
|
||||
{ name: '亚马逊', color: 'text-yellow-400' },
|
||||
{ name: '字节跳动', color: 'text-purple-400' },
|
||||
].map((partner, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white/5 rounded-lg p-4 flex flex-col items-center justify-center hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<div className={`text-2xl font-bold ${partner.color} mb-2`}>
|
||||
{partner.name.charAt(0)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-300">{partner.name}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Certifications */}
|
||||
<div className="mt-8 bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
|
||||
<h3 className="text-xl font-bold mb-4 text-center">认证与合规</h3>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<div className="bg-white/10 rounded-lg px-4 py-2 text-sm">ISO 27001</div>
|
||||
<div className="bg-white/10 rounded-lg px-4 py-2 text-sm">GDPR</div>
|
||||
<div className="bg-white/10 rounded-lg px-4 py-2 text-sm">SOC 2</div>
|
||||
<div className="bg-white/10 rounded-lg px-4 py-2 text-sm">PCI DSS</div>
|
||||
<div className="bg-white/10 rounded-lg px-4 py-2 text-sm">HIPAA</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
138
src/components/ValueProposition.tsx
Normal file
138
src/components/ValueProposition.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import React from 'react'
|
||||
|
||||
interface ValuePropositionProps {
|
||||
language?: 'zh' | 'en'
|
||||
}
|
||||
|
||||
export const ValueProposition: React.FC<ValuePropositionProps> = ({ language = 'zh' }) => {
|
||||
const content = {
|
||||
zh: {
|
||||
title: '我们的核心价值',
|
||||
subtitle: '通过深度技术创新，为企业创造持久价值',
|
||||
values: [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
),
|
||||
title: '极致性能',
|
||||
description: '毫秒级响应，99.9%可用性，支撑百万级并发处理',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
),
|
||||
title: '企业级安全',
|
||||
description: '端到端加密、隐私保护、GDPR合规、ISO27001认证',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
),
|
||||
title: '全球化部署',
|
||||
description: '40+国家数据中心，本地化合规，智能路由优化',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
),
|
||||
title: '智能优化',
|
||||
description: 'AI驱动的性能预测、自动扩缩容、成本优化',
|
||||
},
|
||||
],
|
||||
},
|
||||
en: {
|
||||
title: 'Our Core Values',
|
||||
subtitle: 'Creating lasting value for enterprises through deep technological innovation',
|
||||
values: [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
),
|
||||
title: 'Extreme Performance',
|
||||
description: 'Millisecond response, 99.9% availability, supporting million-level concurrency',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
),
|
||||
title: 'Enterprise Security',
|
||||
description: 'End-to-end encryption, privacy protection, GDPR compliance, ISO27001 certified',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
),
|
||||
title: 'Global Deployment',
|
||||
description: '40+ country data centers, localized compliance, intelligent routing optimization',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
),
|
||||
title: 'Intelligent Optimization',
|
||||
description: 'AI-driven performance prediction, auto-scaling, cost optimization',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
const t = content[language]
|
||||
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-white">
|
||||
<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>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{t.values.map((value, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative bg-white border border-gray-100 rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 animate-slide-up"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
{/* Icon Container */}
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-brand-primary/10 to-brand-secondary/10 rounded-xl flex items-center justify-center mb-6 text-brand-primary group-hover:scale-110 transition-transform duration-300">
|
||||
{value.icon}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="text-xl font-bold text-brand-dark mb-3">{value.title}</h3>
|
||||
<p className="text-gray-600 mb-6">{value.description}</p>
|
||||
|
||||
{/* Learn More Link */}
|
||||
<a
|
||||
href="#learn-more"
|
||||
className="inline-flex items-center text-brand-primary font-medium hover:text-brand-secondary transition-colors"
|
||||
aria-label={`了解更多关于${value.title}`}
|
||||
>
|
||||
<span>了解更多</span>
|
||||
<svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -2,7 +2,91 @@
|
||||
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
/* 导入字体 */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* 滚动行为 */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* 自定义滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
/* 焦点样式 */
|
||||
:focus-visible {
|
||||
outline: 2px solid #2563eb;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 选择样式 */
|
||||
::selection {
|
||||
background-color: rgba(37, 99, 235, 0.2);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
/* 基础样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 图片优化 */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 响应式容器 */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
@@ -1,116 +1,32 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { Header } from '../components/Header'
|
||||
import { Footer } from '../components/Footer'
|
||||
import { PostCard } from '../components/PostCard'
|
||||
import { PostCardSkeleton } from '../components/PostCardSkeleton'
|
||||
import { Posts } from '../clientsdk/sdk.gen'
|
||||
import { createClient } from '../clientsdk/client'
|
||||
import { customQuerySerializer } from '../clientsdk/querySerializer'
|
||||
import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config'
|
||||
|
||||
const client = createClient({
|
||||
baseUrl: API_URL,
|
||||
querySerializer: customQuerySerializer,
|
||||
headers: {
|
||||
'X-Tenant-Slug': TENANT_SLUG,
|
||||
'X-API-Key': TENANT_API_KEY,
|
||||
},
|
||||
})
|
||||
import { HeroSection } from '../components/HeroSection'
|
||||
import { ValueProposition } from '../components/ValueProposition'
|
||||
import { ProductsSection } from '../components/ProductsSection'
|
||||
import { SocialProof } from '../components/SocialProof'
|
||||
import { CTASection } from '../components/CTASection'
|
||||
|
||||
export const Home: React.FC = () => {
|
||||
const [posts, setPosts] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [language, setLanguage] = useState<'zh' | 'en'>('zh')
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPosts = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
const response = await Posts.listPosts({
|
||||
client,
|
||||
query: {
|
||||
limit: 10,
|
||||
sort: '-createdAt',
|
||||
},
|
||||
})
|
||||
|
||||
setPosts((response as any)?.data?.docs || [])
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败')
|
||||
console.error('获取文章失败:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchPosts()
|
||||
}, [])
|
||||
|
||||
const stripHtml = (html: string): string => {
|
||||
const tmp = document.createElement('div')
|
||||
tmp.innerHTML = html
|
||||
return tmp.textContent || tmp.innerText || ''
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
const getCategoryTitle = (post: any): string | undefined => {
|
||||
// categories is an array, get the first one
|
||||
return post.categories?.[0]?.title
|
||||
}
|
||||
|
||||
const handlePostClick = (slug: string) => {
|
||||
window.location.href = `/posts/${slug}`
|
||||
const handleLanguageChange = (lang: 'zh' | 'en') => {
|
||||
setLanguage(lang)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header />
|
||||
<div className="min-h-screen">
|
||||
<Header language={language} onLanguageChange={handleLanguageChange} />
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<section className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">📚 最新文章</h2>
|
||||
<p className="text-gray-600">探索我们的最新内容</p>
|
||||
</section>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
||||
<strong>错误：</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{loading
|
||||
? Array.from({ length: 6 }).map((_, i) => <PostCardSkeleton key={i} />)
|
||||
: posts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
title={post.title}
|
||||
excerpt={stripHtml(post.content_html || post.content?.root?.children?.[0]?.children?.[0]?.text || post.title)}
|
||||
category={getCategoryTitle(post)}
|
||||
date={formatDate(post.createdAt)}
|
||||
onClick={() => handlePostClick(post.slug)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!loading && posts.length === 0 && !error && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500 text-lg">暂无文章</p>
|
||||
</div>
|
||||
)}
|
||||
<main>
|
||||
<HeroSection language={language} />
|
||||
<ValueProposition language={language} />
|
||||
<ProductsSection language={language} />
|
||||
<SocialProof language={language} />
|
||||
<CTASection language={language} />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
<Footer language={language} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,7 +5,40 @@ export default {
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
primary: '#2563eb', // 科技蓝 - 主品牌色
|
||||
secondary: '#7c3aed', // 科技紫 - 强调色
|
||||
accent: '#06b6d4', // 青色 - 点缀色
|
||||
dark: '#0f172a', // 深色背景
|
||||
light: '#f8fafc', // 浅色背景
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.5s ease-out',
|
||||
'slide-up': 'slideUp 0.5s ease-out',
|
||||
'slide-in-right': 'slideInRight 0.5s ease-out',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
slideInRight: {
|
||||
'0%': { transform: 'translateX(20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateX(0)', opacity: '1' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
|
||||
@@ -7,8 +7,8 @@ export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 3000,
|
||||
strictPort: true,
|
||||
port: 5173,
|
||||
strictPort: false,
|
||||
allowedHosts: true
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user