Merge pull request #135 from rebornstar1/main

Google Translate Functionality is Added in 10-12 languages

frontend/src/components/GoogleTranslate.jsx

@@ -0,0 +1,109 @@
+import React, { useEffect } from "react";
+import { useState } from "react";
+
+const GoogleTranslate = () => {
+  const [isVisible,setIsVisible] = useState(true);
+
+  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();
+    }
+
+    const handleScroll = () => {
+      setIsVisible(window.scrollY < 100); // Adjust the scroll amount as needed
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <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>
+  );
+};
+
+export default GoogleTranslate;

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 max-h-24">
+                            <GoogleTranslate/>
+                        </div>
                     </div>
                 </div>
                 {/* <button

frontend/src/pages/About.jsx

@@ -5,7 +5,7 @@ import bgHero from "../assets/bgHero.png";
 
 function About() {
   return (
-    <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="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">
@@ -37,4 +37,4 @@ function About() {
   );
 }
 
-export default About;
+export default About;

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">