quant-speed_page/src/components/HeroSection.js

import React from 'react';
import { motion } from 'framer-motion';

const HeroSection = ({ isActive }) => {
  return (
    <div className="hero-section-minimal">
      {/* 左侧主要内容 */}
      <motion.div 
        className="hero-left"
        initial={{ opacity: 0, x: -60 }}
        animate={isActive ? { opacity: 1, x: 0 } : {}}
        transition={{ duration: 1.2, delay: 0.3 }}
      >
        <motion.h1 
          className="hero-main-title"
          initial={{ opacity: 0, y: 40 }}
          animate={isActive ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.6 }}
        >
          推动线下AI变革
        </motion.h1>
        
        <motion.h2 
          className="hero-subtitle"
          initial={{ opacity: 0, y: 40 }}
          animate={isActive ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.8 }}
        >
          <span className="highlight-text">通过</span> 线下硬件
          <br />
          普及人工智能技术
        </motion.h2>
        
        <motion.div
          className="hero-quote"
          initial={{ opacity: 0, x: -20 }}
          animate={isActive ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8, delay: 1.2 }}
        >
          <div className="quote-line"></div>
          <p>
            通过软硬件一体的整体解决方案，
            <br />
            量迹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>

      {/* 右侧几何形状 */}
      <motion.div 
        className="hero-right"
        initial={{ opacity: 0, scale: 0.8 }}
        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="https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/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-small"
            initial={{ rotateY: 0, rotateX: 0 }}
            animate={isActive ? { 
              rotateY: 360,
              rotateX: [0, 30, 0]
            } : {}}
            transition={{ 
              duration: 15, 
              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-ring"
            initial={{ rotateZ: 0, y: 0 }}
            animate={isActive ? {
              rotateZ: 360,
              y: [0, -20, 0]
            } : {}}
            transition={{
              duration: 20,
              repeat: Infinity,
              ease: "linear"
            }}
          />
          
          {/* 浮动粒子 */}
          <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>

      {/* 底部进度指示器 */}
      <motion.div
        className="hero-progress"
        initial={{ opacity: 0, y: 20 }}
        animate={isActive ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.8, delay: 1.5 }}
      >
        <div className="progress-bar">
          <motion.div 
            className="progress-fill"
            initial={{ width: "0%" }}
            animate={isActive ? { width: "23%" } : {}}
            transition={{ duration: 2, delay: 2 }}
          ></motion.div>
        </div>
        <div className="progress-info">
          <span className="progress-time">00:04</span>
          <span className="progress-total">00:18</span>
        </div>
      </motion.div>
    </div>
  );
};

export default HeroSection;