refactor: remove service detail modal component

src/app/(marketing)/about/page.tsx

@@ -1,6 +1,12 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
 import { COMPANY_INFO, STATS } from '@/lib/constants';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
+import { PageHeader } from '@/components/ui/page-header';
 import { Lightbulb, Users, Target, Award, MapPin, Mail, Phone } from 'lucide-react';
 
 export const metadata = {
@@ -60,188 +66,216 @@ export default function AboutPage() {
     },
   ];
 
-  return (
+  const contentRef = useRef(null);
-    <div className="pt-32 pb-20">
+  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
-      <div className="container-custom">
-        {/* 头部介绍 */}
-        <div className="max-w-4xl mx-auto">
-          <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
-              关于我们
-            </Badge>
-            <h1 className="text-4xl sm:text-5xl font-bold text-black mb-6">
-              为什么我们自称"伙伴"？
-            </h1>
-            <p className="text-lg text-gray-600">
-              {COMPANY_INFO.slogan}
-            </p>
-          </div>
 
+  return (
+    <div className="min-h-screen bg-white">
+      <PageHeader
+        badge="关于我们"
+        title="为什么我们自称'伙伴'？"
+        description={COMPANY_INFO.slogan}
+      />
+
+      <div className="container-wide relative z-10 py-16" ref={contentRef}>
+        <div className="max-w-4xl mx-auto">
           {/* 品牌故事 */}
-          <div className="prose prose-lg max-w-none mb-16">
+          <motion.div
-            <div className="bg-gray-50 rounded-2xl p-8 mb-8">
+            initial={{ opacity: 0, y: 20 }}
-              <h2 className="text-2xl font-bold text-black mb-6">痛点引入</h2>
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-              <p className="text-gray-600 mb-4 leading-relaxed">
+            transition={{ duration: 0.6 }}
+            className="prose prose-lg max-w-none mb-16"
+          >
+            <div className="bg-[#FFFBF5] rounded-2xl p-8 mb-8 border border-[#E5E5E5]">
+              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">痛点引入</h2>
+              <p className="text-[#5C5C5C] mb-4 leading-relaxed">
                 在数字化转型的路上，企业往往陷入两难——
               </p>
-              <p className="text-gray-600 mb-4 leading-relaxed">
+              <p className="text-[#5C5C5C] mb-4 leading-relaxed">
                 找咨询公司？他们做完报告就走了，留下一堆看不懂的PPT。
               </p>
-              <p className="text-gray-600 mb-4 leading-relaxed">
+              <p className="text-[#5C5C5C] mb-4 leading-relaxed">
                 找技术供应商？他们卖完系统就消失了，出了问题只能自己扛。
               </p>
-              <p className="text-gray-600 mb-6 leading-relaxed">
+              <p className="text-[#5C5C5C] mb-6 leading-relaxed">
                 企业需要的，不是一个高高在上的"专家"，也不是一个做完就跑的"卖家"，而是一个能坐下来、一起想办法的同行者。
               </p>
             </div>
 
-            <div className="bg-gray-50 rounded-2xl p-8 mb-8">
+            <div className="bg-[#FFFBF5] rounded-2xl p-8 mb-8 border border-[#E5E5E5]">
-              <h2 className="text-2xl font-bold text-black mb-6">睿新的选择</h2>
+              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">睿新的选择</h2>
-              <p className="text-gray-600 mb-6 leading-relaxed">
+              <p className="text-[#5C5C5C] mb-6 leading-relaxed">
                 所以我们选择了一条不同的路。
               </p>
               
               <div className="mb-6">
-                <h3 className="text-xl font-semibold text-black mb-3">智连未来</h3>
+                <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">智连未来</h3>
-                <p className="text-gray-600 mb-3 leading-relaxed">
+                <p className="text-[#5C5C5C] mb-3 leading-relaxed">
                   我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。
                 </p>
-                <p className="text-gray-600 mb-3 leading-relaxed">
+                <p className="text-[#5C5C5C] mb-3 leading-relaxed">
                   每一次方案，都源于对您业务场景的洞察；
                 </p>
-                <p className="text-gray-600 leading-relaxed">
+                <p className="text-[#5C5C5C] leading-relaxed">
                   每一次连接，都为了让技术真正服务于您的未来。
                 </p>
               </div>
               
               <div>
-                <h3 className="text-xl font-semibold text-black mb-3">成长伙伴</h3>
+                <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">成长伙伴</h3>
-                <p className="text-gray-600 mb-3 leading-relaxed">
+                <p className="text-[#5C5C5C] mb-3 leading-relaxed">
                   我们不把"项目交付"当作终点。
                 </p>
-                <p className="text-gray-600 mb-3 leading-relaxed">
+                <p className="text-[#5C5C5C] mb-3 leading-relaxed">
                   您的业务增长了吗？您的团队能力提升了吗？
                 </p>
-                <p className="text-gray-600 leading-relaxed">
+                <p className="text-[#5C5C5C] leading-relaxed">
                   您下一次遇到难题时，还会第一个想到我们吗？
                 </p>
-                <p className="text-gray-600 mt-3 leading-relaxed">
+                <p className="text-[#5C5C5C] mt-3 leading-relaxed">
                   这些问题，比"项目是否按时交付"更让我们在意。
                 </p>
               </div>
             </div>
 
-            <div className="bg-gray-50 rounded-2xl p-8">
+            <div className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]">
-              <h2 className="text-2xl font-bold text-black mb-6">品牌承诺</h2>
+              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">品牌承诺</h2>
-              <p className="text-gray-600 mb-6 leading-relaxed">
+              <p className="text-[#5C5C5C] mb-6 leading-relaxed">
                 我们承诺：
               </p>
               <ul className="space-y-3 mb-6">
                 <li className="flex items-start gap-3">
                   <span className="text-green-600 font-bold">✅</span>
-                  <span className="text-gray-600">不卖您用不上的技术</span>
+                  <span className="text-[#5C5C5C]">不卖您用不上的技术</span>
                 </li>
                 <li className="flex items-start gap-3">
                   <span className="text-green-600 font-bold">✅</span>
-                  <span className="text-gray-600">不说不懂业务的术语</span>
+                  <span className="text-[#5C5C5C]">不说不懂业务的术语</span>
                 </li>
                 <li className="flex items-start gap-3">
                   <span className="text-green-600 font-bold">✅</span>
-                  <span className="text-gray-600">不做路过就忘的"一锤子买卖"</span>
+                  <span className="text-[#5C5C5C]">不做路过就忘的"一锤子买卖"</span>
                 </li>
               </ul>
-              <p className="text-gray-600 leading-relaxed font-medium">
+              <p className="text-[#5C5C5C] leading-relaxed font-medium">
                 我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
               </p>
             </div>
-          </div>
+          </motion.div>
 
           {/* 数据统计 */}
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            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-[#E5E5E5]">
                 <CardContent className="pt-6">
-                  <div className="text-3xl sm:text-4xl font-bold text-black mb-2">{stat.value}</div>
+                  <div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
-                  <div className="text-sm text-gray-600">{stat.label}</div>
+                  <div className="text-sm text-[#5C5C5C]">{stat.label}</div>
                 </CardContent>
               </Card>
             ))}
