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 (
-    <div className="pt-32 pb-20">
-      <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>
+  const contentRef = useRef(null);
+  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
 
+  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">
-            <div className="bg-gray-50 rounded-2xl p-8 mb-8">
-              <h2 className="text-2xl font-bold text-black mb-6">痛点引入</h2>
-              <p className="text-gray-600 mb-4 leading-relaxed">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            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">
-              <h2 className="text-2xl font-bold text-black mb-6">睿新的选择</h2>
-              <p className="text-gray-600 mb-6 leading-relaxed">
+            <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-6 leading-relaxed">
                 所以我们选择了一条不同的路。
               </p>
               
               <div className="mb-6">
-                <h3 className="text-xl font-semibold text-black mb-3">智连未来</h3>
-                <p className="text-gray-600 mb-3 leading-relaxed">
+                <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">智连未来</h3>
+                <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>
-                <p className="text-gray-600 mb-3 leading-relaxed">
+                <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">成长伙伴</h3>
+                <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">
-              <h2 className="text-2xl font-bold text-black mb-6">品牌承诺</h2>
-              <p className="text-gray-600 mb-6 leading-relaxed">
+            <div className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]">
+              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">品牌承诺</h2>
+              <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-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-[#5C5C5C]">{stat.label}</div>
                 </CardContent>
               </Card>
             ))}
-          </div>
+          </motion.div>
 
           {/* 核心价值观 */}
-          <div className="mb-16">
-            <h2 className="text-2xl font-bold text-black mb-6 text-center">核心价值观</h2>
+          <motion.div
+            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">
-                  <CardContent className="p-6">
-                    <div className="flex items-start gap-4">
-                      <div className="p-3 bg-gray-100 rounded-lg group-hover:bg-black group-hover:text-white transition-colors">
-                        <value.icon className="w-6 h-6" />
-                      </div>
-                      <div>
-                        <h3 className="font-semibold text-lg mb-2">{value.title}</h3>
-                        <p className="text-gray-600 text-sm leading-relaxed">{value.description}</p>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
+                <motion.div
+                  key={value.title}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+                  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 text-[#1C1C1C]">{value.title}</h3>
+                    <p className="text-[#5C5C5C] text-sm">{value.description}</p>
+                  </div>
+                </motion.div>
               ))}
             </div>
-          </div>
+          </motion.div>
 
           {/* 发展历程 */}
-          <div className="mb-16">
-            <h2 className="text-2xl font-bold text-black mb-6 text-center">发展历程</h2>
+          <motion.div
+            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">
-                  <div className="w-32 md:w-40 flex-shrink-0">
-                    <div className="font-semibold text-black text-sm md:text-base">{milestone.date}</div>
+                <motion.div
+                  key={milestone.title}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={isContentInView ? { 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-[#FFFBF5] rounded-xl border border-[#E5E5E5]"
+                >
+                  <div className="md:w-32 flex-shrink-0">
+                    <span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
                   </div>
-                  <div className="flex-1 pb-6 border-l-2 border-gray-200 pl-6 relative">
-                    <div className="absolute -left-[9px] top-1 w-4 h-4 bg-black rounded-full" />
-                    <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="flex-1">
+                    <h4 className="font-semibold text-[#1A1A2E] mb-1">{milestone.title}</h4>
+                    <p className="text-[#718096] text-sm">{milestone.description}</p>
                   </div>
-                </div>
+                </motion.div>
               ))}
             </div>
-          </div>
+          </motion.div>
 
           {/* 联系我们 */}
-          <div className="bg-gray-50 rounded-2xl p-8">
-            <h2 className="text-2xl font-bold text-black mb-6 text-center">联系我们</h2>
+          <motion.div
+            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 font-medium">{COMPANY_INFO.address}</p>
+                  <p className="text-sm text-[#5C5C5C]">公司地址</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 font-medium">{COMPANY_INFO.email}</p>
+                  <p className="text-sm text-[#5C5C5C]">电子邮箱</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 font-medium">{COMPANY_INFO.phone}</p>
+                  <p className="text-sm text-[#5C5C5C]">联系电话</p>
+                  <p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.phone}</p>
                 </div>
               </div>
             </div>
-          </div>
+          </motion.div>
         </div>
       </div>
     </div>