最新

src/components/HeroSection.js

@@ -17,7 +17,7 @@ const HeroSection = ({ isActive }) => {
           animate={isActive ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.8, delay: 0.6 }}
         >
-          推动变革
+          推动线下AI变革
         </motion.h1>
         
         <motion.h2 
@@ -26,9 +26,9 @@ const HeroSection = ({ isActive }) => {
           animate={isActive ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.8, delay: 0.8 }}
         >
-          <span className="highlight-text">通过</span> 创新的
+          <span className="highlight-text">通过</span> 线下硬件
           <br />
-          人工智能技术
+          普及人工智能技术
         </motion.h2>
         
         <motion.div
@@ -39,13 +39,30 @@ const HeroSection = ({ isActive }) => {
         >
           <div className="quote-line"></div>
           <p>
-            通过利用战略洞察和行业网络，
+            通过软硬件一体的整体解决方案，
             <br />
-            Radiant 作为增长催化剂，为我们的
+            量迹AI用普惠的解决方案，
             <br />
-            投资组合公司和投资者创造卓越价值。
+            让人类进入AI时代
           </p>
         </motion.div>
+        
+        <motion.button
+          className="learn-more-btn"
+          initial={{ opacity: 0, y: 30 }}
+          animate={isActive ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.8, delay: 1.6 }}
+          whileHover={{ 
+            scale: 1.05,
+            y: -3,
+            boxShadow: "0 10px 30px rgba(0, 245, 212, 0.3)"
+          }}
+          whileTap={{ scale: 0.95 }}
+        >
+          <span className="btn-text">了解更多</span>
+          <div className="btn-glow"></div>
+          <div className="btn-arrow">→</div>
+        </motion.button>
       </motion.div>
 
       {/* 右侧几何形状 */}
@@ -55,45 +72,91 @@ const HeroSection = ({ isActive }) => {
         animate={isActive ? { opacity: 1, scale: 1 } : {}}
         transition={{ duration: 1.5, delay: 0.5 }}
       >
+        {/* 背景视频 */}
+        <video
+          className="hero-background-video"
+          autoPlay
+          muted
+          loop
+          playsInline
+          controls={false}
+          preload="auto"
+          src="/stay.mp4"
+          onError={(e) => console.error('Video error:', e)}
+          onLoadStart={() => console.log('Video loading started')}
+          onCanPlay={() => console.log('Video can play')}
+        />
+        
         <div className="geometric-container">
+          {/* 小立方体 */}
           <motion.div 
-            className="cube-main"
+            className="cube-small"
             initial={{ rotateY: 0, rotateX: 0 }}
             animate={isActive ? { 
-              rotateY: [0, 15, 0], 
-              rotateX: [0, -10, 0] 
+              rotateY: 360,
+              rotateX: [0, 30, 0]
             } : {}}
             transition={{ 
-              duration: 8, 
+              duration: 15, 
               repeat: Infinity,
-              ease: "easeInOut"
+              ease: "linear"
             }}
           >
             <div className="cube-face front"></div>
-            <div className="cube-face back"></div>
+            {/* <div className="cube-face back"></div> */}
             <div className="cube-face right"></div>
             <div className="cube-face left"></div>
             <div className="cube-face top"></div>
             <div className="cube-face bottom"></div>
           </motion.div>
           
-          <motion.div 
-            className="cube-small"
-            initial={{ rotateY: 0 }}
-            animate={isActive ? { rotateY: 360 } : {}}
-            transition={{ 
-              duration: 12, 
+          {/* 浮动圆环 */}
+          <motion.div
+            className="floating-ring"
+            initial={{ rotateZ: 0, y: 0 }}
+            animate={isActive ? {
+              rotateZ: 360,
+              y: [0, -20, 0]
+            } : {}}
+            transition={{
+              duration: 20,
               repeat: Infinity,
               ease: "linear"
             }}
-          >
-            <div className="cube-face front"></div>
-            <div className="cube-face back"></div>
-            <div className="cube-face right"></div>
-            <div className="cube-face left"></div>
-            <div className="cube-face top"></div>
-            <div className="cube-face bottom"></div>
-          </motion.div>
+          />
+          
+          {/* 浮动粒子 */}
+          <motion.div
+            className="floating-particle particle-1"
+            initial={{ x: 0, y: 0, opacity: 0 }}
+            animate={isActive ? {
+              x: [0, 40, -20, 0],
+              y: [0, -30, 20, 0],
+              opacity: [0, 0.6, 0.3, 0]
+            } : {}}
+            transition={{
+              duration: 8,
+              repeat: Infinity,
+              ease: "easeInOut",
+              delay: 1
+            }}
+          />
+          
+          <motion.div
+            className="floating-particle particle-2"
+            initial={{ x: 0, y: 0, opacity: 0 }}
+            animate={isActive ? {
+              x: [0, -60, 30, 0],
+              y: [0, 40, -25, 0],
+              opacity: [0, 0.4, 0.6, 0]
+            } : {}}
+            transition={{
+              duration: 12,
+              repeat: Infinity,
+              ease: "easeInOut",
+              delay: 3
+            }}
+          />
         </div>
       </motion.div>