Upload components/InteractiveDemo.jsx with huggingface_hub

components/InteractiveDemo.jsx

@@ -0,0 +1,155 @@
+import { motion } from 'framer-motion';
+import { MousePointer2, Move3D, Touch, Play } from 'lucide-react';
+
+export default function InteractiveDemo() {
+  return (
+    <section id="demo" className="py-24 bg-slate-900 relative overflow-hidden">
+      {/* Background Elements */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute top-[20%] left-[10%] w-[50%] h-[50%] rounded-full bg-blue-600/10 blur-[100px]"></div>
+        <div className="absolute bottom-[20%] right-[10%] w-[40%] h-[40%] rounded-full bg-purple-600/10 blur-[80px]"></div>
+      </div>
+      
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div>
+            <motion.div 
+              className="inline-block mb-6 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 backdrop-blur-sm"
+              initial={{ opacity: 0, x: -40 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+            >
+              <span className="text-purple-400 font-medium text-sm">Interactive Experience</span>
+            </motion.div>
+            
+            <motion.h2 
+              className="text-4xl md:text-5xl font-bold text-white mb-8"
+              initial={{ opacity: 0, x: -40 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+            >
+              Experience the <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">Future</span> of Interaction
+            </motion.h2>
+            
+            <motion.p 
+              className="text-xl text-slate-400 mb-8"
+              initial={{ opacity: 0, x: -40 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.2 }}
+            >
+              Our AI-powered 3D scrolling technology transforms how users interact with your content. 
+              Simply scroll to discover an immersive journey that feels incredibly natural and intuitive.
+            </motion.p>
+            
+            <motion.div 
+              className="space-y-6"
+              initial={{ opacity: 0, x: -40 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.4 }}
+            >
+              {[
+                { icon: <MousePointer2 className="w-6 h-6 text-cyan-400" />, text: "Intuitive mouse tracking for 3D depth" },
+                { icon: <Move3D className="w-6 h-6 text-purple-400" />, text: "Seamless parallax effects on scroll" },
+                { icon: <Touch className="w-6 h-6 text-blue-400" />, text: "Touch-optimized for mobile devices" }
+              ].map((item, index) => (
+                <div key={index} className="flex items-center gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700">
+                  <div className="w-12 h-12 rounded-xl bg-slate-900/50 flex items-center justify-center">
+                    {item.icon}
+                  </div>
+                  <span className="text-slate-300">{item.text}</span>
+                </div>
+              ))}
+            </motion.div>
+          </div>
+          
+          <motion.div 
+            className="relative"
+            initial={{ opacity: 0, scale: 0.9 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.3 }}
+          >
+            <div className="aspect-video rounded-2xl overflow-hidden bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700 relative group">
+              {/* Simulated 3D Scene */}
+              <div className="absolute inset-0 flex items-center justify-center overflow-hidden">
+                <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-slate-700/20 to-transparent"></div>
+                
+                {/* Floating Elements */}
+                <motion.div 
+                  className="absolute w-32 h-32 bg-purple-500/30 rounded-full blur-2xl"
+                  animate={{ 
+                    y: [0, -30, 0],
+                    x: [0, 20, 0],
+                    scale: [1, 1.1, 1]
+
+                  transition={{ duration: 6, repeat: Infinity }}
+                />
+                
+                <motion.div 
+                  className="absolute w-48 h-48 bg-blue-500/20 rounded-full blur-3xl"
+                  animate={{ 
+                    y: [0, 40, 0],
+                    x: [0, -30, 0],
+                    scale: [1, 1.2, 1]
+
+                  transition={{ duration: 8, repeat: Infinity, delay: 1 }}
+                />
+                
+                <motion.div 
+                  className="absolute w-24 h-24 bg-cyan-500/30 rounded-full blur-xl"
+                  animate={{ 
+                    y: [0, -20, 0],
+                    x: [0, -15, 0],
+                    scale: [1, 1.1, 1]
+
+                  transition={{ duration: 7, repeat: Infinity, delay: 2 }}
+                />
+                
+                {/* Center Content */}
+                <div className="relative z-10 text-center p-8">
+                  <div className="w-24 h-24 mx-auto mb-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-2xl shadow-purple-500/30 group-hover:scale-110 transition-transform duration-300">
+                    <Play className="w-10 h-10 text-white ml-1" />
+                  </div>
+                  <h3 className="text-2xl font-bold text-white mb-2">Interactive Preview</h3>
+                  <p className="text-slate-400">Hover and scroll to experience 3D depth</p>
+                  
+                  {/* Floating Particles */}
+                  {[...Array(6)].map((_, i) => (
+                    <motion.div
+                      key={i}
+                      className="absolute w-2 h-2 bg-white rounded-full"
+                      initial={{ opacity: 0 }}
+                      animate={{ 
+                        opacity: [0, 1, 0],
+                        x: Math.random() * 200 - 100,
+                        y: Math.random() * 200 - 100
+
+                      transition={{ 
+                        duration: 3, 
+                        repeat: Infinity, 
+                        delay: Math.random() * 2 
+
+                    />
+                  ))}
+                </div>
+              </div>
+              
+              <div className="absolute inset-0 bg-gradient-to-t from-slate-900/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
+                <button className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-medium flex items-center gap-2">
+                  <Play className="w-4 h-4" />
+                  View Full Demo
+                </button>
+              </div>
+            </div>
+            
+            {/* Decorative Elements */}
+            <div className="absolute -top-6 -right-6 w-24 h-24 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full blur-2xl opacity-30 animate-pulse"></div>
+            <div className="absolute -bottom-6 -left-6 w-32 h-32 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-full blur-2xl opacity-20 animate-pulse" style={{ animationDelay: '1s' }}></div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}