MultiLanguage Facility

src/components/Footer/Footer.jsx

@@ -1,8 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import img from '../../assets/logo_white.png';
 
 function Footer() {
   const currentYear = new Date().getFullYear();
+
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate';
+    script.onerror = function () {
+      console.error('Error loading Google Translate script');
+    };
+    document.body.appendChild(script);
+
+    window.loadGoogleTranslate = function () {
+      new window.google.translate.TranslateElement(
+        {
+          pageLanguage: 'en',
+          includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,fr,de,it',
+          layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
+        },
+        'google_element'
+      );
+    };
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
   return (
     <div className="container">
       <footer className="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
@@ -12,7 +38,7 @@ function Footer() {
         <p className="col-md-4 mb-0 text-light text-center">©️ {currentYear} CosmoXplore India, Inc. All Rights Reserved</p>
         <div className="col-md-4 d-flex justify-content-center">
           <a href="https://github.com/PranavBarthwal" className="text-light me-4">
-          <i className="fab fa-github"></i>
+            <i className="fab fa-github"></i>
           </a>
           <a href="https://x.com/pranavbarthwal_" className="text-light me-4">
             <i className="fab fa-x-twitter"></i>
@@ -24,6 +50,7 @@ function Footer() {
             <i className="fab fa-linkedin-in"></i>
           </a>
         </div>
+        <div id="google_element" className="col-12 text-center mt-3"></div>
       </footer>
     </div>
   );

src/components/Hero/Hero.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import Typed from 'typed.js';
-import Earth from '../3D_Models/Earth/Earth.jsx'
-import Styles from './Hero.module.css'
+import Earth from '../3D_Models/Earth/Earth.jsx';
 
 function Hero() {
   useEffect(() => {
@@ -22,7 +21,7 @@ function Hero() {
   return (
     <div className="container col-xxl-9 px-3 py-5 override-display">
       <div className="row flex-lg-row-reverse align-items-center g-5 py-5">
-        <div className="col-10 col-sm-8 col-lg-6 flex justify-center   " id={Styles['earth']}>
+        <div className="col-10 col-sm-8 col-lg-6 flex justify-center" id="earth">
           <Earth />
         </div>
         <div className="col-lg-6">
@@ -39,4 +38,4 @@ function Hero() {
   );
 }
 
-export default Hero;
+export default Hero;

src/components/Hero/Hero.module.css

@@ -5,4 +5,5 @@
         margin: 0;
         margin-top: 5%;
     }
+
 }