refactor: remove service detail modal component

src/app/(marketing)/cases/page.tsx

@@ -1,82 +1,94 @@
 'use client';
 
 import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { PageHeader } from '@/components/ui/page-header';
 import { ArrowRight, Building2, Calendar, TrendingUp } from 'lucide-react';
 import { CASES } from '@/lib/constants';
 
 export default function CasesPage() {
+  const contentRef = useRef(null);
+  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
+
   return (
     <div className="min-h-screen bg-white">
-      <div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
-        <div className="container-wide">
-          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 text-center">
-            与谁同行，决定能走多远
-          </h1>
-          <p className="text-xl text-white/90 text-center max-w-3xl mx-auto">
-            我们与优秀的企业同行，共同成长，共创未来
-          </p>
-        </div>
-      </div>
+      <PageHeader
+        title="与谁同行，决定能走多远"
+        description="我们与优秀的企业同行，共同成长，共创未来"
+      />
 
-      <div className="container-wide py-16">
+      <div className="container-wide relative z-10 py-16" ref={contentRef}>
         <div className="max-w-6xl mx-auto">
           <div className="grid md:grid-cols-2 gap-8">
             {CASES.map((caseItem, index) => (
-              <Link
+              <motion.div
                 key={caseItem.id}
-                href={`/cases/${caseItem.id}`}
-                className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300"
+                initial={{ opacity: 0, y: 20 }}
+                animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
               >
-                <div className="relative h-48 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] overflow-hidden">
-                  <div className="absolute inset-0 flex items-center justify-center">
-                    <Building2 className="w-24 h-24 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
-                  </div>
-                  <div className="absolute top-4 right-4">
-                    <Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
-                      {caseItem.industry}
-                    </Badge>
-                  </div>
-                </div>
-
-                <div className="p-6">
-                  <div className="flex items-center gap-2 mb-3">
-                    <Building2 className="w-5 h-5 text-[#C41E3A]" />
-                    <span className="font-semibold text-[#1C1C1C]">{caseItem.client}</span>
+                <Link
+                  href={`/cases/${caseItem.id}`}
+                  className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300 block"
+                >
+                  <div className="relative h-48 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] overflow-hidden">
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <Building2 className="w-24 h-24 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
+                    </div>
+                    <div className="absolute top-4 right-4">
+                      <Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
+                        {caseItem.industry}
+                      </Badge>
+                    </div>
                   </div>
 
-                  <h3 className="text-xl font-bold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
-                    {caseItem.title}
-                  </h3>
+                  <div className="p-6">
+                    <div className="flex items-center gap-2 mb-3">
+                      <Building2 className="w-5 h-5 text-[#C41E3A]" />
+                      <span className="font-semibold text-[#1C1C1C]">{caseItem.client}</span>
+                    </div>
 
-                  <div className="flex flex-wrap gap-2 mb-4">
-                    <Badge variant="secondary" className="flex items-center gap-1">
-                      <Calendar className="w-3 h-3" />
-                      3年合作
-                    </Badge>
-                    <Badge variant="secondary" className="flex items-center gap-1">
-                      <TrendingUp className="w-3 h-3" />
-                      数字化转型
-                    </Badge>
+                    <h3 className="text-xl font-bold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
+                      {caseItem.title}
+                    </h3>
+
+                    <div className="flex flex-wrap gap-2 mb-4">
+                      <Badge variant="secondary" className="flex items-center gap-1">
+                        <Calendar className="w-3 h-3" />
+                        3年合作
+                      </Badge>
+                      <Badge variant="secondary" className="flex items-center gap-1">
+                        <TrendingUp className="w-3 h-3" />
+                        数字化转型
+                      </Badge>
+                    </div>
+
+                    <p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
+                      {caseItem.description}
+                    </p>
+
+                    <div className="flex items-center text-[#C41E3A] font-medium group-hover:translate-x-2 transition-transform">
+                      查看详情
+                      <ArrowRight className="w-4 h-4 ml-2" />
+                    </div>
                   </div>
-
-                  <p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
-                    {caseItem.description}
-                  </p>
-
-                  <div className="flex items-center text-[#C41E3A] font-medium group-hover:translate-x-2 transition-transform">
-                    查看详情
-                    <ArrowRight className="w-4 h-4 ml-2" />
-                  </div>
-                </div>
-              </Link>
+                </Link>
+              </motion.div>
             ))}
           </div>
         </div>
       </div>
 
-      <div className="bg-[#F5F5F5] py-16">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+        transition={{ duration: 0.6, delay: 0.4 }}
+        className="bg-[#F5F5F5] py-16"
+      >
         <div className="container-wide text-center">
           <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
             准备开始您的数字化转型之旅？
@@ -112,7 +124,7 @@ export default function CasesPage() {
             </Button>
           </div>
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 }