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

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

src/components/sections/about-section.tsx

@@ -3,7 +3,6 @@
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
 import { useRef } from 'react';
-import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
 import { Lightbulb, Users, Target, Award } from 'lucide-react';
 import { COMPANY_INFO, STATS } from '@/lib/constants';
@@ -44,7 +43,7 @@ export function AboutSection() {
   const isInView = useInView(ref, { once: true, margin: '-100px' });
 
   return (
-    <section id="about" className="py-24 bg-white" ref={ref}>
+    <section id="about" className="py-24 bg-[#FAF8F8]" ref={ref}>
       <div className="container-custom">
         {/* 头部介绍 */}
         <motion.div 
@@ -54,25 +53,25 @@ export function AboutSection() {
           className="max-w-4xl mx-auto"
         >
           <div className="text-center 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">
-              关于 {COMPANY_INFO.shortName}
+            </span>
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
+              关于 <span className="text-[#C41E3A]">{COMPANY_INFO.shortName}</span>
             </h2>
-            <p className="text-lg text-gray-600">
+            <p className="text-lg text-[#4A4A4A]">
               {COMPANY_INFO.slogan}
             </p>
           </div>
 
           {/* 公司简介 */}
           <div className="prose prose-lg max-w-none mb-16">
-            <h3 className="text-2xl font-bold text-black mb-4">公司简介</h3>
-            <p className="text-gray-600 mb-6 leading-relaxed">
+            <h3 className="text-2xl font-bold text-[#1A1A1A] mb-4">公司简介</h3>
+            <p className="text-[#4A4A4A] mb-6 leading-relaxed">
               {COMPANY_INFO.name}成立于{COMPANY_INFO.founded}年1月15日，总部位于{COMPANY_INFO.location}龙泉驿区幸福路12号。
               公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。
             </p>
-            <p className="text-gray-600 mb-6 leading-relaxed">
+            <p className="text-[#4A4A4A] mb-6 leading-relaxed">
               我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
               公司秉承"专注科技创新，驱动智慧未来"的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
             </p>
@@ -86,10 +85,10 @@ export function AboutSection() {
             className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"
           >
             {STATS.map((stat, idx) => (
-              <Card key={idx} className="text-center">
+              <Card key={idx} className="text-center border-[#E8E0E0] bg-white hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1">
                 <CardContent className="pt-6">
-                  <div className="text-3xl sm:text-4xl font-bold text-black mb-2">{stat.value}</div>
-                  <div className="text-sm text-gray-600">{stat.label}</div>
+                  <div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
+                  <div className="text-sm text-[#6B6B6B]">{stat.label}</div>
                 </CardContent>
               </Card>
             ))}
@@ -102,7 +101,7 @@ export function AboutSection() {
             transition={{ duration: 0.6, delay: 0.3 }}
             className="mb-16"
           >
-            <h3 className="text-2xl font-bold text-black mb-8 text-center">企业价值观</h3>
+            <h3 className="text-2xl font-bold text-[#1A1A1A] mb-8 text-center">企业价值观</h3>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               {values.map((value, idx) => (
                 <motion.div
@@ -110,14 +109,14 @@ export function AboutSection() {
                   initial={{ opacity: 0, y: 20 }}
                   animate={isInView ? { opacity: 1, y: 0 } : {}}
                   transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
-                  className="flex items-start gap-4 p-6 bg-gray-50 rounded-xl"
+                  className="flex items-start gap-4 p-6 bg-white rounded-xl border border-[#E8E0E0] hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300"
                 >
-                  <div className="w-12 h-12 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
+                  <div className="w-12 h-12 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
                     <value.icon className="w-6 h-6 text-white" />
                   </div>
                   <div>
-                    <h4 className="font-semibold text-black mb-2">{value.title}</h4>
-                    <p className="text-gray-600 text-sm">{value.description}</p>
+                    <h4 className="font-semibold text-[#1A1A1A] mb-2">{value.title}</h4>
+                    <p className="text-[#6B6B6B] text-sm">{value.description}</p>
                   </div>
                 </motion.div>
               ))}
@@ -130,7 +129,7 @@ export function AboutSection() {
             animate={isInView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.5 }}
           >
-            <h3 className="text-2xl font-bold text-black mb-8 text-center">发展历程</h3>
+            <h3 className="text-2xl font-bold text-[#1A1A1A] mb-8 text-center">发展历程</h3>
             <div className="space-y-6">
               {milestones.map((milestone, idx) => (
                 <motion.div
@@ -138,14 +137,14 @@ export function AboutSection() {
                   initial={{ opacity: 0, x: -20 }}
                   animate={isInView ? { opacity: 1, x: 0 } : {}}
                   transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
-                  className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-gray-50 rounded-xl"
+                  className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-white rounded-xl border border-[#E8E0E0]"
                 >
                   <div className="md:w-32 flex-shrink-0">
-                    <span className="text-sm font-medium text-gray-500">{milestone.date}</span>
+                    <span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
                   </div>
                   <div className="flex-1">
-                    <h4 className="font-semibold text-black mb-1">{milestone.title}</h4>
-                    <p className="text-gray-600 text-sm">{milestone.description}</p>
+                    <h4 className="font-semibold text-[#1A1A1A] mb-1">{milestone.title}</h4>
+                    <p className="text-[#6B6B6B] text-sm">{milestone.description}</p>
                   </div>
                 </motion.div>
               ))}

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 ? (

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>

src/components/sections/news-section.tsx

@@ -3,7 +3,6 @@
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
 import { useRef } from 'react';
-import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { ArrowRight, Calendar } from 'lucide-react';
 import { NEWS } from '@/lib/constants';
@@ -21,13 +20,13 @@ export function NewsSection() {
           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>
@@ -40,27 +39,29 @@ export function NewsSection() {
               animate={isInView ? { opacity: 1, y: 0 } : {}}
               transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
             >
-              <Card className="h-full flex flex-col group hover:shadow-lg transition-shadow">
+              <Card className="h-full flex flex-col 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="flex items-center gap-2 mb-3">
-                    <Badge variant="secondary">{news.category}</Badge>
-                    <span className="text-sm text-gray-500 flex items-center gap-1">
+                    <span className="inline-block px-2 py-0.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-xs font-medium">
+                      {news.category}
+                    </span>
+                    <span className="text-sm text-[#8A8A8A] flex items-center gap-1">
                       <Calendar className="w-3 h-3" />
                       {news.date}
                     </span>
                   </div>
-                  <CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
+                  <CardTitle className="text-xl leading-tight text-[#1A1A1A]">{news.title}</CardTitle>
                 </CardHeader>
                 <CardContent className="flex-1 flex flex-col">
-                  <CardDescription className="text-base leading-relaxed mb-6 flex-1">
+                  <CardDescription className="text-base leading-relaxed mb-6 flex-1 text-[#6B6B6B]">
                     {news.excerpt}
                   </CardDescription>
                   <a
                     href={`/news/${news.id}`}
-                    className="inline-flex items-center text-sm font-medium text-black hover:underline"
+                    className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors group/link"
                   >
                     阅读更多
-                    <ArrowRight className="ml-1 w-4 h-4" />
+                    <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
                   </a>
                 </CardContent>
               </Card>
@@ -68,7 +69,7 @@ export function NewsSection() {
           ))}
         </div>
 
-        {/* 查看更多 - 改为展开更多新闻 */}
+        {/* 查看更多 */}
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -77,16 +78,12 @@ export function NewsSection() {
         >
           <button 
             onClick={() => {
-              const newsSection = document.getElementById('news');
-              if (newsSection) {
-                // 展开更多新闻的逻辑可以在这里添加
-                alert('更多新闻功能开发中...');
-              }
+              alert('更多新闻功能开发中...');
             }}
-            className="inline-flex items-center text-sm font-medium text-black hover:underline cursor-pointer bg-transparent border-none"
+            className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors bg-transparent border-none cursor-pointer group"
           >
             查看全部新闻
-            <ArrowRight className="ml-1 w-4 h-4" />
+            <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover:translate-x-1" />
           </button>
         </motion.div>
       </div>

src/components/sections/products-section.tsx

@@ -3,7 +3,6 @@
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
 import { useRef } from 'react';
-import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Check, TrendingUp } from 'lucide-react';
@@ -14,7 +13,7 @@ export function ProductsSection() {
   const isInView = useInView(ref, { once: true, margin: '-100px' });
 
   return (
-    <section id="products" className="py-24 bg-gray-50" ref={ref}>
+    <section id="products" className="py-24 bg-[#FAF8F8]" ref={ref}>
       <div className="container-custom">
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
@@ -22,13 +21,13 @@ export function ProductsSection() {
           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>
@@ -41,28 +40,28 @@ export function ProductsSection() {
               animate={isInView ? { opacity: 1, y: 0 } : {}}
               transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
             >
-              <Card className="h-full flex flex-col group hover:shadow-lg transition-shadow">
+              <Card className="h-full flex flex-col 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>
-                  <Badge variant="secondary" className="w-fit mb-3">
+                  <span className="inline-block px-3 py-1 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-xs font-medium w-fit mb-3">
                     {product.category}
-                  </Badge>
-                  <CardTitle className="text-xl">{product.title}</CardTitle>
+                  </span>
+                  <CardTitle className="text-xl text-[#1A1A1A]">{product.title}</CardTitle>
                 </CardHeader>
                 <CardContent className="flex-1 flex flex-col">
-                  <CardDescription className="text-base leading-relaxed mb-4 flex-1">
+                  <CardDescription className="text-base leading-relaxed mb-4 flex-1 text-[#6B6B6B]">
                     {product.description}
                   </CardDescription>
                   
                   {/* 核心功能 */}
                   <div className="mb-4">
-                    <p className="text-sm font-medium text-black mb-2">核心功能</p>
+                    <p className="text-sm font-medium text-[#1A1A1A] mb-2">核心功能</p>
                     <div className="flex flex-wrap gap-1.5">
                       {product.features.slice(0, 4).map((feature, idx) => (
                         <span 
                           key={idx} 
-                          className="inline-flex items-center text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded"
+                          className="inline-flex items-center text-xs px-2 py-1 bg-[#F5F0F0] text-[#4A4A4A] rounded"
                         >
-                          <Check className="w-3 h-3 mr-1 text-green-600" />
+                          <Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
                           {feature}
                         </span>
                       ))}
@@ -71,21 +70,21 @@ export function ProductsSection() {
 
                   {/* 核心价值 */}
                   <div className="mb-4">
-                    <p className="text-sm font-medium text-black mb-2 flex items-center">
-                      <TrendingUp className="w-4 h-4 mr-1 text-blue-600" />
+                    <p className="text-sm font-medium text-[#1A1A1A] mb-2 flex items-center">
+                      <TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
                       核心价值
                     </p>
                     <ul className="space-y-1">
                       {product.benefits.map((benefit, idx) => (
-                        <li key={idx} className="text-xs text-gray-600 flex items-start">
-                          <span className="text-blue-600 mr-1.5">•</span>
+                        <li key={idx} className="text-xs text-[#6B6B6B] flex items-start">
+                          <span className="text-[#C41E3A] mr-1.5">•</span>
                           {benefit}
                         </li>
                       ))}
                     </ul>
                   </div>
 
-                  <Button variant="outline" className="w-full mt-auto group-hover:bg-black group-hover:text-white transition-colors">
+                  <Button variant="outline" className="w-full mt-auto group-hover:bg-[#C41E3A] group-hover:text-white group-hover:border-[#C41E3A] transition-colors">
                     了解详情
                     <ArrowRight className="ml-2 w-4 h-4" />
                   </Button>
@@ -102,14 +101,14 @@ export function ProductsSection() {
           transition={{ duration: 0.6, delay: 0.5 }}
           className="mt-20 text-center"
         >
-          <div className="bg-gradient-to-r from-gray-100 to-gray-200 rounded-2xl p-12">
-            <h3 className="text-2xl sm:text-3xl font-bold text-black mb-4">
+          <div className="bg-gradient-to-r from-[#FEF2F4] to-[#FAF8F8] rounded-2xl p-12 border border-[#E8E0E0]">
+            <h3 className="text-2xl sm:text-3xl font-bold text-[#1A1A1A] mb-4">
               需要定制化解决方案？
             </h3>
-            <p className="text-gray-600 mb-8 max-w-2xl mx-auto">
+            <p className="text-[#6B6B6B] mb-8 max-w-2xl mx-auto">
               我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
             </p>
-            <Button size="lg" className="bg-black text-white hover:bg-gray-800">
+            <Button size="lg">
               联系我们
               <ArrowRight className="ml-2 w-4 h-4" />
             </Button>

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>