chore: 更新构建ID和相关文件引用

src/components/sections/hero-section.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import { motion } from 'framer-motion';
-import { Button } from '@/components/ui/button';
+import { motion, AnimatePresence } from 'framer-motion';
+import { RippleButton, SealButton } from '@/components/ui/ripple-button';
+import { FadeUp, StaggerContainer, StaggerItem, CountUp, FloatingElement, SplitText, GradientText, MagneticButton, BlurReveal, CounterWithEffect } from '@/lib/animations';
 import { COMPANY_INFO, STATS } from '@/lib/constants';
 import { ArrowRight, Shield, Zap, Award } from 'lucide-react';
 
@@ -62,24 +63,97 @@ export function HeroSection() {
     <section 
       id="home" 
       ref={sectionRef}
-      className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-linear-to-b from-[#F5F7FA] to-white"
+      className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white"
     >
       <div className="absolute inset-0 pointer-events-none overflow-hidden">
-        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-200 h-150 bg-[radial-gradient(ellipse_at_center,rgba(79,70,229,0.06)_0%,transparent_60%)]" />
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
+          className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-[radial-gradient(ellipse_at_center,rgba(28,28,28,0.03)_0%,transparent_60%)]"
+        />
         
-        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-150 h-100 bg-[radial-gradient(ellipse_at_center,rgba(196,30,58,0.04)_0%,transparent_50%)]" />
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 1.2, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
+          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%)]"
+        />
+
+        <FloatingElement amplitude={20} duration={6} className="absolute top-[15%] left-[5%]">
+          <motion.div 
+            initial={{ opacity: 0, scale: 0 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 0.5, duration: 0.8 }}
+            className="w-4 h-4 bg-[#C41E3A]/30 rounded-full blur-[1px]"
+          />
+        </FloatingElement>
+        
+        <FloatingElement amplitude={25} duration={7} delay={0.3} className="absolute top-[25%] right-[8%]">
+          <motion.div 
+            initial={{ opacity: 0, scale: 0 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 0.7, duration: 0.8 }}
+            className="w-6 h-6 bg-[#1C1C1C]/20 rounded-full blur-[1px]"
+          />
+        </FloatingElement>
+        
+        <FloatingElement amplitude={18} duration={5} delay={0.6} className="absolute bottom-[30%] left-[10%]">
+          <motion.div 
+            initial={{ opacity: 0, scale: 0 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 0.9, duration: 0.8 }}
+            className="w-3 h-3 bg-[#C41E3A]/25 rounded-full"
+          />
+        </FloatingElement>
+        
+        <FloatingElement amplitude={22} duration={6.5} delay={0.2} className="absolute bottom-[20%] right-[12%]">
+          <motion.div 
+            initial={{ opacity: 0, scale: 0 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 1.1, duration: 0.8 }}
+            className="w-5 h-5 bg-[#1C1C1C]/15 rounded-full blur-[1px]"
+          />
+        </FloatingElement>
+
+        <FloatingElement amplitude={15} duration={5.5} delay={0.8} className="absolute top-[40%] left-[15%]">
+          <motion.div 
+            initial={{ opacity: 0, scale: 0 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 1.3, duration: 0.8 }}
+            className="w-2 h-2 bg-[#C41E3A]/40 rounded-full"
+          />
+        </FloatingElement>
+
+        <FloatingElement amplitude={30} duration={8} delay={0.4} className="absolute top-[60%] right-[5%]">
+          <motion.div 
+            initial={{ opacity: 0, scale: 0 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 1.5, duration: 0.8 }}
+            className="w-8 h-8 border-2 border-[#C41E3A]/20 rounded-full"
+          />
+        </FloatingElement>
+
+        <FloatingElement amplitude={12} duration={4.5} delay={1} className="absolute top-[35%] right-[20%]">
+          <motion.div 
+            initial={{ opacity: 0, scale: 0 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 1.7, duration: 0.8 }}
+            className="w-2 h-2 bg-[#1C1C1C]/30 rounded-full"
+          />
+        </FloatingElement>
       </div>
 
       <div className="container-wide py-24 md:py-32 lg:py-40 relative z-10">
         <div className="max-w-4xl mx-auto text-center">
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={isVisible ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.6 }}
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={isVisible ? { opacity: 1, y: 0, scale: 1 } : {}}
+            transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
             className="mb-8"
           >
             <span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium">
-              数字印章 · 智连未来
+              智连未来 · 与客户共同成长
             </span>
           </motion.div>
 
