Changed string values to use i18n

src/Components/Pages/Contact/ContactForm.tsx

@@ -2,18 +2,21 @@ import React from "react";
 import emailjs from "@emailjs/browser";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import { useTranslation } from "react-i18next";
 
 const ContactForm = () => {
+  const { t } = useTranslation();
+
   const notify = () => {
-    toast.success("Message Sent Successfully!");
+    toast.success(t("contact.toasts.success"));
   };
 
   const errorToast = () => {
-    toast.error("Error Sending Message!");
+    toast.error(t("contact.toasts.error"));
   };
 
   const emptyForm = () => {
-    toast.warning("Please fill all the fields!");
+    toast.warning(t("contact.toasts.empty"));
   };
 
   const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
@@ -56,13 +59,13 @@ const ContactForm = () => {
             className="form-input"
             type="text"
             name="user_name"
-            placeholder="Name"
+            placeholder={t("contact.form.name")}
           />
           <input
             className="form-input"
             type="email"
             name="user_email"
-            placeholder="Email"
+            placeholder={t("contact.form.email")}
           />
         </div>
         <div className="flex flex-col md:flex-row md:gap-3">
@@ -70,13 +73,13 @@ const ContactForm = () => {
             className="form-input"
             type="text"
             name="user_company"
-            placeholder="Company"
+            placeholder={t("contact.form.company")}
           />
           <input
             className="form-input"
             type="number"
             name="user_phone"
-            placeholder="Phone"
+            placeholder={t("contact.form.phone")}
           />
         </div>
         <div className="flex flex-col">
@@ -84,13 +87,13 @@ const ContactForm = () => {
             className="form-input"
             type="text"
             name="user_question"
-            placeholder="What is your most important question?"
+            placeholder={t("contact.form.question")}
           ></input>
 
           <textarea
             className="form-input"
             name="message"
-            placeholder="Message"
+            placeholder={t("contact.form.message")}
             rows={6}
           ></textarea>
         </div>
@@ -100,7 +103,7 @@ const ContactForm = () => {
             type="submit"
             className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"
           >
-            Send
+            {t("contact.form.button")}
           </button>
         </div>