From cd7cb992dbf753731bad909ce835b5a6de10db9c Mon Sep 17 00:00:00 2001
From: souvikpramanikgit <souvikpramanik874@gmail.com>
Date: Sat, 1 Mar 2025 03:20:35 +0530
Subject: [PATCH] Modify contact us section

---
 src/components/Contact-section/Contact.jsx   |   6 +-
 src/components/Contact-section/GoogleMap.jsx |   2 +-
 src/components/connectUs-section/Connect.jsx |  78 ++++-----
 src/components/connectUs-section/Form.jsx    | 172 +++++++++----------
 4 files changed, 130 insertions(+), 128 deletions(-)

diff --git a/src/components/Contact-section/Contact.jsx b/src/components/Contact-section/Contact.jsx
index ca2de94..c0ad3b0 100644
--- a/src/components/Contact-section/Contact.jsx
+++ b/src/components/Contact-section/Contact.jsx
@@ -29,6 +29,7 @@ const Contact = () => {
       <h2 className="text-5xl font-bold tracking-wider text-center font-monsterrat ">
         Connect with <span className="text-customRed">Us</span>
       </h2>
+      <main className=" flex flex-wrap justify-center items-start">
       <div className="items-center justify-between md:flex">
         <div className="flex items-center justify-center p-0 md:w-1/2">
           <article className="flex flex-col items-center text-center ">
@@ -64,7 +65,7 @@ const Contact = () => {
                 Phone:
                 <a
                   href="tel:+916201577047"
-                  className="ml-1 font-bold underline text-primaryGreen"
+                  className="ml-1 font-bold text-primaryGreen"
                 >
                   +91 62015 77047
                 </a>
@@ -81,10 +82,11 @@ const Contact = () => {
             </button>
           </article>
         </div>
-        <div className="md:w-1/2">
+        <div className="md:w-1/1">
           <GoogleMap />
         </div>
       </div>
+      </main>
     </section>
   );
 };
diff --git a/src/components/Contact-section/GoogleMap.jsx b/src/components/Contact-section/GoogleMap.jsx
index ccb0a68..d35c1eb 100644
--- a/src/components/Contact-section/GoogleMap.jsx
+++ b/src/components/Contact-section/GoogleMap.jsx
@@ -9,7 +9,7 @@ const GoogleMap = () => {
 
   }, []);
     return (
-      <div className="aspect-square md:p-20 p-5" data-aos = "fade-in">
+      <div className="aspect-square md:p-10 p-5" data-aos = "fade-in">
         <iframe
     src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d58265.11671813966!2d82.65743034423417!3d24.116619925848997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x398f30495517f2bd%3A0x3b90fd685599d38!2sShakti%20Nagar%2C%20Uttar%20Pradesh%20231222!5e0!3m2!1sen!2sin!4v1691494886758!5m2!1sen!2sin"
     frameBorder="0"
diff --git a/src/components/connectUs-section/Connect.jsx b/src/components/connectUs-section/Connect.jsx
index 14d9acb..92bde8b 100644
--- a/src/components/connectUs-section/Connect.jsx
+++ b/src/components/connectUs-section/Connect.jsx
@@ -1,42 +1,42 @@
-import github from "../../assets/Icons/github.png";
-import instagram from "../../assets/Icons/Instagram.png";
-import twitter from "../../assets/Icons/twitter.png";
-import Form from "./Form";
-import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Import the sound effect
+// import github from "../../assets/Icons/github.png";
+// import instagram from "../../assets/Icons/Instagram.png";
+// import twitter from "../../assets/Icons/twitter.png";
+// import Form from "./Form";
+// import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Import the sound effect
 
-const Connect = () => {
-    const playSound = () => {
-        const audio = new Audio(clickSound);
-        audio.play();
-    };
+// const Connect = () => {
+//     const playSound = () => {
+//         const audio = new Audio(clickSound);
+//         audio.play();
+//     };
 
-    return (
-        <div className="px-[75px] mb-[80px] md:flex md:flex-row gap-5">
-            <div className="flex-1">
-                <h1 className="text-4xl font-bold">Connect with <span className="text-primary-green">Us</span></h1>
-                <button 
-                    className="bg-primary-green rounded-2xl w-[100px] p-3 font-semibold text-text-white mb-4"
-                    onClick={playSound}
-                >
-                    Click Me
-                </button>
-                <div className="flex my-4">
-                    <a href="https://github.com/gauravsingh1281">
-                        <img src={github} alt="" className="w-8 h-8 mr-2" />
-                    </a>
-                    <a href="https://www.instagram.com/gauravsingh1281">
-                        <img src={instagram} alt="" className="w-10 h-10 mr-2" />
-                    </a>
-                    <a href="https://twitter.com/gauravsingh1281">
-                        <img src={twitter} alt="" className="w-8 h-8" />
-                    </a>
-                </div>
-            </div>
-            <div className="flex-1 md:mt-5">
-                <Form />
-            </div>
-        </div>
-    );
-}
+//     return (
+//         <div className="px-[75px] mb-[80px] md:flex md:flex-row gap-5">
+//             <div className="flex-1">
+//                 <h1 className="text-4xl font-bold">Connect with <span className="text-primary-green">Us</span></h1>
+//                 <button 
+//                     className="bg-primary-green rounded-2xl w-[100px] p-3 font-semibold text-text-white mb-4"
+//                     onClick={playSound}
+//                 >
+//                     Click Me
+//                 </button>
+//                 <div className="flex my-4">
+//                     <a href="https://github.com/gauravsingh1281">
+//                         <img src={github} alt="" className="w-8 h-8 mr-2" />
+//                     </a>
+//                     <a href="https://www.instagram.com/gauravsingh1281">
+//                         <img src={instagram} alt="" className="w-10 h-10 mr-2" />
+//                     </a>
+//                     <a href="https://twitter.com/gauravsingh1281">
+//                         <img src={twitter} alt="" className="w-8 h-8" />
+//                     </a>
+//                 </div>
+//             </div>
+//             <div className="flex-1 md:mt-5">
+//                 <Form />
+//             </div>
+//         </div>
+//     );
+// }
 
-export default Connect;
+// export default Connect;
diff --git a/src/components/connectUs-section/Form.jsx b/src/components/connectUs-section/Form.jsx
index e2456e3..2df7173 100644
--- a/src/components/connectUs-section/Form.jsx
+++ b/src/components/connectUs-section/Form.jsx
@@ -1,95 +1,95 @@
-import { useForm } from "react-hook-form";
-import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Import the sound effect
+// import { useForm } from "react-hook-form";
+// import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Import the sound effect
 
-const Form = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    reset,
-  } = useForm();
+// const Form = () => {
+//   const {
+//     register,
+//     handleSubmit,
+//     formState: { errors },
+//     reset,
+//   } = useForm();
 
