Upload components/Newsletter.jsx with huggingface_hub

components/Newsletter.jsx

@@ -0,0 +1,53 @@
+import { motion } from 'framer-motion';
+import { Mail } from 'lucide-react';
+
+export default function Newsletter() {
+  return (
+    <section 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-[60%] h-[60%] rounded-full bg-gradient-to-r from-blue-600/10 to-purple-600/10 blur-[120px]"></div>
+      </div>
+      
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <motion.div 
+          className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-3xl p-8 md:p-16 border border-slate-700 backdrop-blur-sm text-center"
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+        >
+          <div className="w-20 h-20 mx-auto mb-8 rounded-2xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-2xl shadow-purple-500/30">
+            <Mail className="w-10 h-10 text-white" />
+          </div>
+          
+          <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+            Join Our <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">AI Community</span>
+          </h2>
+          
+          <p className="text-xl text-slate-400 mb-10 max-w-2xl mx-auto">
+            Subscribe to get the latest AI innovations, 3D scrolling tutorials, and exclusive updates directly to your inbox.
+          </p>
+          
+          <form className="max-w-md mx-auto space-y-4">
+            <div className="relative">
+              <input
+                type="email"
+                placeholder="Enter your email address"
+                className="w-full px-6 py-4 bg-slate-900/50 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200"
+              />
+              <button 
+                type="submit"
+                className="absolute right-2 top-2 bottom-2 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 rounded-lg font-medium transition-all duration-200"
+              >
+                Subscribe
+              </button>
+            </div>
+            <p className="text-sm text-slate-500">
+              We respect your privacy. Unsubscribe at any time.
+            </p>
+          </form>
+        </motion.div>
+      </div>
+    </section>
+  );
+}