refactor: 重构 ServicesSection 为医疗健康风格

src/components/sections/services-section.tsx

@@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
 import { useRef } from 'react';
 import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { SERVICES } from '@/lib/constants';
 
@@ -20,46 +20,46 @@ export function ServicesSection() {
   const isInView = useInView(ref, { once: true, margin: '-100px' });
 
   return (
-    <section id="services" className="py-24 bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={ref}>
+    <section id="services" className="py-24 bg-white relative overflow-hidden" ref={ref}>
-      <div className="container-custom">
+      <div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(0,94,184,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">
         <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"
         >
-          <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-blue)]/30 bg-[var(--color-tech-blue)]/5 text-[var(--color-tech-blue)] text-sm font-medium mb-4">
+          <span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#005EB8]/30 bg-[#E8F4FD] text-[#005EB8] text-sm font-medium mb-4">
             核心业务
           </span>
-          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
+          <h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-4">
-            专业服务，<span className="tech-gradient-text">助力发展</span>
+            我们的 <span className="text-[#005EB8]">核心服务</span>
           </h2>
-          <p className="text-lg text-gray-600 dark:text-gray-400">
+          <p className="text-lg text-[#718096] max-w-2xl mx-auto">
-            我们提供全方位的技术解决方案，帮助企业实现数字化转型
+            专业技术团队，为您提供全方位的数字化解决方案
           </p>
         </motion.div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           {SERVICES.map((service, index) => {
             const Icon = iconMap[service.icon];
             return (
               <motion.div
                 key={service.id}
                 initial={{ opacity: 0, y: 20 }}
-                animate={isInView ? { opacity: 1, y: 0 } : {}}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
               >
-                <Card className="h-full group cursor-pointer">
+                <Card className="p-6 h-full group cursor-pointer border-[#E2E8F0] hover:border-[#005EB8]">
-                  <CardHeader>
+                  <CardContent className="p-0">
-                    <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] flex items-center justify-center mb-4 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-[var(--color-tech-blue)]/30 transition-all duration-300">
+                    <div className="w-12 h-12 rounded-xl bg-[#E8F4FD] flex items-center justify-center mb-4 group-hover:bg-[#005EB8] transition-all duration-300">
-                      {Icon && <Icon className="w-7 h-7 text-white" />}
+                      {Icon && <Icon className="w-6 h-6 text-[#005EB8] group-hover:text-white transition-colors" />}
                     </div>
-                    <CardTitle>{service.title}</CardTitle>
+                    <h3 className="text-xl font-semibold text-[#1A1A2E] mb-3">{service.title}</h3>
-                  </CardHeader>
+                    <p className="text-[#718096] text-sm leading-relaxed">{service.description}</p>
-                  <CardContent>
-                    <CardDescription className="text-base">
-                      {service.description}
-                    </CardDescription>
                   </CardContent>
                 </Card>
               </motion.div>