-  const playSound = () => {
-    const audio = new Audio(clickSound);
-    audio.play();
-  };
+//   const playSound = () => {
+//     const audio = new Audio(clickSound);
+//     audio.play();
+//   };
 
-  const onSubmit = (data) => {
-    playSound(); // Play sound effect on submit
-    alert("Message sent successfully");
-    console.log(data);
-    reset(); // reset form fields after successful submission
-  };
+//   const onSubmit = (data) => {
+//     playSound(); // Play sound effect on submit
+//     alert("Message sent successfully");
+//     console.log(data);
+//     reset(); // reset form fields after successful submission
+//   };
 
-  return (
-    <div>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="flex flex-col gap-4 md:px-4">
-          <div className="flex justify-between gap-2">
-            {/* First Name Input */}
-            <input
-              type="text"
-              placeholder="First Name"
-              {...register("firstName", { required: "First name is required" })}
-              className="placeholder-text"
-            />
-            <span className="pl-4 text-[#ff0000] text-sm">
-              {errors.firstName && errors.firstName.message}
-            </span>
+//   return (
+//     <div>
+//       <form onSubmit={handleSubmit(onSubmit)}>
+//         <div className="flex flex-col gap-4 md:px-4">
+//           <div className="flex justify-between gap-2">
+//             {/* First Name Input */}
+//             <input
+//               type="text"
+//               placeholder="First Name"
+//               {...register("firstName", { required: "First name is required" })}
+//               className="placeholder-text"
+//             />
+//             <span className="pl-4 text-[#ff0000] text-sm">
+//               {errors.firstName && errors.firstName.message}
+//             </span>
 
-            {/* Last Name Input */}
-            <input
-              type="text"
-              placeholder="Last Name"
-              {...register("lastName", { required: "Last name is required" })}
-              className="placeholder-text"
-            />
-            <span className="pl-4 text-[#ff0000] text-sm">
-              {errors.lastName && errors.lastName.message}
-            </span>
-          </div>
+//             {/* Last Name Input */}
+//             <input
+//               type="text"
+//               placeholder="Last Name"
+//               {...register("lastName", { required: "Last name is required" })}
+//               className="placeholder-text"
+//             />
+//             <span className="pl-4 text-[#ff0000] text-sm">
+//               {errors.lastName && errors.lastName.message}
+//             </span>
+//           </div>
 
-          {/* Email Input */}
-          <input
-            type="email"
-            placeholder="Write your Email here"
-            {...register("email", {
-              required: "Email is required",
-              pattern: {
-                value: /\S+@\S+\.\S+/,
-                message: "Email is not valid",
-              },
-            })}
-            className="placeholder-text"
-          />
-          <span className="pl-4 text-[#ff0000] text-sm">
-            {errors.email && errors.email.message}
-          </span>
+//           {/* Email Input */}
+//           <input
+//             type="email"
+//             placeholder="Write your Email here"
+//             {...register("email", {
+//               required: "Email is required",
+//               pattern: {
+//                 value: /\S+@\S+\.\S+/,
+//                 message: "Email is not valid",
+//               },
+//             })}
+//             className="placeholder-text"
+//           />
+//           <span className="pl-4 text-[#ff0000] text-sm">
+//             {errors.email && errors.email.message}
+//           </span>
 
-          {/* Message Input */}
-          <textarea
-            name="message"
-            cols="30"
-            rows="10"
-            placeholder="Your Message"
-            {...register("message", { required: "Message is required" })}
-            className="placeholder-text"
-          ></textarea>
-          <span className="pl-4 text-[#ff0000] text-sm">
-            {errors.message && errors.message.message}
-          </span>
+//           {/* Message Input */}
+//           <textarea
+//             name="message"
+//             cols="30"
+//             rows="10"
+//             placeholder="Your Message"
+//             {...register("message", { required: "Message is required" })}
+//             className="placeholder-text"
+//           ></textarea>
+//           <span className="pl-4 text-[#ff0000] text-sm">
+//             {errors.message && errors.message.message}
+//           </span>
 
-          {/* Submit Button */}
-          <button
-            className="bg-primary-green rounded-2xl w-[100px] p-3 font-semibold text-text-white"
-            type="submit"
-          >
-            Submit
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-};
+//           {/* Submit Button */}
+//           <button
+//             className="bg-primary-green rounded-2xl w-[100px] p-3 font-semibold text-text-white"
+//             type="submit"
+//           >
+//             Submit
+//           </button>
+//         </div>
+//       </form>
+//     </div>
+//   );
+// };
 
-export default Form;
+// export default Form;