Added TOS + Privacy

src/Components/Footer/Footer.tsx

@@ -21,6 +21,7 @@ const Footer = () => {
         >
           <FaLinkedin className="text-gold-light" size={30} />
         </a>
+        {/* Uncomment these lines if you want to include Instagram and Twitter icons */}
         {/* <a
           href="https://instagram.com"
           target="_blank"
@@ -32,6 +33,22 @@ const Footer = () => {
           <FaXTwitter className="text-gold-light" size={30} />
         </a> */}
       </div>
+
+      <div className="flex justify-center space-x-5">
+        <a
+          href="/tos"
+          className="text-gray-400 hover:text-gold-light font-medium"
+        >
+          {t("footer.tos")}
+        </a>
+        <a
+          href="/privacy"
+          className="text-gray-400 hover:text-gold-light font-medium"
+        >
+          {t("footer.privacy")}
+        </a>
+      </div>
+
       <p className="text-center text-gray-400 font-medium">
         {t("footer.rights")}
       </p>
@@ -40,3 +57,4 @@ const Footer = () => {
 };
 
 export default Footer;
+

src/Components/Navbar/Navbar.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { FaTimes, FaBars } from "react-icons/fa";
 
 import Logo from "../../assets/logo.svg";
@@ -9,15 +9,27 @@ export default () => {
   const { t, i18n } = useTranslation();
 
   const [colorChange, setColorChange] = useState(false);
-  const changeColor = () => {
-    if (window.scrollY >= 100) {
-      setColorChange(true);
-    } else {
-      setColorChange(false);
-    }
-  };
+ useEffect(() => {
+    const changeColor = () => {
+      if (window.scrollY >= 100) {
+        setColorChange(true);
+      } else {
+        setColorChange(false);
+      }
+    };
 
-  window.addEventListener("scroll", changeColor);
+    window.addEventListener("scroll", changeColor);
+
+    const scrollPath = sessionStorage.getItem("scrollPath");
+    if (scrollPath) {
+      smoothScroll(scrollPath);
+      sessionStorage.removeItem("scrollPath");
+    }
+
+    return () => {
+      window.removeEventListener("scroll", changeColor);
+    };
+  }, []);
 
   const navigation = [
     { title: t("navbar.services"), path: "Services" },
@@ -27,6 +39,15 @@ export default () => {
   ];
 
   const handleNavigation = (path: string) => {
+    if ((window.location.pathname === "/tos" || window.location.pathname === "/privacy") && navigation.some(navItem => navItem.path === path)) {
+      sessionStorage.setItem("scrollPath", path);
+      window.location.href = "/";
+    }else{
+      smoothScroll(path)
+    }
+  };
+
+  const smoothScroll = (path :string) => {
     const element = document.getElementById(path);
     const navbarHeight = 110; // Replace with your navbar's height
     if (element) {
@@ -34,7 +55,7 @@ export default () => {
         element.getBoundingClientRect().top + window.scrollY - navbarHeight;
       window.scrollTo({ top: top, behavior: "smooth" });
     }
-  };
+  }
 
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(lng);
@@ -54,7 +75,11 @@ export default () => {
             href="Top"
             onClick={(e) => {
               e.preventDefault(); // Prevent the default anchor tag behavior
-              window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to the top of the page
+              if (window.location.pathname === "/") {
+                window.scrollTo({ top: 0, behavior: "smooth" });
+              } else {
+                window.location.href = "/";
+              }
             }}
           >
             <img src={Logo} width={60} height={60} alt="logo" />