Logo update

components/otherPages/Contact.jsx

@@ -1,9 +1,70 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 
-export default function Contact() {
+export default function Contactother() {
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+    phone: '',
+    message: ''
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitStatus, setSubmitStatus] = useState(null);
+
+  const handleInputChange = (e) => {
+    const { id, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [id]: value
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    // Basic validation
+    if (!formData.fullName || !formData.email) {
+      alert('Please fill in all required fields');
+      return;
+    }
+
+    setIsSubmitting(true);
+    setSubmitStatus(null);
+
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          type: 'contact',
+          ...formData,
+        }),
+      });
+
+      if (response.ok) {
+        setSubmitStatus('success');
+        setFormData({
+          fullName: '',
+          email: '',
+          phone: '',
+          message: ''
+        });
+      } else {
+        setSubmitStatus('error');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+      setSubmitStatus('error');
+    } finally {
+      setIsSubmitting(false);
+      setTimeout(() => setSubmitStatus(null), 5000);
+    }
+  };
+
   return (
     <div className="page-title style-default -mb_11">
       <div className="section-contact style-default position-relative py-0">
@@ -28,25 +89,41 @@ export default function Contact() {
                   <div className="content mb-0 ">
                     <h6 className="text_primary">+91 90954 50005</h6>
                     <p className="text-body-2 text_primary">
-                      Call us for urgent
+                      Call us for urgent inquiry
                     </p>
                   </div>
                 </div>
               </div>
             </div>
             <div className="col-lg-6">
+              {submitStatus && (
+                <div className={`alert mb-3 ${submitStatus === 'success' ? 'alert-success' : 'alert-danger'}`} style={{
+                  padding: '10px 15px',
+                  borderRadius: '5px',
+                  marginBottom: '20px',
+                  backgroundColor: submitStatus === 'success' ? '#d4edda' : '#f8d7da',
+                  color: submitStatus === 'success' ? '#155724' : '#721c24',
+                  border: `1px solid ${submitStatus === 'success' ? '#c3e6cb' : '#f5c6cb'}`
+                }}>
+                  {submitStatus === 'success' 
+                    ? 'Message sent successfully! We will get back to you soon.'
+                    : 'Failed to send message. Please try again.'}
+                </div>
+              )}
               <form
                 className="form-contact"
-                onSubmit={(e) => e.preventDefault()}
+                onSubmit={handleSubmit}
               >
                 <fieldset>
-                  <label className="mb_15" htmlFor="name">
+                  <label className="mb_15" htmlFor="fullName">
                     Full Name*
                   </label>
                   <input
                     type="text"
                     placeholder="Full Name"
-                    id="name"
+                    id="fullName"
+                    value={formData.fullName}
+                    onChange={handleInputChange}
                     required
                   />
                 </fieldset>
@@ -59,19 +136,22 @@ export default function Contact() {
                       type="email"
                       placeholder="Your email address*"
                       id="email"
+                      value={formData.email}
+                      onChange={handleInputChange}
                       required
                     />
                   </fieldset>
                   <fieldset>
                     <label className="mb_15" htmlFor="phone">
                       Phone Number
-                      <span className="text_mono-gray-5">(Optional)</span>
+                      <span className="text_mono-gray-5"> (Optional)</span>
                     </label>
                     <input
                       type="text"
                       placeholder="Your phone number"
                       id="phone"
-                      required
+                      value={formData.phone}
+                      onChange={handleInputChange}
                     />
                   </fieldset>
                 </div>
@@ -83,15 +163,20 @@ export default function Contact() {
                     className="message"
                     placeholder="Write your message here..."
                     id="message"
-                    defaultValue={""}
+                    value={formData.message}
+                    onChange={handleInputChange}
                   />
                 </fieldset>
-                <a href="#" className="link attachment">
-                  <i className="icon-paperclip-solid" />
-                  Add an attachment
-                </a>
-                <button type="submit" className="tf-btn btn-primary2 mt_22">
-                  <span>Send Message</span>
+                <button 
+                  type="submit" 
+                  className="tf-btn btn-primary2 mt_22"
+                  disabled={isSubmitting}
+                  style={{
+                    opacity: isSubmitting ? 0.7 : 1,
+                    cursor: isSubmitting ? 'not-allowed' : 'pointer'
+                  }}
+                >
+                  <span>{isSubmitting ? 'Sending...' : 'Send Message'}</span>
                   <span className="bg-effect" />
                 </button>
               </form>
@@ -109,4 +194,4 @@ export default function Contact() {
       </div>
     </div>
   );
-}
+}