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>
 

src/Components/Pages/Contact/ContactPage.tsx

@@ -1,21 +1,21 @@
+import { useTranslation } from "react-i18next";
 import ContactForm from "./ContactForm";
 
 const ContactPage = () => {
+  const { t } = useTranslation();
+
   return (
     <div className="h-full">
       <div className="header-text">
         <h1>
-          Contact Us For <br />A{" "}
-          <span className="bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark">
-            Free
-          </span>{" "}
-          Analysis
+          {t("contact.heading.part1")} <br />
+          {t("contact.heading.part2")}{" "}
+          <span className="gold-text">{t("contact.heading.part3")}</span>{" "}
+          {t("contact.heading.part4")}
         </h1>
         <h2 className="sub-header-text ">
-          Would you like to know what we could do for you? Fill out the form ad
-          we’ll get <br />
-          back to you No obligation, no annoying tactics. We won’t waste your
-          time.
+          {t("contact.subheading.part1")} <br />
+          {t("contact.subheading.part2")}
         </h2>
       </div>
       <ContactForm />