Upload components/ContactForm.js with huggingface_hub

components/ContactForm.js

@@ -0,0 +1,129 @@
+import { useState } from 'react';
+import { Send, CheckCircle, Loader2 } from 'lucide-react';
+
+export default function ContactForm() {
+  const [formData, setFormData] = useState({ name: '', email: '', message: '' });
+  const [status, setStatus] = useState('idle'); // idle, loading, success, error
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setStatus('loading');
+
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      });
+
+      if (response.ok) {
+        setStatus('success');
+        setFormData({ name: '', email: '', message: '' });
+      } else {
+        setStatus('error');
+      }
+    } catch (error) {
+      setStatus('error');
+    }
+  };
+
+  return (
+    <section id="contact" className="py-24 relative overflow-hidden">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="glass-panel p-8 md:p-12">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl font-bold mb-4">Initialize Connection</h2>
+            <p className="text-gray-400">Have questions about our robotics? Send a transmission.</p>
+          </div>
+
+          {status === 'success' ? (
+            <div className="text-center py-12 animate-fade-in">
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-500/20 text-green-500 mb-4">
+                <CheckCircle className="h-8 w-8" />
+              </div>
+              <h3 className="text-2xl font-bold mb-2">Transmission Received</h3>
+              <p className="text-gray-400">Our team will respond within 24 cycles.</p>
+              <button 
+                onClick={() => setStatus('idle')}
+                className="mt-6 text-primary hover:text-white underline"
+              >
+                Send another message
+              </button>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
+                  Designation (Name)
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  required
+                  className="w-full bg-black/30 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
+                  placeholder="John Doe"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                />
+              </div>
+              
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
+                  Frequency (Email)
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  required
+                  className="w-full bg-black/30 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
+                  placeholder="john@example.com"
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">
+                  Data Packet (Message)
+                </label>
+                <textarea
+                  id="message"
+                  required
+                  rows={4}
+                  className="w-full bg-black/30 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
+                  placeholder="How can we help you?"
+                  value={formData.message}
+                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={status === 'loading'}
+                className="w-full bg-primary text-dark font-bold py-4 rounded-lg hover:bg-white transition-all flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {status === 'loading' ? (
+                  <>
+                    <Loader2 className="h-5 w-5 animate-spin" />
+                    <span>Transmitting...</span>
+                  </>
+                ) : (
+                  <>
+                    <Send className="h-5 w-5" />
+                    <span>Send Transmission</span>
+                  </>
+                )}
+              </button>
+
+              {status === 'error' && (
+                <p className="text-red-400 text-center text-sm mt-2">
+                  Transmission failed. Please check your connection and try again.
+                </p>
+              )}
+            </form>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}