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

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

src/components/sections/products-section.tsx

@@ -5,7 +5,8 @@ import { 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 { RippleButton } from '@/lib/animations';
+import { InkCard } from '@/lib/animations';
 import { Badge } from '@/components/ui/badge';
 import { ArrowRight, Check, TrendingUp } from 'lucide-react';
 import { PRODUCTS } from '@/lib/constants';
@@ -23,8 +24,9 @@ export function ProductsSection() {
           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="products-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
             我们的<span className="text-[#C41E3A] font-calligraphy">产品</span>
           </h2>
@@ -35,15 +37,13 @@ export function ProductsSection() {
 
         {PRODUCTS.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {PRODUCTS.map((product, idx) => (
-              <motion.div
+            {PRODUCTS.map((product) => (
+              <InkCard
                 key={product.id}
-                initial={{ opacity: 0, y: 20 }}
-                animate={isInView ? { opacity: 1, y: 0 } : {}}
-                transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
+                className="group cursor-pointer rounded-xl border border-[#E5E5E5] bg-white p-0 overflow-hidden hover:border-[#C41E3A] transition-colors"
               >
                 <StaticLink href={`/products/${product.id}`}>
-                  <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C] transition-colors">
+                  <Card className="h-full flex flex-col border-0 shadow-none bg-transparent">
                     <CardHeader>
                       <Badge variant="secondary" className="w-fit mb-3">
                         {product.category}
@@ -85,14 +85,14 @@ export function ProductsSection() {
                         </ul>
                       </div>
 
-                      <Button variant="outline" className="w-full mt-auto group-hover:bg-[#A01830] group-hover:text-white group-hover:border-[#A01830] transition-colors">
+                      <div className="w-full mt-auto px-4 py-2 text-center text-sm font-medium border border-[#E5E5E5] rounded-md group-hover:bg-[#A01830] group-hover:text-white group-hover:border-[#A01830] transition-colors">
                         了解详情
-                        <ArrowRight className="ml-2 w-4 h-4" />
-                      </Button>
+                        <ArrowRight className="ml-2 w-4 h-4 inline" />
+                      </div>
                     </CardContent>
                   </Card>
                 </StaticLink>
-              </motion.div>
+              </InkCard>
             ))}
           </div>
         ) : (
@@ -119,15 +119,12 @@ export function ProductsSection() {
               <p className="text-[#718096] mb-8 max-w-2xl mx-auto">
                 我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
               </p>
-              <Button 
-                size="lg"
-                asChild
-              >
-                <StaticLink href="/contact">
+              <StaticLink href="/contact">
+                <RippleButton className="inline-flex items-center gap-2 px-6 py-2.5 bg-[#C41E3A] hover:bg-[#A01830] text-white rounded-lg text-sm font-medium transition-colors">
                   联系我们
-                  <ArrowRight className="ml-2 w-4 h-4" />
-                </StaticLink>
-              </Button>
+                  <ArrowRight className="w-4 h-4" />
+                </RippleButton>
+              </StaticLink>
             </div>
           </div>
         </motion.div>