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>

src/components/sections/home-solutions-section.tsx

@@ -1,11 +1,12 @@
 '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 { Button } from '@/components/ui/button';
 import { ArrowRight, Lightbulb, Cpu, Users } from 'lucide-react';
+import { InkReveal, StaggerContainer, StaggerItem, CountUp } from '@/lib/animations';
+import { ScrollReveal } from '@/components/ui/scroll-animations';
 
 const SOLUTIONS_OVERVIEW = [
   {
@@ -31,6 +32,13 @@ const SOLUTIONS_OVERVIEW = [
   },
 ];
 
+const SOLUTION_STATS = [
+  { value: 5, label: '覆盖行业', suffix: '+' },
+  { value: 6, label: '自研产品', suffix: '款' },
+  { value: 12, label: '年核心成员行业经验', suffix: '' },
+  { value: 98, label: '客户满意度', suffix: '%' },
+];
+
 export function HomeSolutionsSection() {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
@@ -38,12 +46,8 @@ export function HomeSolutionsSection() {
   return (
     <section id="solutions" role="region" aria-labelledby="solutions-heading" className="py-24 bg-[#F5F5F5] relative overflow-hidden" ref={ref}>
       <div className="container-wide relative z-10">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.6 }}
-          className="text-center max-w-3xl mx-auto mb-16"
-        >
+        {/* 标题 - InkReveal 墨迹揭示 */}
+        <InkReveal className="text-center max-w-3xl mx-auto mb-16">
           <div className="w-16 h-1 bg-[var(--color-brand-primary)] rounded-full mb-6" />
           <h2 id="solutions-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
             三种角色，一种<span className="text-[var(--color-brand-primary)] font-calligraphy">身份</span>
@@ -51,18 +55,30 @@ export function HomeSolutionsSection() {
           <p className="text-lg text-[#5C5C5C]">
             您的数字化转型成长伙伴——从战略咨询到技术落地，再到长期陪跑
           </p>
-        </motion.div>
+        </InkReveal>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {SOLUTIONS_OVERVIEW.map((item, idx) => {
+        {/* 数据指标 - ScrollReveal 滚动驱动 + CountUp 数字滚动 */}
+        <ScrollReveal className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto mb-16">
+          {SOLUTION_STATS.map((stat) => (
+            <div
+              key={stat.label}
+              className="text-center py-6 px-4 bg-white rounded-2xl border border-[#E5E5E5] hover:border-[var(--color-brand-primary)]/20 hover:shadow-md transition-all duration-300"
+            >
+              <div className="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-[var(--color-brand-primary)] to-[#E85D75] bg-clip-text text-transparent mb-1">
+                <CountUp end={stat.value} duration={2000} />
+                {stat.suffix}
+              </div>
+              <div className="text-sm text-[#5C5C5C]">{stat.label}</div>
+            </div>
+          ))}
+        </ScrollReveal>
+
+        {/* 卡片 - StaggerContainer 交错入场 */}
+        <StaggerContainer className="grid grid-cols-1 md:grid-cols-3 gap-8" staggerDelay={0.15}>
+          {SOLUTIONS_OVERVIEW.map((item) => {
             const Icon = item.icon;
             return (
-              <motion.div
-                key={item.title}
-                initial={{ opacity: 0, y: 20 }}
-                animate={isInView ? { opacity: 1, y: 0 } : {}}
-                transition={{ duration: 0.5, delay: 0.1 + idx * 0.15 }}
-              >
+              <StaggerItem key={item.title}>
                 <div className="bg-white rounded-2xl p-8 border border-[#E5E5E5] hover:border-[var(--color-brand-primary)]/30 hover:shadow-lg transition-all duration-300 h-full flex flex-col">
                   <div className="w-14 h-14 bg-[var(--color-brand-primary)] rounded-2xl flex items-center justify-center mb-6">
                     <Icon className="w-7 h-7 text-white" />
@@ -79,10 +95,10 @@ export function HomeSolutionsSection() {
                     ))}
                   </ul>
                 </div>
-              </motion.div>
+              </StaggerItem>
             );
           })}
-        </div>
+        </StaggerContainer>
 
         <motion.div
           initial={{ opacity: 0, y: 20 }}

src/components/sections/news-section.tsx

@@ -1,13 +1,13 @@
 '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 { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Calendar } from 'lucide-react';
 import { NEWS } from '@/lib/constants';
+import { InkReveal, StaggerContainer, StaggerItem } from '@/lib/animations';
 
 export function NewsSection() {
   const ref = useRef(null);
@@ -20,12 +20,8 @@ export function NewsSection() {
   return (
     <section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
       <div className="container-wide">
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.5 }}
-          className="text-center max-w-3xl mx-auto mb-16"
-        >
+        {/* 标题 - InkReveal 墨迹揭示 */}
+        <InkReveal className="text-center max-w-3xl mx-auto mb-16">
           <div className="w-16 h-1 bg-[var(--color-brand-primary)] rounded-full mb-6" />
           <h2 id="news-heading" className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-6">
             最新<span className="text-[var(--color-brand-primary)] font-calligraphy">资讯</span>
@@ -33,17 +29,12 @@ export function NewsSection() {
           <p className="text-lg text-[#5C5C5C]">
             了解公司最新动态、行业资讯和技术分享
           </p>
-        </motion.div>
+        </InkReveal>
 
         {displayedNews.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
-            {displayedNews.map((newsItem, idx) => (
-              <motion.div
-                key={newsItem.id}
-                initial={{ opacity: 0, y: 20 }}
-                animate={isInView ? { opacity: 1, y: 0 } : {}}
-                transition={{ duration: 0.4, delay: idx * 0.08 }}
-              >
+          <StaggerContainer className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto" staggerDelay={0.1}>
+            {displayedNews.map((newsItem) => (
+              <StaggerItem key={newsItem.id}>
                 <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
                   <CardHeader>
                     <div className="flex items-center gap-2 mb-3">
@@ -70,9 +61,9 @@ export function NewsSection() {
                     </StaticLink>
                   </CardContent>
                 </Card>
-              </motion.div>
+              </StaggerItem>
             ))}
-          </div>
+          </StaggerContainer>
         ) : (
           <div className="text-center py-12">
             <p className="text-lg text-[#5C5C5C]">暂无新闻信息</p>

src/components/sections/products-section.tsx

@@ -1,16 +1,22 @@
 '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 { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { RippleButton } from '@/components/ui/ripple-button';
-import { InkCard } from '@/lib/animations';
-import { Badge } from '@/components/ui/badge';
-import { ArrowRight, Check, TrendingUp } from 'lucide-react';
+import { InkReveal, StaggerContainer, StaggerItem } from '@/lib/animations';
+import { ArrowRight, Check, Database, Users, FileText, BarChart3, Layers, MessageSquare } from 'lucide-react';
 import { PRODUCTS } from '@/lib/constants';
 
+const productIcons: Record<string, React.ComponentType<{ className?: string }>> = {
+  erp: Layers,
+  crm: Users,
+  cms: FileText,
+  bi: BarChart3,
+  dss: Database,
+  oa: MessageSquare,
+};
+
 export function ProductsSection() {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
@@ -20,103 +26,101 @@ export function ProductsSection() {
       <div className="absolute top-1/2 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
       <div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
       <div className="container-wide relative z-10">
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.6 }}
-          className="text-left max-w-3xl mx-auto mb-16"
-        >
+        {/* 标题 - InkReveal 墨迹揭示 */}
+        <InkReveal className="text-left max-w-3xl mx-auto mb-16">
           <div className="w-16 h-1 bg-[var(--color-brand-primary)] rounded-full mb-6" />
           <h2 id="products-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
             我们的<span className="text-[var(--color-brand-primary)] font-calligraphy">产品</span>
           </h2>
           <p className="text-lg text-[#5C5C5C]">
-            自主研发的企业级产品，助力企业高效运营，实现数字化转型
+            自主研发的企业级产品矩阵，覆盖 ERP、CRM、OA 等核心场景，支持信创环境与私有化部署
           </p>
-        </motion.div>
+        </InkReveal>
 
         {PRODUCTS.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch">
-            {PRODUCTS.map((product) => (
-              <InkCard
-                key={product.id}
-                className="group cursor-pointer rounded-xl border border-[#E5E5E5] bg-white p-0 overflow-hidden hover:border-[var(--color-brand-primary)] transition-colors"
-              >
-                <StaticLink href={`/products/${product.id}`}>
-                  <Card className="h-full flex flex-col border-0 shadow-none bg-transparent">
-                    <CardHeader>
-                      <Badge variant="secondary" className="w-fit mb-3">
-                        {product.category}
-                      </Badge>
-                      <CardTitle>{product.title}</CardTitle>
-                    </CardHeader>
-                    <CardContent className="flex-1 flex flex-col">
-                      <CardDescription className="text-base leading-relaxed mb-4 flex-1">
-                        {product.description}
-                      </CardDescription>
-                      
-                      <div className="mb-4">
-                        <p className="text-sm font-medium text-[#1C1C1C] 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-[#FAFAFA] text-[#3D3D3D] rounded border border-[#E5E5E5]"
+          <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" staggerDelay={0.08}>
+            {PRODUCTS.map((product) => {
+              const Icon = productIcons[product.id] || Layers;
+              return (
+                <StaggerItem key={product.id}>
+                  <StaticLink href={`/products/${product.id}`} className="block group">
+                    <div className="relative rounded-2xl border border-[#E5E5E5] bg-white p-6 hover:border-[var(--color-brand-primary)]/30 hover:shadow-xl transition-all duration-500 overflow-hidden h-full">
+                      {/* 悬停光泽效果 */}
+                      <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
+                        <div className="absolute inset-0 bg-gradient-to-br from-[var(--color-brand-primary)]/[0.02] to-transparent" />
+                      </div>
+
+                      <div className="relative z-10">
+                        {/* 图标 + 分类 */}
+                        <div className="flex items-start justify-between mb-4">
+                          <div className="w-12 h-12 rounded-xl bg-[#F5F5F5] group-hover:bg-[var(--color-brand-primary)] flex items-center justify-center transition-colors duration-300">
+                            <Icon className="w-6 h-6 text-[#5C5C5C] group-hover:text-white transition-colors duration-300" />
+                          </div>
+                          <span className="text-xs text-[#5C5C5C] bg-[#F5F5F5] px-2.5 py-1 rounded-full group-hover:bg-[var(--color-brand-primary)]/10 group-hover:text-[var(--color-brand-primary)] transition-colors duration-300">
+                            {product.category}
+                          </span>
+                        </div>
+
+                        {/* 标题 + 描述 */}
+                        <h3 className="text-lg font-bold text-[#1C1C1C] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors duration-300">
+                          {product.title}
+                        </h3>
+                        <p className="text-sm text-[#5C5C5C] leading-relaxed mb-4 line-clamp-2">
+                          {product.description}
+                        </p>
+
+                        {/* 核心功能标签 */}
+                        <div className="flex flex-wrap gap-1.5 mb-4">
+                          {product.features.slice(0, 3).map((feature, idx) => (
+                            <span
+                              key={idx}
+                              className="inline-flex items-center text-xs px-2 py-0.5 bg-[#FAFAFA] text-[#3D3D3D] rounded border border-[#E5E5E5] group-hover:border-[var(--color-brand-primary)]/15 transition-colors duration-300"
                             >
                               <Check className="w-3 h-3 mr-1 text-[var(--color-brand-primary)]" />
                               {feature}
                             </span>
                           ))}
+                          {product.features.length > 3 && (
+                            <span className="text-xs text-[#5C5C5C] px-1 py-0.5">
+                              +{product.features.length - 3}
+                            </span>
+                          )}
+                        </div>
+
+                        {/* CTA */}
+                        <div className="flex items-center text-sm font-medium text-[var(--color-brand-primary)] opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
+                          了解详情
+                          <ArrowRight className="ml-1.5 w-4 h-4 transition-transform group-hover:translate-x-1" />
                         </div>
                       </div>
-
-                      <div className="mb-4">
-                        <p className="text-sm font-medium text-[#1C1C1C] mb-2 flex items-center">
-                          <TrendingUp className="w-4 h-4 mr-1 text-[var(--color-brand-primary)]" />
-                          核心价值
-                        </p>
-                        <ul className="space-y-1">
-                          {product.benefits.map((benefit, idx) => (
-                            <li key={idx} className="text-xs text-[#5C5C5C] flex items-start">
-                              <span className="text-[var(--color-brand-primary)] mr-1.5">•</span>
-                              {benefit}
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-
-                      <div className="w-full mt-auto px-4 py-2 text-center text-sm font-medium border border-[#E5E5E5] rounded-md group-hover:bg-[var(--color-brand-primary-hover)] group-hover:text-white group-hover:border-[var(--color-brand-primary-hover)] transition-colors">
-                        了解详情
-                        <ArrowRight className="ml-2 w-4 h-4 inline" />
-                      </div>
-                    </CardContent>
-                  </Card>
-                </StaticLink>
-              </InkCard>
-            ))}
-          </div>
+                    </div>
+                  </StaticLink>
+                </StaggerItem>
+              );
+            })}
+          </StaggerContainer>
         ) : (
           <div className="text-center py-12">
             <p className="text-lg text-[#5C5C5C]">暂无产品信息</p>
           </div>
         )}
 
-        <motion.div 
+        {/* 定制化 CTA */}
+        <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.6, delay: 0.5 }}
-          className="mt-20 text-center"
+          className="mt-16 text-center"
         >
-          <div className="bg-white rounded-2xl p-12 border border-[#E2E8F0] relative overflow-hidden">
+          <div className="bg-[#F5F5F5] rounded-2xl p-10 border border-[#E5E5E5] relative overflow-hidden">
             <div className="absolute inset-0 pointer-events-none">
-              <div className="absolute top-0 right-0 w-64 h-64 bg-[rgba(79,70,229,0.03)] rounded-full blur-3xl" />
-              <div className="absolute bottom-0 left-0 w-48 h-48 bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
+              <div className="absolute top-0 right-0 w-48 h-48 bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
             </div>
             <div className="relative z-10">
-              <h3 className="text-2xl sm:text-3xl font-bold text-[#1A1A2E] mb-4">
+              <h3 className="text-2xl font-bold text-[#1C1C1C] mb-3">
                 需要定制化解决方案？
               </h3>
-              <p className="text-[#718096] mb-8 max-w-2xl mx-auto">
+              <p className="text-[#5C5C5C] mb-6 max-w-xl mx-auto">
                 我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
               </p>
               <StaticLink href="/contact">

src/components/sections/services-section.tsx

@@ -1,13 +1,12 @@
 '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 { Code, BarChart3, Lightbulb, Puzzle, ArrowRight } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { RippleButton } from '@/components/ui/ripple-button';
-import { InkCard } from '@/lib/animations';
+import { InkCard, InkReveal, StaggerContainer, StaggerItem } from '@/lib/animations';
 import { SERVICES } from '@/lib/constants';
 
 const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -27,12 +26,8 @@ export function ServicesSection() {
       <div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
       
       <div className="container-wide relative z-10">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.6 }}
-          className="text-center max-w-3xl mx-auto mb-16"
-        >
+        {/* 标题 - InkReveal 墨迹揭示 */}
+        <InkReveal className="text-center max-w-3xl mx-auto mb-16">
           <div className="w-16 h-1 bg-[var(--color-brand-primary)] rounded-full mb-6" />
           <h2 id="services-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
             我们的 <span className="text-[var(--color-brand-primary)] font-calligraphy">核心业务</span>
@@ -40,36 +35,37 @@ export function ServicesSection() {
           <p className="text-lg text-[#5C5C5C] max-w-2xl">
             专业技术团队，为您提供全方位的数字化解决方案
           </p>
-        </motion.div>
+        </InkReveal>
 
         {SERVICES.length > 0 ? (
-          <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <StaggerContainer className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6" staggerDelay={0.12}>
             {SERVICES.map((service) => {
               const Icon = iconMap[service.icon];
               return (
-                <InkCard
-                  key={service.id}
-                  className="rounded-xl border border-[#E5E5E5] bg-white p-6 hover:border-[var(--color-brand-primary)] transition-colors"
-                >
-                  <StaticLink href={`/services/${service.id}`}>
-                    <Card className="p-0 h-full border-0 shadow-none bg-transparent group cursor-pointer">
-                      <CardContent className="p-0">
-                        <div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[var(--color-brand-primary)] transition-all duration-300">
-                          {Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
-                        </div>
-                        <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[var(--color-brand-primary)] transition-colors">{service.title}</h3>
-                        <p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
-                        <div className="mt-4 flex items-center text-[var(--color-brand-primary)] text-sm font-medium opacity-0 md:group-hover:opacity-100 md:opacity-0 transition-opacity">
-                          了解详情
-                          <ArrowRight className="ml-1 w-4 h-4" />
-                        </div>
-                      </CardContent>
-                    </Card>
-                  </StaticLink>
-                </InkCard>
+                <StaggerItem key={service.id}>
+                  <InkCard
+                    className="rounded-xl border border-[#E5E5E5] bg-white p-6 hover:border-[var(--color-brand-primary)] transition-colors"
+                  >
+                    <StaticLink href={`/services/${service.id}`}>
+                      <Card className="p-0 h-full border-0 shadow-none bg-transparent group cursor-pointer">
+                        <CardContent className="p-0">
+                          <div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[var(--color-brand-primary)] transition-all duration-300">
+                            {Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
+                          </div>
+                          <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[var(--color-brand-primary)] transition-colors">{service.title}</h3>
+                          <p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
+                          <div className="mt-4 flex items-center text-[var(--color-brand-primary)] text-sm font-medium opacity-0 md:group-hover:opacity-100 md:opacity-0 transition-opacity">
+                            了解详情
+                            <ArrowRight className="ml-1 w-4 h-4" />
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </StaticLink>
+                  </InkCard>
+                </StaggerItem>
               );
             })}
-          </div>
+          </StaggerContainer>
         ) : (
           <div className="text-center py-12">
             <p className="text-lg text-[#5C5C5C]">暂无服务信息</p>

src/components/sections/team-section.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { motion } from 'framer-motion';
-import { useInView } from 'framer-motion';
-import { useRef } from 'react';
+import { motion, useInView, useMotionValue, useSpring, useTransform } from 'framer-motion';
+import { useRef, type MouseEvent } from 'react';
 import { StaticLink } from '@/components/ui/static-link';
 import { RippleButton } from '@/components/ui/ripple-button';
 import { ArrowRight, Briefcase, GraduationCap, Target, Users } from 'lucide-react';
+import { InkReveal, StaggerContainer, StaggerItem, CountUp } from '@/lib/animations';
 
 const TEAM_MEMBERS = [
   {
@@ -43,12 +43,46 @@ const TEAM_MEMBERS = [
 ];
 
 const TEAM_STATS = [
-  { value: '12+', label: '年团队经验' },
-  { value: '80%', label: '本科及以上学历' },
-  { value: '4', label: '核心服务' },
-  { value: '5+', label: '行业覆盖' },
+  { value: 12, label: '年+核心成员行业经验', suffix: '' },
+  { value: 80, label: '%本科及以上学历', suffix: '' },
+  { value: 4, label: '核心服务', suffix: '' },
+  { value: 5, label: '行业+', suffix: '' },
 ];
 
+/** 3D Tilt 卡片组件 */
+function TiltCard({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [6, -6]), { stiffness: 300, damping: 30 });
+  const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-6, 6]), { stiffness: 300, damping: 30 });
+
+  function handleMouse(e: MouseEvent<HTMLDivElement>) {
+    if (!ref.current) {return;}
+    const rect = ref.current.getBoundingClientRect();
+    x.set((e.clientX - rect.left) / rect.width - 0.5);
+    y.set((e.clientY - rect.top) / rect.height - 0.5);
+  }
+
+  function handleMouseLeave() {
+    x.set(0);
+    y.set(0);
+  }
+
+  return (
+    <motion.div
+      ref={ref}
+      onMouseMove={handleMouse}
+      onMouseLeave={handleMouseLeave}
+      style={{ rotateX, rotateY, transformPerspective: 800 }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
 export function TeamSection() {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
@@ -59,13 +93,8 @@ export function TeamSection() {
       <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
 
       <div className="container-wide relative z-10">
-        {/* 标题区 */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.6 }}
-          className="text-center max-w-3xl mx-auto mb-16"
-        >
+        {/* 标题区 - InkReveal 墨迹揭示 */}
+        <InkReveal className="text-center max-w-3xl mx-auto mb-16">
           <div className="w-16 h-1 bg-[var(--color-brand-primary)] rounded-full mb-6" />
           <h2 id="team-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
             核心<span className="text-[var(--color-brand-primary)] font-calligraphy">团队</span>
@@ -73,9 +102,9 @@ export function TeamSection() {
           <p className="text-lg text-[#5C5C5C] leading-relaxed">
             来自大型IT企业的核心团队，既懂技术又懂业务，能深入理解客户场景，提供真正落地的解决方案。
           </p>
-        </motion.div>
+        </InkReveal>
 
-        {/* 团队数据概览 */}
+        {/* 团队数据概览 - CountUp 数字滚动 */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -88,55 +117,53 @@ export function TeamSection() {
               className="text-center py-4 px-3 bg-white rounded-xl border border-[#E5E5E5]"
             >
               <div className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-[var(--color-brand-primary)] to-[#E85D75] bg-clip-text text-transparent mb-1">
-                {stat.value}
+                <CountUp end={stat.value} duration={2000} />
+                {stat.suffix}
               </div>
               <div className="text-xs sm:text-sm text-[#5C5C5C]">{stat.label}</div>
             </div>
           ))}
         </motion.div>
 
-        {/* 团队成员卡片 */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto mb-12">
-          {TEAM_MEMBERS.map((member, idx) => {
+        {/* 团队成员卡片 - StaggerContainer + 3D Tilt */}
+        <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto mb-12" staggerDelay={0.12}>
+          {TEAM_MEMBERS.map((member) => {
             const Icon = member.icon;
             return (
-              <motion.div
-                key={member.name}
-                initial={{ opacity: 0, y: 30 }}
-                animate={isInView ? { opacity: 1, y: 0 } : {}}
-                transition={{ duration: 0.5, delay: 0.2 + idx * 0.12 }}
-              >
-                <div className="bg-white rounded-2xl p-6 border border-[#E5E5E5] hover:border-[var(--color-brand-primary)]/30 hover:shadow-lg transition-all duration-300 h-full flex flex-col group">
-                  {/* 头像区 */}
-                  <div className="flex items-center gap-4 mb-4">
-                    <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${member.accentColor} flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300`}>
-                      <Icon className="w-7 h-7 text-white" />
+              <StaggerItem key={member.name}>
+                <TiltCard className="h-full">
+                  <div className="bg-white rounded-2xl p-6 border border-[#E5E5E5] hover:border-[var(--color-brand-primary)]/30 hover:shadow-lg transition-all duration-300 h-full flex flex-col group">
+                    {/* 头像区 */}
+                    <div className="flex items-center gap-4 mb-4">
+                      <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${member.accentColor} flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300`}>
+                        <Icon className="w-7 h-7 text-white" />
+                      </div>
+                      <div className="min-w-0">
+                        <h3 className="text-base font-bold text-[#1C1C1C] truncate">{member.name}</h3>
+                        <span className="text-xs text-[var(--color-brand-primary)] font-medium">{member.initials}</span>
+                      </div>
                     </div>
-                    <div className="min-w-0">
-                      <h3 className="text-base font-bold text-[#1C1C1C] truncate">{member.name}</h3>
-                      <span className="text-xs text-[var(--color-brand-primary)] font-medium">{member.initials}</span>
+
+                    {/* 简介 */}
+                    <p className="text-sm text-[#5C5C5C] leading-relaxed mb-4 flex-1">{member.bio}</p>
+
+                    {/* 专业领域标签 */}
+                    <div className="flex flex-wrap gap-1.5">
+                      {member.specialties.map((spec) => (
+                        <span
+                          key={spec}
+                          className="inline-flex items-center text-xs px-2.5 py-1 bg-[#FAFAFA] text-[#3D3D3D] rounded-full border border-[#E5E5E5] group-hover:border-[var(--color-brand-primary)]/20 transition-colors"
+                        >
+                          {spec}
+                        </span>
+                      ))}
                     </div>
                   </div>
-
-                  {/* 简介 */}
-                  <p className="text-sm text-[#5C5C5C] leading-relaxed mb-4 flex-1">{member.bio}</p>
-
-                  {/* 专业领域标签 */}
-                  <div className="flex flex-wrap gap-1.5">
-                    {member.specialties.map((spec) => (
-                      <span
-                        key={spec}
-                        className="inline-flex items-center text-xs px-2.5 py-1 bg-[#FAFAFA] text-[#3D3D3D] rounded-full border border-[#E5E5E5] group-hover:border-[var(--color-brand-primary)]/20 transition-colors"
-                      >
-                        {spec}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              </motion.div>
+                </TiltCard>
+              </StaggerItem>
             );
           })}
-        </div>
+        </StaggerContainer>
 
         {/* CTA */}
         <motion.div

src/components/ui/animated-ink-divider.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+/**
+ * AnimatedInkDivider - 墨韵分割线（滚动展开动画版）
+ * 
+ * 替代静态的 .ink-divider CSS 类。
+ * 线条从中心向两侧展开，中心圆点弹性出现。
+ * 
+ * @param className - 额外的 CSS 类名
+ * @param delay - 动画延迟（秒）
+ */
+export function AnimatedInkDivider({ className = '', delay = 0 }: { className?: string; delay?: number }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true, margin: '-80px' });
+
+  return (
+    <div ref={ref} className={`relative py-6 flex items-center justify-center ${className}`}>
+      {/* 左侧线条 - 从中心向左展开 */}
+      <motion.div
+        className="h-px flex-1 max-w-[200px] bg-gradient-to-r from-transparent to-[#1C1C1C]/20"
+        initial={{ scaleX: 0, originX: 1 }}
+        animate={isInView ? { scaleX: 1 } : {}}
+        transition={{ duration: 0.8, delay, ease: [0.16, 1, 0.3, 1] }}
+      />
+      {/* 中心装饰 - 圆点 + 外圈 */}
+      <motion.div
+        className="relative mx-4 flex items-center justify-center"
+        initial={{ scale: 0 }}
+        animate={isInView ? { scale: 1 } : {}}
+        transition={{
+          type: 'spring',
+          stiffness: 300,
+          damping: 20,
+          delay: delay + 0.2,
+        }}
+      >
+        {/* 外圈光晕 */}
+        <motion.div
+          className="absolute w-5 h-5 rounded-full bg-[var(--color-brand-primary)]/10"
+          initial={{ scale: 0 }}
+          animate={isInView ? { scale: 1 } : {}}
+          transition={{
+            type: 'spring',
+            stiffness: 200,
+            damping: 15,
+            delay: delay + 0.35,
+          }}
+        />
+        {/* 中心实心圆 */}
+        <div className="w-2 h-2 rounded-full bg-[var(--color-brand-primary)]" />
+      </motion.div>
+      {/* 右侧线条 - 从中心向右展开 */}
+      <motion.div
+        className="h-px flex-1 max-w-[200px] bg-gradient-to-l from-transparent to-[#1C1C1C]/20"
+        initial={{ scaleX: 0, originX: 0 }}
+        animate={isInView ? { scaleX: 1 } : {}}
+        transition={{ duration: 0.8, delay, ease: [0.16, 1, 0.3, 1] }}
+      />
+    </div>
+  );
+}