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

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

src/components/layout/footer.tsx

@@ -1,11 +1,10 @@
 import Link from 'next/link';
-import Image from 'next/image';
 import { Mail, Phone, MapPin } from 'lucide-react';
-import { COMPANY_INFO, NAVIGATION, SOCIAL_LINKS } from '@/lib/constants';
+import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
 
 export function Footer() {
   return (
-    <footer className="bg-black text-white">
+    <footer className="bg-[#1A1A1A] text-white">
       <div className="container-custom py-16">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
           {/* Company Info */}
@@ -13,11 +12,11 @@ export function Footer() {
             <div className="flex items-center mb-6">
               <img src="/logo-white.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto" />
             </div>
-            <p className="text-gray-400 text-sm leading-relaxed mb-6">
+            <p className="text-[#8A8A8A] text-sm leading-relaxed mb-6">
               {COMPANY_INFO.description}
             </p>
             <div className="flex flex-col items-start gap-3">
-              <span className="text-gray-400 text-sm">关注微信公众号</span>
+              <span className="text-[#8A8A8A] text-sm">关注微信公众号</span>
               <div className="w-24 h-24 bg-white rounded-lg p-2">
                 <img
                   src="/images/qrcode-wechat.png"
@@ -30,16 +29,16 @@ export function Footer() {
 
           {/* Quick Links */}
           <div>
-            <h3 className="font-semibold text-lg mb-6">快速链接</h3>
+            <h3 className="font-semibold text-lg mb-6 text-white">快速链接</h3>
             <ul className="space-y-3">
               {NAVIGATION.map((item) => (
                 <li key={item.id}>
-                  <Link
+                  <a
                     href={item.href}
-                    className="text-gray-400 hover:text-white transition-colors"
+                    className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors"
                   >
                     {item.label}
-                  </Link>
+                  </a>
                 </li>
               ))}
             </ul>
@@ -47,46 +46,46 @@ export function Footer() {
 
           {/* Services */}
           <div>
-            <h3 className="font-semibold text-lg mb-6">服务项目</h3>
+            <h3 className="font-semibold text-lg mb-6 text-white">服务项目</h3>
             <ul className="space-y-3">
               <li>
-                <Link href="/services" className="text-gray-400 hover:text-white transition-colors">
+                <a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
                   软件开发
-                </Link>
+                </a>
               </li>
               <li>
-                <Link href="/services" className="text-gray-400 hover:text-white transition-colors">
+                <a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
                   云服务
-                </Link>
+                </a>
               </li>
               <li>
-                <Link href="/services" className="text-gray-400 hover:text-white transition-colors">
+                <a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
                   数据分析
-                </Link>
+                </a>
               </li>
               <li>
-                <Link href="/services" className="text-gray-400 hover:text-white transition-colors">
+                <a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
                   信息安全
-                </Link>
+                </a>
               </li>
             </ul>
           </div>
 
           {/* Contact Info */}
           <div>
-            <h3 className="font-semibold text-lg mb-6">联系方式</h3>
+            <h3 className="font-semibold text-lg mb-6 text-white">联系方式</h3>
             <ul className="space-y-4">
               <li className="flex items-start gap-3">
-                <MapPin className="w-5 h-5 text-gray-400 mt-0.5" />
-                <span className="text-gray-400">{COMPANY_INFO.address}</span>
+                <MapPin className="w-5 h-5 text-[#C41E3A] mt-0.5" />
+                <span className="text-[#8A8A8A]">{COMPANY_INFO.address}</span>
               </li>
               <li className="flex items-center gap-3">
-                <Phone className="w-5 h-5 text-gray-400" />
-                <span className="text-gray-400">{COMPANY_INFO.phone}</span>
+                <Phone className="w-5 h-5 text-[#C41E3A]" />
+                <span className="text-[#8A8A8A]">{COMPANY_INFO.phone}</span>
               </li>
               <li className="flex items-center gap-3">
-                <Mail className="w-5 h-5 text-gray-400" />
-                <span className="text-gray-400">{COMPANY_INFO.email}</span>
+                <Mail className="w-5 h-5 text-[#C41E3A]" />
+                <span className="text-[#8A8A8A]">{COMPANY_INFO.email}</span>
               </li>
             </ul>
           </div>
@@ -95,14 +94,14 @@ export function Footer() {
         {/* Bottom */}
         <div className="border-t border-white/10 mt-12 pt-8">
           <div className="flex flex-col md:flex-row justify-between items-center gap-4">
-            <p className="text-gray-400 text-sm">
+            <p className="text-[#8A8A8A] text-sm">
               © {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
             </p>
             <div className="flex gap-6">
-              <Link href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
+              <Link href="#" className="text-[#8A8A8A] hover:text-[#C41E3A] text-sm transition-colors">
                 隐私政策
               </Link>
-              <Link href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
+              <Link href="#" className="text-[#8A8A8A] hover:text-[#C41E3A] text-sm transition-colors">
                 服务条款
               </Link>
             </div>

src/components/layout/header.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import { useState, useEffect, useCallback } from 'react';
-import { Menu, X } from 'lucide-react';
+import { Menu } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
@@ -67,19 +67,19 @@ export function Header() {
       className={cn(
         "fixed top-0 left-0 right-0 z-50 transition-all duration-300",
         isScrolled 
-          ? "bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200/50" 
-          : "bg-slate-50/85 backdrop-blur-md border-b border-slate-200"
+          ? "bg-white/95 backdrop-blur-md shadow-sm border-b border-[#E8E0E0]" 
+          : "bg-transparent"
       )}
     >
       <div className="container-custom">
-        <div className="flex items-center justify-center h-20 relative">
+        <div className="flex items-center justify-between h-20">
           {/* Logo */}
           <Link 
             href="#home" 
             onClick={(e) => handleNavClick(e, '#home')}
-            className="flex items-center absolute left-0"
+            className="flex items-center"
           >
-            <img src="/logo.svg" alt={COMPANY_INFO.name} className="h-12 w-auto" />
+            <img src="/logo.svg" alt={COMPANY_INFO.name} className="h-10 w-auto" />
           </Link>
 
           {/* Desktop Navigation */}
@@ -90,18 +90,37 @@ export function Header() {
                 href={item.href}
                 onClick={(e) => handleNavClick(e, item.href)}
                 className={cn(
-                  "px-4 py-2 text-sm font-medium rounded-full transition-all duration-200",
+                  "relative px-4 py-2 text-sm font-medium transition-all duration-200",
                   activeSection === item.id.replace('#', '')
-                    ? "text-black bg-black/5"
-                    : "text-gray-600 hover:text-black hover:bg-black/5"
+                    ? "text-[#C41E3A]"
+                    : "text-[#4A4A4A] hover:text-[#C41E3A]"
                 )}
               >
                 {item.label}
+                {/* 活跃指示条 */}
+                <span 
+                  className={cn(
+                    "absolute bottom-0 left-1/2 -translate-x-1/2 h-0.5 bg-[#C41E3A] transition-all duration-200",
+                    activeSection === item.id.replace('#', '') ? "w-6" : "w-0"
+                  )}
+                />
               </a>
             ))}
           </nav>
 
-
+          {/* CTA Button - Desktop */}
+          <div className="hidden lg:block">
+            <Button 
+              onClick={(e) => {
+                const element = document.getElementById('contact');
+                if (element) {
+                  element.scrollIntoView({ behavior: 'smooth' });
+                }
+              }}
+            >
+              立即咨询
+            </Button>
+          </div>
 
           {/* Mobile Menu */}
           <Sheet open={isOpen} onOpenChange={setIsOpen}>
@@ -110,7 +129,7 @@ export function Header() {
                 <Menu className="h-6 w-6" />
               </Button>
             </SheetTrigger>
-            <SheetContent side="right" className="w-[300px]">
+            <SheetContent side="right" className="w-[300px] bg-white">
               <div className="flex flex-col gap-2 mt-8">
                 {NAVIGATION.map((item) => (
                   <a
@@ -120,14 +139,27 @@ export function Header() {
                     className={cn(
                       "px-4 py-3 text-lg font-medium rounded-lg transition-all duration-200",
                       activeSection === item.id.replace('#', '')
-                        ? "text-black bg-black/5"
-                        : "text-gray-600 hover:text-black hover:bg-black/5"
+                        ? "text-[#C41E3A] bg-[#FEF2F4]"
+                        : "text-[#4A4A4A] hover:text-[#C41E3A] hover:bg-[#F5F0F0]"
                     )}
                   >
                     {item.label}
                   </a>
                 ))}
-
+                <div className="mt-4 pt-4 border-t border-[#E8E0E0]">
+                  <Button 
+                    className="w-full"
+                    onClick={() => {
+                      const element = document.getElementById('contact');
+                      if (element) {
+                        element.scrollIntoView({ behavior: 'smooth' });
+                      }
+                      setIsOpen(false);
+                    }}
+                  >
+                    立即咨询
+                  </Button>
+                </div>
               </div>
             </SheetContent>
           </Sheet>