张翔
522f1e09a7
重构整体UI设计，采用红色主题配色方案 优化页面布局结构，将Header和Footer移至page组件 更新按钮样式和交互效果，增强视觉反馈 调整全局字体配置，使用思源黑体作为中文字体 改进各区块卡片样式，增加悬停动画效果 优化响应式设计，提升移动端体验
213 lines
9.1 KiB
TypeScript
213 lines
9.1 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import { useInView } from 'framer-motion';
|
||
import { useRef } from 'react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Textarea } from '@/components/ui/textarea';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Mail, Phone, MapPin, Send, Loader2, Clock, MessageCircle, HeadphonesIcon, Sparkles } from 'lucide-react';
|
||
import { COMPANY_INFO } from '@/lib/constants';
|
||
|
||
export function ContactSection() {
|
||
const ref = useRef(null);
|
||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||
|
||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
setIsSubmitting(true);
|
||
|
||
// Simulate form submission
|
||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||
|
||
setIsSubmitting(false);
|
||
setIsSubmitted(true);
|
||
}
|
||
|
||
return (
|
||
<section id="contact" className="py-24 bg-[#FAF8F8]" ref={ref}>
|
||
<div className="container-custom">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6 }}
|
||
className="text-center max-w-3xl mx-auto mb-16"
|
||
>
|
||
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
|
||
联系我们
|
||
</span>
|
||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
|
||
与我们取得<span className="text-[#C41E3A]">联系</span>
|
||
</h2>
|
||
<p className="text-lg text-[#4A4A4A]">
|
||
无论您有任何问题或合作意向，我们都很乐意与您交流
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
||
{/* Contact Info */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
className="flex flex-col gap-6 h-full"
|
||
>
|
||
<Card className="flex-1 flex flex-col border-[#E8E0E0] bg-white">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2 text-[#1A1A1A]">
|
||
<Sparkles className="w-5 h-5 text-[#C41E3A]" />
|
||
我们的承诺
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6 flex-1">
|
||
<div className="flex items-start gap-4">
|
||
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center flex-shrink-0">
|
||
<HeadphonesIcon className="w-5 h-5 text-[#C41E3A]" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-[#1A1A1A]">专业响应</h3>
|
||
<p className="text-[#6B6B6B]">工作日 2 小时内快速响应您的咨询</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-4">
|
||
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center flex-shrink-0">
|
||
<MessageCircle className="w-5 h-5 text-[#C41E3A]" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-[#1A1A1A]">免费咨询</h3>
|
||
<p className="text-[#6B6B6B]">提供免费的业务咨询和方案评估服务</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-4">
|
||
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center flex-shrink-0">
|
||
<Sparkles className="w-5 h-5 text-[#C41E3A]" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-[#1A1A1A]">定制方案</h3>
|
||
<p className="text-[#6B6B6B]">根据您的需求量身定制最优解决方案</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-[#E8E0E0] bg-white">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2 text-[#1A1A1A]">
|
||
<Clock className="w-5 h-5 text-[#C41E3A]" />
|
||
工作时间
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between">
|
||
<span className="text-[#6B6B6B]">周一至周五</span>
|
||
<span className="text-[#1A1A1A] font-medium">9:00 - 18:00</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
|
||
{/* Contact Form */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 20 }}
|
||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.3 }}
|
||
className="h-full"
|
||
>
|
||
<Card className="h-full flex flex-col border-[#E8E0E0] bg-white">
|
||
<CardHeader>
|
||
<CardTitle className="text-[#1A1A1A]">发送消息</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{isSubmitted ? (
|
||
<div className="text-center py-12">
|
||
<div className="w-16 h-16 bg-[#FEF2F4] rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<Send className="w-8 h-8 text-[#C41E3A]" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-[#1A1A1A] mb-2">消息已发送</h3>
|
||
<p className="text-[#6B6B6B]">感谢您的留言，我们会尽快与您联系！</p>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<label htmlFor="name" className="text-sm font-medium text-[#1A1A1A]">
|
||
姓名
|
||
</label>
|
||
<Input
|
||
id="name"
|
||
placeholder="请输入您的姓名"
|
||
required
|
||
className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label htmlFor="phone" className="text-sm font-medium text-[#1A1A1A]">
|
||
电话
|
||
</label>
|
||
<Input
|
||
id="phone"
|
||
type="tel"
|
||
placeholder="请输入您的电话"
|
||
required
|
||
className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label htmlFor="email" className="text-sm font-medium text-[#1A1A1A]">
|
||
邮箱
|
||
</label>
|
||
<Input
|
||
id="email"
|
||
type="email"
|
||
placeholder="请输入您的邮箱"
|
||
required
|
||
className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label htmlFor="message" className="text-sm font-medium text-[#1A1A1A]">
|
||
留言内容
|
||
</label>
|
||
<Textarea
|
||
id="message"
|
||
placeholder="请输入您想咨询的内容"
|
||
rows={5}
|
||
required
|
||
className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
|
||
/>
|
||
</div>
|
||
<Button
|
||
type="submit"
|
||
className="w-full"
|
||
disabled={isSubmitting}
|
||
>
|
||
{isSubmitting ? (
|
||
<>
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
发送中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Send className="mr-2 h-4 w-4" />
|
||
发送消息
|
||
</>
|
||
)}
|
||
</Button>
|
||
</form>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|