From 2947e32d90369f622a274124bb4fb70b721ca19a Mon Sep 17 00:00:00 2001
From: reborn_star1 <rebornstar677@gmail.com>
Date: Mon, 7 Oct 2024 10:27:35 +0530
Subject: [PATCH 1/3] Google Translate Functionality is Added in 10-12
 languages

---
 frontend/src/components/GoogleTranslate.jsx | 63 +++++++++++++++++++++
 frontend/src/components/Navbar.jsx          |  6 +-
 frontend/src/pages/About.jsx                |  4 ++
 frontend/src/pages/Home.jsx                 |  4 ++
 4 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/GoogleTranslate.jsx

diff --git a/frontend/src/components/GoogleTranslate.jsx b/frontend/src/components/GoogleTranslate.jsx
new file mode 100644
index 00000000..dd174c5a
--- /dev/null
+++ b/frontend/src/components/GoogleTranslate.jsx
@@ -0,0 +1,63 @@
+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');
+      }
+    };
+
+    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);
+      }
+    };
+
+    loadGoogleTranslateScript();
+
+    if (window.google && window.google.translate) {
+      window.googleTranslateInit();
+    }
+  }, []);
+
+  return (
+    <div className="google-translate-container p-1 w-44">
+      {/* Google translate element */}
+      <div id="google_element" className="inline-block"></div>
+
+      {/* Custom select styling */}
+      <style jsx>{`
+        .goog-te-combo {
+          background-color: #d1fae5; /* Light green background */
+          border: 2px solid #10b981; /* Green border */
+          border-radius: 0.375rem; /* Rounded edges */
+          padding: 0.5rem;
+          font-size: 1rem;
+          transition: all 0.2s;
+          outline: none;
+        }
+
+        .goog-te-combo:hover {
+          background-color: #86efac; /* Hover effect: lighter green */
+          border-color: #047857; /* Darker green border on hover */
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default GoogleTranslate;
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 917198f8..414b60c8 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 // import { FaSun, FaMoon } from 'react-icons/fa'; // Import icons from react-icons
 import icon from '../assets/favicon2.png';
+import GoogleTranslate from './GoogleTranslate';
 
 // import useTheme from '../hooks/useTheme'; // Import useTheme hook
 
@@ -18,7 +19,7 @@ const Navbar = () => {
     };
 
     return (
-        <nav className={`bg-gradient-to-r from-[#11cb46] via-[#3ff132] to-[#04ba10] fixed w-full  z-20 top-0 start-0  `}>
+        <nav className={`bg-gradient-to-r from-[#11cb46] via-[#3ff132] to-[#04ba10] w-full  z-20 top-0 start-0 fixed`}>
             <div className="max-w-screen-xl flex flex-wrap items-center font-semibold justify-between mx-auto p-3">
                 <div className="text-white font-bold flex items-center">
                     <img className="float-left" src={icon} alt="icon" style={{ height: '30px', width: '30px' }} />
@@ -61,6 +62,9 @@ const Navbar = () => {
                         <Link to="/forecast" className="block py-2 px-3 text-white hover:text-gray-200 text-center" onClick={closeMenu}>
                             Forecast
                         </Link>
+                        <div className="Translator">
+                            <GoogleTranslate/>
+                        </div>
                     </div>
                 </div>
                 {/* <button
diff --git a/frontend/src/pages/About.jsx b/frontend/src/pages/About.jsx
index d1c80561..2e00b838 100644
--- a/frontend/src/pages/About.jsx
+++ b/frontend/src/pages/About.jsx
@@ -1,11 +1,15 @@
 import { Link } from "react-router-dom";
 import about from '../assets/about.png';
 import bgHero from "../assets/bgHero.png";
+import GoogleTranslate from "../components/GoogleTranslate";
 
 
 function About() {
   return (
     <div className="w-full  py-16 px-4" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+       <div className="Translator absolute right-2 pt-2">
+          <GoogleTranslate/>
+    </div>
       <div className="max-w-[1240px] mx-auto grid md:grid-cols-2 gap-8 items-center">
         <img className="w-[550px] mx-auto md:my-4" src={about} alt="About Us" />
         <div className="flex flex-col justify-center">
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 399fdae8..6e1c2243 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -8,6 +8,7 @@ import TestimonialSlider from "../components/TestimonialSlider";
 import FAQ from "../components/FAQ";
 import Showcase from "../components/Showcase";
 import Features from "../components/Features";
+import GoogleTranslate from "../components/GoogleTranslate";
 
 function Home() {
   console.log("Home page rerendered");
@@ -16,6 +17,9 @@ function Home() {
 
   return (      
     <div className="mt-10 min-h-screen   dark:bbg-green-500" >
+      <div className="Translator absolute right-2 pt-2">
+          <GoogleTranslate/>
+      </div>
       <div className="w-full  py-16 px-4" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
         <div className="max-w-[1240px] mx-auto grid md:grid-cols-2">
           <div className="flex flex-col justify-center">

From 1c28aef820e93832e8c9130200b40ed80e5c2ad8 Mon Sep 17 00:00:00 2001
From: reborn_star1 <rebornstar677@gmail.com>
Date: Mon, 7 Oct 2024 23:26:43 +0530
Subject: [PATCH 2/3] Ensured that the google translate pop up is now hidden
 and restored the changes done in the About.jsx

---
 frontend/src/components/GoogleTranslate.jsx | 90 ++++++++++++++++-----
 frontend/src/components/Navbar.jsx          |  2 +-
 frontend/src/pages/About.jsx                |  8 +-
 3 files changed, 71 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/GoogleTranslate.jsx b/frontend/src/components/GoogleTranslate.jsx
index dd174c5a..4294fab9 100644
--- a/frontend/src/components/GoogleTranslate.jsx
+++ b/frontend/src/components/GoogleTranslate.jsx
@@ -1,6 +1,9 @@
 import React, { useEffect } from "react";
+import { useState } from "react";
 
 const GoogleTranslate = () => {
+  const [isVisible,setIsVisible] = useState(true);
+
   useEffect(() => {
     window.googleTranslateInit = () => {
       if (!window.google?.translate?.TranslateElement) {
@@ -32,31 +35,74 @@ const GoogleTranslate = () => {
     if (window.google && window.google.translate) {
       window.googleTranslateInit();
     }
+
+    const handleScroll = () => {
+      setIsVisible(window.scrollY < 100); // Adjust the scroll amount as needed
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
   }, []);
 
   return (
-    <div className="google-translate-container p-1 w-44">
-      {/* Google translate element */}
-      <div id="google_element" className="inline-block"></div>
-
-      {/* Custom select styling */}
-      <style jsx>{`
-        .goog-te-combo {
-          background-color: #d1fae5; /* Light green background */
-          border: 2px solid #10b981; /* Green border */
-          border-radius: 0.375rem; /* Rounded edges */
-          padding: 0.5rem;
-          font-size: 1rem;
-          transition: all 0.2s;
-          outline: none;
-        }
-
-        .goog-te-combo:hover {
-          background-color: #86efac; /* Hover effect: lighter green */
-          border-color: #047857; /* Darker green border on hover */
-        }
-      `}</style>
-    </div>
+    <div id="google_element" className={`google-translate-container ${isVisible ? '' : 'hidden'}`}>
+  <style jsx>{`
+    .goog-te-combo {
+      background-color: #d1fae5; /* Light green background */
+      border: 2px solid #10b981; /* Green border */
+      border-radius: 0.375rem; /* Rounded edges */
+      padding: 0.5rem;
+      font-size: 0.75rem;
+      transition: all 0.2s;
+      outline: none;
+      z-index: 1; /* Ensure the dropdown doesn't overlap navbar */
+    }
+
+    .goog-te-combo:hover {
+      background-color: #86efac; /* Hover effect: lighter green */
+      border-color: #047857; /* Darker green border on hover */
+    }
+
+    /* Hide the Google Translate logo link and branding */
+    .goog-logo-link {
+      display: none !important;
+    }
+
+    /* Hide any extra branding text or elements */
+    .goog-te-gadget > span > a {
+      display: none !important;
+    }
+
+    /* Custom Google Translate styling */
+    #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';
+    }
+
+    /* Control the pop-up behavior */
+    .goog-te-banner-frame {
+      display: none !important; /* Hide the banner */
+    }
+
+    /* Optional: Contain the dropdown within specific boundaries */
+    .goog-te-menu-frame {
+      max-height: 400px !important; /* Limit height of the dropdown */
+      overflow-y: auto !important; /* Enable scrolling if too large */
+    }
+
+    .skiptranslate > iframe { 
+      height: 0 !important;
+      border-style: none;
+      box-shadow: none;
+    }
+  `}</style>
+</div>
   );
 };
 
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 414b60c8..414fec97 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -62,7 +62,7 @@ const Navbar = () => {
                         <Link to="/forecast" className="block py-2 px-3 text-white hover:text-gray-200 text-center" onClick={closeMenu}>
                             Forecast
                         </Link>
-                        <div className="Translator">
+                        <div className="Translator max-h-24">
                             <GoogleTranslate/>
                         </div>
                     </div>
diff --git a/frontend/src/pages/About.jsx b/frontend/src/pages/About.jsx
index 2e00b838..889d9503 100644
--- a/frontend/src/pages/About.jsx
+++ b/frontend/src/pages/About.jsx
@@ -1,15 +1,11 @@
 import { Link } from "react-router-dom";
 import about from '../assets/about.png';
 import bgHero from "../assets/bgHero.png";
-import GoogleTranslate from "../components/GoogleTranslate";
 
 
 function About() {
   return (
-    <div className="w-full  py-16 px-4" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
-       <div className="Translator absolute right-2 pt-2">
-          <GoogleTranslate/>
-    </div>
+    <div className="max-w-full mt-16 mx-auto px-4 pb-10 pt-5 sm:px-6 lg:px-8" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
       <div className="max-w-[1240px] mx-auto grid md:grid-cols-2 gap-8 items-center">
         <img className="w-[550px] mx-auto md:my-4" src={about} alt="About Us" />
         <div className="flex flex-col justify-center">
@@ -41,4 +37,4 @@ function About() {
   );
 }
 
-export default About;
+export default About;
\ No newline at end of file

From 4bfd4f84e0b9536b0409d7cde3e6d8f7a2407cdd Mon Sep 17 00:00:00 2001
From: reborn_star1 <rebornstar677@gmail.com>
Date: Mon, 7 Oct 2024 23:34:09 +0530
Subject: [PATCH 3/3] Some Issues with About.jsx resolved

---
 frontend/src/pages/About.jsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/frontend/src/pages/About.jsx b/frontend/src/pages/About.jsx
index 4d19b254..08ff4b0e 100644
--- a/frontend/src/pages/About.jsx
+++ b/frontend/src/pages/About.jsx
@@ -5,15 +5,7 @@ import bgHero from "../assets/bgHero.png";
 
 function About() {
   return (
-<<<<<<< HEAD
-    <div className="max-w-full mt-16 mx-auto px-4 pb-10 pt-5 sm:px-6 lg:px-8" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
-=======
     <div className="w-full  py-16 px-4" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
-       <div className="Translator absolute right-2 pt-2">
-          <GoogleTranslate/>
-    </div>
-
->>>>>>> 14e9e4374de09ebf229d1e16e32ff77abca03932
       <div className="max-w-[1240px] mx-auto grid md:grid-cols-2 gap-8 items-center">
         <img className="w-[550px] mx-auto md:my-4" src={about} alt="About Us" />
         <div className="flex flex-col justify-center">