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

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

src/components/sections/services-section.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import Link from 'next/link';
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
 import { useRef } from 'react';
 import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import { SERVICES } from '@/lib/constants';
 
 const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -22,7 +20,7 @@ export function ServicesSection() {
   const isInView = useInView(ref, { once: true, margin: '-100px' });
 
   return (
-    <section id="services" className="py-24 bg-gray-50" ref={ref}>
+    <section id="services" className="py-24 bg-white" ref={ref}>
       <div className="container-custom">
         {/* Section Header */}
         <motion.div
@@ -31,13 +29,13 @@ export function ServicesSection() {
           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 font-bold text-black mb-4">
-            专业服务，助力发展
+          </span>
+          <h2 className="text-3xl sm:text-4xl font-bold text-[#1A1A1A] mb-4">
+            专业服务，<span className="text-[#C41E3A]">助力发展</span>
           </h2>
-          <p className="text-lg text-gray-600">
+          <p className="text-lg text-[#4A4A4A]">
             我们提供全方位的技术解决方案，帮助企业实现数字化转型
           </p>
         </motion.div>
@@ -53,15 +51,15 @@ export function ServicesSection() {
                 animate={isInView ? { opacity: 1, y: 0 } : {}}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
               >
-                <Card className="h-full hover:shadow-lg transition-shadow">
+                <Card className="h-full border-[#E8E0E0] bg-white hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1 group">
                   <CardHeader>
-                    <div className="w-12 h-12 bg-black rounded-lg flex items-center justify-center mb-4">
+                    <div className="w-12 h-12 bg-[#C41E3A] rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                       {Icon && <Icon className="w-6 h-6 text-white" />}
                     </div>
-                    <CardTitle className="text-xl">{service.title}</CardTitle>
+                    <CardTitle className="text-xl text-[#1A1A1A]">{service.title}</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <CardDescription className="text-base">
+                    <CardDescription className="text-base text-[#6B6B6B]">
                       {service.description}
                     </CardDescription>
                   </CardContent>
@@ -78,11 +76,9 @@ export function ServicesSection() {
           transition={{ duration: 0.6, delay: 0.4 }}
           className="text-center mt-12"
         >
-          <Button variant="outline" size="lg" asChild>
-            <Link href="/services">
-              查看全部服务
-              <ArrowRight className="ml-2 w-4 h-4" />
-            </Link>
+          <Button variant="outline" size="lg" className="group">
+            查看全部服务
+            <ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
           </Button>
         </motion.div>
       </div>