feat(contact-section): 更新联系方式卡片为服务承诺卡片
将联系方式卡片重新设计为服务承诺卡片,展示专业响应、免费咨询和定制方案等优势 更新卡片样式和图标,使用更友好的视觉设计 保持工作时间卡片和消息发送卡片的基本布局
This commit is contained in:
@@ -9,7 +9,7 @@ import { Button } from '@/components/ui/button';
|
|||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Mail, Phone, MapPin, Send, Loader2, Clock } from 'lucide-react';
|
import { Mail, Phone, MapPin, Send, Loader2, Clock, MessageCircle, HeadphonesIcon, Sparkles } from 'lucide-react';
|
||||||
import { COMPANY_INFO } from '@/lib/constants';
|
import { COMPANY_INFO } from '@/lib/constants';
|
||||||
|
|
||||||
export function ContactSection() {
|
export function ContactSection() {
|
||||||
@@ -55,38 +55,41 @@ export function ContactSection() {
|
|||||||
initial={{ opacity: 0, x: -20 }}
|
initial={{ opacity: 0, x: -20 }}
|
||||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
className="space-y-8"
|
className="flex flex-col gap-6 h-full"
|
||||||
>
|
>
|
||||||
<Card>
|
<Card className="flex-1 flex flex-col">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>联系方式</CardTitle>
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Sparkles className="w-5 h-5 text-gray-600" />
|
||||||
|
我们的承诺
|
||||||
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-6">
|
<CardContent className="space-y-6 flex-1">
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
|
<div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||||
<MapPin className="w-5 h-5 text-white" />
|
<HeadphonesIcon className="w-5 h-5 text-gray-700" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold text-black">公司地址</h3>
|
<h3 className="font-semibold text-black">专业响应</h3>
|
||||||
<p className="text-gray-600">{COMPANY_INFO.address}</p>
|
<p className="text-gray-600">工作日 2 小时内快速响应您的咨询</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
|
<div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||||
<Phone className="w-5 h-5 text-white" />
|
<MessageCircle className="w-5 h-5 text-gray-700" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold text-black">联系电话</h3>
|
<h3 className="font-semibold text-black">免费咨询</h3>
|
||||||
<p className="text-gray-600">{COMPANY_INFO.phone}</p>
|
<p className="text-gray-600">提供免费的业务咨询和方案评估服务</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
|
<div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||||
<Mail className="w-5 h-5 text-white" />
|
<Sparkles className="w-5 h-5 text-gray-700" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold text-black">电子邮箱</h3>
|
<h3 className="font-semibold text-black">定制方案</h3>
|
||||||
<p className="text-gray-600">{COMPANY_INFO.email}</p>
|
<p className="text-gray-600">根据您的需求量身定制最优解决方案</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
@@ -95,7 +98,7 @@ export function ContactSection() {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="flex items-center gap-2">
|
<CardTitle className="flex items-center gap-2">
|
||||||
<Clock className="w-5 h-5" />
|
<Clock className="w-5 h-5 text-gray-600" />
|
||||||
工作时间
|
工作时间
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
@@ -115,8 +118,9 @@ export function ContactSection() {
|
|||||||
initial={{ opacity: 0, x: 20 }}
|
initial={{ opacity: 0, x: 20 }}
|
||||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||||
transition={{ duration: 0.6, delay: 0.3 }}
|
transition={{ duration: 0.6, delay: 0.3 }}
|
||||||
|
className="h-full"
|
||||||
>
|
>
|
||||||
<Card>
|
<Card className="h-full flex flex-col">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>发送消息</CardTitle>
|
<CardTitle>发送消息</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|||||||
Reference in New Issue
Block a user