diff --git a/src/components/sections/cases-section.tsx b/src/components/sections/cases-section.tsx
index 1ab12df..e34358b 100644
--- a/src/components/sections/cases-section.tsx
+++ b/src/components/sections/cases-section.tsx
@@ -1,149 +1,97 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
 import Link from 'next/link';
-import { GlassCard } from '@/components/ui/glass-card';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { CASES } from '@/lib/constants';
 import { ArrowRight, Building2, TrendingUp } from 'lucide-react';
 
 export function CasesSection() {
-  const [isVisible, setIsVisible] = useState(false);
-  const sectionRef = useRef<HTMLElement>(null);
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: '-100px' });
 
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry?.isIntersecting) {
-          setIsVisible(true);
-        }
-      },
-      { threshold: 0.1 }
-    );
-
-    if (sectionRef.current) {
-      observer.observe(sectionRef.current);
-    }
-
-    return () => observer.disconnect();
-  }, []);
+  const featuredCases = CASES.slice(0, 3);
 
   return (
-    <section
-      ref={sectionRef}
-      id="cases"
-      className="py-24 md:py-32 relative overflow-hidden bg-[#FAFAFA]"
-    >
-      <div className="absolute inset-0 pointer-events-none">
-        <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
-        <div className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
-      </div>
-
+    <section id="cases" className="py-24 bg-white relative overflow-hidden" ref={ref}>
+      <div className="absolute top-1/3 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">
-        <div className="text-center mb-16">
-          <div
-            className={`
-              opacity-0 translate-y-4
-              ${isVisible ? 'animate-fade-in-up' : ''}
-            `}
-          >
-            <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#C41E3A]/10 text-[#C41E3A] text-sm font-medium mb-4">
-              <TrendingUp className="w-4 h-4" />
-              成功案例
-            </span>
-          </div>
-
-          <h2
-            className={`
-              text-3xl sm:text-4xl font-semibold text-[#171717] mb-4
-              opacity-0 translate-y-4
-              ${isVisible ? 'animate-fade-in-up stagger-1' : ''}
-            `}
-          >
-            客户成功案例
+        <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"
+        >
+          <h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
+            与谁同行，<span className="text-[#C41E3A]">决定能走多远</span>
           </h2>
-
-          <p
-            className={`
-              text-lg text-[#525252] max-w-2xl mx-auto
-              opacity-0 translate-y-4
-              ${isVisible ? 'animate-fade-in-up stagger-2' : ''}
-            `}
-          >
-            以专业实力赢得客户信赖，用技术创新创造商业价值
+          <p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">
+            我们与优秀的企业同行，共同成长，共创未来
           </p>
-        </div>
+        </motion.div>
 
-        <div className="grid lg:grid-cols-3 gap-6 md:gap-8">
-          {CASES.map((caseItem, index) => (
-            <Link key={caseItem.id} href={`/cases/${caseItem.id}`}>
-              <GlassCard
-                variant="elevated"
-                className="overflow-hidden group cursor-pointer"
-              >
-                <div
-                  className={`
-                    opacity-0 translate-y-4
-                    ${isVisible ? 'animate-fade-in-up' : ''}
-                  `}
-                  style={{ animationDelay: `${(index + 3) * 100}ms` }}
-                >
-                  <div className="relative h-48 bg-gradient-to-br from-[#C41E3A]/10 to-[#D4A574]/10 overflow-hidden">
-                    <div className="absolute inset-0 flex items-center justify-center">
-                      <Building2 className="w-16 h-16 text-[#C41E3A]/30 group-hover:scale-110 transition-transform duration-500" />
-                    </div>
-                    <div className="absolute top-4 left-4">
-                      <span className="px-3 py-1 bg-white/90 backdrop-blur-sm rounded-full text-xs font-medium text-[#C41E3A]">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {featuredCases.map((caseItem, index) => (
+            <motion.div
+              key={caseItem.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.5, delay: 0.1 + index * 0.1 }}
+            >
+              <Link href={`/cases/${caseItem.id}`}>
+                <Card className="h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors overflow-hidden">
+                  <div className="relative h-40 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] flex items-center justify-center">
+                    <Building2 className="w-16 h-16 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
+                    <div className="absolute top-4 right-4">
+                      <Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
                         {caseItem.industry}
-                      </span>
+                      </Badge>
                     </div>
                   </div>
-
-                  <div className="p-6">
-                    <h3 className="text-lg font-semibold text-[#171717] mb-2 group-hover:text-[#C41E3A] transition-colors duration-300">
+                  <CardContent className="p-6">
+                    <div className="flex items-center gap-2 mb-3">
+                      <Building2 className="w-4 h-4 text-[#C41E3A]" />
+                      <span className="text-sm text-[#5C5C5C]">{caseItem.client}</span>
+                    </div>
+                    <h3 className="text-lg font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
                       {caseItem.title}
                     </h3>
-
-                    <p className="text-sm text-[#525252] mb-4 line-clamp-2">
+                    <p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
                       {caseItem.description}
                     </p>
-
-                    <div className="grid grid-cols-3 gap-2 mb-4">
-                      {caseItem.results.map((result) => (
-                        <div
-                          key={result.label}
-                          className="text-center p-2 bg-[#FAFAFA] rounded-lg"
-                        >
-                          <div className="text-sm font-semibold text-[#C41E3A]">
-                            {result.value}
-                          </div>
-                          <div className="text-xs text-[#737373] truncate">
-                            {result.label}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-
-                    <div className="flex flex-wrap gap-2 mb-4">
-                      {caseItem.tags.map((tag) => (
-                        <span
-                          key={tag}
-                          className="px-2 py-1 bg-[#171717]/5 rounded text-xs text-[#525252]"
-                        >
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
-
-                    <div className="flex items-center justify-center text-sm font-medium text-[#C41E3A] group-hover:gap-2 transition-all">
-                      查看详情
-                      <ArrowRight className="w-4 h-4 ml-1" />
-                    </div>
-                  </div>
-                </div>
-              </GlassCard>
-            </Link>
+                    {caseItem.results.length > 0 && (
+                      <div className="flex items-center gap-2 text-[#C41E3A]">
+                        <TrendingUp className="w-4 h-4" />
+                        <span className="text-sm font-medium">{caseItem.results[0].value}</span>
+                        <span className="text-sm text-[#5C5C5C]">{caseItem.results[0].label}</span>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              </Link>
+            </motion.div>
           ))}
         </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6, delay: 0.4 }}
+          className="text-center mt-12"
+        >
+          <Button variant="outline" size="lg" className="group" asChild>
+            <Link href="/cases">
+              查看更多案例
+              <ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
+            </Link>
+          </Button>
+        </motion.div>
       </div>
     </section>
   );