From cc55146ba66935b5ecd088857bcf45431f70dc92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Tue, 3 Feb 2026 08:02:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(contact-section):=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E8=81=94=E7=B3=BB=E6=96=B9=E5=BC=8F=E5=8D=A1=E7=89=87=E4=B8=BA?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E6=89=BF=E8=AF=BA=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将联系方式卡片重新设计为服务承诺卡片，展示专业响应、免费咨询和定制方案等优势
更新卡片样式和图标，使用更友好的视觉设计
保持工作时间卡片和消息发送卡片的基本布局
---
 src/components/sections/contact-section.tsx | 42 +++++++++++----------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/sections/contact-section.tsx b/src/components/sections/contact-section.tsx
index 1f652e1..ff873f4 100644
--- a/src/components/sections/contact-section.tsx
+++ b/src/components/sections/contact-section.tsx
@@ -9,7 +9,7 @@ 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 } from 'lucide-react';
+import { Mail, Phone, MapPin, Send, Loader2, Clock, MessageCircle, HeadphonesIcon, Sparkles } from 'lucide-react';
 import { COMPANY_INFO } from '@/lib/constants';
 
 export function ContactSection() {
@@ -55,38 +55,41 @@ export function ContactSection() {
             initial={{ opacity: 0, x: -20 }}
             animate={isInView ? { opacity: 1, x: 0 } : {}}
             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>
-                <CardTitle>联系方式</CardTitle>
+                <CardTitle className="flex items-center gap-2">
+                  <Sparkles className="w-5 h-5 text-gray-600" />
+                  我们的承诺
+                </CardTitle>
               </CardHeader>
-              <CardContent className="space-y-6">
+              <CardContent className="space-y-6 flex-1">
                 <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">
-                    <MapPin className="w-5 h-5 text-white" />
+                  <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <HeadphonesIcon className="w-5 h-5 text-gray-700" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-black">公司地址</h3>
-                    <p className="text-gray-600">{COMPANY_INFO.address}</p>
+                    <h3 className="font-semibold text-black">专业响应</h3>
+                    <p className="text-gray-600">工作日 2 小时内快速响应您的咨询</p>
                   </div>
                 </div>
                 <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">
-                    <Phone className="w-5 h-5 text-white" />
+                  <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <MessageCircle className="w-5 h-5 text-gray-700" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-black">联系电话</h3>
-                    <p className="text-gray-600">{COMPANY_INFO.phone}</p>
+                    <h3 className="font-semibold text-black">免费咨询</h3>
+                    <p className="text-gray-600">提供免费的业务咨询和方案评估服务</p>
                   </div>
                 </div>
                 <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">
-                    <Mail className="w-5 h-5 text-white" />
+                  <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <Sparkles className="w-5 h-5 text-gray-700" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-black">电子邮箱</h3>
-                    <p className="text-gray-600">{COMPANY_INFO.email}</p>
+                    <h3 className="font-semibold text-black">定制方案</h3>
+                    <p className="text-gray-600">根据您的需求量身定制最优解决方案</p>
                   </div>
                 </div>
               </CardContent>
@@ -95,7 +98,7 @@ export function ContactSection() {
             <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
-                  <Clock className="w-5 h-5" />
+                  <Clock className="w-5 h-5 text-gray-600" />
                   工作时间
                 </CardTitle>
               </CardHeader>
@@ -115,8 +118,9 @@ export function ContactSection() {
             initial={{ opacity: 0, x: 20 }}
             animate={isInView ? { opacity: 1, x: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.3 }}
+            className="h-full"
           >
-            <Card>
+            <Card className="h-full flex flex-col">
               <CardHeader>
                 <CardTitle>发送消息</CardTitle>
               </CardHeader>