Upload components/Interactive3DSection.jsx with huggingface_hub

components/Interactive3DSection.jsx

@@ -0,0 +1,89 @@
+import { motion } from 'framer-motion';
+import { useRef, useState } from 'react';
+import { Brain, Layers, Zap, Globe, Shield, Code } from 'lucide-react';
+
+export default function Interactive3DSection() {
+  const containerRef = useRef(null);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+
+  const handleMouseMove = (e) => {
+    const { clientX, clientY } = e;
+    const { innerWidth, innerHeight } = window;
+    
+    const x = (clientX - innerWidth / 2) / 25;
+    const y = (clientY - innerHeight / 2) / 25;
+    
+    setMousePosition({ x, y });
+  };
+
+  const features = [
+    { 
+      icon: <Brain className="w-8 h-8 text-purple-400" />, 
+      title: "Neural Processing", 
+      description: "Advanced AI algorithms that learn from user behavior" 
+    },
+    { 
+      icon: <Layers className="w-8 h-8 text-blue-400" />, 
+      title: "3D Depth", 
+      description: "Immersive three-dimensional interface layers" 
+    },
+    { 
+      icon: <Zap className="w-8 h-8 text-cyan-400" />, 
+      title: "Real-time", 
+      description: "Instant response with zero latency" 
+    },
+    { 
+      icon: <Globe className="w-8 h-8 text-emerald-400" />, 
+      title: "Global CDN", 
+      description: "Content delivered from nearest edge location" 
+    },
+    { 
+      icon: <Shield className="w-8 h-8 text-rose-400" />, 
+      title: "Secure", 
+      description: "Enterprise-grade encryption and security" 
+    },
+    { 
+      icon: <Code className="w-8 h-8 text-amber-400" />, 
+      title: "Developer API", 
+      description: "Easy integration with your existing stack" 
+    }
+  ];
+
+  return (
+    <section className="py-24 bg-slate-900 relative overflow-hidden">
+      <div 
+        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+        ref={containerRef}
+        onMouseMove={handleMouseMove}
+      >
+        <div className="text-center mb-20">
+          <motion.h2 
+            className="text-4xl md:text-5xl font-bold text-white mb-6"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+          >
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">AI-Powered</span> Features
+          </motion.h2>
+          <motion.p 
+            className="text-xl text-slate-400 max-w-3xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.2 }}
+          >
+            Move your mouse to experience our interactive 3D feature showcase
+          </motion.p>
+        </div>
+        
+        <div className="relative h-[600px]">
+          {/* Background Elements */}
+          <div 
+            className="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600/10 to-purple-600/10 blur-[100px] transition-transform duration-100"
+            style={{ 
+              transform: `translate(${mousePosition.x * -1}px, ${mousePosition.y * -1}px)` 
+
+          />
+          
+          <div 
+            className="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-600/10 to-emerald-600/10 blur-[80px] transition-transform duration-100"