feat: 重构网站UI设计并优化布局结构

重构整体UI设计，采用红色主题配色方案
优化页面布局结构，将Header和Footer移至page组件
更新按钮样式和交互效果，增强视觉反馈
调整全局字体配置，使用思源黑体作为中文字体
改进各区块卡片样式，增加悬停动画效果
优化响应式设计，提升移动端体验

src/components/sections/contact-section.tsx

@@ -4,7 +4,6 @@ import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
 import { useRef } from 'react';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
@@ -30,7 +29,7 @@ export function ContactSection() {
   }
 
   return (
-    <section id="contact" className="py-24 bg-gray-50" ref={ref}>
+    <section id="contact" className="py-24 bg-[#FAF8F8]" ref={ref}>
       <div className="container-custom">
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
@@ -38,13 +37,13 @@ export function ContactSection() {
           transition={{ duration: 0.6 }}
           className="text-center max-w-3xl mx-auto mb-16"
         >
-          <Badge variant="outline" className="mb-4">
+          <span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
             联系我们
-          </Badge>
-          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
-            与我们取得联系
+          </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-gray-600">
+          <p className="text-lg text-[#4A4A4A]">
             无论您有任何问题或合作意向，我们都很乐意与您交流
           </p>
         </motion.div>
@@ -57,56 +56,56 @@ export function ContactSection() {
             transition={{ duration: 0.6, delay: 0.2 }}
             className="flex flex-col gap-6 h-full"
           >
-            <Card className="flex-1 flex flex-col">
+            <Card className="flex-1 flex flex-col border-[#E8E0E0] bg-white">
               <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Sparkles className="w-5 h-5 text-gray-600" />
+                <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-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                    <HeadphonesIcon className="w-5 h-5 text-gray-700" />
+                  <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-black">专业响应</h3>
-                    <p className="text-gray-600">工作日 2 小时内快速响应您的咨询</p>
+                    <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-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                    <MessageCircle className="w-5 h-5 text-gray-700" />
+                  <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-black">免费咨询</h3>
-                    <p className="text-gray-600">提供免费的业务咨询和方案评估服务</p>
+                    <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-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                    <Sparkles className="w-5 h-5 text-gray-700" />
+                  <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-black">定制方案</h3>
-                    <p className="text-gray-600">根据您的需求量身定制最优解决方案</p>
+                    <h3 className="font-semibold text-[#1A1A1A]">定制方案</h3>
+                    <p className="text-[#6B6B6B]">根据您的需求量身定制最优解决方案</p>
                   </div>
                 </div>
               </CardContent>
             </Card>
 
-            <Card>
+            <Card className="border-[#E8E0E0] bg-white">
               <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Clock className="w-5 h-5 text-gray-600" />
+                <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-gray-600">周一至周五</span>
-                    <span className="text-black font-medium">9:00 - 18:00</span>
+                    <span className="text-[#6B6B6B]">周一至周五</span>
+                    <span className="text-[#1A1A1A] font-medium">9:00 - 18:00</span>
                   </div>
                 </div>
               </CardContent>
@@ -120,43 +119,60 @@ export function ContactSection() {
             transition={{ duration: 0.6, delay: 0.3 }}
             className="h-full"
           >
-            <Card className="h-full flex flex-col">
+            <Card className="h-full flex flex-col border-[#E8E0E0] bg-white">
               <CardHeader>
-                <CardTitle>发送消息</CardTitle>
+                <CardTitle className="text-[#1A1A1A]">发送消息</CardTitle>
               </CardHeader>
               <CardContent>
                 {isSubmitted ? (
                   <div className="text-center py-12">
-                    <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                      <Send className="w-8 h-8 text-green-600" />
+                    <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-black mb-2">消息已发送</h3>
-                    <p className="text-gray-600">感谢您的留言，我们会尽快与您联系！</p>
+                    <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-black">
+                        <label htmlFor="name" className="text-sm font-medium text-[#1A1A1A]">
                           姓名
                         </label>
-                        <Input id="name" placeholder="请输入您的姓名" required />
+                        <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-black">
+                        <label htmlFor="phone" className="text-sm font-medium text-[#1A1A1A]">
                           电话
                         </label>
-                        <Input id="phone" type="tel" placeholder="请输入您的电话" required />
+                        <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-black">
+                      <label htmlFor="email" className="text-sm font-medium text-[#1A1A1A]">
                         邮箱
                       </label>
-                      <Input id="email" type="email" placeholder="请输入您的邮箱" required />
+                      <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-black">
+                      <label htmlFor="message" className="text-sm font-medium text-[#1A1A1A]">
                         留言内容
                       </label>
                       <Textarea 
@@ -164,11 +180,12 @@ export function ContactSection() {
                         placeholder="请输入您想咨询的内容" 
                         rows={5}
                         required 
+                        className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
                       />
                     </div>
                     <Button 
                       type="submit" 
-                      className="w-full bg-black text-white hover:bg-gray-800"
+                      className="w-full"
                       disabled={isSubmitting}
                     >
                       {isSubmitting ? (