contact us notification

package.json

@@ -34,6 +34,7 @@
     "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0.1",
     "react-scroll": "^1.9.0",
+    "react-toastify": "^10.0.5",
     "styled-components": "^6.1.11"
   },
   "devDependencies": {

src/Components/Contact/Contact.css

@@ -66,11 +66,10 @@
   margin: 20px 0;
 }
 /*Added the hover effct here on  submit button */
-.btn-div .btn:hover{
-
+.btn-div .btn:hover {
   display: flex;
-  background-color:rgb(111, 111, 160);
-  color:white;
+  background-color: rgb(111, 111, 160);
+  color: white;
   justify-content: center;
 }
 
@@ -85,9 +84,9 @@
   width:70vw;
 } */
 
- .btn:hover{
-  background-color:rgb(111, 111, 160);
-  color:white;
+.btn:hover {
+  background-color: rgb(111, 111, 160);
+  color: white;
 }
 /* Media query for Smart Phone */
 @media (max-width: 600px) {
@@ -134,13 +133,14 @@
   } */
 }
 
+/* ToastStyles.css */
+
 @media (max-width: 370px) {
-  .contact-col form{
+  .contact-col form {
     width: 80vw;
-    }
-  .contact-col form input, .contact-col form textarea{
+  }
+  .contact-col form input,
+  .contact-col form textarea {
     width: 80vw;
-    }
-
-
+  }
 }

src/Components/Contact/Contact.jsx

@@ -1,17 +1,21 @@
 import React from "react";
-import "./Contact.css";
-import msg_icon from "../../assets/msg-icon.png";
+import { useSelector } from "react-redux";
+import { Slide, ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import black_arrow from "../../assets/dark-arrow.png";
+import location_icon from "../../assets/location-icon.png";
 import mail_icon from "../../assets/mail-icon.png";
+import msg_icon from "../../assets/msg-icon.png";
 import phone_icon from "../../assets/phone-icon.png";
-import location_icon from "../../assets/location-icon.png";
 import white_arrow from "../../assets/white-arrow.png";
-import black_arrow from "../../assets/dark-arrow.png";
-import { useSelector } from "react-redux";
+import "./Contact.css";
 
 const Contact = () => {
   const theme = useSelector((state) => state.theme.value) ? "dark" : "light";
-  const reversetheme = useSelector((state) => state.theme.value) ? "light" : "dark";
-  const arrowImage = theme === 'light' ? white_arrow : black_arrow;
+  const reversetheme = useSelector((state) => state.theme.value)
+    ? "light"
+    : "dark";
+  const arrowImage = theme === "light" ? white_arrow : black_arrow;
   const [emailError, setEmailError] = React.useState("");
 
   const [result, setResult] = React.useState("");
@@ -38,9 +42,9 @@ const Contact = () => {
     const email = formData.get("email");
 
     if (!validateEmail(email)) {
-        setEmailError("Please enter a valid email address.");
-        setResult("");
-        return;
+      setEmailError("Please enter a valid email address.");
+      setResult("");
+      return;
     }
 
     formData.append("access_key", "5759d7fc-28f1-473a-a904-ab8d5f981280");
@@ -54,15 +58,54 @@ const Contact = () => {
 
     if (data.success) {
       setResult("Form Submitted Successfully");
+      toast("✅Form Submitted Successfully!", {
+        position: "top-center",
+        autoClose: 5000,
+        hideProgressBar: false,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+        closeButton: false,
+        transition: Slide,
+        className: "custom-toast",
+        bodyClassName: "custom-toast-body",
+      });
       event.target.reset();
     } else {
       console.log("Error", data);
       setResult(data.message);
+      toast.error("🚫 Form Submission Failed!", {
+        position: "top-center",
+        autoClose: 5000,
+        hideProgressBar: false,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        closeButton: false,
+        theme: "light",
+        transition: Slide,
+        className: "custom-toast",
+        bodyClassName: "custom-toast-body",
+      });
     }
   };
 
   return (
     <div className={`contact ${theme}`} id="contact">
+      <ToastContainer
+        position="top-center"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        closeButton:false
+        theme="light"
+        transition={Slide}
+      />
       <div className="contact-col">
         <h3 className="send">
           Send us a message<img src={msg_icon} alt=""></img>