243 lines
12 KiB
TypeScript
243 lines
12 KiB
TypeScript
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>
|
||
)
|
||
} |