-          </div>
+          </motion.div>
 
           {/* 核心价值观 */}
-          <div className="mb-16">
+          <motion.div
-            <h2 className="text-2xl font-bold text-black mb-6 text-center">核心价值观</h2>
+            initial={{ opacity: 0, y: 20 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.3 }}
+            className="mb-16"
+          >
+            <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">核心价值观</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               {values.map((value, idx) => (
-                <Card key={idx} className="group hover:shadow-md transition-shadow">
+                <motion.div
-                  <CardContent className="p-6">
+                  key={value.title}
-                    <div className="flex items-start gap-4">
+                  initial={{ opacity: 0, y: 20 }}
-                      <div className="p-3 bg-gray-100 rounded-lg group-hover:bg-black group-hover:text-white transition-colors">
+                  animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-                        <value.icon className="w-6 h-6" />
+                  transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
+                  className="flex items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5] hover:border-[#1C1C1C] transition-all duration-300"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-[#C41E3A] flex items-center justify-center flex-shrink-0">
+                    <value.icon className="w-6 h-6 text-white" />
                   </div>
                   <div>
-                        <h3 className="font-semibold text-lg mb-2">{value.title}</h3>
+                    <h3 className="font-semibold text-lg mb-2 text-[#1C1C1C]">{value.title}</h3>
-                        <p className="text-gray-600 text-sm leading-relaxed">{value.description}</p>
+                    <p className="text-[#5C5C5C] text-sm">{value.description}</p>
                   </div>
-                    </div>
+                </motion.div>
-                  </CardContent>
-                </Card>
               ))}
             </div>
-          </div>
+          </motion.div>
 
           {/* 发展历程 */}
-          <div className="mb-16">
+          <motion.div
-            <h2 className="text-2xl font-bold text-black mb-6 text-center">发展历程</h2>
+            initial={{ opacity: 0, y: 20 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.5 }}
+            className="mb-16"
+          >
+            <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">发展历程</h2>
             <div className="space-y-6">
               {milestones.map((milestone, idx) => (
-                <div key={idx} className="flex gap-4 md:gap-6">
+                <motion.div
-                  <div className="w-32 md:w-40 flex-shrink-0">
+                  key={milestone.title}
-                    <div className="font-semibold text-black text-sm md:text-base">{milestone.date}</div>
+                  initial={{ opacity: 0, x: -20 }}
-                  </div>
+                  animate={isContentInView ? { opacity: 1, x: 0 } : {}}
-                  <div className="flex-1 pb-6 border-l-2 border-gray-200 pl-6 relative">
+                  transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
-                    <div className="absolute -left-[9px] top-1 w-4 h-4 bg-black rounded-full" />
+                  className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5]"
-                    <h3 className="font-semibold text-black mb-1">{milestone.title}</h3>
+                >
-                    <p className="text-gray-600 text-sm leading-relaxed">{milestone.description}</p>
+                  <div className="md:w-32 flex-shrink-0">
+                    <span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
                   </div>
+                  <div className="flex-1">
+                    <h4 className="font-semibold text-[#1A1A2E] mb-1">{milestone.title}</h4>
+                    <p className="text-[#718096] text-sm">{milestone.description}</p>
                   </div>
+                </motion.div>
               ))}
             </div>
-          </div>
+          </motion.div>
 
           {/* 联系我们 */}
-          <div className="bg-gray-50 rounded-2xl p-8">
+          <motion.div
-            <h2 className="text-2xl font-bold text-black mb-6 text-center">联系我们</h2>
+            initial={{ opacity: 0, y: 20 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.7 }}
+            className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]"
+          >
+            <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">联系我们</h2>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
               <div className="flex items-center gap-3">
                 <div className="p-2 bg-white rounded-lg">
-                  <MapPin className="w-5 h-5 text-gray-600" />
+                  <MapPin className="w-5 h-5 text-[#C41E3A]" />
                 </div>
                 <div>
