From 686a02b23396047cefd51395ee41628e0c17f172 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Thu, 26 Feb 2026 21:24:38 +0800
Subject: [PATCH] refactor: remove modal, add link navigation for services

---
 src/components/sections/services-section.tsx | 54 +++++++++-----------
 1 file changed, 23 insertions(+), 31 deletions(-)

diff --git a/src/components/sections/services-section.tsx b/src/components/sections/services-section.tsx
index d12b266..537679e 100644
--- a/src/components/sections/services-section.tsx
+++ b/src/components/sections/services-section.tsx
@@ -2,12 +2,12 @@
 
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
+import Link from 'next/link';
 import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { SERVICES } from '@/lib/constants';
-import { ServiceDetailModal } from '@/components/services/service-detail-modal';
 
 const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
   Code,
@@ -19,17 +19,10 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
 export function ServicesSection() {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
-  const [selectedServiceId, setSelectedServiceId] = useState<string | null>(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const handleServiceClick = (serviceId: string) => {
-    setSelectedServiceId(serviceId);
-    setIsModalOpen(true);
-  };
 
   return (
     <section id="solutions" aria-labelledby="solutions-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
-      <div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(79,70,229,0.03)] rounded-full blur-3xl" />
+      <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">
@@ -57,17 +50,22 @@ export function ServicesSection() {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
-                onClick={() => handleServiceClick(service.id)}
               >
-                <Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
-                  <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" />}
-                    </div>
-                    <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">{service.title}</h3>
-                    <p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
-                  </CardContent>
-                </Card>
+                <Link href={`/services/${service.id}`}>
+                  <Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
+                    <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" />}
+                      </div>
+                      <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
+                      <p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
+                      <div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
+                        了解详情
+                        <ArrowRight className="ml-1 w-4 h-4" />
+                      </div>
+                    </CardContent>
+                  </Card>
+                </Link>
               </motion.div>
             );
           })}
@@ -79,20 +77,14 @@ export function ServicesSection() {
           transition={{ duration: 0.6, delay: 0.4 }}
           className="text-center mt-12"
         >
-          <Button variant="outline" size="lg" className="group">
-            查看全部服务
-            <ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
+          <Button variant="outline" size="lg" className="group" asChild>
+            <Link href="/services">
+              查看全部服务
+              <ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
+            </Link>
           </Button>
         </motion.div>
       </div>
-
-      {selectedServiceId && (
-        <ServiceDetailModal
-          serviceId={selectedServiceId}
-          open={isModalOpen}
-          onOpenChange={setIsModalOpen}
-        />
-      )}
     </section>
   );
 }