Redesigned Contact US Section

src/components/Contact-section/Contact-section.css

@@ -1,26 +1,29 @@
-
+/* Contact-section.css */
 #ContactUs {
-    margin-bottom: 0; /* Further reduced margin-bottom to minimize the space */
-}
-
-main {
-    margin-top: 0; /* Remove any top margin between the Contact Us header and Contact Text Information */
-    padding-top: 0; /* Remove extra padding if present */
+    margin-bottom: 0;
+  }
+
+  main {
+    margin-top: 0;
     margin-bottom: 5rem;
-
+    background-color: #ffffff; /* Clean white background */
+    border-radius: 12px; /* Modern rounded corners */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+    padding: 2rem; /* Increased padding for a more spacious feel */
+    transition: box-shadow 0.3s ease;
+  }
+
+  main:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+  }
 
-
-    background: linear-gradient(to right,#4bc2f5, #8c8cb2, #ee9898,#ef0381); /* Gradient from blue to red */
-    border: 2px solid #000000; /* Border color */
-    border-radius: 8px; /* Rounded corners */
-    padding: 10px; /* Spacing inside the section */
-    padding: 10px 5px; /* Top and bottom padding: 10px, left and right padding: 5px */
-}
-
-#text{
+  /* Optional text adjustments if #text is used within your components */
+  #text {
     display: flex;
+    justify-content: center;
     text-align: center;
-    margin-left: 98px;
-    font-style: bold;
-}
-
+    font-weight: 600;
+    margin: 0 auto;
+    color: #333333; /* Darker text for improved readability */
+  }
+

src/components/Contact-section/Contact.jsx

