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

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

src/components/sections/hero-section.tsx

@@ -1,24 +1,26 @@
 'use client';
 
-import Link from 'next/link';
 import { motion } from 'framer-motion';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { COMPANY_INFO, STATS } from '@/lib/constants';
+import { ArrowRight } from 'lucide-react';
 
 export function HeroSection() {
+  const handleScrollTo = (id: string) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
   return (
-    <section id="home" className="relative min-h-screen flex items-center bg-white overflow-hidden pt-20">
-      {/* Background Pattern */}
-      <div className="absolute inset-0 opacity-5">
-        <div
-          className="absolute inset-0"
-          style={{
-            backgroundImage: 'radial-gradient(circle at 1px 1px, black 1px, transparent 0)',
-            backgroundSize: '40px 40px',
-          }}
-        />
-      </div>
+    <section id="home" className="relative min-h-screen flex items-center overflow-hidden pt-20">
+      {/* Background Gradient */}
+      <div className="absolute inset-0 bg-gradient-to-br from-[#FEF2F4]/50 via-white to-[#FAF8F8]" />
+      
+      {/* Decorative Elements */}
+      <div className="absolute top-1/4 right-0 w-96 h-96 bg-[#C41E3A]/5 rounded-full blur-3xl" />
+      <div className="absolute bottom-1/4 left-0 w-72 h-72 bg-[#C41E3A]/3 rounded-full blur-3xl" />
 
       {/* Content */}
       <div className="container-custom relative z-10 py-20">
@@ -29,12 +31,12 @@ export function HeroSection() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6 }}
           >
-            <div className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-slate-50 to-slate-100 border border-slate-200 shadow-sm mb-8">
+            <div className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-white border border-[#E8E0E0] shadow-sm mb-8">
               <span className="relative flex h-2.5 w-2.5">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
-                <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" />
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#C41E3A] opacity-75" />
+                <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-[#C41E3A]" />
               </span>
-              <span className="text-sm font-medium text-slate-700 tracking-wide">
+              <span className="text-sm font-medium text-[#4A4A4A] tracking-wide">
                 专业科技服务提供商
               </span>
             </div>
@@ -45,7 +47,7 @@ export function HeroSection() {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.1 }}
-            className="text-4xl sm:text-5xl lg:text-6xl font-bold text-black leading-tight mb-6"
+            className="text-4xl sm:text-5xl lg:text-6xl font-bold text-[#1A1A1A] leading-tight mb-6"
           >
             {COMPANY_INFO.name}
           </motion.h1>
@@ -55,7 +57,7 @@ export function HeroSection() {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
-            className="text-xl sm:text-2xl text-gray-600 mb-8"
+            className="text-xl sm:text-2xl text-[#C41E3A] font-medium mb-8"
           >
             {COMPANY_INFO.slogan}
           </motion.p>
@@ -65,7 +67,7 @@ export function HeroSection() {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.3 }}
-            className="text-lg text-gray-500 max-w-2xl mx-auto mb-10"
+            className="text-lg text-[#4A4A4A] max-w-2xl mx-auto mb-10"
           >
             {COMPANY_INFO.description}
           </motion.p>
@@ -77,11 +79,20 @@ export function HeroSection() {
             transition={{ duration: 0.6, delay: 0.4 }}
             className="flex flex-col sm:flex-row items-center justify-center gap-4"
           >
-            <Button size="lg" asChild>
-              <Link href="/about">了解更多</Link>
+            <Button 
+              size="lg" 
+              onClick={() => handleScrollTo('about')}
+              className="group"
+            >
+              了解更多
+              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
             </Button>
-            <Button size="lg" variant="outline" asChild>
-              <Link href="/contact">联系我们</Link>
+            <Button 
+              size="lg" 
+              variant="outline" 
+              onClick={() => handleScrollTo('contact')}
+            >
+              联系我们
             </Button>
           </motion.div>
 
@@ -100,8 +111,8 @@ export function HeroSection() {
                 transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
                 className="text-center"
               >
-                <div className="text-3xl sm:text-4xl font-bold text-black">{stat.value}</div>
-                <div className="text-sm text-gray-500 mt-1">{stat.label}</div>
+                <div className="text-3xl sm:text-4xl font-bold text-[#C41E3A]">{stat.value}</div>
+                <div className="text-sm text-[#6B6B6B] mt-1">{stat.label}</div>
               </motion.div>
             ))}
           </motion.div>