Multi-Language Support Using Language Translator

frontend/src/App.jsx

@@ -16,6 +16,7 @@ import NotificationPage from "./Pages/notification";
 import Chatbot from "./components/chatbot";
 import ContactUs from "./Pages/ContactUs";
 import Settings from "./components/Settings";
+import GoogleTranslate from "./Pages/GoogleTranslate";
 import Help from "./components/help";
 import Contributor from "./Pages/contributor";
 import Payment from "./Pages/Payment";
@@ -44,14 +45,16 @@ function App() {
           <Route path="/chatbot" element={<Chatbot />} />
           <Route path="/ContactUs" element={<ContactUs />} />
           <Route path="/Settings" element={<Settings />} />
+          <Route path="/GoogleTranslate" element={<GoogleTranslate />} />
           <Route path="/help" element={<Help />} />
           <Route path="/about" element={<AboutUs />} />
           <Route path="/contributor" element={<Contributor />} />
           <Route path="/payment" element={<Payment />} />
           <Route path="/aboutus" element={<AboutUs />} />
           <Route path="/emergency" element={<Emergency />} />
           <Route path="/help-and-support" element={<HelpAndSupport />} />
-          <Route path="/privacy-policy" element={<PrivacyPolicy />} /> {/* Restored PrivacyPolicy */}
+          <Route path="/privacy-policy" element={<PrivacyPolicy />} />{" "}
+          {/* Restored PrivacyPolicy */}
           <Route path="/user" element={<User />} /> {/* Added User */}
           <Route path="*" element={<Error />} />
         </Routes>

frontend/src/Pages/GoogleTranslate.jsx

@@ -0,0 +1,148 @@
+import React, { useEffect } from "react";
+
+const GoogleTranslate = () => {
+  useEffect(() => {
+    window.googleTranslateInit = () => {
+      if (!window.google?.translate?.TranslateElement) {
+        setTimeout(window.googleTranslateInit, 100);
+      } else {
+        new window.google.translate.TranslateElement(
+          {
+            pageLanguage: "en",
+            includedLanguages:
+              "en,hi,pa,sa,mr,ur,bn,es,ja,ko,zh-CN,es,nl,fr,de,it,ta,te",
+            layout:
+              window.google.translate.TranslateElement.InlineLayout.HORIZONTAL,
+            defaultLanguage: "en",
+            autoDisplay: false,
+          },
+          "google_element"
+        );
+      }
+      cleanUpGadgetText();
+    };
+
+    const loadGoogleTranslateScript = () => {
+      if (!document.getElementById("google_translate_script")) {
+        const script = document.createElement("script");
+        script.type = "text/javascript";
+        script.src =
+          "https://translate.google.com/translate_a/element.js?cb=googleTranslateInit";
+        script.id = "google_translate_script";
+        script.onerror = () =>
+          console.error("Error loading Google Translate script");
+        document.body.appendChild(script);
+      }
+    };
+
+    const cleanUpGadgetText = () => {
+      const gadgetElement = document.querySelector(".goog-te-gadget");
+      if (gadgetElement) {
+        const textNodes = gadgetElement.childNodes;
+        textNodes.forEach((node) => {
+          if (node.nodeType === Node.TEXT_NODE) {
+            node.textContent = ""; // Clear text content
+          }
+        });
+      }
+    };
+    loadGoogleTranslateScript();
+
+    if (window.google && window.google.translate) {
+      window.googleTranslateInit();
+    }
+
+    return () => {
+      // Cleanup logic if necessary
+    };
+  }, []);
+
+  return (
+    <div
+      id="google_element"
+      className="google-translate-container pl-20 md:pl-0"
+    >
+      <style jsx>
+        {`
+          .goog-te-combo {
+            display: inline-block;
+            background-color: white; /* White background */
+            border: 3px solid blue;
+            border-radius: 0.5rem; /* Slightly more rounded */
+            padding: 0.5rem 1rem; /* Tailwind: p-2 */
+            font-size: 0.9rem; /* Tailwind: text-sm */
+            transition: all 0.3s ease; /* Smooth transition */
+            outline: none;
+            color: black; /* Black text */
+            font-weight: 500; /* Tailwind: font-medium */
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* Slight shadow */
+          }
+
+          .goog-te-combo:hover {
+            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.8); /* Stronger shadow on hover */
+          }
+
+          .goog-logo-link {
+            display: none !important;
+          }
+
+          .goog-te-gadget {
+            color: transparent !important;
+          }
+
+          .goog-te-gadget > span > a {
+            display: none !important;
+          }
+
+          .goog-te-gadget .goog-te-combo {
+            color: blue;
+          }
+
+          #google_translate_element
+            .goog-te-gadget-simple
+            .goog-te-menu-value
+            span:first-child {
+            display: none;
+          }
+
+          #google_translate_element
+            .goog-te-gadget-simple
+            .goog-te-menu-value:before {
+            content: "Translate"; /* Change the default text */
+            color: #c01c1c; /* Red text */
+          }
+
+          .goog-te-banner-frame {
+            display: none !important;
+          }
+
+          .goog-te-menu-frame {
+            max-height: 400px !important;
+            overflow-y: auto !important;
+            background-color: white; /* White background for dropdown */
+            border: 1px solid #c01c1c; /* Red border */
+            border-radius: 0.5rem; /* Slightly more rounded */
+          }
+
+          /* Hide the banner frame */
+          .goog-te-banner-frame {
+            display: none !important;
+          }
+
+          /* Customize the iframe */
+          .skiptranslate > iframe {
+            height: 0 !important;
+            border-style: none;
+            box-shadow: none;
+          }
+          body {
+            position: relative;
+            top: 0 !important;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+export default GoogleTranslate;

frontend/src/Pages/Herosection.jsx

@@ -17,6 +17,7 @@ import Navbar from "../components/navbar";
 import Language from "../components/language";
 import { FaUserAlt } from "react-icons/fa";
 import Popup from "../components/popup";
+import GoogleTranslate from "./GoogleTranslate";
 
 const Herosection = () => {
   const navigate = useNavigate();
@@ -63,12 +64,19 @@ const Herosection = () => {
           <div>
             <HamburgerMenu />
           </div>
+
           <button type="submit" onClick={UserCLick} className="">
             <FaUserAlt className="bg-blue-200 border-2 text-blue-600 border-blue-200 rounded-full w-[55px] h-[55px] p-2 shadow-lg mr-2" />
           </button>
         </div>
       </div>
-      <Language />
+      <div
+        className="translate relative z-50 flex items-center"
+        style={{ marginLeft: "70px", top: "-100px" }}
+      >
+        <GoogleTranslate />
+      </div>
+
       <h1 className="pl-4 text-4xl font-black text-center text-white ">
         Namaste !! Yatree{" "}
       </h1>