Upload components/Contact.js with huggingface_hub

components/Contact.js

@@ -0,0 +1,211 @@
+import { useState } from 'react'
+
+export default function Contact({ selectedSeed }) {
+  const [formData, setFormData] = useState({
+    name: '',
+    phone: '',
+    village: '',
+    district: '',
+    state: '',
+    seed: selectedSeed?.name || '',
+    message: ''
+  })
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    alert('धन्यवाद! हमारी टीम जल्द ही आपसे संपर्क करेगी।\n\nThank you! Our team will contact you soon.')
+    setFormData({
+      name: '',
+      phone: '',
+      village: '',
+      district: '',
+      state: '',
+      seed: '',
+      message: ''
+    })
+  }
+
+  return (
+    <section id="contact" className="py-20 bg-gradient-to-b from-gray-50 to-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-12">
+          <h2 className="text-4xl font-bold text-kisan-soil mb-4">
+            ज़रूरत बताएं, बीज पाएं
+          </h2>
+          <p className="text-gray-600 text-lg">
+            अपनी ज़रूरत बताएं और हम आपके खेत के लिए सही बीजेजें
+ भ          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-12">
+          <div>
+            <div className="bg-kisan-green rounded-2xl p-8 text-white">
+              <h3 className="text-2xl font-bold mb-6">📞 हेल्पलाइन</h3>
+              
+              <div className="space-y-4">
+                <div className="flex items-center gap-4">
+                  <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
+                    <span>📱</span>
+                  </div>
+                  <div>
+                    <p className="text-sm text-kisan-light">Call for Orders</p>
+                    <p className="text-xl font-semibold">1800-XXX-XXXX</p>
+                  </div>
+                </div>
+                
+                <div className="flex items-center gap-4">
+                  <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
+                    <span>💬</span>
+                  </div>
+                  <div>
+                    <p className="text-sm text-kisan-light">WhatsApp</p>
+                    <p className="text-xl font-semibold">+91 XXXXX XXXXX</p>
+                  </div>
+                </div>
+                
+                <div className="flex items-center gap-4">
+                  <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
+                    <span>✉️</span>
+                  </div>
+                  <div>
+                    <p className="text-sm text-kisan-light">Email</p>
+                    <p className="text-xl font-semibold">info@kisanbeejseva.com</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-8 pt-6 border-t border-white/20">
+                <p className="font-semibold mb-3">कार्य समय:</p>
+                <p className="text-kisan-light">सोमवार - शनिवार: सुबह 8 बजे - रात 8 बजे</p>
+              </div>
+            </div>
+
+            <div className="mt-6 bg-kisan-gold/10 rounded-2xl p-6 border-2 border-kisan-gold">
+              <h4 className="font-bold text-kisan-soil mb-2">🎁 आज का ऑफर</h4>
+              <p className="text-gray-700">
+                पहले ऑर्डर पर 10% छूट + मुफ्त कृषि सलाह!
+              </p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit} className="bg-white rounded-2xl shadow-xl p-8">
+            <h3 className="text-2xl font-bold text-kisan-soil mb-6">ऑर्डर फॉर्म</h3>
+            
+            <div className="grid sm:grid-cols-2 gap-4 mb-4">
+              <div>
+                <label className="block text-gray-700 font-medium mb-2">नाम / Name</label>
+                <input
+                  type="text"
+                  required
+                  value={formData.name}
+                  onChange={(e) => setFormData({...formData, name: e.target.value})}
+                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
+                  placeholder="आपका नाम"
+                />
+              </div>
+              <div>
+                <label className="block text-gray-700 font-medium mb-2">मोबाइल / Mobile</label>
+                <input
+                  type="tel"
+                  required
+                  value={formData.phone}
+                  onChange={(e) => setFormData({...formData, phone: e.target.value})}
+                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
+                  placeholder="10 अंकों का मोबाइल"
+                />
+              </div>
+            </div>
+
+            <div className="grid sm:grid-cols-2 gap-4 mb-4">
+              <div>
+                <label className="block text-gray-700 font-medium mb-2">गांव / Village</label>
+                <input
+                  type="text"
+                  required
+                  value={formData.village}
+                  onChange={(e) => setFormData({...formData, village: e.target.value})}
+                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
+                  placeholder="आपका गांव"
+                />
+              </div>
+              <div>
+                <label className="block text-gray-700 font-medium mb-2">जिला / District</label>
+                <input
+                  type="text"
+                  required
+                  value={formData.district}
+                  onChange={(e) => setFormData({...formData, district: e.target.value})}
+                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
+                  placeholder="आपका जिला"
+                />
+              </div>
+            </div>
+
+            <div className="mb-4">
+              <label className="block text-gray-700 font-medium mb-2">राज्य / State</label>
+              <select
+                required
+                value={formData.state}
+                onChange={(e) => setFormData({...formData, state: e.target.value})}
+                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
+              >
+                <option value="">राज्य चुनें</option>
+                <option value="UP">उत्तर प्रदेश</option>
+                <option value="MP">मध्य प्रदेश</option>
+                <option value="RJ">राजस्थान</option>
+                <option value="HR">हरियाणा</option>
+                <option value="PB">पंजाब</option>
+                <option value="BR">बिहार</option>
+                <option value="MH">महाराष्ट्र</option>
+                <option value="KA">कर्नाटक</option>
+                <option value="TN">तमिलनाडु</option>
+                <option value="AP">आंध्र प्रदेश</option>
+                <option value="OTHER">अन्य</option>
+              </select>
+            </div>
+
+            <div className="mb-4">
+              <label className="block text-gray-700 font-medium mb-2">बीज का नाम / Seed Required</label>
+              <select
+                value={formData.seed}
+                onChange={(e) => setFormData({...formData, seed: e.target.value})}
+                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
+              >
+                <option value="">बीज चुनें</option>
+                <option value="धान">धान / Rice</option>
+                <option value="गेहूं">गेहूं / Wheat</option>
+                <option value="मक्का">मक्का / Maize</option>
+                <option value="मूंग">मूंग / Moong</option>
+                <option value="अरहर">अरहर / Arhar</option>
+                <option value="सरसों">सरसों / Mustard</option>
+                <option value="सोयाबीन">सोयाबीन / Soybean</option>
+                <option value="मूंगफली">मूंगफली / Groundnut</option>
+                <option value="कपास">कपास / Cotton</option>
+                <option value="सब्जी">सब्जी के बीज / Vegetables</option>
+                <option value="अन्य">अन्य / Other</option>
+              </select>
+            </div>
+
+            <div className="mb-6">
+              <label className="block text-gray-700 font-medium mb-2">संदेश / Message</label>
+              <textarea
+                value={formData.message}
+                onChange={(e) => setFormData({...formData, message: e.target.value})}
+                rows={3}
+                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition resize-none"
+                placeholder="आपका संदेश या कोई विशेष आवश्यकता..."
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="w-full bg-kisan-green text-white py-4 rounded-xl font-bold text-lg hover:bg-kisan-dark transition transform hover:scale-[1.02]"
+            >
+              📩 भेजें / Submit
+            </button>
+          </form>
+        </div>
+      </div>
+    </section>
+  )
+}