refactor: 重构所有 Section 组件为医疗健康风格

- ProductsSection: 浅灰背景、蓝红配色
- AboutSection: 白色背景、专业蓝图标
- NewsSection: 浅灰背景、蓝红强调
- ContactSection: 白色背景、蓝图标、红强调

src/components/sections/about-section.tsx

@@ -43,8 +43,9 @@ export function AboutSection() {
   const isInView = useInView(ref, { once: true, margin: '-100px' });
 
   return (
-    <section id="about" className="py-24 bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={ref}>
-      <div className="container-custom">
+    <section id="about" className="py-24 bg-white relative" ref={ref}>
+      <div className="absolute inset-0 bg-[linear-gradient(rgba(0,94,184,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,94,184,0.02)_1px,transparent_1px)] bg-[size:40px_40px]" />
+      <div className="container-wide relative z-10">
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -52,30 +53,29 @@ export function AboutSection() {
           className="max-w-4xl mx-auto"
         >
           <div className="text-center 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 lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
-              关于 <span className="tech-gradient-text">{COMPANY_INFO.shortName}</span>
+            <h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-6">
+              关于 <span className="text-[#C41E3A]">{COMPANY_INFO.shortName}</span>
             </h2>
-            <p className="text-lg text-gray-600 dark:text-gray-400">
+            <p className="text-lg text-[#718096]">
               {COMPANY_INFO.slogan}
             </p>
           </div>
 
-          <div className="prose prose-lg max-w-none mb-16">
-            <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">公司简介</h3>
-            <p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
+          <div className="mb-16">
+            <h3 className="text-2xl font-bold text-[#1A1A2E] mb-4">公司简介</h3>
+            <p className="text-[#718096] mb-6 leading-relaxed">
               {COMPANY_INFO.name}成立于{COMPANY_INFO.founded}年1月15日，总部位于{COMPANY_INFO.location}龙泉驿区幸福路12号。
               公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。
             </p>
-            <p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
+            <p className="text-[#718096] mb-6 leading-relaxed">
               我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
               公司秉承"专注科技创新，驱动智慧未来"的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
             </p>
           </div>
 
-          {/* 数据统计 */}
           <motion.div 
             initial={{ opacity: 0, y: 20 }}
             animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -83,10 +83,10 @@ export function AboutSection() {
             className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"
           >
             {STATS.map((stat, idx) => (
-              <Card key={idx} className="text-center">
+              <Card key={idx} className="text-center border-[#E2E8F0]">
                 <CardContent className="pt-6">
-                  <div className="text-3xl sm:text-4xl font-bold tech-gradient-text mb-2">{stat.value}</div>
-                  <div className="text-sm text-gray-600 dark:text-gray-400">{stat.label}</div>
+                  <div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
+                  <div className="text-sm text-[#718096]">{stat.label}</div>
                 </CardContent>
               </Card>
             ))}
@@ -98,7 +98,7 @@ export function AboutSection() {
             transition={{ duration: 0.6, delay: 0.3 }}
             className="mb-16"
           >
-            <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">企业价值观</h3>
+            <h3 className="text-2xl font-bold text-[#1A1A2E] mb-8 text-center">企业价值观</h3>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               {values.map((value, idx) => (
                 <motion.div
@@ -106,14 +106,14 @@ export function AboutSection() {
                   initial={{ opacity: 0, y: 20 }}
                   animate={isInView ? { opacity: 1, y: 0 } : {}}
                   transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
-                  className="flex items-start gap-4 p-6 bg-white dark:bg-[var(--color-bg-secondary)] rounded-xl border border-gray-200 dark:border-gray-800 hover:border-[var(--color-tech-blue)] transition-all duration-300"
+                  className="flex items-start gap-4 p-6 bg-[#F5F7FA] rounded-xl border border-[#E2E8F0] hover:border-[#005EB8] transition-all duration-300"
                 >
-                  <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] flex items-center justify-center flex-shrink-0">
+                  <div className="w-12 h-12 rounded-lg bg-[#005EB8] flex items-center justify-center flex-shrink-0">
                     <value.icon className="w-6 h-6 text-white" />
                   </div>
                   <div>
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">{value.title}</h4>
-                    <p className="text-gray-600 dark:text-gray-400 text-sm">{value.description}</p>
+                    <h4 className="font-semibold text-[#1A1A2E] mb-2">{value.title}</h4>
+                    <p className="text-[#718096] text-sm">{value.description}</p>
                   </div>
                 </motion.div>
               ))}
@@ -125,7 +125,7 @@ export function AboutSection() {
             animate={isInView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.5 }}
           >
-            <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">发展历程</h3>
+            <h3 className="text-2xl font-bold text-[#1A1A2E] mb-8 text-center">发展历程</h3>
             <div className="space-y-6">
               {milestones.map((milestone, idx) => (
                 <motion.div
@@ -133,14 +133,14 @@ export function AboutSection() {
                   initial={{ opacity: 0, x: -20 }}
                   animate={isInView ? { opacity: 1, x: 0 } : {}}
                   transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
-                  className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-white dark:bg-[var(--color-bg-secondary)] rounded-xl border border-gray-200 dark:border-gray-800"
+                  className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-[#F5F7FA] rounded-xl border border-[#E2E8F0]"
                 >
                   <div className="md:w-32 flex-shrink-0">
-                    <span className="text-sm font-medium text-[var(--color-tech-blue)]">{milestone.date}</span>
+                    <span className="text-sm font-medium text-[#005EB8]">{milestone.date}</span>
                   </div>
                   <div className="flex-1">
-                    <h4 className="font-semibold text-gray-900 dark:text-white mb-1">{milestone.title}</h4>
-                    <p className="text-gray-600 dark:text-gray-400 text-sm">{milestone.description}</p>
+                    <h4 className="font-semibold text-[#1A1A2E] mb-1">{milestone.title}</h4>
+                    <p className="text-[#718096] text-sm">{milestone.description}</p>
                   </div>
                 </motion.div>
               ))}