@@ -22,7 +22,7 @@ const Contact = () => {
           Contact Us
         </h1>
       </header>
-      <main className=" mt-0 flex flex-wrap lg:gap-[5%] gap-[20px] justify-center items-center">
+      <main className="mt-0 flex flex-wrap justify-center items-start lg:space-x-[150px] space-y-10 lg:space-y-0">
         <ContactText />
         <ContactForm />
       </main>

src/components/Contact-section/ContactForm.jsx

@@ -1,5 +1,5 @@
 import { useForm } from "react-hook-form";
-import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Importing the sound file
+import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav";
 
 const ContactForm = () => {
   const {
@@ -11,89 +11,85 @@ const ContactForm = () => {
 
   const playSound = () => {
     const audio = new Audio(clickSound);
-    audio.play(); // Play the sound
+    audio.play();
   };
 
   const onSubmit = (data) => {
-    playSound(); // Play sound on submit
+    playSound();
     alert("Message sent successfully");
     console.log(data);
-    reset(); // reset form fields after submission
+    reset();
   };
 
   return (
-    <>
-      <section className="flex flex-col my-20 md:flex-row gap-y-10">
-        <article className="flex justify-center flex-1 p-5 md:p-0 md:mr-24">
-          <form onSubmit={handleSubmit(onSubmit)} className="w-full gap-x-5">
-            <div className="flex flex-col justify-between mb-6 md:flex-row">
-              <div className="flex flex-col md:w-6/12">
-                <input
-                  {...register("firstName", {
-                    required: "First name is required",
-                  })}
-                  className="h-16 p-2 mb-6 border-2 rounded-lg border-green text-green-dark md:mb-0 placeholder-textBlack"
-                  placeholder="First name"
-                  style={{ marginRight: "5px" }}
-                />
-                <span className="pl-4 text-[#ff0000] text-sm">
-                  {errors.firstName && errors.firstName.message}
-                </span>
-              </div>
-              <div className="flex flex-col md:w-6/12">
-                <input
-                  {...register("lastName", {
-                    required: "Last name is required",
-                  })}
-                  className="h-16 p-2 border-2 rounded-lg border-green text-green-dark placeholder-textBlack"
-                  placeholder="Last name"
-                />
-                <span className="pl-4 text-[#ff0000] text-sm">
-                  {errors.lastName && errors.lastName.message}
-                </span>
-              </div>
-            </div>
-            <div className="flex flex-col justify-between mb-6 md:flex-row">
-              <div className="flex flex-col w-full">
-                <input
-                  {...register("email", {
-                    required: "Email is required",
-                    pattern: {
-                      value: /\S+@\S+\.\S+/,
-                      message: "Email is not valid",
-                    },
-                  })}
-                  className="h-16 p-2 border-2 rounded-lg border-green text-green-dark placeholder-textBlack"
-                  placeholder="Email"
-                />
-                <span className="pl-4 text-[#ff0000] text-sm">
-                  {errors.email && errors.email.message}
-                </span>
-              </div>
+    <section className="bg-light-blue shadow-lg rounded-lg p-8">
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+        <div className="flex flex-col md:flex-row gap-6">
+          <div className="flex-1">
+            <input
+              {...register("firstName", { required: "First name is required" })}
+              className="w-full h-12 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primaryGreen transition duration-200 ease-in-out"
+              placeholder="First Name"
+            />
+            <div className="min-h-[1.5rem]">
+            {errors.firstName && (
+              <span className="text-customRed text-sm">{errors.firstName.message}</span>
+            )}
             </div>
-
-            <textarea
-              {...register("message", {
-                required: "Message is required",
-              })}
-              className="w-full h-40 p-2 border-2 rounded-lg border-green text-green-dark placeholder-textBlack"
-              placeholder="Your message here"
+          </div>
+          <div className="flex-1">
+            <input
+              {...register("lastName", { required: "Last name is required" })}
+              className="w-full h-12 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primaryGreen transition duration-200 ease-in-out"
+              placeholder="Last Name"
             />
-            <span className="pl-4 text-[#ff0000] text-sm">
-              {errors.message && errors.message.message}
-            </span>
-            <div className="flex justify-center md:justify-start">
-              <button
-                className="relative flex cursor-pointer items-center justify-center mt-5 bg-green rounded-lg w-40 lg:w-60 p-3 text-textWhite text-2xl md:text-xl font-bold font-monsterrat ease-in-out duration-300 hover:bg-[transparent] hover:text-green hover:border-green hover:border-[2px]"
-                type="submit"
-              >
-                Submit
-              </button>
+            <div className="min-h-[1.5rem]">
+            {errors.lastName && (
+              <span className="text-customRed text-sm">{errors.lastName.message}</span>
+            )}
             </div>
-          </form>
-        </article>
-      </section>
-    </>
+          </div>
+        </div>
+        <div>
+          <input
+            {...register("email", {
+              required: "Email is required",
+              pattern: {
+                value: /\S+@\S+\.\S+/,
+                message: "Email is not valid",
+              },
+            })}
+            className="w-full h-12 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primaryGreen transition duration-200 ease-in-out"
+            placeholder="Email"
+          />
+          <div className="min-h-[1.5rem]">
+          {errors.email && (
+            <span className="text-customRed text-sm">{errors.email.message}</span>
+          )}
+          </div>
+        </div>
+        <div>
+          <textarea
+            {...register("message", { required: "Message is required" })}
+            className="w-full h-32 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primaryGreen transition duration-200 ease-in-out"
+            placeholder="Your Message"
+          />
+          <div className="min-h-[1.5rem]">
+          {errors.message && (
+            <span className="text-customRed text-sm">{errors.message.message}</span>
+          )}
+          </div>
+        </div>
+        <div className="flex justify-center">
+          <button
+            type="submit"
+            className="w-40 py-3 bg-primaryGreen text-textWhite rounded-full transition-all duration-300 hover:bg-customRed focus:outline-none focus:ring-2 focus:ring-black"
+          >
+            Submit
+          </button>
+        </div>
+      </form>
+    </section>
   );
 };
 

src/components/Contact-section/ContactText.jsx

@@ -1,71 +1,78 @@
-import React from "react";
-import { useEffect } from "react";
-import AOS from 'aos';
-import 'aos/dist/aos.css';
+import React, { useEffect } from "react";
+import AOS from "aos";
+import "aos/dist/aos.css";
+import { FaEnvelope, FaPhone, FaComments, FaMapMarkerAlt } from "react-icons/fa";
+
 export const ContactText = () => {
   useEffect(() => {
-
-    AOS.init({duration:1000});
-
+    AOS.init({ duration: 1000 });
   }, []);
-  return (
-    <section className="mt-0 bg-gray-100  rounded-lg shadow-lg flex flex-col gap-6 justify-center  p-1 lg:w-[35%] w-full">
-      <div className="text-gray-800" data-aos = "fade-right">
-        <h2 className="text-xl font-bold mb-4">Hey Rentalog Users,</h2>
-        <p className="leading-relaxed">
-          We are always looking forward to hearing from you. Please feel free to
-          reach out to us for any queries, suggestions, or feedback. <br />
-          We would love to hear from you.
-        </p>
 
-        <div className="mt-4">
-          <p className="font-semibold">Contact us:</p>
-          <p>
+  return (
+    <section
+      className="mt-0 bg-gray-50 rounded-lg shadow-lg p-6 lg:w-[35%] w-full"
+      data-aos="fade-right"
+    >
+      <h2 className="text-2xl font-bold text-gray-900 mb-4">
+        Hey Rentalog Users,
+      </h2>
+      <p className="text-base text-gray-800 leading-relaxed mb-6">
+        We are always excited to hear from you! Whether it's a query, suggestion,
+        or feedback, your thoughts matter to us. Reach out and let's create something
+        amazing together.
+      </p>
+      <div className="space-y-4 mb-6">
+        <div className="flex items-center gap-2">
+          <FaEnvelope className="text-primaryGreen" />
+          <span className="text-gray-900 font-medium">
             Email:{" "}
             <a
               href="mailto:support@rentalog.in"
-              className="ml-1 font text-gray-800 underline"
+              className="underline text-blue-600"
             >
-              {" "}
-              support@rentalog.in{" "}
+              support@rentalog.in
             </a>
-          </p>
-          <p>
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <FaPhone className="text-customRed" />
+          <span className="text-gray-900 font-medium">
             Phone:{" "}
             <a
               href="tel:+916201577047"
-              className="ml-1 font text-gray-800 underline"
+              className="underline text-blue-600"
             >
-              {" "}
-              +91 62015 77047{" "}
+              +91 62015 77047
             </a>
-          </p>
-
-          <p>
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <FaComments className="text-black" />
+          <span className="text-gray-900 font-medium">
             Chat With Us:{" "}
             <a
-              href="https://wa.me/+91 6201577047?"
-              className="ml-1 font text-gray-800 underline"
+              href="https://wa.me/+916201577047"
+              className="underline text-blue-600"
             >
-              {" "}
-              Click for chat{" "}
+              Click for chat
             </a>
-          </p>
-
-
-          <p>Address: Shaktinagar, Sonebhadra, UP, 231222</p>
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <FaMapMarkerAlt className="text-customRed" />
+          <span className="text-gray-900 font-medium">
+            Address: Shaktinagar, Sonebhadra, UP, 231222
+          </span>
         </div>
-
-        <p className="mt-4 leading-relaxed">
-          We welcome your input to improve your Rentalog experience. <br />
-          Thank you for choosing Rentalog!
-        </p>
-        <p className="mt-2">
-          Best regards,
-          <br />
-          The Rentalog Team
-        </p>
       </div>
+      <p className="text-base text-gray-800 leading-relaxed">
+        We welcome your input to improve your Rentalog experience. Thank you for choosing Rentalog!
+      </p>
+      <p className="mt-4 text-base text-gray-900 font-medium">
+        Best regards,
+        <br />
+        The Rentalog Team
+      </p>
     </section>
   );
 };