From 9fe5d04fca8472bb2c1a9dded6cef74ca2ee4aaf Mon Sep 17 00:00:00 2001 From: Kshitij Date: Fri, 20 Jun 2025 22:46:31 +0530 Subject: [PATCH] Made pages in Home/ directory multilingual: - Cards.jsx - Customization.jsx - Footer.jsx - Hero.jsx - Hero2.jsx - HomePage.jsx Also added language key:values for en and fr in locales. --- Frontend/src/locales/en.json | 35 ++++++- Frontend/src/locales/fr.json | 36 ++++++- Frontend/src/pages/Home/Cards.jsx | 114 +++++++++++----------- Frontend/src/pages/Home/Customization.jsx | 25 ++--- Frontend/src/pages/Home/Footer.jsx | 18 +++- Frontend/src/pages/Home/Hero.jsx | 79 +++++++-------- Frontend/src/pages/Home/Hero2.jsx | 60 +++++------- 7 files changed, 218 insertions(+), 149 deletions(-) diff --git a/Frontend/src/locales/en.json b/Frontend/src/locales/en.json index b18a2c9..43104b0 100644 --- a/Frontend/src/locales/en.json +++ b/Frontend/src/locales/en.json @@ -15,6 +15,39 @@ "login_button": "Login", "login_new_user": "New User?", "login_signup": "Signup", - "main_login_heading": "Welcome to the Login Portal" + "main_login_heading": "Welcome to the Login Portal", + + "customization_schedule": "CUSTOMIZE WITH YOUR SCHEDULE", + "customization_tutors_title": "Talented and Qualified Tutors to Serve You for Help", + "customization_paragraph": "Our scheduling system allows you to select based on free time. Lorem ipsum demo text for template. Keep track of your students class and tutoring schedules, and never miss your lectures. The best online class scheduling system with easy accessibility. Lorem ipsum is a placeholder text commonly used to demonstrate the visual form", + "customization_get_started": "Get started", + "customization_image_alt": "Interaction illustration", + + "footer_logo_alt": "Crop Compass Logo", + "footer_brand": "Crop Compass", + "footer_rights_reserved": "All Rights Reserved.", + + "hero2_card1_heading": "AI for agriculture: How Indian farmers are harvesting innovation", + "hero2_card1_body": "Farmers participating in the programme saw a 21% increase in chili yields per acre, a 9% reduction in pesticide use, a 5% decrease in fertilizer usage, and an 8% improvement in unit prices due to quality enhancements.", + "hero2_card2_heading": "SugarChain: Blockchain technology meets Agriculture", + "hero2_card2_body": "The use of blockchain technology can help farmers automate processes with high trust, addressing issues like middlemen involvement and ensuring accurate compensation for their products", + + "hero_heading_main": "Anything and Everything you Need to know About", + "hero_heading_sub": "Your crops and their Health!", + "hero_image_alt": "plant", + "hero_card1_image_alt": "plant", + "hero_card1_title": "Noteworthy technology acquisitions 2021", + "hero_card1_body": "Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.", + "hero_card1_read_more": "Read more", + "hero_card2_title": "Noteworthy technology acquisitions 2021", + "hero_card2_body": "Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.", + "hero_card3_title": "Noteworthy technology acquisitions 2021", + "hero_card3_body": "Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.", + "hero_card3_read_more": "Read more", + "hero_card4_image_alt": "product image", + "hero_card5_title": "Noteworthy technology acquisitions 2021", + "hero_card5_body": "Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order." + + } diff --git a/Frontend/src/locales/fr.json b/Frontend/src/locales/fr.json index 6bc647f..6d4b111 100644 --- a/Frontend/src/locales/fr.json +++ b/Frontend/src/locales/fr.json @@ -15,5 +15,39 @@ "login_button": "Connexion", "login_new_user": "Nouvel utilisateur ?", "login_signup": "S'inscrire", - "main_login_heading": "Bienvenue sur le portail de connexion" + "main_login_heading": "Bienvenue sur le portail de connexion", + + "customization_schedule": "PERSONNALISEZ AVEC VOTRE EMPLOI DU TEMPS", + "customization_tutors_title": "Des tuteurs talentueux et qualifiés à votre service", + "customization_paragraph": "Notre système de planification vous permet de sélectionner en fonction de votre temps libre. Texte de démonstration Lorem ipsum pour le modèle. Suivez les horaires de vos étudiants et de tutorat, et ne manquez jamais vos cours. Le meilleur système de planification de cours en ligne avec une accessibilité facile. Lorem ipsum est un texte de remplacement couramment utilisé pour démontrer la forme visuelle", + "customization_get_started": "Commencer", + "customization_image_alt": "Illustration d'interaction", + + "footer_logo_alt": "Logo de Crop Compass", + "footer_brand": "Crop Compass", + "footer_rights_reserved": "Tous droits réservés.", + + "hero2_card1_heading": "L’IA pour l’agriculture : comment les agriculteurs indiens récoltent l’innovation", + "hero2_card1_body": "Les agriculteurs participant au programme ont constaté une augmentation de 21 % des rendements de piment par acre, une réduction de 9 % de l’utilisation de pesticides, une diminution de 5 % de l’utilisation d’engrais et une amélioration de 8 % des prix unitaires grâce à l’amélioration de la qualité.", + "hero2_card2_heading": "SugarChain : la blockchain rencontre l’agriculture", + "hero2_card2_body": "L’utilisation de la technologie blockchain peut aider les agriculteurs à automatiser les processus avec une grande confiance, à résoudre les problèmes liés aux intermédiaires et à garantir une rémunération précise de leurs produits", + + "hero_heading_main": "Tout ce que vous devez savoir sur", + "hero_heading_sub": "Vos cultures et leur santé !", + "hero_image_alt": "plante", + "hero_card1_image_alt": "plante", + "hero_card1_title": "Acquisitions technologiques remarquables 2021", + "hero_card1_body": "Voici les plus grandes acquisitions technologiques d'entreprise de 2021 à ce jour, par ordre chronologique inverse.", + "hero_card1_read_more": "Lire la suite", + "hero_card2_title": "Acquisitions technologiques remarquables 2021", + "hero_card2_body": "Voici les plus grandes acquisitions technologiques d'entreprise de 2021 à ce jour, par ordre chronologique inverse.", + "hero_card3_title": "Acquisitions technologiques remarquables 2021", + "hero_card3_body": "Voici les plus grandes acquisitions technologiques d'entreprise de 2021 à ce jour, par ordre chronologique inverse.", + "hero_card3_read_more": "Lire la suite", + "hero_card4_image_alt": "image du produit", + "hero_card5_title": "Acquisitions technologiques remarquables 2021", + "hero_card5_body": "Voici les plus grandes acquisitions technologiques d'entreprise de 2021 à ce jour, par ordre chronologique inverse." + + + } diff --git a/Frontend/src/pages/Home/Cards.jsx b/Frontend/src/pages/Home/Cards.jsx index 5700745..f0db3d6 100644 --- a/Frontend/src/pages/Home/Cards.jsx +++ b/Frontend/src/pages/Home/Cards.jsx @@ -1,13 +1,10 @@ -import React, { useState } from "react"; -import { useSelector } from "react-redux"; -import { useEffect } from "react"; +import React, { useState, useEffect } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { t } from "../service/translation"; -import { Link } from "react-router-dom"; - -export const HeroSecn = () => { +export const HeroSecn = ({ language = "en" }) => { const user = useSelector((store) => store.user); - - + const dispatch = useDispatch(); const [isLoggedIn, setLoggedIn] = useState(false); @@ -25,17 +22,16 @@ export const HeroSecn = () => { const user = await responce.json(); - - dispatch(userSliceActions.addUser(user.data)); }; + return ( -
+

- One stop solution for every farmer's need. + {t("hero_one_stop_solution", language)}

@@ -55,34 +51,31 @@ export const HeroSecn = () => { ); }; -export const CardWithImage = () => { +export const CardWithImage = ({ language = "en" }) => { return ( -
+
plant -
+
- High tech, high yields? + {t("card_with_image_title", language)}
-

- The Kenyan farmers deploying AI to increase productivity This article - is more than 4 months old. AI apps are increasingly popular among - small-scale farmers seeking to improve the quality and quantity of - their crop. +

+ {t("card_with_image_body", language)}

- Read more + {t("card_with_image_read_more", language)} @@ -104,47 +97,40 @@ export const CardWithImage = () => { ); }; -export const CardOnlyText = (props) => { +export const CardOnlyText = ({ headingText, bodyText, href, language = "en" }) => { return ( ); }; -export const CardWithButton = () => { +export const CardWithButton = ({ language = "en" }) => { return ( @@ -192,24 +178,34 @@ const cards = [ export default cards; -export const CardLayout = () => { +export const CardLayout = ({ language = "en" }) => { return (
- -
-
- + +
+
+
- - + +
- -
- - +
+ +
); }; + diff --git a/Frontend/src/pages/Home/Customization.jsx b/Frontend/src/pages/Home/Customization.jsx index 3c9a244..836fec9 100644 --- a/Frontend/src/pages/Home/Customization.jsx +++ b/Frontend/src/pages/Home/Customization.jsx @@ -1,6 +1,13 @@ import React from "react"; +import { t } from "../../service/translation"; +import { useOutletContext } from "react-router-dom"; + +const Customization = (props) => { + // Get language from context if available, else from props, default to "en" + const outletContext = useOutletContext?.(); + const language = + (outletContext && outletContext.language) || props.language || "en"; -const Customization = () => { return ( <>
{

- CUSTOMIZE WITH YOUR SCHEDULE + {t("customization_schedule", language)}

- Talented and Qualified Tutors to Serve You for Help + {t("customization_tutors_title", language)}

- Our scheduling system allows you to select based on free time. - Lorem ipsum demo text for template. Keep track of your students - class and tutoring schedules, and never miss your lectures. The - best online class scheduling system with easy accessibility. - Lorem ipsum is a placeholder text commonly used to demonstrate - the visual form + {t("customization_paragraph", language)}

@@ -38,7 +40,7 @@ const Customization = () => {
@@ -48,3 +50,4 @@ const Customization = () => { }; export default Customization; + diff --git a/Frontend/src/pages/Home/Footer.jsx b/Frontend/src/pages/Home/Footer.jsx index e728fa7..90067df 100644 --- a/Frontend/src/pages/Home/Footer.jsx +++ b/Frontend/src/pages/Home/Footer.jsx @@ -1,6 +1,13 @@ import React from "react"; +import { t } from "../../service/translation"; +import { useOutletContext } from "react-router-dom"; + +const Footer = (props) => { + // Get language from context if available, else from props, default to "en" + const outletContext = useOutletContext?.(); + const language = + (outletContext && outletContext.language) || props.language || "en"; -const Footer = () => { return ( <>
@@ -11,10 +18,10 @@ const Footer = () => { Logo - Crop Compass + {t("footer_brand", language)}
@@ -24,9 +31,9 @@ const Footer = () => { © 2025{" "} - Crop Compass™ + {t("footer_brand", language)}™ - . All Rights Reserved. + . {t("footer_rights_reserved", language)}
@@ -36,3 +43,4 @@ const Footer = () => { }; export default Footer; + diff --git a/Frontend/src/pages/Home/Hero.jsx b/Frontend/src/pages/Home/Hero.jsx index 2374f29..f33890b 100644 --- a/Frontend/src/pages/Home/Hero.jsx +++ b/Frontend/src/pages/Home/Hero.jsx @@ -1,18 +1,24 @@ import React from "react"; -import { Link } from "react-router-dom"; +import { Link, useOutletContext } from "react-router-dom"; +import { t } from "../../service/translation"; + +const Hero = (props) => { + // Get language from outlet context or props or default to 'en' + const outletContext = useOutletContext?.(); + const language = + (outletContext && outletContext.language) || props.language || "en"; -const Hero = () => { return ( <> -
+

- Anything and Everything you Need to know About + {t("hero_heading_main", language)}

- Your crops and their Health! + {t("hero_heading_sub", language)}

@@ -20,37 +26,36 @@ const Hero = () => { plant
-
-
-
+
+
+
plant -
+
- Noteworthy technology acquisitions 2021 + {t("hero_card1_title", language)}
-

- Here are the biggest enterprise technology acquisitions of 2021 - so far, in reverse chronological order. +

+ {t("hero_card1_body", language)}

- Read more + {t("hero_card1_read_more", language)} @@ -70,18 +75,17 @@ const Hero = () => {
-
+ -
+
@@ -137,11 +140,10 @@ const Hero = () => { className="block max-w-sm p-6 backdrop-blur-xl rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700" >
- Noteworthy technology acquisitions 2021 + {t("hero_card5_title", language)}

- Here are the biggest enterprise technology acquisitions of - 2021 so far, in reverse chronological order. + {t("hero_card5_body", language)}

@@ -154,4 +156,3 @@ const Hero = () => { export default Hero; -// {grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2} diff --git a/Frontend/src/pages/Home/Hero2.jsx b/Frontend/src/pages/Home/Hero2.jsx index 40ddce9..2aef263 100644 --- a/Frontend/src/pages/Home/Hero2.jsx +++ b/Frontend/src/pages/Home/Hero2.jsx @@ -10,6 +10,8 @@ import { } from "./Cards"; import Testimonial from "./Testimonial"; import Navbar2 from "../../components/Navbar2"; +import { t } from "../../service/translation"; +import { useOutletContext } from "react-router-dom"; const ScrollReveal = ({ children, direction = "left" }) => { const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 }); @@ -33,59 +35,50 @@ const ScrollReveal = ({ children, direction = "left" }) => { ); }; -function Hero2() { - const myRef = document.querySelector(".scrollable-div"); +function Hero2(props) { + // Get language from context if available, else from props, default to "en" + const outletContext = useOutletContext?.(); + const language = + (outletContext && outletContext.language) || props.language || "en"; return (
- + - + - -
-
+ +
+
- +
- {" "} {" "} + headingText={t("hero2_card1_heading", language)} + bodyText={t("hero2_card1_body", language)} + href="https://www.weforum.org/impact/ai-for-agriculture-in-india/" + language={language} + /> - {" "} - {" "} +
-
+
- {" "} {" "} + headingText={t("hero2_card2_heading", language)} + bodyText={t("hero2_card2_body", language)} + href="https://arxiv.org/abs/2301.08405" + language={language} + /> - {" "} - {" "} +
@@ -95,3 +88,4 @@ function Hero2() { } export default Hero2; +