Footer text Fix

src/Components/Footer/Footer.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import { FaFacebook, FaLinkedin } from "react-icons/fa";
 
 const Footer = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   return (
     <footer className="flex flex-col space-y-10 justify-center m-10">
@@ -37,19 +37,19 @@ const Footer = () => {
       <div className="flex justify-center space-x-5">
         <a
           href="/tos"
-          className="text-gray-400 hover:text-gold-light font-medium"
+          className={i18n.language === "en" ? "footer-text hover:text-gold-light" : "footer-text-pt hover:text-gold-light"}
         >
           {t("footer.tos")}
         </a>
         <a
           href="/privacy"
-          className="text-gray-400 hover:text-gold-light font-medium"
+          className={i18n.language === "en" ? "footer-text hover:text-gold-light" : "footer-text-pt hover:text-gold-light"}
         >
           {t("footer.privacy")}
         </a>
       </div>
 
-      <p className="text-center text-gray-400 font-medium">
+      <p className={i18n.language === "en" ? "footer-text text-center" : "footer-text-pt text-center"}>
         {t("footer.rights")}
       </p>
     </footer>

src/index.css

@@ -57,6 +57,13 @@ body {
   @apply mb-2 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
 }
 
+.footer-text {
+  @apply text-gray-400 font-medium
+}
+
+.footer-text-pt {
+  @apply text-gray-400 font-medium text-xs
+}
 
 @keyframes fadeEffect {
   0% {