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>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<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'
|
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 (
|
return (
|
||||||
<footer className="bg-gray-50 border-t border-gray-200 py-8 mt-12">
|
<footer className="bg-brand-dark text-white">
|
||||||
<div className="container mx-auto px-4 text-center text-gray-600">
|
<div className="container mx-auto px-4 py-12">
|
||||||
<p>Powered by TenantCMS</p>
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
||||||
<p className="text-sm mt-2">
|
{/* Company Info */}
|
||||||
Using X-Tenant-Slug for multi-tenant authentication
|
<div className="lg:col-span-2">
|
||||||
</p>
|
<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>
|
</div>
|
||||||
</footer>
|
</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 (
|
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="container mx-auto px-4 py-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h1 className="text-2xl font-bold text-gray-900">
|
{/* Logo */}
|
||||||
TenantCMS <span className="text-blue-600">Demo</span>
|
<div className="flex items-center gap-3">
|
||||||
</h1>
|
<div className="w-10 h-10 bg-gradient-to-br from-brand-primary to-brand-secondary rounded-lg flex items-center justify-center">
|
||||||
<nav className="flex items-center gap-4">
|
<span className="text-white font-bold text-lg">TF</span>
|
||||||
<a href="/" className="text-gray-600 hover:text-gray-900">首页</a>
|
</div>
|
||||||
<a href="/categories" className="text-gray-600 hover:text-gray-900">分类</a>
|
<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>
|
</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>
|
</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>
|
</div>
|
||||||
</header>
|
</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";
|
@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 {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 100vh;
|
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 { Header } from '../components/Header'
|
||||||
import { Footer } from '../components/Footer'
|
import { Footer } from '../components/Footer'
|
||||||
import { PostCard } from '../components/PostCard'
|
import { HeroSection } from '../components/HeroSection'
|
||||||
import { PostCardSkeleton } from '../components/PostCardSkeleton'
|
import { ValueProposition } from '../components/ValueProposition'
|
||||||
import { Posts } from '../clientsdk/sdk.gen'
|
import { ProductsSection } from '../components/ProductsSection'
|
||||||
import { createClient } from '../clientsdk/client'
|
import { SocialProof } from '../components/SocialProof'
|
||||||
import { customQuerySerializer } from '../clientsdk/querySerializer'
|
import { CTASection } from '../components/CTASection'
|
||||||
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,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
export const Home: React.FC = () => {
|
export const Home: React.FC = () => {
|
||||||
const [posts, setPosts] = useState<any[]>([])
|
const [language, setLanguage] = useState<'zh' | 'en'>('zh')
|
||||||
const [loading, setLoading] = useState(true)
|
|
||||||
const [error, setError] = useState<string | null>(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
const handleLanguageChange = (lang: 'zh' | 'en') => {
|
||||||
const fetchPosts = async () => {
|
setLanguage(lang)
|
||||||
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}`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen">
|
||||||
<Header />
|
<Header language={language} onLanguageChange={handleLanguageChange} />
|
||||||
|
|
||||||
<main className="container mx-auto px-4 py-8">
|
<main>
|
||||||
<section className="mb-12">
|
<HeroSection language={language} />
|
||||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">📚 最新文章</h2>
|
<ValueProposition language={language} />
|
||||||
<p className="text-gray-600">探索我们的最新内容</p>
|
<ProductsSection language={language} />
|
||||||
</section>
|
<SocialProof language={language} />
|
||||||
|
<CTASection language={language} />
|
||||||
{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>
|
</main>
|
||||||
|
|
||||||
<Footer />
|
<Footer language={language} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,40 @@ export default {
|
|||||||
"./src/**/*.{js,ts,jsx,tsx}",
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
],
|
],
|
||||||
theme: {
|
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: [
|
plugins: [
|
||||||
require('@tailwindcss/typography'),
|
require('@tailwindcss/typography'),
|
||||||
|
|||||||
@@ -7,8 +7,8 @@ export default defineConfig({
|
|||||||
plugins: [react(), tailwindcss()],
|
plugins: [react(), tailwindcss()],
|
||||||
server: {
|
server: {
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
port: 3000,
|
port: 5173,
|
||||||
strictPort: true,
|
strictPort: false,
|
||||||
allowedHosts: true
|
allowedHosts: true
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user