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

- 浅蓝渐变背景
- 专业蓝主色调
- 印章红数据强调
- 移除深色背景和科技感粒子效果

src/components/sections/hero-section.tsx

@@ -4,7 +4,13 @@ import { useEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 import { COMPANY_INFO, STATS } from '@/lib/constants';
-import { ArrowRight, Sparkles } from 'lucide-react';
+import { ArrowRight, Shield, Zap, Award } from 'lucide-react';
+
+const features = [
+  { icon: Shield, text: '安全可靠' },
+  { icon: Zap, text: '高效便捷' },
+  { icon: Award, text: '专业服务' },
+];
 
 export function HeroSection() {
   const [isVisible, setIsVisible] = useState(false);
@@ -56,23 +62,12 @@ export function HeroSection() {
     <section 
       id="home" 
       ref={sectionRef}
-      className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-[var(--color-bg-primary)]"
+      className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-gradient-to-b from-[#F5F7FA] to-white"
     >
       <div className="absolute inset-0 pointer-events-none overflow-hidden">
-        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[var(--color-tech-blue)]/10 rounded-full blur-3xl animate-pulse-glow" />
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-[radial-gradient(ellipse_at_center,rgba(0,94,184,0.05)_0%,transparent_60%)]" />
-        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-[var(--color-tech-purple)]/10 rounded-full blur-3xl animate-pulse-glow" style={{ animationDelay: '1s' }} />
-        <div className="absolute top-1/2 right-1/3 w-64 h-64 bg-[var(--color-tech-cyan)]/10 rounded-full blur-3xl animate-pulse-glow" style={{ animationDelay: '2s' }} />
-      </div>
         
-      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-[radial-gradient(ellipse_at_center,rgba(196,30,58,0.04)_0%,transparent_50%)]" />
-        <svg className="absolute w-full h-full opacity-5">
-          <defs>
-            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
-              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--color-tech-blue)" strokeWidth="0.5" />
-            </pattern>
-          </defs>
-          <rect width="100%" height="100%" fill="url(#grid)" />
-        </svg>
       </div>
 
       <div className="container-wide py-24 md:py-32 lg:py-40 relative z-10">
@@ -81,11 +76,10 @@ export function HeroSection() {
             initial={{ opacity: 0, y: 20 }}
             animate={isVisible ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.6 }}
-            className="mb-6"
+            className="mb-8"
           >
-            <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-blue)]/30 bg-[rgba(0,217,255,0.05)] text-[var(--color-tech-blue)] text-sm font-medium">
+            <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">
-              <Sparkles className="w-4 h-4" />
+              数字印章 · 智连未来
-              科技创新 · 智慧未来
             </span>
           </motion.div>
 
@@ -93,54 +87,78 @@ export function HeroSection() {
             initial={{ opacity: 0, y: 20 }}
             animate={isVisible ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.1 }}
-            className="text-4xl sm:text-5xl lg:text-6xl font-bold text-[var(--color-text-primary)] leading-tight tracking-tight mb-6"
+            className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight mb-6"
           >
-            <span className="tech-gradient-text">{COMPANY_INFO.shortName}</span>
+            <span className="text-[#1A1A2E]">{COMPANY_INFO.shortName}</span>
-            <br />
-            <span className="text-[var(--color-text-secondary)]">企业数字化转型服务商</span>
           </motion.h1>
           
           <motion.p
             initial={{ opacity: 0, y: 20 }}
             animate={isVisible ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.6, delay: 0.2 }}
+            transition={{ duration: 0.6, delay: 0.15 }}
-            className="text-lg sm:text-xl text-[var(--color-text-tertiary)] mb-8 max-w-2xl mx-auto leading-relaxed"
+            className="text-xl sm:text-2xl text-[#4A5568] mb-4"
           >
-            {COMPANY_INFO.description}
+            企业数字化转型服务商
+          </motion.p>
+
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={isVisible ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="text-lg text-[#718096] mb-10 max-w-2xl mx-auto leading-relaxed"
+          >
+            融合金融科技专业品质与中国传统美学，为您打造卓越的数字体验
           </motion.p>
 
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={isVisible ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.3 }}
-            className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16"
+            className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8"
           >
             <Button 
               size="lg"
-              onClick={() => handleScrollTo('about')}
+              onClick={() => handleScrollTo('contact')}
-              className="min-w-[160px]"
+              className="min-w-[180px]"
             >
-              了解更多
+              立即咨询
               <ArrowRight className="w-4 h-4 ml-2" />
             </Button>
             <Button 
               size="lg"
               variant="outline"
-              onClick={() => handleScrollTo('contact')}
+              onClick={() => handleScrollTo('about')}
-              className="min-w-[160px]"
+              className="min-w-[180px]"
             >
-              联系我们
+              了解更多
             </Button>
           </motion.div>
 
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isVisible ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.35 }}
+            className="flex flex-wrap gap-4 justify-center mb-16"
+          >
+            {features.map((feature, index) => (
+              <div 
+                key={index} 
+                className="flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-[#E2E8F0] transition-all duration-300 hover:border-[#005EB8] hover:shadow-md"
+              >
+                <feature.icon className="w-4 h-4 text-[#005EB8]" />
+                <span className="text-sm text-[#4A5568]">{feature.text}</span>
+              </div>
+            ))}
+          </motion.div>
+
           <motion.div
             id="stats-section"
             initial={{ opacity: 0, y: 20 }}
             animate={isVisible ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.4 }}
-            className="pt-12 border-t border-[var(--color-border-primary)]"
+            className="pt-16 border-t border-[#E2E8F0]"
           >
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
               {STATS.map((stat, index) => (
                 <StatItem 
                   key={stat.label} 
@@ -153,8 +171,6 @@ export function HeroSection() {
           </motion.div>
         </div>
       </div>
-
-      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[var(--color-bg-primary)] to-transparent pointer-events-none" />
     </section>
   );
 }
@@ -174,14 +190,14 @@ function StatItem({ stat, index, shouldAnimate }: {
       animate={shouldAnimate ? { opacity: 1, y: 0 } : {}}
       transition={{ duration: 0.5, delay: index * 0.1 }}
     >
-      <div className="text-3xl sm:text-4xl font-bold tech-gradient-text mb-2">
+      <div className="text-4xl sm:text-5xl font-bold text-[#C41E3A] mb-3">
         {shouldAnimate ? (
           <AnimatedCounter value={numericValue} suffix={suffix} />
         ) : (
-          `0${suffix}`
+          <span className="text-[#CBD5E0]">0{suffix}</span>
         )}
       </div>
-      <div className="text-sm text-[var(--color-text-muted)] group-hover:text-[var(--color-text-tertiary)] transition-colors">
+      <div className="text-sm text-[#718096] group-hover:text-[#4A5568] transition-colors">
         {stat.label}
       </div>
     </motion.div>