refactor: 优化网站页面结构和数据展示

- 增强服务数据模型，添加 challenges 和 outcomes 字段
- 简化统计数据配置，改为静态定义
- 重构多个页面组件，优化代码结构
- 新增产品、服务、解决方案相关的布局和组件
- 更新样式和动画配置
- 优化测试用例和类型定义
- 修复 ESLint 错误：移除不必要的 useEffect 和未使用的导入

src/components/sections/about-section.tsx

@@ -4,12 +4,17 @@ import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
 import { useRef } from 'react';
 import { StaticLink } from '@/components/ui/static-link';
-import { Card, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { COMPANY_INFO, STATS } from '@/lib/constants';
-import { ArrowRight } from 'lucide-react';
+import { RippleButton } from '@/lib/animations';
+import { COMPANY_INFO } from '@/lib/constants';
+import { ArrowRight, CheckCircle2 } from 'lucide-react';
 import { useReducedMotion } from '@/hooks/use-reduced-motion';
 
+const VALUES = [
+  { title: '务实', description: '不追逐风口，只做真正为客户创造价值的事。' },
+  { title: '陪伴', description: '交付只是开始，长期陪跑才是我们的承诺。' },
+  { title: '专业', description: '用扎实的工程能力和行业经验赢得信任。' },
+];
+
 export function AboutSection() {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
@@ -17,14 +22,17 @@ export function AboutSection() {
 
   return (
     <section id="about" role="region" aria-labelledby="about-heading" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
+      {/* 网格背景 */}
       <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 
+        <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"
         >
+          {/* 标题 */}
           <div className="text-center mb-12">
             <h2 id="about-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
               关于 <span className="tracking-tight font-brand text-[#C41E3A]" style={{ fontWeight: 'normal', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' }}>{COMPANY_INFO.shortName}</span>
@@ -34,43 +42,55 @@ export function AboutSection() {
             </p>
           </div>
 
-          <div className="bg-white rounded-2xl p-8 mb-12 border border-[#E5E5E5]">
+          {/* 品牌理念引用 */}
+          <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]"
+          >
             <p className="text-lg text-[#5C5C5C] leading-relaxed text-center mb-6">
               &ldquo;企业需要的，不是一个高高在上的&lsquo;专家&rsquo;，也不是一个做完就跑的&lsquo;卖家&rsquo;，而是一个能坐下来、一起想办法的同行者。&rdquo;
             </p>
             <p className="text-[#1C1C1C] font-medium text-center">
               我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
             </p>
-          </div>
-
-          <motion.div 
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            animate={isInView ? { opacity: 1, y: 0 } : {}}
-            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.2 }}
-            className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12"
-          >
-            {STATS.map((stat, idx) => (
-              <Card key={idx} className="text-center border-[#E5E5E5]">
-                <CardContent className="pt-6">
-                  <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>
-            ))}
           </motion.div>
 
+          {/* 核心价值观 */}
           <motion.div
             initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
             animate={isInView ? { opacity: 1, y: 0 } : {}}
-            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.3 }}
+            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) => (
+              <div
+                key={value.title}
+                className="bg-white rounded-xl p-6 border border-[#E5E5E5] text-center"
+              >
+                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-full flex items-center justify-center mx-auto mb-3">
+                  <CheckCircle2 className="w-5 h-5 text-[#C41E3A]" />
+                </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>
+
+          {/* 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"
           >
-            <Button size="lg" variant="outline" className="group" asChild>
-              <StaticLink href="/about">
+            <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-[#C41E3A] hover:text-[#C41E3A] transition-colors">
                 了解更多关于我们
-                <ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
-              </StaticLink>
-            </Button>
+                <ArrowRight className="w-4 h-4" />
+              </RippleButton>
+            </StaticLink>
           </motion.div>
         </motion.div>
       </div>