-                  <p className="text-sm text-gray-500">公司地址</p>
+                  <p className="text-sm text-[#5C5C5C]">公司地址</p>
-                  <p className="text-sm font-medium">{COMPANY_INFO.address}</p>
+                  <p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.address}</p>
                 </div>
               </div>
               <div className="flex items-center gap-3">
                 <div className="p-2 bg-white rounded-lg">
-                  <Mail className="w-5 h-5 text-gray-600" />
+                  <Mail className="w-5 h-5 text-[#C41E3A]" />
                 </div>
                 <div>
-                  <p className="text-sm text-gray-500">电子邮箱</p>
+                  <p className="text-sm text-[#5C5C5C]">电子邮箱</p>
-                  <p className="text-sm font-medium">{COMPANY_INFO.email}</p>
+                  <p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.email}</p>
                 </div>
               </div>
               <div className="flex items-center gap-3">
                 <div className="p-2 bg-white rounded-lg">
-                  <Phone className="w-5 h-5 text-gray-600" />
+                  <Phone className="w-5 h-5 text-[#C41E3A]" />
                 </div>
                 <div>
-                  <p className="text-sm text-gray-500">联系电话</p>
+                  <p className="text-sm text-[#5C5C5C]">联系电话</p>
-                  <p className="text-sm font-medium">{COMPANY_INFO.phone}</p>
+                  <p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.phone}</p>
-                </div>
                 </div>
               </div>
             </div>
+          </motion.div>
         </div>
       </div>
     </div>

src/app/(marketing)/cases/[id]/client.tsx

