Upload components/Hero.jsx with huggingface_hub

components/Hero.jsx

@@ -0,0 +1,100 @@
+import { motion } from 'framer-motion';
+import { ArrowRight, Zap, Layers, Brain } from 'lucide-react';
+
+export default function Hero() {
+  return (
+    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-slate-900 pt-20">
+      {/* Background Elements */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -top-[30%] -left-[10%] w-[70%] h-[70%] rounded-full bg-purple-600/20 blur-[120px] animate-float"></div>
+        <div className="absolute top-[20%] -right-[10%] w-[60%] h-[60%] rounded-full bg-blue-600/20 blur-[100px] animate-float" style={{ animationDelay: '2s' }}></div>
+        <div className="absolute -bottom-[20%] left-[20%] w-[50%] h-[50%] rounded-full bg-cyan-600/20 blur-[90px] animate-float" style={{ animationDelay: '4s' }}></div>
+      </div>
+      
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
+          <div className="inline-block mb-6 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 backdrop-blur-sm">
+            <span className="text-cyan-400 font-medium text-sm flex items-center gap-2">
+              <Zap size={16} />
+              Next-Gen AI Experience
+            </span>
+          </div>
+          
+          <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-8 tracking-tight">
+            <span className="block">AI-Powered</span>
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400">
+              3D Scrolling
+            </span>
+          </h1>
+          
+          <p className="text-xl md:text-2xl text-slate-400 mb-10 max-w-3xl mx-auto leading-relaxed">
+            Experience the future of web interaction with our cutting-edge AI-driven 3D scrolling technology.
+            Seamlessly blend reality with digital innovation.
+          </p>
+          
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <button className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-xl font-bold text-lg transition-all duration-200 transform hover:scale-105 shadow-lg shadow-purple-500/30 flex items-center justify-center gap-2">
+              Start Scrolling
+              <ArrowRight size={20} />
+            </button>
+            <button className="w-full sm:w-auto px-8 py-4 bg-slate-800 hover:bg-slate-700 text-white rounded-xl font-bold text-lg transition-all duration-200 border border-slate-700 flex items-center justify-center gap-2">
+              View Demo
+            </button>
+          </div>
+        </motion.div>
+        
+        {/* Features Grid */}
+        <motion.div 
+          className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-24"
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+        >
+          {[
+            {
+              icon: <Brain className="w-8 h-8 text-purple-400" />,
+              title: "AI-Powered",
+              description: "Advanced neural networks power our scrolling experience"
+            },
+            {
+              icon: <Layers className="w-8 h-8 text-blue-400" />,
+              title: "3D Depth",
+              description: "Immersive three-dimensional interface for enhanced engagement"
+            },
+            {
+              icon: <Zap className="w-8 h-8 text-cyan-400" />,
+              title: "Real-Time",
+              description: "Instant responses with lightning-fast performance"
+            }
+          ].map((feature, index) => (
+            <div 
+              key={index} 
+              className="p-6 rounded-2xl bg-slate-800/30 border border-slate-700 backdrop-blur-sm hover:bg-slate-800/50 transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/10"
+            >
+              <div className="w-14 h-14 rounded-xl bg-slate-900/50 flex items-center justify-center mb-4">
+                {feature.icon}
+              </div>
+              <h3 className="text-xl font-bold text-white mb-2">{feature.title}</h3>
+              <p className="text-slate-400">{feature.description}</p>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+      
+      {/* Scroll Indicator */}
+      <motion.div 
+        className="absolute bottom-10 left-1/2 transform -translate-x-1/2"
+        animate={{ y: [0, 10, 0] }}
+        transition={{ duration: 2, repeat: Infinity }}
+      >
+        <div className="w-6 h-10 border-2 border-slate-500 rounded-full flex justify-center p-1">
+          <div className="w-1 h-2 bg-slate-400 rounded-full animate-bounce"></div>
+        </div>
+      </motion.div>
+    </section>
+  );
+}