diff --git a/src/app/(marketing)/layout.tsx b/src/app/(marketing)/layout.tsx
index 681c371..24c4a16 100644
--- a/src/app/(marketing)/layout.tsx
+++ b/src/app/(marketing)/layout.tsx
@@ -1,6 +1,3 @@
-import { Header } from '@/components/layout/header';
-import { Footer } from '@/components/layout/footer';
-
 export default function MarketingLayout({
   children,
 }: {
@@ -8,9 +5,7 @@ export default function MarketingLayout({
 }) {
   return (
     <div className="min-h-screen flex flex-col">
-      <Header />
       <main className="flex-1">{children}</main>
-      <Footer />
     </div>
   );
 }
diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index 02b2efe..e5fef5c 100644
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
@@ -1,25 +1,25 @@
-import { HeroSection } from '@/components/sections/hero-section';
-import { AboutSection } from '@/components/sections/about-section';
-import { ServicesSection } from '@/components/sections/services-section';
-import { ProductsSection } from '@/components/sections/products-section';
-import { NewsSection } from '@/components/sections/news-section';
-import { ContactSection } from '@/components/sections/contact-section';
-import { COMPANY_INFO } from '@/lib/constants';
+"use client";
 
-export const metadata = {
-  title: `${COMPANY_INFO.name} - 专业科技服务提供商`,
-  description: COMPANY_INFO.description,
-};
+import { Header } from "@/components/layout/header";
+import { Footer } from "@/components/layout/footer";
+import { HeroSection } from "@/components/sections/hero-section";
+import { AboutSection } from "@/components/sections/about-section";
+import { ServicesSection } from "@/components/sections/services-section";
+import { ProductsSection } from "@/components/sections/products-section";
+import { NewsSection } from "@/components/sections/news-section";
+import { ContactSection } from "@/components/sections/contact-section";
 
 export default function HomePage() {
   return (
-    <>
+    <main className="min-h-screen">
+      <Header />
       <HeroSection />
       <AboutSection />
       <ServicesSection />
       <ProductsSection />
       <NewsSection />
       <ContactSection />
-    </>
+      <Footer />
+    </main>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 8d50826..d88815b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -8,6 +8,7 @@
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --font-chinese: var(--font-noto-sans-sc);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -44,80 +45,85 @@
 }
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.145 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.145 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.145 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --radius: 0.5rem;
+  --primary: #C41E3A;
+  --primary-dark: #A01830;
+  --primary-light: #D93D5C;
+  --primary-muted: #FEF2F4;
+  --primary-foreground: #FFFFFF;
+  --background: #FFFFFF;
+  --background-secondary: #FAF8F8;
+  --background-tertiary: #F5F0F0;
+  --foreground: #1A1A1A;
+  --card: #FFFFFF;
+  --card-foreground: #1A1A1A;
+  --popover: #FFFFFF;
+  --popover-foreground: #1A1A1A;
+  --secondary: #FAF8F8;
+  --secondary-foreground: #1A1A1A;
+  --muted: #F5F0F0;
+  --muted-foreground: #6B6B6B;
+  --accent: #F5F0F0;
+  --accent-foreground: #1A1A1A;
+  --destructive: #DC2626;
+  --destructive-foreground: #FFFFFF;
+  --border: #E8E0E0;
+  --input: #E8E0E0;
+  --ring: #C41E3A;
+  --chart-1: #C41E3A;
+  --chart-2: #1B4B8C;
+  --chart-3: #10B981;
+  --chart-4: #F59E0B;
+  --chart-5: #8B5CF6;
+  --sidebar: #FAF8F8;
+  --sidebar-foreground: #1A1A1A;
+  --sidebar-primary: #C41E3A;
+  --sidebar-primary-foreground: #FFFFFF;
+  --sidebar-accent: #F5F0F0;
+  --sidebar-accent-foreground: #1A1A1A;
+  --sidebar-border: #E8E0E0;
+  --sidebar-ring: #C41E3A;
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --background: #1A1A1A;
+  --background-secondary: #2A2A2A;
+  --background-tertiary: #333333;
+  --foreground: #FAFAFA;
+  --card: #2A2A2A;
+  --card-foreground: #FAFAFA;
+  --popover: #2A2A2A;
+  --popover-foreground: #FAFAFA;
+  --primary: #D93D5C;
+  --primary-foreground: #FFFFFF;
+  --secondary: #333333;
+  --secondary-foreground: #FAFAFA;
+  --muted: #333333;
+  --muted-foreground: #A0A0A0;
+  --accent: #333333;
+  --accent-foreground: #FAFAFA;
+  --destructive: #EF4444;
+  --destructive-foreground: #FFFFFF;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.15);
+  --ring: #D93D5C;
+  --sidebar: #2A2A2A;
+  --sidebar-foreground: #FAFAFA;
+  --sidebar-primary: #D93D5C;
+  --sidebar-primary-foreground: #FFFFFF;
+  --sidebar-accent: #333333;
+  --sidebar-accent-foreground: #FAFAFA;
+  --sidebar-border: rgba(255, 255, 255, 0.1);
+  --sidebar-ring: #D93D5C;
 }
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
   }
   html {
     scroll-behavior: smooth;
@@ -129,3 +135,46 @@
     @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
   }
 }
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #F5F0F0;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #C41E3A;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #A01830;
+}
+
+::selection {
+  background-color: #C41E3A;
+  color: #FFFFFF;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6fbc18e..dfa316d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Ma_Shan_Zheng, ZCOOL_XiaoWei, Noto_Serif_SC } from "next/font/google";
+import { Geist, Geist_Mono, Noto_Sans_SC } from "next/font/google";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -12,23 +12,10 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-// 书法字体
-const maShanZheng = Ma_Shan_Zheng({
-  weight: "400",
-  variable: "--font-ma-shan-zheng",
-  subsets: ["latin"],
-});
-
-const zcoolXiaoWei = ZCOOL_XiaoWei({
-  weight: "400",
-  variable: "--font-zcool-xiaowei",
-  subsets: ["latin"],
-});
-
-// 思源宋体 - 作为青柳隶书的替代
-const notoSerifSC = Noto_Serif_SC({
-  weight: ["400", "700"],
-  variable: "--font-noto-serif-sc",
+// 思源黑体 - 中文字体
+const notoSansSC = Noto_Sans_SC({
+  weight: ["400", "500", "700"],
+  variable: "--font-noto-sans-sc",
   subsets: ["latin"],
 });
 
@@ -59,11 +46,6 @@ export const metadata: Metadata = {
     title: "四川睿新致远科技有限公司",
     description: "企业数字化转型服务商",
   },
-  verification: {
-    // 可以添加搜索引擎验证代码
-    // google: "your-google-verification-code",
-    // baidu: "your-baidu-verification-code",
-  },
   alternates: {
     canonical: "https://www.novalon.cn",
   },
@@ -75,21 +57,15 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="zh-CN">
+    <html lang="zh-CN" className="scroll-smooth">
       <head>
         {/* Favicon */}
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <link rel="apple-touch-icon" href="/favicon.svg" />
-        {/* 中文字体 - 从Google Fonts加载 */}
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap"
-          rel="stylesheet"
-        />
       </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} ${maShanZheng.variable} ${zcoolXiaoWei.variable} ${notoSerifSC.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${notoSansSC.variable} font-sans antialiased`}
+        style={{ fontFamily: "'Noto Sans SC', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif" }}
       >
         {children}
       </body>
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 7884030..9a5cb4f 100644
--- a/src/components/layout/footer.tsx
+++ b/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>
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index 0e818f1..0b57612 100644
--- a/src/components/layout/header.tsx
+++ b/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>
diff --git a/src/components/sections/about-section.tsx b/src/components/sections/about-section.tsx
index 49ae104..a78bf5b 100644
--- a/src/components/sections/about-section.tsx
+++ b/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>
               ))}
diff --git a/src/components/sections/contact-section.tsx b/src/components/sections/contact-section.tsx
index ff873f4..2971aa9 100644
--- a/src/components/sections/contact-section.tsx
+++ b/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 ? (
diff --git a/src/components/sections/hero-section.tsx b/src/components/sections/hero-section.tsx
index 62a67e7..516d725 100644
--- a/src/components/sections/hero-section.tsx
+++ b/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>
diff --git a/src/components/sections/news-section.tsx b/src/components/sections/news-section.tsx
index dd7fce9..548728d 100644
--- a/src/components/sections/news-section.tsx
+++ b/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>
diff --git a/src/components/sections/products-section.tsx b/src/components/sections/products-section.tsx
index 0fcc167..ebba9b7 100644
--- a/src/components/sections/products-section.tsx
+++ b/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>
diff --git a/src/components/sections/services-section.tsx b/src/components/sections/services-section.tsx
index 167be37..eebaadd 100644
--- a/src/components/sections/services-section.tsx
+++ b/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>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 915ea2a..793889d 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,30 +5,30 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-[#C41E3A] text-white hover:bg-[#A01830] hover:shadow-lg hover:shadow-[#C41E3A]/25 hover:-translate-y-0.5",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500/50",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border-2 border-[#C41E3A] bg-transparent text-[#C41E3A] hover:bg-[#FEF2F4] hover:text-[#A01830]",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-[#FAF8F8] text-[#1A1A1A] hover:bg-[#F5F0F0]",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          "hover:bg-[#F5F0F0] hover:text-[#1A1A1A]",
+        link: "text-[#C41E3A] underline-offset-4 hover:underline hover:text-[#A01830]",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        default: "h-10 px-6 py-2",
+        xs: "h-7 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-4",
+        lg: "h-12 rounded-md px-8 text-base",
+        icon: "size-10",
+        "icon-xs": "size-7 rounded-md [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        "icon-lg": "size-12",
       },
     },
     defaultVariants: {