Added a language translation Functionality. issue#59

client/src/App.css

@@ -8,3 +8,22 @@
 .App{
     overflow-x: hidden;
 }
+.rightContents{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 300px;
+    justify-content: space-evenly;
+    margin-right: 25px;
+}
+.translate-btn{
+    height: 35px;
+    width: fit-content;
+    padding: 2px;
+    background-color: black;
+    color: #FFF;
+    border: none;
+    outline: none;
+    border-radius: 4px;
+    font-family:sans-serif;
+}

client/src/App.js

@@ -1,4 +1,3 @@
-
 import './App.css';
 import { Helmet } from 'react-helmet';
 import About from './Components/About';
@@ -12,27 +11,29 @@ import Subscribe from './Components/Subscribe';
 import Testimonials from './Components/Testimonials';
 import Images from './Components/Image';
 import "../src/CSS/MediaQuery.css"
+import { useState } from 'react';
 
 function App() {
+  const [language,setLanguage] = useState('english');
   return (
     <div >
      <Helmet>
           <title>DevFeed</title>
         </Helmet>
-      <Navbar/>
+      <Navbar language={language} updatelang={setLanguage}/>
       <ScrollToTop/>
-      <Hero/>
-      <About/>
+      <Hero language={language}/>
+      <About language={language}/>
 
 
       {/* <Count/> */}
       <Images/>
 
-      <Subscribe/>
-      <Testimonials/>
+      <Subscribe language={language}/>
+      <Testimonials language={language}/>
       {/* <RecentEvents/> */}
 
-      <Footer/>
+      <Footer language={language}/>
     </div>
   );
 }

client/src/Components/About.jsx

@@ -1,7 +1,16 @@
-import React from 'react'
+import React,{useState,useEffect} from 'react'
 import "../CSS/About.css"
+import Translation from './Translate/About.json'
 
