src/assets/css/style.css

@@ -3550,12 +3550,35 @@ header.fix_style.white_header {
 }
 
 .contact_body{
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  gap: 10px;
   font-size: 20px;
   font-weight: 800;
-  justify-content: center;
   text-align: center;
 }
 
+/* Animations */
+.animate.pop {
+  animation-name: animate-pop;
+  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
+  animation-duration: 0.5s;
+}
+
+@keyframes animate-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.5, 0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+}
+
 /* For the err msg */
 #errText{
   text-align: center;
@@ -4667,7 +4690,7 @@ header.fix_style.white_header {
   height: 100%;
   border-radius: 100%;
   border: 3.5px solid transparent;
-  border-top-color: #3498db;
+  border-top-color: var(--body-text-purple);
 }
 
 #loader-1:before{

src/component/Contact/Main.js

@@ -54,25 +54,23 @@ const Main = ({ brdcum }) => {
   let contact_body = document.getElementById("contact_body");
   let errText = document.getElementById("errText");
   let navigate = useNavigate();
+
   // Form Validation
   const [values, setValues] = useState({
     name: "",
     email: "",
     phone: "",
-    msg: "",
+    message: "",
     country: "",
-    checkBox: false,
   }); //initial state values
   const [countries, setCountries] = useState([]); // initial state for country dropdown
   const [myData, setMyData] = useState(null);
-
   // Gave a generic name for multiple calls
   const API_CALL = new SiteService(); // instantiating the class
-
+  // API CALL
   const allCountry = () => {
     return API_CALL.countryData();
   };
-
   const contactForm = async (value) => {
     return await API_CALL.contactData(value);
   };
@@ -100,14 +98,16 @@ const Main = ({ brdcum }) => {
             "unable to send your message, please try able");
         else {
           response.innerHTML = `<p> SEND MESSAGE </p>`;
-          
-          contact_body.innerHTML = `<div class='contact_body'>
+
+          contact_body.innerHTML = `<div class='contact_body animate pop'>
       <div><img /></div>
       <p>We have received your message and will follow up promptly.</p>
       </div>`;
           setTimeout(() => {
             navigate("/");
           }, 10000);
+
+          setValues((prev) => ({ ...prev, [e.target.name]: "" }));
         }
       })
       .catch((error) => {
@@ -121,7 +121,7 @@ const Main = ({ brdcum }) => {
   }, []);
 
   useEffect(() => {
-    myData;
+    console.log(myData);
   }, [myData]);
 
   return (
@@ -262,7 +262,6 @@ const Main = ({ brdcum }) => {
                   <input
                     type="checkbox"
                     id="term"
-                    value={values.checkBox}
                     onChange={onChange}
                     required
                   />
@@ -281,7 +280,7 @@ const Main = ({ brdcum }) => {
                 </div>
               </form>
               {/* Error Tag */}
-              <p id="errText"></p>
+              <p id="errText" />
             </div>
 
             {/* Contact Info */}
@@ -353,7 +352,7 @@ const Main = ({ brdcum }) => {
         </div>
       </section>
       <section className="row_am map_section">
-        <div className="container"></div>
+        <div className="container" />
       </section>
     </>
   );