first commit

src/components/HeroSection.js

@@ -0,0 +1,124 @@
+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 }}
+        >
+          推动变革
+        </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 />
+            Radiant 作为增长催化剂，为我们的
+            <br />
+            投资组合公司和投资者创造卓越价值。
+          </p>
+        </motion.div>
+      </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 }}
+      >
+        <div className="geometric-container">
+          <motion.div 
+            className="cube-main"
+            initial={{ rotateY: 0, rotateX: 0 }}
+            animate={isActive ? { 
+              rotateY: [0, 15, 0], 
+              rotateX: [0, -10, 0] 
+            } : {}}
+            transition={{ 
+              duration: 8, 
+              repeat: Infinity,
+              ease: "easeInOut"
+            }}
+          >
+            <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="cube-small"
+            initial={{ rotateY: 0 }}
+            animate={isActive ? { rotateY: 360 } : {}}
+            transition={{ 
+              duration: 12, 
+              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>
+        </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;