feat: 统一全站设计风格、导航组件与文案逻辑自洽性修复

- 新增 InkGlowCard 墨韵流光卡片组件，统一全站卡片交互风格
- 新增 PageNav 面包屑组件，统一全站页面导航
- 统一色彩体系、排版层级、间距节奏和动画风格
- 修复 CTA 区品牌名称错误（诺瓦隆→睿新致遠）
- 修复 ERP 产品卖点与年费制定价矛盾
- 导航下拉补充 SDS 和 OA 产品
- 统一全站数据指标为 12+年核心团队经验、6自研产品、10+团队成员
- 移除不可靠的 100%客户满意度和 30+行业专家指标
- 修复新闻时间线不合理问题，调整里程碑节奏
- 统一响应承诺为工作日快速响应
- 服务第4项重命名为行业方案实施，厘清概念
- 服务详情页效果数据改为定性描述
- 删除 cases 模块，精简代码库

src/components/sections/social-proof-section.tsx

@@ -1,73 +1,58 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
-import { STATS } from '@/lib/constants';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
+import { Building2, Users, Award, TrendingUp } from 'lucide-react';
+
+const STATS = [
+  { icon: Building2, value: '10+', label: '服务企业' },
+  { icon: Users, value: '10+', label: '团队成员' },
+  { icon: Award, value: '6', label: '自研产品' },
+  { icon: TrendingUp, value: '12+', label: '年核心团队经验' },
+];
 
 export function SocialProofSection() {
-  const [isVisible, setIsVisible] = useState(false);
-  const sectionRef = useRef<HTMLElement>(null);
-  const shouldReduceMotion = useReducedMotion();
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry?.isIntersecting) {
-          setIsVisible(true);
-        }
-      },
-      { threshold: 0.2 }
-    );
-
-    if (sectionRef.current) {
-      observer.observe(sectionRef.current);
-    }
-
-    return () => observer.disconnect();
-  }, []);
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: '-100px' });
 
   return (
-    <section
-      id="social-proof"
-      ref={sectionRef}
-      className="bg-white py-16 md:py-24"
-    >
+    <section id="social-proof" role="region" aria-labelledby="social-proof-heading" className="py-20 md:py-28 bg-[#FAFAFA]" ref={ref}>
       <div className="container-wide">
         <motion.div
-          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-          animate={isVisible ? { opacity: 1, y: 0 } : {}}
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
-          className="text-center mb-12"
+          className="text-center max-w-3xl mx-auto mb-14"
         >
-          <h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
-            值得信赖的数字化伙伴
+          <h2 id="social-proof-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
+            值得<span className="text-[#C41E3A] font-calligraphy">信赖</span>
           </h2>
-          <p className="text-lg text-[#595959] max-w-2xl mx-auto">
-            深耕企业数字化领域，以专业实力赢得客户信赖
+          <p className="text-base text-[#595959]">
+            数字来自实践，口碑源于交付
           </p>
         </motion.div>
 
-        <motion.div
-          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-          animate={isVisible ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
-          className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12"
-        >
-          {STATS.map((stat) => (
-            <div
-              key={stat.label}
-              className="text-center p-6 rounded-xl bg-[#FFFBF5] border border-[#E5E5E5] hover:border-[#C41E3A]/30 hover:shadow-md transition-all duration-300"
-            >
-              <div className="text-4xl sm:text-5xl font-bold text-[#C41E3A] mb-2">
-                {stat.value}
-              </div>
-              <div className="text-sm text-[#595959] font-medium">
-                {stat.label}
-              </div>
-            </div>
-          ))}
-        </motion.div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
+          {STATS.map((stat, idx) => {
+            const Icon = stat.icon;
+            return (
+              <motion.div
+                key={stat.label}
+                initial={{ opacity: 0, y: 20 }}
+                animate={isInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.5, delay: idx * 0.1, ease: [0.16, 1, 0.3, 1] }}
+                className="text-center p-6 md:p-8"
+              >
+                <div className="w-12 h-12 rounded-xl bg-[#C41E3A]/5 flex items-center justify-center mx-auto mb-4">
+                  <Icon className="w-5 h-5 text-[#C41E3A]" strokeWidth={1.8} />
+                </div>
+                <div className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-1">{stat.value}</div>
+                <div className="text-sm text-[#A3A3A3]">{stat.label}</div>
+              </motion.div>
+            );
+          })}
+        </div>
       </div>
     </section>
   );