first commit

src/components/TeamSection.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const TeamSection = ({ isActive }) => {
+  return (
+    <div className="team-section-minimal">
+      <motion.div 
+        className="team-content"
+        initial={{ opacity: 0, y: 60 }}
+        animate={isActive ? { opacity: 1, y: 0 } : {}}
+        transition={{ duration: 1.2, delay: 0.3 }}
+      >
+        <motion.h1 
+          className="team-main-title"
+          initial={{ opacity: 0, y: 40 }}
+          animate={isActive ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.8, delay: 0.6 }}
+        >
+          团队专业
+          <br />
+          <span className="highlight-text">知识</span>
+          <br />
+          与经验
+        </motion.h1>
+        
+        <motion.div
+          className="team-quote"
+          initial={{ opacity: 0, x: -20 }}
+          animate={isActive ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.8, delay: 1 }}
+        >
+          <div className="quote-line"></div>
+          <p>
+            我们的团队汇聚了行业顶尖人才，
+            <br />
+            拥有深厚的技术背景和丰富的
+            <br />
+            创新经验，致力于推动AI技术发展。
+          </p>
+        </motion.div>
+      </motion.div>
+
+      <motion.div 
+        className="team-visual"
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={isActive ? { opacity: 1, scale: 1 } : {}}
+        transition={{ duration: 1.5, delay: 0.5 }}
+      >
+        <div className="team-visual-container">
+          <motion.div 
+            className="team-visual-element-1"
+            animate={isActive ? { 
+              rotateZ: [0, 180, 360],
+              scale: [1, 1.2, 1]
+            } : {}}
+            transition={{ 
+              duration: 18, 
+              repeat: Infinity,
+              ease: "easeInOut"
+            }}
+          />
+          <motion.div 
+            className="team-visual-element-2"
+            animate={isActive ? { 
+              rotateY: [0, 180, 360],
+              x: [0, 20, 0]
+            } : {}}
+            transition={{ 
+              duration: 12, 
+              repeat: Infinity,
+              ease: "linear"
+            }}
+          />
+        </div>
+      </motion.div>
+
+      {/* 进度指示器 */}
+      <motion.div
+        className="team-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: "67%" } : {}}
+            transition={{ duration: 2, delay: 2 }}
+          ></motion.div>
+        </div>
+        <div className="progress-info">
+          <span className="progress-time">00:12</span>
+          <span className="progress-total">00:18</span>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default TeamSection;