refactor: 页面组件优化与墨韵分割线组件化

- 提取 AnimatedInkDivider 组件替代硬编码 ink-divider div
- 重构各营销页面组件代码结构优化
- 修正统计数据：自研产品 4 -> 6
- 更新 about 页面测试用例

src/components/sections/about-section.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import { motion } from 'framer-motion';
-import { useInView } from 'framer-motion';
+import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 import { StaticLink } from '@/components/ui/static-link';
 import { RippleButton } from '@/components/ui/ripple-button';
 import { COMPANY_INFO } from '@/lib/constants';
 import { ArrowRight, Target, HeartHandshake, Award } from 'lucide-react';
 import { useReducedMotion } from '@/hooks/use-reduced-motion';
+import { InkReveal, BlurReveal, StaggerContainer, StaggerItem } from '@/lib/animations';
+import { TextReveal } from '@/components/ui/scroll-animations';
 
 const VALUES = [
   { title: '务实', description: '不追逐风口，只做真正为客户创造价值的事。', icon: Target },
@@ -26,13 +27,8 @@ export function AboutSection() {
       <div className="absolute inset-0 bg-[linear-gradient(rgba(28,28,28,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,28,0.02)_1px,transparent_1px)] bg-size-[40px_40px]" />
 
       <div className="container-wide relative z-10">
-        <motion.div
-          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
-          className="max-w-4xl mx-auto"
-        >
-          {/* 标题 */}
+        {/* 标题 - InkReveal 墨迹揭示 */}
+        <InkReveal className="max-w-4xl mx-auto">
           <div className="text-center mb-12">
             <div className="w-16 h-1 bg-[var(--color-brand-primary)] rounded-full mb-6" />
             <h2 id="about-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
@@ -42,60 +38,53 @@ export function AboutSection() {
               {COMPANY_INFO.slogan}
             </p>
           </div>
+        </InkReveal>
 
-          {/* 品牌理念引用 */}
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            animate={isInView ? { opacity: 1, y: 0 } : {}}
-            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.1 }}
-            className="bg-white rounded-2xl p-8 mb-12 border border-[#E5E5E5]"
-          >
-            <blockquote className="text-lg text-[#5C5C5C] leading-relaxed text-center mb-6 italic">
-              <p>&ldquo;企业需要的，不是一个高高在上的&lsquo;专家&rsquo;，也不是一个做完就跑的&lsquo;卖家&rsquo;，而是一个能坐下来、一起想办法的同行者。&rdquo;</p>
-            </blockquote>
-            <p className="text-[#1C1C1C] font-medium text-center">
-              我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
-            </p>
-          </motion.div>
+        {/* 品牌理念 - TextReveal 逐词揭示 */}
+        <TextReveal
+          text="企业需要的，不是一个高高在上的专家，也不是一个做完就跑的卖家，而是一个能坐下来、一起想办法的同行者。"
+          className="text-center text-lg text-[#5C5C5C] leading-relaxed mb-8 max-w-3xl mx-auto"
+          delay={0.1}
+        />
 
-          {/* 核心价值观 */}
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            animate={isInView ? { opacity: 1, y: 0 } : {}}
-            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.15 }}
-            className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16"
-          >
-            {VALUES.map((value) => {
-              const Icon = value.icon;
-              return (
-              <div
-                key={value.title}
-                className="bg-white rounded-xl p-6 border border-[#E5E5E5] text-center"
-              >
-                <div className="w-10 h-10 bg-[var(--color-brand-primary)]/10 rounded-full flex items-center justify-center mx-auto mb-3">
-                  <Icon className="w-5 h-5 text-[var(--color-brand-primary)]" />
+        {/* 核心理念强调 - BlurReveal */}
+        <BlurReveal delay={0.3} className="bg-white rounded-2xl p-8 mb-12 border border-[#E5E5E5]">
+          <p className="text-[#1C1C1C] font-medium text-center text-lg">
+            我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
+          </p>
+        </BlurReveal>
+
+        {/* 核心价值观 - StaggerContainer 交错入场 */}
+        <StaggerContainer className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16" staggerDelay={0.15}>
+          {VALUES.map((value) => {
+            const Icon = value.icon;
+            return (
+              <StaggerItem key={value.title}>
+                <div className="bg-white rounded-xl p-6 border border-[#E5E5E5] text-center hover:border-[var(--color-brand-primary)]/20 hover:shadow-md transition-all duration-300">
+                  <div className="w-10 h-10 bg-[var(--color-brand-primary)]/10 rounded-full flex items-center justify-center mx-auto mb-3">
+                    <Icon className="w-5 h-5 text-[var(--color-brand-primary)]" />
+                  </div>
+                  <h3 className="text-lg font-bold text-[#1C1C1C] mb-2">{value.title}</h3>
+                  <p className="text-sm text-[#5C5C5C] leading-relaxed">{value.description}</p>
                 </div>
-                <h3 className="text-lg font-bold text-[#1C1C1C] mb-2">{value.title}</h3>
-                <p className="text-sm text-[#5C5C5C] leading-relaxed">{value.description}</p>
-              </div>
-              );
-            })}
-          </motion.div>
+              </StaggerItem>
+            );
+          })}
+        </StaggerContainer>
 
-          {/* CTA */}
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            animate={isInView ? { opacity: 1, y: 0 } : {}}
-            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.5 }}
-            className="text-center"
-          >
-            <StaticLink href="/about">
-              <RippleButton className="inline-flex items-center gap-2 px-6 py-2.5 border border-[#E5E5E5] rounded-lg text-sm font-medium text-[#1C1C1C] hover:border-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary)] transition-colors">
-                了解更多关于我们
-                <ArrowRight className="w-4 h-4" />
-              </RippleButton>
-            </StaticLink>
-          </motion.div>
+        {/* CTA */}
+        <motion.div
+          initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.5 }}
+          className="text-center"
+        >
+          <StaticLink href="/about">
+            <RippleButton className="inline-flex items-center gap-2 px-6 py-2.5 border border-[#E5E5E5] rounded-lg text-sm font-medium text-[#1C1C1C] hover:border-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary)] transition-colors">
+              了解更多关于我们
+              <ArrowRight className="w-4 h-4" />
+            </RippleButton>
+          </StaticLink>
         </motion.div>
       </div>
     </section>