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

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

src/components/sections/services-section.tsx

@@ -6,7 +6,8 @@ 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 { Button } from '@/components/ui/button';
+import { RippleButton } from '@/lib/animations';
+import { InkCard } from '@/lib/animations';
 import { SERVICES } from '@/lib/constants';
 
 const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -30,30 +31,28 @@ export function ServicesSection() {
           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"
+          className="text-left max-w-3xl mx-auto mb-16"
         >
+          <div className="w-16 h-1 bg-[#C41E3A] rounded-full mb-6" />
           <h2 id="services-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
             我们的 <span className="text-[#C41E3A] font-calligraphy">核心业务</span>
           </h2>
-          <p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">
+          <p className="text-lg text-[#5C5C5C] max-w-2xl">
             专业技术团队，为您提供全方位的数字化解决方案
           </p>
         </motion.div>
 
         {SERVICES.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {SERVICES.map((service, index) => {
+            {SERVICES.map((service) => {
               const Icon = iconMap[service.icon];
               return (
-                <motion.div
+                <InkCard
                   key={service.id}
-                  initial={{ opacity: 0, y: 20 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  className="rounded-xl border border-[#E5E5E5] bg-white p-6 hover:border-[#C41E3A] transition-colors"
                 >
                   <StaticLink href={`/services/${service.id}`}>
-                    <Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
+                    <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-[#C41E3A] transition-all duration-300">
                           {Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
@@ -67,7 +66,7 @@ export function ServicesSection() {
                       </CardContent>
                     </Card>
                   </StaticLink>
-                </motion.div>
+                </InkCard>
               );
             })}
           </div>
@@ -83,12 +82,12 @@ export function ServicesSection() {
           transition={{ duration: 0.6, delay: 0.4 }}
           className="text-center mt-12"
         >
-          <Button variant="outline" size="lg" className="group" asChild>
-            <StaticLink href="/services">
+          <StaticLink href="/services">
+            <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>
       </div>
     </section>