Fixed typos and added TOS agreement checkbox

package.json

@@ -13,6 +13,7 @@
     "@emailjs/browser": "^4.3.3",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.3",
+    "caniuse-lite": "^1.0.30001669",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",

public/locales/common/en.json

@@ -160,7 +160,11 @@
       "phone": "Phone",
       "question": "What is your most important question?",
       "reference": "How did you hear about us?",
-      "button": "Send"
+      "button": "Send",
+      "agreement": "By submitting this form, you agree to our ",
+      "tos": "Terms of Service",
+      "and": " and ",
+      "privacy": "Privacy Policy"
     },
     "toasts": {
       "success": "Your message has been sent successfully!",

public/locales/common/pt.json

@@ -159,8 +159,12 @@
       "company": "Empresa",
       "phone": "Telefone",
       "question": "Qual é a tua pergunta mais importante?",
-      "message": "Mensagem",
+      "reference": "Como nos conheceste?",
-      "button": "Enviar"
+      "button": "Enviar",
+      "agreement": "Ao enviar este formulário, concordas com os nossos",
+      "tos": "Termos de Serviço",
+      "and": " e ",
+      "privacy": "Política de Privacidade."
     },
     "toasts": {
       "success": "A tua mensagem foi enviada com sucesso!",
@@ -172,6 +176,6 @@
   "footer": {
     "rights": "©2024 Direitos reservados a LK Results",
     "tos": "Termos de Serviço",
-    "privacy": "Polítca de Privacidade"
+    "privacy": "Política de Privacidade"
   }
 }

src/Components/Footer/Footer.tsx

@@ -4,6 +4,7 @@ const Footer = () => {
   const { t, i18n } = useTranslation();
 
   return (
+    //test
     <footer className="flex flex-col space-y-10 justify-center m-10">
       <div className="flex justify-center space-x-5">
         <a

src/Components/Pages/Contact/ContactForm.tsx

@@ -135,6 +135,26 @@ const ContactForm = () => {
               placeholder={t("contact.form.reference")}
             ></input>
           </div>
+
+          <div className="mt-3 md:mt-4">
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                id="user_agreement"
+                name="user_agreement"
+                required
+              />
+              <label
+                htmlFor="user_agreement"
+                className="ml-2 text-xs md:text-sm"
+              >
+                {t("contact.form.agreement")}{" "}
+                <a href="/tos">{t("contact.form.tos")}</a>{" "}
+                {t("contact.form.and")}{" "}
+                <a href="/privacy">{t("contact.form.privacy")}</a>
+              </label>
+            </div>
+          </div>
         </div>
 
         <div className="flex mt-5 mb-10 lg:mt-12 mx-10 sm:mx-40 rounded-full bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">

src/Components/Pages/Hero/Hero.tsx

@@ -64,7 +64,7 @@ const Hero = () => {
               {t("hero.subheading.part2")}
             </h2>
           </div>
-          <div className="flex mt-5 lg:mt-12 mx-10 lg:mx-0 lg:ml-auto rounded-full bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
+          <div className="flex mt-5 lg:mt-12 mx-10 md:mx-40 lg:mx-0 lg:ml-auto rounded-full bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
             <a
               className="flex w-full"
               href="Contact"