@@ -89,26 +163,22 @@ export function HeroSection() {
             transition={{ duration: 0.6, delay: 0.1 }}
             className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight mb-6"
           >
-            <span className="text-[#1A1A2E]">{COMPANY_INFO.shortName}</span>
+            <SplitText text={COMPANY_INFO.shortName} className="text-[#1A1A2E]" delay={0.2} />
           </motion.h1>
           
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            animate={isVisible ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.6, delay: 0.15 }}
-            className="text-xl sm:text-2xl text-[#4A5568] mb-4"
-          >
-            企业数字化转型服务商
-          </motion.p>
+          <BlurReveal delay={0.3}>
+            <p className="text-xl sm:text-2xl text-[#4A5568] mb-4">
+              <GradientText colors={['#C41E3A', '#E04A68', '#C41E3A']} duration={4}>
+                企业数字化转型服务商
+              </GradientText>
+            </p>
+          </BlurReveal>
 
-          <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>
+          <BlurReveal delay={0.4}>
+            <p className="text-lg text-[#718096] mb-10 max-w-2xl mx-auto leading-relaxed">
+              融合金融科技专业品质与中国传统美学，为您打造卓越的数字体验
+            </p>
+          </BlurReveal>
 
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -116,22 +186,26 @@ export function HeroSection() {
             transition={{ duration: 0.6, delay: 0.3 }}
             className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8"
           >
-            <Button 
-              size="lg"
-              onClick={() => handleScrollTo('contact')}
-              className="min-w-45"
-            >
-              立即咨询
-              <ArrowRight className="w-4 h-4 ml-2" />
-            </Button>
-            <Button 
-              size="lg"
-              variant="outline"
-              onClick={() => handleScrollTo('about')}
-              className="min-w-45"
-            >
-              了解更多
-            </Button>
+            <MagneticButton strength={0.4}>
+              <SealButton 
+                size="lg"
+                onClick={() => handleScrollTo('contact')}
+                className="min-w-[180px]"
+              >
+                立即咨询
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </SealButton>
+            </MagneticButton>
+            <MagneticButton strength={0.4}>
+              <RippleButton 
+                size="lg"
+                variant="outline"
+                onClick={() => handleScrollTo('about')}
+                className="min-w-[180px]"
+              >
+                了解更多
+              </RippleButton>
+            </MagneticButton>
           </motion.div>
 
           <motion.div
@@ -141,13 +215,17 @@ export function HeroSection() {
             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-[#FAFAFA] border border-[#E5E5E5] transition-all duration-300 hover:border-[#1C1C1C] hover:shadow-md"
+              <motion.div 
+                key={index}
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={isVisible ? { opacity: 1, scale: 1 } : {}}
+                transition={{ duration: 0.4, delay: 0.4 + index * 0.1 }}
+                whileHover={{ scale: 1.05, y: -2 }}
+                className="flex items-center gap-2 px-4 py-2 rounded-full bg-[#FAFAFA] border border-[#E5E5E5] transition-all duration-300 hover:border-[#1C1C1C] hover:shadow-md cursor-default"
               >
                 <feature.icon className="w-4 h-4 text-[#C41E3A]" />
                 <span className="text-sm text-[#3D3D3D]">{feature.text}</span>
-              </div>
+              </motion.div>
             ))}
           </motion.div>
 
@@ -186,13 +264,19 @@ function StatItem({ stat, index, shouldAnimate }: {
   return (
     <motion.div 
       className="group cursor-default text-center"
-      initial={{ opacity: 0, y: 20 }}
-      animate={shouldAnimate ? { opacity: 1, y: 0 } : {}}
-      transition={{ duration: 0.5, delay: index * 0.1 }}
+      initial={{ opacity: 0, y: 20, scale: 0.9 }}
+      animate={shouldAnimate ? { opacity: 1, y: 0, scale: 1 } : {}}
+      transition={{ duration: 0.5, delay: index * 0.1, type: 'spring', stiffness: 100 }}
+      whileHover={{ scale: 1.05, y: -5 }}
     >
       <div className="text-4xl sm:text-5xl font-bold text-[#C41E3A] mb-3">
         {shouldAnimate ? (
-          <AnimatedCounter value={numericValue} suffix={suffix} />
+          <CounterWithEffect 
+            end={numericValue} 
+            suffix={suffix} 
+            effect="bounce"
+            duration={2000}
+          />
         ) : (
           <span className="text-[#CBD5E0]">0{suffix}</span>
         )}
@@ -203,28 +287,3 @@ function StatItem({ stat, index, shouldAnimate }: {
     </motion.div>
   );
 }
-
-function AnimatedCounter({ value, suffix }: { value: number; suffix: string }) {
-  const [count, setCount] = useState(0);
-
-  useEffect(() => {
-    const duration = 2000;
-    const steps = 60;
-    const increment = value / steps;
-    let current = 0;
-    
-    const timer = setInterval(() => {
-      current += increment;
-      if (current >= value) {
-        setCount(value);
-        clearInterval(timer);
-      } else {
-        setCount(Math.floor(current));
-      }
-    }, duration / steps);
-
-    return () => clearInterval(timer);
-  }, [value]);
-
-  return <>{count}{suffix}</>;
-}