@@ -65,31 +65,22 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
 
   return (
     <main className="min-h-screen bg-white">
-      <div className="pt-16">
+      <div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
-        <div className="relative h-[40vh] min-h-[300px] bg-gradient-to-br from-[#C41E3A] to-[#8B1429] overflow-hidden">
+        <div className="container-wide relative z-10 pt-32 pb-20">
-          <div className="absolute inset-0 bg-black/20" />
-          <div className="absolute inset-0 flex items-center justify-center">
-            <Building2 className="w-32 h-32 text-white/10" />
-          </div>
-          
-          <div className="absolute top-6 left-6 z-10">
           <Link href="/cases">
-              <Button variant="ghost" className="text-white hover:bg-white/10">
+            <Button variant="ghost" className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10">
               <ArrowLeft className="w-4 h-4 mr-2" />
               返回案例
             </Button>
           </Link>
-          </div>
+          <div className="max-w-4xl mt-8">
-
+            <Badge className="mb-4 bg-[#C41E3A]/10 text-[#C41E3A] hover:bg-[#C41E3A]/20">
-          <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/60 to-transparent">
-            <div className="container-wide">
-              <Badge className="mb-4 bg-white/20 text-white hover:bg-white/30">
               {caseItem.industry}
             </Badge>
-              <h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-white mb-2">
+            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-[#1C1C1C] mb-2">
               {caseItem.title}
             </h1>
-              <p className="text-lg text-white/80">
+            <p className="text-lg text-[#5C5C5C]">
               {caseItem.client}
             </p>
           </div>

src/app/(marketing)/cases/page.tsx

@@ -1,33 +1,39 @@
 'use client';
 
 import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { PageHeader } from '@/components/ui/page-header';
 import { ArrowRight, Building2, Calendar, TrendingUp } from 'lucide-react';
 import { CASES } from '@/lib/constants';
 
 export default function CasesPage() {
+  const contentRef = useRef(null);
+  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
+
   return (
     <div className="min-h-screen bg-white">
-      <div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
+      <PageHeader
-        <div className="container-wide">
+        title="与谁同行，决定能走多远"
-          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 text-center">
+        description="我们与优秀的企业同行，共同成长，共创未来"
-            与谁同行，决定能走多远
+      />
-          </h1>
-          <p className="text-xl text-white/90 text-center max-w-3xl mx-auto">
-            我们与优秀的企业同行，共同成长，共创未来
-          </p>
-        </div>
-      </div>
 
-      <div className="container-wide py-16">
+      <div className="container-wide relative z-10 py-16" ref={contentRef}>
         <div className="max-w-6xl mx-auto">
           <div className="grid md:grid-cols-2 gap-8">
             {CASES.map((caseItem, index) => (
-              <Link
+              <motion.div
                 key={caseItem.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+              >
+                <Link
                   href={`/cases/${caseItem.id}`}
-                className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300"
+                  className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300 block"
                 >
                   <div className="relative h-48 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] overflow-hidden">
                     <div className="absolute inset-0 flex items-center justify-center">
@@ -71,12 +77,18 @@ export default function CasesPage() {
                     </div>
                   </div>
                 </Link>
+              </motion.div>
             ))}
           </div>
         </div>
       </div>
 
-      <div className="bg-[#F5F5F5] py-16">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+        transition={{ duration: 0.6, delay: 0.4 }}
+        className="bg-[#F5F5F5] py-16"
+      >
         <div className="container-wide text-center">
           <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
             准备开始您的数字化转型之旅？
@@ -112,7 +124,7 @@ export default function CasesPage() {
             </Button>
           </div>
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 }

src/app/(marketing)/contact/page.tsx

@@ -1,17 +1,22 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
+import { useInView } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { COMPANY_INFO } from '@/lib/constants';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { PageHeader } from '@/components/ui/page-header';
 import { Mail, Phone, MapPin, Send, Loader2 } from 'lucide-react';
 
 export default function ContactPage() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
+  const contentRef = useRef(null);
+  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
 
   async function handleSubmit(_formData: FormData) {
     setIsSubmitting(true);
@@ -23,75 +28,74 @@ export default function ContactPage() {
   }
 
   return (
-    <div className="pt-32 pb-20">
+    <div className="min-h-screen bg-white">
-      <div className="container-custom">
+      <PageHeader
-        <div className="text-center max-w-3xl mx-auto mb-16">
+        badge="联系我们"
-          <Badge variant="outline" className="mb-4">
+        title="与我们取得联系"
-            联系我们
+        description="无论您有任何问题或合作意向，我们都很乐意与您交流"
-          </Badge>
+      />
-          <h1 className="text-4xl sm:text-5xl font-bold text-black mb-6">
-            与我们取得联系
-          </h1>
-          <p className="text-lg text-gray-600">
-            无论您有任何问题或合作意向，我们都很乐意与您交流
-          </p>
-        </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
+      <div className="container-wide relative z-10 py-16" ref={contentRef}>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6 }}
+          className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto"
+        >
           {/* Contact Info */}
           <div className="space-y-8">
-            <Card>
+            <Card className="border-[#E5E5E5]">
               <CardHeader>
-                <CardTitle>联系方式</CardTitle>
+                <CardTitle className="text-[#1C1C1C]">联系方式</CardTitle>
               </CardHeader>
               <CardContent className="space-y-6">
                 <div className="flex items-start gap-4">
-                  <div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
+                  <div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
                     <MapPin className="w-5 h-5 text-white" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-black">公司地址</h3>
+                    <h3 className="font-semibold text-[#1C1C1C]">公司地址</h3>
-                    <p className="text-gray-600">{COMPANY_INFO.address}</p>
+                    <p className="text-[#5C5C5C]">{COMPANY_INFO.address}</p>
                   </div>
                 </div>
                 <div className="flex items-start gap-4">
-                  <div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
+                  <div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
                     <Phone className="w-5 h-5 text-white" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-black">联系电话</h3>
+                    <h3 className="font-semibold text-[#1C1C1C]">联系电话</h3>
-                    <p className="text-gray-600">{COMPANY_INFO.phone}</p>
+                    <p className="text-[#5C5C5C]">{COMPANY_INFO.phone}</p>
                   </div>
                 </div>
                 <div className="flex items-start gap-4">
-                  <div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
+                  <div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
                     <Mail className="w-5 h-5 text-white" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-black">电子邮箱</h3>
+                    <h3 className="font-semibold text-[#1C1C1C]">电子邮箱</h3>
-                    <p className="text-gray-600">{COMPANY_INFO.email}</p>
+                    <p className="text-[#5C5C5C]">{COMPANY_INFO.email}</p>
                   </div>
                 </div>
               </CardContent>
             </Card>
 
-            <Card>
+            <Card className="border-[#E5E5E5]">
               <CardHeader>
-                <CardTitle>工作时间</CardTitle>
+                <CardTitle className="text-[#1C1C1C]">工作时间</CardTitle>
               </CardHeader>
               <CardContent>
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <span className="text-gray-600">周一至周五</span>
+                    <span className="text-[#5C5C5C]">周一至周五</span>
-                    <span className="text-black font-medium">9:00 - 18:00</span>
+                    <span className="text-[#1C1C1C] font-medium">9:00 - 18:00</span>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-gray-600">周六</span>
+                    <span className="text-[#5C5C5C]">周六</span>
-                    <span className="text-black font-medium">9:00 - 12:00</span>
+                    <span className="text-[#1C1C1C] font-medium">9:00 - 12:00</span>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-gray-600">周日</span>
+                    <span className="text-[#5C5C5C]">周日</span>
-                    <span className="text-gray-400">休息</span>
+                    <span className="text-[#8C8C8C]">休息</span>
                   </div>
                 </div>
               </CardContent>
@@ -99,9 +103,14 @@ export default function ContactPage() {
           </div>
 
           {/* Contact Form */}
-          <Card>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <Card className="border-[#E5E5E5]">
               <CardHeader>
-              <CardTitle>发送消息</CardTitle>
+                <CardTitle className="text-[#1C1C1C]">发送消息</CardTitle>
               </CardHeader>
               <CardContent>
                 {isSubmitted ? (
@@ -109,14 +118,14 @@ export default function ContactPage() {
                     <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>
-                  <h3 className="text-xl font-semibold text-black mb-2">消息已发送</h3>
+                    <h3 className="text-xl font-semibold text-[#1C1C1C] mb-2">消息已发送</h3>
-                  <p className="text-gray-600">感谢您的留言，我们会尽快与您联系！</p>
+                    <p className="text-[#5C5C5C]">感谢您的留言，我们会尽快与您联系！</p>
                   </div>
                 ) : (
                   <form action={handleSubmit} className="space-y-6">
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       <div>
-                      <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
+                        <label htmlFor="name" className="block text-sm font-medium text-[#1C1C1C] mb-2">
                           姓名 *
                         </label>
                         <Input
@@ -127,7 +136,7 @@ export default function ContactPage() {
                         />
                       </div>
                       <div>
-                      <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
+                        <label htmlFor="phone" className="block text-sm font-medium text-[#1C1C1C] mb-2">
                           电话
                         </label>
                         <Input
@@ -139,7 +148,7 @@ export default function ContactPage() {
                       </div>
                     </div>
                     <div>
-                    <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                      <label htmlFor="email" className="block text-sm font-medium text-[#1C1C1C] mb-2">
                         邮箱 *
                       </label>
                       <Input
@@ -151,7 +160,7 @@ export default function ContactPage() {
                       />
                     </div>
                     <div>
-                    <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
+                      <label htmlFor="subject" className="block text-sm font-medium text-[#1C1C1C] mb-2">
                         主题 *
                       </label>
                       <Input
@@ -162,7 +171,7 @@ export default function ContactPage() {
                       />
                     </div>
                     <div>
-                    <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
+                      <label htmlFor="message" className="block text-sm font-medium text-[#1C1C1C] mb-2">
                         消息内容 *
                       </label>
                       <Textarea
@@ -173,7 +182,11 @@ export default function ContactPage() {
                         required
                       />
                     </div>
-                  <Button type="submit" className="w-full" disabled={isSubmitting}>
+                    <Button 
+                      type="submit" 
+                      className="w-full bg-[#C41E3A] hover:bg-[#A01830] text-white" 
+                      disabled={isSubmitting}
+                    >
                       {isSubmitting ? (
                         <>
                           <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -190,7 +203,8 @@ export default function ContactPage() {
                 )}
               </CardContent>
             </Card>
-        </div>
+          </motion.div>
+        </motion.div>
       </div>
     </div>
   );

src/app/(marketing)/solutions/page.tsx

@@ -1,26 +1,32 @@
 'use client';
 
+import { motion } from 'framer-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
 import { Button } from '@/components/ui/button';
-import { ArrowRight, Lightbulb, Cpu, Users, Calendar, CheckCircle2, TrendingUp, Code, FileText } from 'lucide-react';
+import { PageHeader } from '@/components/ui/page-header';
+import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } from 'lucide-react';
 
 export default function SolutionsPage() {
+  const contentRef = useRef(null);
+  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
+
   return (
     <div className="min-h-screen bg-white">
-      <div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
+      <PageHeader
-        <div className="container-wide">
+        title="三种角色，一种身份——您的成长伙伴"
-          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 text-center">
+        description="我们以伙伴的身份，陪您走过数字化转型的每一步"
-            三种角色，一种身份——您的成长伙伴
+      />
-          </h1>
-          <p className="text-xl text-white/90 text-center max-w-3xl mx-auto">
-            我们以伙伴的身份，陪您走过数字化转型的每一步
-          </p>
-        </div>
-      </div>
 
-      <div className="container-wide py-16">
+      <div className="container-wide relative z-10 py-16" ref={contentRef}>
         <div className="max-w-6xl mx-auto space-y-24">
           
-          <section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20">
+          <motion.section
+            initial={{ opacity: 0, y: 20 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6 }}
+            className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20"
+          >
             <div className="flex items-start gap-6 mb-8">
               <div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
                 <Lightbulb className="w-8 h-8 text-white" />
@@ -83,9 +89,14 @@ export default function SolutionsPage() {
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
             </div>
-          </section>
+          </motion.section>
 
-          <section className="bg-gradient-to-br from-[#F5F7FA] to-white rounded-2xl p-12 border border-[#4F46E5]/20">
+          <motion.section
+            initial={{ opacity: 0, y: 20 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="bg-gradient-to-br from-[#F5F7FA] to-white rounded-2xl p-12 border border-[#4F46E5]/20"
+          >
             <div className="flex items-start gap-6 mb-8">
               <div className="w-16 h-16 bg-[#4F46E5] rounded-2xl flex items-center justify-center flex-shrink-0">
                 <Cpu className="w-8 h-8 text-white" />
@@ -149,9 +160,14 @@ export default function SolutionsPage() {
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
             </div>
-          </section>
+          </motion.section>
 
-          <section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20">
+          <motion.section
+            initial={{ opacity: 0, y: 20 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.4 }}
+            className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20"
+          >
             <div className="flex items-start gap-6 mb-8">
               <div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
                 <Users className="w-8 h-8 text-white" />
@@ -214,12 +230,17 @@ export default function SolutionsPage() {
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
             </div>
-          </section>
+          </motion.section>
 
         </div>
       </div>
 
-      <div className="bg-[#F5F5F5] py-16">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+        transition={{ duration: 0.6, delay: 0.6 }}
+        className="bg-[#F5F5F5] py-16"
+      >
         <div className="container-wide text-center">
           <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
             准备开始您的数字化转型之旅？
@@ -255,7 +276,7 @@ export default function SolutionsPage() {
             </Button>
           </div>
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 }

src/app/news/[slug]/NewsDetailClient.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { PageHeader } from '@/components/ui/page-header';
+import { ArrowLeft, Calendar, Share2 } from 'lucide-react';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
+import { NEWS } from '@/lib/constants';
+
+interface NewsItem {
+  id: string;
+  title: string;
+  category: string;
+  date: string;
+  excerpt: string;
+  content: string;
+}
+
+interface NewsDetailClientProps {
+  news: NewsItem;
+}
+
+export function NewsDetailClient({ news }: NewsDetailClientProps) {
+  const contentRef = useRef(null);
+  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
+
+  const relatedNews = NEWS
+    .filter((n) => n.id !== news.id && n.category === news.category)
+    .slice(0, 3);
+
+  return (
+    <div className="min-h-screen bg-white">
+      <div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
+        <div className="container-wide relative z-10 pt-32 pb-20">
+          <Link
+            href="/news"
+            className="inline-flex items-center text-[#5C5C5C] hover:text-[#C41E3A] transition-colors mb-6"
+          >
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            返回新闻列表
+          </Link>
+          <div className="max-w-4xl">
+            <div className="inline-block px-4 py-2 bg-[#C41E3A]/10 rounded-full text-[#C41E3A] text-sm mb-6">
+              {news.category}
+            </div>
+            <h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
+              {news.title}
+            </h1>
+            <div className="flex items-center gap-6 text-[#5C5C5C]">
+              <div className="flex items-center gap-2">
+                <Calendar className="w-5 h-5" />
+                {news.date}
+              </div>
+              <button className="flex items-center gap-2 hover:text-[#C41E3A] transition-colors">
+                <Share2 className="w-5 h-5" />
+                分享
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container-wide relative z-10 py-16" ref={contentRef}>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6 }}
+          className="max-w-4xl"
+        >
+          <article className="prose prose-lg max-w-none">
+            <div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-8 flex items-center justify-center">
+              <span className="text-6xl">📰</span>
+            </div>
+            
+            <p className="text-xl text-[#5C5C5C] leading-relaxed mb-8 border-l-4 border-[#C41E3A] pl-6">
+              {news.excerpt}
+            </p>
+
+            <div className="text-[#1C1C1C] leading-relaxed whitespace-pre-line">
+              {news.content}
+            </div>
+          </article>
+
+          {relatedNews.length > 0 && (
+            <div className="mt-16 pt-16 border-t border-[#E5E5E5]">
+              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-8">
+                相关新闻
+              </h2>
+              <div className="grid md:grid-cols-3 gap-6">
+                {relatedNews.map((related) => (
+                  <Link key={related.id} href={`/news/${related.id}`}>
+                    <div className="group cursor-pointer">
+                      <div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-4 flex items-center justify-center group-hover:shadow-lg transition-shadow">
+                        <span className="text-4xl">📰</span>
+                      </div>
+                      <Badge variant="secondary" className="mb-2">
+                        {related.category}
+                      </Badge>
+                      <h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
+                        {related.title}
+                      </h3>
+                      <p className="text-sm text-[#5C5C5C] line-clamp-2">
+                        {related.excerpt}
+                      </p>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="mt-16 flex justify-center gap-4">
+            <Button variant="outline" size="lg" asChild>
+              <Link href="/news">
+                返回新闻列表
+              </Link>
+            </Button>
+            <Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
+              <Link href="/#contact">
+                联系我们
+              </Link>
+            </Button>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

src/app/news/[slug]/page.tsx

@@ -1,9 +1,6 @@
 import { notFound } from 'next/navigation';
 import { NEWS } from '@/lib/constants';
-import { Button } from '@/components/ui/button';
+import { NewsDetailClient } from './NewsDetailClient';
-import { Badge } from '@/components/ui/badge';
-import { ArrowLeft, Calendar, Share2 } from 'lucide-react';
-import Link from 'next/link';
 
 export async function generateStaticParams() {
   return NEWS.map((news) => ({
@@ -35,100 +32,5 @@ export default async function NewsDetailPage({ params }: { params: Promise<{ slu
     notFound();
   }
 
-  const relatedNews = NEWS
+  return <NewsDetailClient news={news} />;
-    .filter((n) => n.id !== news.id && n.category === news.category)
-    .slice(0, 3);
-
-  return (
-    <div className="min-h-screen bg-white">
-      <div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
-        <div className="container-wide">
-          <Link
-            href="/news"
-            className="inline-flex items-center text-white/80 hover:text-white transition-colors mb-8"
-          >
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            返回新闻列表
-          </Link>
-          <div className="max-w-4xl">
-            <div className="inline-block px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white text-sm mb-6">
-              {news.category}
-            </div>
-            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
-              {news.title}
-            </h1>
-            <div className="flex items-center gap-6 text-white/90">
-              <div className="flex items-center gap-2">
-                <Calendar className="w-5 h-5" />
-                {news.date}
-              </div>
-              <button className="flex items-center gap-2 hover:text-white transition-colors">
-                <Share2 className="w-5 h-5" />
-                分享
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="container-wide py-16">
-        <div className="max-w-4xl">
-          <article className="prose prose-lg max-w-none">
-            <div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-8 flex items-center justify-center">
-              <span className="text-6xl">📰</span>
-            </div>
-            
-            <p className="text-xl text-[#5C5C5C] leading-relaxed mb-8 border-l-4 border-[#C41E3A] pl-6">
-              {news.excerpt}
-            </p>
-
-            <div className="text-[#1C1C1C] leading-relaxed whitespace-pre-line">
-              {news.content}
-            </div>
-          </article>
-
-          {relatedNews.length > 0 && (
-            <div className="mt-16 pt-16 border-t border-gray-200">
-              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-8">
-                相关新闻
-              </h2>
-              <div className="grid md:grid-cols-3 gap-6">
-                {relatedNews.map((related) => (
-                  <Link key={related.id} href={`/news/${related.id}`}>
-                    <div className="group cursor-pointer">
-                      <div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-4 flex items-center justify-center group-hover:shadow-lg transition-shadow">
-                        <span className="text-4xl">📰</span>
-                      </div>
-                      <Badge variant="secondary" className="mb-2">
-                        {related.category}
-                      </Badge>
-                      <h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
-                        {related.title}
-                      </h3>
-                      <p className="text-sm text-[#5C5C5C] line-clamp-2">
-                        {related.excerpt}
-                      </p>
-                    </div>
-                  </Link>
-                ))}
-              </div>
-            </div>
-          )}
-
-          <div className="mt-16 flex justify-center gap-4">
-            <Button variant="outline" size="lg" asChild>
-              <Link href="/news">
-                返回新闻列表
-              </Link>
-            </Button>
-            <Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
-              <Link href="/#contact">
-                联系我们
-              </Link>
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
 }

src/app/news/page.tsx

@@ -1,11 +1,13 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useRef } from 'react';
+import { useInView } from 'framer-motion';
 import { NEWS } from '@/lib/constants';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { PageHeader } from '@/components/ui/page-header';
 import { Search, Calendar, ArrowRight, Filter } from 'lucide-react';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
@@ -15,6 +17,8 @@ const categories = ['全部', '公司新闻', '产品发布', '合作动态', '
 export default function NewsListPage() {
   const [selectedCategory, setSelectedCategory] = useState('全部');
   const [searchQuery, setSearchQuery] = useState('');
+  const contentRef = useRef(null);
+  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
 
   const filteredNews = useMemo(() => {
     return NEWS.filter((news) => {
@@ -27,20 +31,19 @@ export default function NewsListPage() {
   }, [selectedCategory, searchQuery]);
 
   return (
-    <div className="min-h-screen bg-[#F5F7FA]">
+    <div className="min-h-screen bg-white">
-      <div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
+      <PageHeader
-        <div className="container-wide">
+        title="新闻动态"
-          <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
+        description="了解睿新致远最新动态，把握行业发展脉搏"
-            新闻动态
+      />
-          </h1>
-          <p className="text-xl text-white/90 max-w-2xl">
-            了解睿新致远最新动态，把握行业发展脉搏
-          </p>
-        </div>
-      </div>
 
-      <div className="container-wide py-12">
+      <div className="container-wide relative z-10 py-12" ref={contentRef}>
-        <div className="mb-8 space-y-4">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6 }}
+          className="mb-8 space-y-4"
+        >
           <div className="flex flex-col md:flex-row gap-4 items-start md:items-center">
             <div className="flex items-center gap-2 text-[#1C1C1C]">
               <Filter className="w-5 h-5" />
@@ -74,7 +77,7 @@ export default function NewsListPage() {
               className="pl-10"
             />
           </div>
-        </div>
+        </motion.div>
 
         {filteredNews.length === 0 ? (
             <div className="text-center py-20">
@@ -86,8 +89,8 @@ export default function NewsListPage() {
                 <motion.div
                   key={news.id}
                   initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
+                  animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
                 >
                   <Link href={`/news/${news.id}`}>
                     <Card className="h-full hover:shadow-lg transition-shadow cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A]">

src/app/products/[id]/page.tsx

@@ -36,30 +36,30 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
 
   return (
     <div className="min-h-screen bg-white">
-      <div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
+      <div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
-        <div className="container-wide">
+        <div className="container-wide relative z-10 pt-32 pb-20">
           <Link
             href="/#products"
-            className="inline-flex items-center text-white/80 hover:text-white transition-colors mb-8"
+            className="inline-flex items-center text-[#5C5C5C] hover:text-[#C41E3A] transition-colors mb-6"
           >
             <ArrowLeft className="w-4 h-4 mr-2" />
             返回产品列表
           </Link>
           <div className="max-w-4xl">
-            <div className="inline-block px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white text-sm mb-6">
+            <div className="inline-block px-4 py-2 bg-[#C41E3A]/10 rounded-full text-[#C41E3A] text-sm mb-6">
               {product.category}
             </div>
-            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
+            <h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
               {product.title}
             </h1>
-            <p className="text-xl text-white/90 leading-relaxed">
+            <p className="text-xl text-[#5C5C5C] leading-relaxed">
               {product.description}
             </p>
           </div>
         </div>
       </div>
 
-      <div className="container-wide py-16">
+      <div className="container-wide relative z-10 py-16">
         <div className="max-w-4xl">
           <section className="mb-16">
             <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">产品概述</h2>
@@ -214,7 +214,7 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
             </div>
           </section>
 
-          <div className="flex justify-center gap-4 pt-8 border-t border-gray-200">
+          <div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
             <Button variant="outline" size="lg" asChild>
               <Link href="/#contact">
                 联系我们

src/components/services/service-detail-modal.tsx

@@ -1,173 +0,0 @@
-'use client';
-
-import { motion, AnimatePresence } from 'framer-motion';
-import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { SERVICES } from '@/lib/constants';
-import { X, CheckCircle2, ArrowRight, Sparkles, Target, Zap, Shield, Code, Cloud, BarChart3 } from 'lucide-react';
-import { useState } from 'react';
-
-interface ServiceDetailModalProps {
-  serviceId: string;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-const iconMap = {
-  Code,
-  Cloud,
-  BarChart3,
-  Shield,
-};
-
-export function ServiceDetailModal({ serviceId, open, onOpenChange }: ServiceDetailModalProps) {
-  const [activeTab, setActiveTab] = useState<'features' | 'benefits' | 'process'>('features');
-  const service = SERVICES.find((s) => s.id === serviceId);
-  const IconComponent = service ? iconMap[service.icon as keyof typeof iconMap] : Code;
-
-  if (!service) return null;
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto p-0">
-        <div className="relative">
-          <button
-            onClick={() => onOpenChange(false)}
-            className="absolute right-4 top-4 z-10 p-2 rounded-full bg-white/80 hover:bg-white transition-colors shadow-lg"
-          >
-            <X className="w-5 h-5 text-gray-600" />
-          </button>
-
-          <div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] p-8 text-white">
-            <div className="flex items-start gap-4 mb-4">
-              <div className="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center flex-shrink-0">
-                <IconComponent className="w-8 h-8" />
-              </div>
-              <div>
-                <DialogTitle className="text-3xl font-bold mb-2">{service.title}</DialogTitle>
-                <p className="text-white/80 text-lg">{service.description}</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="p-8">
-            <div className="mb-8">
-              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 flex items-center gap-2">
-                <Sparkles className="w-5 h-5 text-[#C41E3A]" />
-                服务概述
-              </h3>
-              <p className="text-[#5C5C5C] leading-relaxed">{service.overview}</p>
-            </div>
-
-            <div className="mb-6">
-              <div className="flex gap-2 mb-6 border-b border-gray-200">
-                {[
-                  { id: 'features', label: '核心功能', icon: Zap },
-                  { id: 'benefits', label: '服务优势', icon: Target },
-                  { id: 'process', label: '服务流程', icon: CheckCircle2 },
-                ].map((tab) => (
-                  <button
-                    key={tab.id}
-                    onClick={() => setActiveTab(tab.id as any)}
-                    className={`
-                      flex items-center gap-2 px-4 py-3 font-medium transition-all border-b-2 -mb-px
-                      ${activeTab === tab.id
-                        ? 'border-[#C41E3A] text-[#C41E3A]'
-                        : 'border-transparent text-[#5C5C5C] hover:text-[#1C1C1C]'
-                      }
-                    `}
-                  >
-                    <tab.icon className="w-4 h-4" />
-                    {tab.label}
-                  </button>
-                ))}
-              </div>
-
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={activeTab}
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  transition={{ duration: 0.2 }}
-                >
-                  {activeTab === 'features' && (
-                    <div className="grid md:grid-cols-2 gap-4">
-                      {service.features.map((feature, index) => (
-                        <motion.div
-                          key={index}
-                          initial={{ opacity: 0, x: -10 }}
-                          animate={{ opacity: 1, x: 0 }}
-                          transition={{ delay: index * 0.05 }}
-                          className="flex items-start gap-3 p-4 bg-[#F5F7FA] rounded-lg hover:bg-[#FFFBF5] transition-colors group"
-                        >
-                          <div className="w-6 h-6 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                            <CheckCircle2 className="w-4 h-4 text-white" />
-                          </div>
-                          <span className="text-[#1C1C1C] group-hover:text-[#C41E3A] transition-colors">{feature}</span>
-                        </motion.div>
-                      ))}
-                    </div>
-                  )}
-
-                  {activeTab === 'benefits' && (
-                    <div className="space-y-4">
-                      {service.benefits.map((benefit, index) => (
-                        <motion.div
-                          key={index}
-                          initial={{ opacity: 0, x: -10 }}
-                          animate={{ opacity: 1, x: 0 }}
-                          transition={{ delay: index * 0.05 }}
-                          className="flex items-start gap-3 p-4 bg-gradient-to-r from-[#FFFBF5] to-transparent rounded-lg border-l-4 border-[#C41E3A]"
-                        >
-                          <div className="w-8 h-8 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
-                            <Target className="w-4 h-4 text-white" />
-                          </div>
-                          <span className="text-[#1C1C1C] font-medium">{benefit}</span>
-                        </motion.div>
-                      ))}
-                    </div>
-                  )}
-
-                  {activeTab === 'process' && (
-                    <div className="space-y-4">
-                      {service.process.map((step, index) => (
-                        <motion.div
-                          key={index}
-                          initial={{ opacity: 0, x: -10 }}
-                          animate={{ opacity: 1, x: 0 }}
-                          transition={{ delay: index * 0.05 }}
-                          className="flex items-start gap-4"
-                        >
-                          <div className="w-10 h-10 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold">
-                            {index + 1}
-                          </div>
-                          <div className="flex-1 pb-4">
-                            <p className="text-[#1C1C1C] font-medium">{step}</p>
-                            {index < service.process.length - 1 && (
-                              <div className="absolute left-5 top-10 w-0.5 h-8 bg-[#C41E3A]/20" />
-                            )}
-                          </div>
-                        </motion.div>
-                      ))}
-                    </div>
-                  )}
-                </motion.div>
-              </AnimatePresence>
-            </div>
-
-            <div className="flex justify-end gap-3 pt-6 border-t border-gray-200">
-              <Button variant="outline" onClick={() => onOpenChange(false)}>
-                关闭
-              </Button>
-              <Button className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
-                立即咨询
-                <ArrowRight className="ml-2 w-4 h-4" />
-              </Button>
-            </div>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

src/components/ui/page-header.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { InkBackground } from '@/components/ui/ink-decoration';
+import { DataParticleFlow } from '@/components/effects/data-particle-flow';
+import { SubtleDots } from '@/components/effects/subtle-dots';
+
+interface PageHeaderProps {
+  badge?: string;
+  title: string;
+  description?: string;
+  className?: string;
+}
+
+export function PageHeader({ badge, title, description, className = '' }: PageHeaderProps) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: '-100px' });
+
+  return (
+    <div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
+      <InkBackground />
+      <DataParticleFlow
+        particleCount={40}
+        color="#C41E3A"
+        intensity="subtle"
+        shape="square"
+        effect="pulse"
+      />
+      <SubtleDots color="#C41E3A" count={6} />
+      
+      <div className="container-wide relative z-10 pt-32 pb-20" ref={ref}>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6 }}
+          className={`max-w-4xl mx-auto text-center ${className}`}
+        >
+          {badge && (
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              className="mb-6"
+            >
+              <Badge variant="outline">{badge}</Badge>
+            </motion.div>
+          )}
+          
+          <motion.h1
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="text-4xl sm:text-5xl font-bold text-[#1C1C1C] mb-6"
+          >
+            {title}
+          </motion.h1>
+          
+          {description && (
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.6, delay: 0.3 }}
+              className="text-lg text-[#5C5C5C] max-w-2xl mx-auto leading-relaxed"
+            >
+              {description}
+            </motion.p>
+          )}
+        </motion.div>
+      </div>
+    </div>
+  );
+}