-export default function About() {
+export default function About({language}) {
+  const [content, setContent] = useState(Translation.english);
+  useEffect(() => {
+    if (language === "english") {
+      setContent(Translation.english);
+    } else if (language === "hindi") {
+      setContent(Translation.hindi);
+    }
+  }, [language]);
   return (
     <>
       {/* <div className='about'>
@@ -35,12 +44,12 @@ export default function About() {
 
         </div>
         <div className='flex flex-col items-center xxlg:w-[60%] lg:w-[65%] w-[63%] mlg:w-[100%] pr-[4vw] about-con'>
-          <h1 className=' about-title mt-[9vh] xlg:mt-[2vh]  sm:text-4xl xsm:text-3xl text-5xl font-mono items-center font-bold text-black'>Nice to meet you</h1>
-          <p className='text-xl  xsm:text-sms sm:text-lg mt-[3vh] ml-[4vw] mr-2 text-[#0D2F3F]  font-medium font-sans sans-serif'>With <span className='text-[#1c145f] comme'>DevFeed</span>, you'll never miss out on an opportunity to not only expand your skills but also connect with other tech professionals in your community. Our newsletter is your personal roadmap to navigating the tech scene, providing you with exclusive <span >updates on the latest events, speakers, and topics that matter most to you.</span></p>
+          <h1 className=' about-title mt-[9vh] xlg:mt-[2vh]  sm:text-4xl xsm:text-3xl text-5xl font-mono items-center font-bold text-black'>{content.h1}</h1>
+          <p className='text-xl  xsm:text-sms sm:text-lg mt-[3vh] ml-[4vw] mr-2 text-[#0D2F3F]  font-medium font-sans sans-serif'>{content.p.p1} <span className='text-[#1c145f] comme'>DevFeed</span>{content.p.p2}<span >{content.p.p3}</span></p>
           <ul class="list-disc about-pts ml-[1.2vw]  pt-3 text-xl sm:text-lg xsm:text-sms text-[#0D2F3F] font-medium ">
-  <li className='pt-3  ml-[4vw] '>Centralized location for subscribers to receive all the relevant information about tech events happening in their city</li>
-  <li className='pt-3  ml-[4vw]'>Attending tech events can provide valuable networking opportunities for professionals and enthusiasts in the industry</li>
-  <li className='pt-3  ml-[4vw]'>All the relevant information you need in one place, instead of having to search for events individually.</li>
+  <li className='pt-3  ml-[4vw] '>{content.li.li1}</li>
+  <li className='pt-3  ml-[4vw]'>{content.li.li2}</li>
+  <li className='pt-3  ml-[4vw]'>{content.li.li3}</li>
   {/* <li className='pt-3  ml-[4vw]'>Now this is a story all about how, my life got flipped-turned upside down</li> */}
 
 

client/src/Components/Footer.jsx

@@ -1,11 +1,19 @@
-import React from 'react'
+import React,{useState,useEffect} from 'react'
 import "../CSS/Footer.css"
-import { useState } from 'react';
 import axios from 'axios';
+import Translation from './Translate/Footer.json'
 
-export default function Footer() {
+export default function Footer({language}) {
+    const [content, setContent] = useState(Translation.english);
     const baseurl = "https://dev-feedmain.vercel.app/api";//baseurl for posting
     const [feedback, setfeedback] = useState("");
+    useEffect(() => {
+        if (language === "english") {
+          setContent(Translation.english);
+        } else if (language === "hindi") {
+          setContent(Translation.hindi);
+        }
+      }, [language]);
     const feedbackmain = () => {
         axios.post(baseurl + "/feedback", {
 
@@ -69,8 +77,8 @@ export default function Footer() {
             </div> */}
 
             <div className='flex flex-col w-screen justify-center bg-white items-center sans-serif  pt-[5vh] pb-[7vh]'>
-                <div className='text-black title items-center sans-serif  font-bold'>Reach out to us</div>
-                <div className='text-black text-lg items-center pt-1 pb-3 xsm:text-base xssm:text-xs'>Connect with us for any kind of query at</div>
+                <div className='text-black title items-center sans-serif  font-bold'>{content.tit1}</div>
+                <div className='text-black text-lg items-center pt-1 pb-3 xsm:text-base xssm:text-xs'>{content.tit2}</div>
 
                 <div className='flex flex-row justify-between'>
                     <button type="submit" className='button'  ><span className='buttontext'><a href="mailto:[email protected]">[email protected]</a></span></button>

client/src/Components/Hero.jsx

@@ -1,23 +1,30 @@
-import React from 'react'
+import React,{useState, useEffect} from 'react'
 import "../CSS/Hero.css"
 import AOS from "aos"
 import "aos/dist/aos.css"
-import { useEffect } from 'react'
+import Translation from './Translate/HeroT.json'
 
-export default function Hero() {
+export default function Hero({language}) {
+    const [content, setContent] = useState(Translation.english);
 
     useEffect(() => {
         AOS.init({duration: 2000});
     }, []);
-
+    useEffect(() => {
+        if (language === "english") {
+          setContent(Translation.english);
+        } else if (language === "hindi") {
+          setContent(Translation.hindi);
+        }
+      }, [language]);
   return (
     <div className='hero' id='home'>
         <div className="hero-data">
             <div className="hero-head">
-            Educate. <p>Connect. </p> Aware. 
+            {content.p.p1} <p>{content.p.p2} </p> {content.p.p3}
             </div>
             <div className="hero-text">
-           <span className='text-[#28004d] comme'>what are you waiting for? </span> Join our community and be a part of the tech revolution! 
+           <span className='text-[#28004d] comme'>{content.span.span1} </span> {content.span.span2} 
             </div>
         </div>
             <div className="hero-image nm:hidden">

client/src/Components/Navbar.jsx

@@ -1,24 +1,46 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import "../CSS/Navbar.css";
+import Translation from "./Translate/NavbarT.json";
 
-export default function Navbar() {
-    return (
-        <div className="nav-body">
-            <a href="#home">
-            <div className="logo">
-                <img
-                    src={require("../Assets/logoimage.png")}
-                    alt=""
-                    id="nav-logo"
-                />
-            </div>
-            </a>
-            <a href="#subscribe-con">
-                <div className="subscribe font-medium">
-                    Subscribe
-                    {/* <img src={require("../Assets/right.png")} alt=""  /> */}
-                </div>
-            </a>
+export default function Navbar({language,updatelang}) {
+  const [content, setContent] = useState(Translation.english);
+  useEffect(() => {
+    if (language === "english") {
+          setContent(Translation.english);
+          localStorage.setItem('lang', 'english');
+        } else if (language === "hindi") {
+          setContent(Translation.hindi);
+          localStorage.setItem('lang', 'hindi');
+        }
+  }, [language]);
+  const setValue = (val) => {
+    updatelang(val);
+  }
+  return (
+    <div className="nav-body">
+      <a href="#home">
+        <div className="logo">
+          <img src={require("../Assets/logoimage.png")} alt="" id="nav-logo" />
         </div>
-    );
+      </a>
+      <div className="rightContents">
+        <a href="#subscribe-con">
+          <div className="subscribe font-medium">
+            {content.name}
+            {/* <img src={require("../Assets/right.png")} alt=""  /> */}
+          </div>
+        </a>
+        <select
+          className="translate-btn"
+          value={language}
+          onChange={(e) => {
+            setValue(e.target.value);
+          }}
+        >
+          <option>english</option>
+          <option>hindi</option>
+        </select>
+      </div>
+    </div>
+  );
 }

client/src/Components/Subscribe.jsx

@@ -1,13 +1,21 @@
-import React from 'react'
+import React,{useState,useEffect} from 'react'
 import "../CSS/Subscribe.css"
-import { useState } from 'react';
 import axios from 'axios';
+import Translation from './Translate/Subscribe.json'
 
-export default function Subscribe() {
+export default function Subscribe({language}) {
   const baseurl = "https://dev-feedmain.vercel.app/api";//baseurl for posting
+  const [content, setContent] = useState(Translation.english);
   const [name, setname] = useState("");
   const [email, setemail] = useState("");
   const [organisation, setorganisation] = useState("");
+  useEffect(() => {
+    if (language === "english") {
+      setContent(Translation.english);
+    } else if (language === "hindi") {
+      setContent(Translation.hindi);
+    }
+  }, [language]);
   //function to post data in backend
   const subscribe = () => {
     axios.post( baseurl+"/subscribe", {
@@ -36,38 +44,38 @@ export default function Subscribe() {
       <div className="subscribe-body ">
 
         <div className="subscribe-heading ">
-          <h2 className='poppins'>Subscribe to our newsletter</h2>
+          <h2 className='poppins'>{content.h2}</h2>
         </div>
 
         <div className="hr"></div>
 
         <div className="form-subheading comme">
-          <h3>Stay updated and never miss an event</h3>
+          <h3>{content.h3}</h3>
         </div>
 
         <form className="subscribe-form comme" method='POST' action = "localhost:3000">
-          <h3 id="person-name-heading">Full name</h3>
-          <input type="text" name="person-name" id="person-name" className='text-[0D2F3F]' placeholder='Enter your full name' onChange={(e) => {
+          <h3 id="person-name-heading">{content.form.f1.h3}</h3>
+          <input type="text" name="person-name" id="person-name" className='text-[0D2F3F]' placeholder={content.form.f1.placeholder} onChange={(e) => {
 
             setname(e.target.value);
 
           }} />
 
-          <h3 id="person-email-heading">Email</h3>
-          <input type="email" name="person-email" id="person-email" className='text-[0D2F3F]' placeholder='Enter your email' onChange={(e) => {
+          <h3 id="person-email-heading">{content.form.f2.h3}</h3>
+          <input type="email" name="person-email" id="person-email" className='text-[0D2F3F]' placeholder={content.form.f2.placeholder} onChange={(e) => {
 
             setemail(e.target.value);
 
           }} />
 
-          <h3 id="person-org-heading">Organization/College</h3>
-          <input type="text" name="person-org" id="person-org" className='text-[0D2F3F]' placeholder='Enter your organization name' onChange={(e) => {
+          <h3 id="person-org-heading">{content.form.f3.h3}</h3>
+          <input type="text" name="person-org" id="person-org" className='text-[0D2F3F]' placeholder={content.form.f3.h3} onChange={(e) => {
             if(e.target.value === "" || " " || "."){setorganisation(e.target.value); console.log("Success");};
 
 
           }} />
 
-          <button type="submit" id='subscribe-btn' onClick={subscribe} ><p>SUBSCRIBE</p></button>
+          <button type="submit" id='subscribe-btn' onClick={subscribe} ><p>{content.form.button}</p></button>
         </form>
       </div>
     </div>

client/src/Components/Testimonials.jsx

@@ -1,7 +1,10 @@
-import React from 'react'
+import React,{useState,useEffect} from 'react'
 import Testimonial from './Testimonial'
+import Translation from './Translate/Testimonial.json'
 
-export default function Testimonials() {
+
+export default function Testimonials({language}) {
+  const [content, setContent] = useState(Translation.english);
   let vw = window.screen.width / 100;
   // let vh = window.Screen.height / 100;
   // var vw = window.screen.availWidth;
@@ -16,23 +19,29 @@ export default function Testimonials() {
     var element = document.getElementById('testimonials-body');
     element.scrollLeft -= 30*vw;
   }
-
+  useEffect(() => {
+    if (language === "english") {
+      setContent(Translation.english);
+    } else if (language === "hindi") {
+      setContent(Translation.hindi);
+    }
+  }, [language]);
   return (
     <>
       <div className="testimonials-title  sans-serif font-bold">
-        People Talk About Us
+        {content.heading}
 
       </div>
 
       <div id="testimonial-con">
 
         <div className="testimonials-control" id='left-control' onClick={scrollRight}><img src={require("../Assets/right.png")} alt="" /></div>
         <div className='testimonials-body comme' id='testimonials-body' data-aos = "slide-left" data-aos-once = "true">
-            <Testimonial img_src = "../Assets/himesh.jpg" text = "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti sunt odio necessitatibus aliquam doloremque incidunt, quo id alias optio laborum? " name = "ipsum dolor" email = "[email protected]"/>
-            <Testimonial img_src = "../Assets/himesh.jpg" text = "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti sunt odio necessitatibus aliquam doloremque incidunt, quo id alias optio laborum? " name = "ipsum dolor" email = "[email protected]"/>
-            <Testimonial img_src = "../Assets/himesh.jpg" text = "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti sunt odio necessitatibus aliquam doloremque incidunt, quo id alias optio laborum? " name = "ipsum dolor" email = "[email protected]"/>
-            <Testimonial img_src = "../Assets/himesh.jpg" text = "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti sunt odio necessitatibus aliquam doloremque incidunt, quo id alias optio laborum? " name = "ipsum dolor" email = "[email protected]"/>
-            <Testimonial img_src = "../Assets/himesh.jpg" text = "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti sunt odio necessitatibus aliquam doloremque incidunt, quo id alias optio laborum? " name = "ipsum dolor" email = "[email protected]"/>
+            <Testimonial img_src = "../Assets/himesh.jpg" text = {content.text} name = {content.name} email = "[email protected]"/>
+            <Testimonial img_src = "../Assets/himesh.jpg" text = {content.text} name = {content.name} email = "[email protected]"/>
+            <Testimonial img_src = "../Assets/himesh.jpg" text = {content.text} name = {content.name} email = "[email protected]"/>
+            <Testimonial img_src = "../Assets/himesh.jpg" text = {content.text} name = {content.name} email = "[email protected]"/>
+            <Testimonial img_src = "../Assets/himesh.jpg" text = {content.text} name = {content.name} email = "[email protected]"/>
 
         </div>
         <div className="testimonials-control" id='right-control' onClick={scrollLeft}><img src={require("../Assets/right.png")} alt=""/></div>

client/src/Components/Translate/About.json

@@ -0,0 +1,28 @@
+{
+    "hindi":{
+        "h1":"आपसे मिलकर अच्छा लगा",
+        "p":{
+            "p1": "आप ",
+            "p2":" के साथ आप कभी भी न केवल अपने कौशल का विस्तार करने बल्कि अपने समुदाय के अन्य तकनीकी पेशेवरों से जुड़ने का अवसर नहीं चूकेंगे। हमारा न्यूज़लेटर तकनीकी परिदृश्य को नेविगेट करने के लिए आपका व्यक्तिगत रोडमैप है,",
+            "p3":"जो आपको नवीनतम घटनाओं, वक्ताओं और विषयों पर विशेष अपडेट प्रदान करता है जो आपके लिए सबसे महत्वपूर्ण हैं।"
+        },
+        "li":{
+            "li1":"अपने शहर में होने वाली तकनीकी घटनाओं के बारे में सभी प्रासंगिक जानकारी प्राप्त करने के लिए ग्राहकों के लिए केंद्रीकृत स्थान",
+            "li2":"तकनीकी कार्यक्रमों में भाग लेने से उद्योग में पेशेवरों और उत्साही लोगों के लिए नेटवर्किंग के मूल्यवान अवसर मिल सकते हैं",
+            "li3":"अलग-अलग घटनाओं की खोज करने के बजाय आपको सभी प्रासंगिक जानकारी एक ही स्थान पर चाहिए।"
+        }
+    },
+    "english":{
+        "h1":"Nice to meet you",
+        "p":{
+            "p1": "With",
+            "p2":", you'll never miss out on an opportunity to not only expand your skills but also connect with other tech professionals in your community. Our newsletter is your personal roadmap to navigating the tech scene, providing you with exclusive",
+            "p3":"updates on the latest events, speakers, and topics that matter most to you."
+        },
+        "li":{
+            "li1":"Centralized location for subscribers to receive all the relevant information about tech events happening in their city",
+            "li2":"Attending tech events can provide valuable networking opportunities for professionals and enthusiasts in the industry",
+            "li3":"All the relevant information you need in one place, instead of having to search for events individually."
+        }
+    }
+}