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

@@ -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."
+
+
 
 }

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."
+
+
+
 }

Frontend/src/pages/Home/Cards.jsx

@@ -1,13 +1,10 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
-import { useEffect } from "react";
+import { t } from "../service/translation"; 
 
-import { Link } from "react-router-dom";
+export const HeroSecn = ({ language = "en" }) => {
-
-export const HeroSecn = () => {
   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 (
     <section className="py-40 w-full flex justify-center text-gray-100">
       <div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
         <div className="container mx-auto flex flex-col justify-between h-full w-full">
           <div className="text-center md:text-start flex flex-col justify-around h-full">
             <h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold ">
-              One stop solution for every farmer's need.
+              {t("hero_one_stop_solution", language)}
             </h1>
           </div>
           <button
@@ -47,7 +43,7 @@ export const HeroSecn = () => {
           <img
             src="/images/plant.png"
             className="w-full h-auto rounded-3xl shadow-xl"
-            alt="plant"
+            alt={t("hero_plant_alt", language)}
           />
         </div>
       </div>
@@ -55,34 +51,31 @@ export const HeroSecn = () => {
   );
 };
 
-export const CardWithImage = () => {
+export const CardWithImage = ({ language = "en" }) => {
   return (
     <div className="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
       <a href="#">
         <img
           className="rounded-t-lg"
           src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg"
-          alt="plant"
+          alt={t("card_with_image_alt", language)}
         />
       </a>
       <div className="p-6 backdrop-blur-md rounded-b-lg">
         <a href="#">
           <h5 className="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">
-            High tech, high yields?
+            {t("card_with_image_title", language)}
           </h5>
         </a>
         <p className="mb-3 font-normal text-white dark:text-gray-400">
-          The Kenyan farmers deploying AI to increase productivity This article
+          {t("card_with_image_body", language)}
-          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.
         </p>
         <a
           href="https://www.theguardian.com/world/2024/sep/30/high-tech-high-yields-the-kenyan-farmers-deploying-ai-to-increase-productivity"
           target="_blank"
           className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl "
         >
-          Read more
+          {t("card_with_image_read_more", language)}
           <svg
             className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
             aria-hidden="true"
@@ -92,9 +85,9 @@ export const CardWithImage = () => {
           >
             <path
               stroke="currentColor"
-              stroke-linecap="round"
+              strokeLinecap="round"
-              stroke-linejoin="round"
+              strokeLinejoin="round"
-              stroke-width="2"
+              strokeWidth="2"
               d="M1 5h12m0 0L9 1m4 4L9 9"
             />
           </svg>
@@ -104,47 +97,40 @@ export const CardWithImage = () => {
   );
 };
 
-export const CardOnlyText = (props) => {
+export const CardOnlyText = ({ headingText, bodyText, href, language = "en" }) => {
   return (
     <div>
       <a
-        href={props.href}
+        href={href}
         target="_blank"
         className="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
       >
         <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
-          {" "}
+          {headingText}
-          {props.headingText}{" "}
         </h5>
-        <p className="font-normal text-gray-50 dark:text-gray-400">
+        <p className="font-normal text-gray-50 dark:text-gray-400">{bodyText}</p>
-          {" "}
-          {props.bodyText}{" "}
-        </p>
       </a>
     </div>
   );
 };
 
-export const CardWithButton = () => {
+export const CardWithButton = ({ language = "en" }) => {
   return (
     <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-      <a target="_blank">
+      <a target="_blank" href="#">
         <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
-          Empowering smallholder farmers with AI tools can bolster global food
+          {t("card_with_button_title", language)}
-          security
         </h5>
       </a>
       <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
-        {" "}
+        {t("card_with_button_body", language)}
-        AI-powered weather forecasts help rural Indian farmers make informed
-        planting decisions, reducing debt and boosting savings.
       </p>
       <a
         href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/"
         target="_blank"
         className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl "
       >
-        Read more
+        {t("card_with_button_read_more", language)}
         <svg
           className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
           aria-hidden="true"
@@ -154,9 +140,9 @@ export const CardWithButton = () => {
         >
           <path
             stroke="currentColor"
-            stroke-linecap="round"
+            strokeLinecap="round"
-            stroke-linejoin="round"
+            strokeLinejoin="round"
-            stroke-width="2"
+            strokeWidth="2"
             d="M1 5h12m0 0L9 1m4 4L9 9"
           />
         </svg>
@@ -175,7 +161,7 @@ export const CardWithOnlyImage = () => {
         <img
           className="rounded-lg"
           src="https://i.pinimg.com/736x/2b/2a/0f/2b2a0f7003bd3e4201573c1189d600de.jpg"
-          alt="product image"
+          alt={t("card_with_only_image_alt", language)}
         />
       </a>
     </div>
@@ -192,24 +178,34 @@ const cards = [
 
 export default cards;
 
-export const CardLayout = () => {
+export const CardLayout = ({ language = "en" }) => {
   return (
     <div>
-      <HeroSecn />
+      <HeroSecn language={language} />
       <div className="flex justify-center">
         <div className="flex justify-between py-8 w-5/6 ">
-          <cardWithImage />
+          <CardWithImage language={language} />
           <div className="flex flex-col gap-10 justify-between ">
-            <cardOnlyText />
+            <CardOnlyText
-            <cardWithButton />
+              headingText={t("card_only_text_heading1", language)}
+              bodyText={t("card_only_text_body1", language)}
+              href="https://example.com/article1"
+              language={language}
+            />
+            <CardWithButton language={language} />
           </div>
-
           <div className="flex flex-col justify-between">
-            <cardWithOnlyImage />
+            <CardWithOnlyImage language={language} />
-            <cardOnlyText />
+            <CardOnlyText
+              headingText={t("card_only_text_heading2", language)}
+              bodyText={t("card_only_text_body2", language)}
+              href="https://example.com/article2"
+              language={language}
+            />
           </div>
         </div>
       </div>
     </div>
   );
 };
+

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 (
     <>
       <section
@@ -11,25 +18,20 @@ const Customization = () => {
           <div className="container mx-auto flex flex-col justify-around h-full w-full md:py-10">
             <div className="text-center md:text-start flex flex-col justify-around h-full">
               <h2 className="text-xl font-bold mb-4 text-yellow-600">
-                CUSTOMIZE WITH YOUR SCHEDULE
+                {t("customization_schedule", language)}
               </h2>
               <h1 className="text-2xl md:text-4xl md:font-extrabold font-bold mb-4">
-                Talented and Qualified Tutors to Serve You for Help
+                {t("customization_tutors_title", language)}
               </h1>
               <p className="text-base mb-8">
-                Our scheduling system allows you to select based on free time.
+                {t("customization_paragraph", language)}
-                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
               </p>
               <div className="flex gap-4 justify-center md:justify-start">
                 <button
                   type="button"
                   className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
                 >
-                  Get started
+                  {t("customization_get_started", language)}
                 </button>
               </div>
             </div>
@@ -38,7 +40,7 @@ const Customization = () => {
             <img
               src="/images/interaction2.png"
               className="w-full h-auto"
-              alt=""
+              alt={t("customization_image_alt", language)}
             />
           </div>
         </div>
@@ -48,3 +50,4 @@ const Customization = () => {
 };
 
 export default Customization;
+

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 (
     <>
       <footer className="text-gray-50">
@@ -11,10 +18,10 @@ const Footer = () => {
                 <img
                   src="/images/logo.png"
                   className="h-9 rounded-full"
-                  alt="Logo"
+                  alt={t("footer_logo_alt", language)}
                 />
                 <span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
-                  Crop Compass
+                  {t("footer_brand", language)}
                 </span>
               </a>
             </div>
@@ -24,9 +31,9 @@ const Footer = () => {
             <span className="text-sm text-gray-50 sm:text-center dark:text-gray-400">
               © 2025{" "}
               <a href="/" className="hover:underline">
-                Crop Compass™
+                {t("footer_brand", language)}™
               </a>
-              . All Rights Reserved.
+              . {t("footer_rights_reserved", language)}
             </span>
           </div>
         </div>
@@ -36,3 +43,4 @@ const Footer = () => {
 };
 
 export default Footer;
+

Frontend/src/pages/Home/Hero.jsx

@@ -1,7 +1,13 @@
 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 (
     <>
       <section className="py-12 w-full flex justify-center pt-28 text-gray-100">
@@ -9,10 +15,10 @@ const Hero = () => {
           <div className="container mx-auto flex flex-col justify-between h-full w-full">
             <div className="text-center md:text-start flex flex-col justify-around h-full">
               <h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold">
-                Anything and Everything you Need to know About
+                {t("hero_heading_main", language)}
               </h1>
               <p className="text-2xl font-semibold mb-8 ">
-                Your crops and their Health!
+                {t("hero_heading_sub", language)}
               </p>
             </div>
           </div>
@@ -20,7 +26,7 @@ const Hero = () => {
             <img
               src="/images/plant.png"
               className="w-full h-auto rounded-3xl shadow-xl"
-              alt="plant"
+              alt={t("hero_image_alt", language)}
             />
           </div>
         </div>
@@ -33,24 +39,23 @@ const Hero = () => {
               <img
                 className="rounded-t-lg"
                 src="/images/plant.png"
-                alt="plant"
+                alt={t("hero_card1_image_alt", language)}
               />
             </a>
             <div className="p-8 backdrop-blur-md rounded-b-lg">
               <a href="#">
                 <h5 className="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">
-                  Noteworthy technology acquisitions 2021
+                  {t("hero_card1_title", language)}
                 </h5>
               </a>
               <p className="mb-3 font-normal text-white dark:text-gray-400">
-                Here are the biggest enterprise technology acquisitions of 2021
+                {t("hero_card1_body", language)}
-                so far, in reverse chronological order.
               </p>
               <a
                 href="#"
                 className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl"
               >
-                Read more
+                {t("hero_card1_read_more", language)}
                 <svg
                   className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
                   aria-hidden="true"
@@ -60,9 +65,9 @@ const Hero = () => {
                 >
                   <path
                     stroke="currentColor"
-                    stroke-linecap="round"
+                    strokeLinecap="round"
-                    stroke-linejoin="round"
+                    strokeLinejoin="round"
-                    stroke-width="2"
+                    strokeWidth="2"
                     d="M1 5h12m0 0L9 1m4 4L9 9"
                   />
                 </svg>
@@ -77,11 +82,10 @@ const Hero = () => {
                 className="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
               >
                 <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
-                  Noteworthy technology acquisitions 2021
+                  {t("hero_card2_title", language)}
                 </h5>
                 <p className="font-normal text-gray-50 dark:text-gray-400">
-                  Here are the biggest enterprise technology acquisitions of
+                  {t("hero_card2_body", language)}
-                  2021 so far, in reverse chronological order.
                 </p>
               </a>
             </div>
@@ -89,18 +93,17 @@ const Hero = () => {
             <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
               <a href="#">
                 <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
-                  Noteworthy technology acquisitions 2021
+                  {t("hero_card3_title", language)}
                 </h5>
               </a>
               <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
-                Here are the biggest enterprise technology acquisitions of 2021
+                {t("hero_card3_body", language)}
-                so far, in reverse chronological order.
               </p>
               <a
                 href="#"
                 className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl"
               >
-                Read more
+                {t("hero_card3_read_more", language)}
                 <svg
                   className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
                   aria-hidden="true"
@@ -110,9 +113,9 @@ const Hero = () => {
                 >
                   <path
                     stroke="currentColor"
-                    stroke-linecap="round"
+                    strokeLinecap="round"
-                    stroke-linejoin="round"
+                    strokeLinejoin="round"
-                    stroke-width="2"
+                    strokeWidth="2"
                     d="M1 5h12m0 0L9 1m4 4L9 9"
                   />
                 </svg>
@@ -126,7 +129,7 @@ const Hero = () => {
                 <img
                   className="rounded-lg"
                   src="/images/plant.png"
-                  alt="product image"
+                  alt={t("hero_card4_image_alt", language)}
                 />
               </a>
             </div>
@@ -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"
               >
                 <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
-                  Noteworthy technology acquisitions 2021
+                  {t("hero_card5_title", language)}
                 </h5>
                 <p className="font-normal text-gray-50 dark:text-gray-400">
-                  Here are the biggest enterprise technology acquisitions of
+                  {t("hero_card5_body", language)}
-                  2021 so far, in reverse chronological order.
                 </p>
               </a>
             </div>
@@ -154,4 +156,3 @@ const Hero = () => {
 
 export default Hero;
 
-// {grid grid-cols-1 sm:grid-cols-2  md:grid-cols-2}

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() {
+function Hero2(props) {
-  const myRef = document.querySelector(".scrollable-div");
+  // Get language from context if available, else from props, default to "en"
+  const outletContext = useOutletContext?.();
+  const language =
+    (outletContext && outletContext.language) || props.language || "en";
 
   return (
     <div>
-      <Navbar2 />
+      <Navbar2 language={language} />
       <ScrollReveal direction="up">
-        <HeroSecn />
+        <HeroSecn language={language} />
       </ScrollReveal>
-      <Testimonial />
+      <Testimonial language={language} />
       <div className="flex justify-center">
         <div className="flex justify-between py-8 w-5/6 ">
           <ScrollReveal direction="up">
-            <CardWithImage />
+            <CardWithImage language={language} />
           </ScrollReveal>
 
           <div className="flex flex-col gap-10 justify-between ">
             <ScrollReveal direction="up">
-              {" "}
               <CardOnlyText
-                headingText={
+                headingText={t("hero2_card1_heading", language)}
-                  "AI for agriculture: How Indian farmers are harvesting innovation"
+                bodyText={t("hero2_card1_body", language)}
-                }
+                href="https://www.weforum.org/impact/ai-for-agriculture-in-india/"
-                bodyText={
+                language={language}
-                  "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."
+              />
-                }
-                href={
-                  "https://www.weforum.org/impact/ai-for-agriculture-in-india/ "
-                }
-              />{" "}
             </ScrollReveal>
             <ScrollReveal direction="up">
-              {" "}
+              <CardWithButton language={language} />
-              <CardWithButton />{" "}
             </ScrollReveal>
           </div>
 
           <div className="flex flex-col justify-between">
             <ScrollReveal direction="up">
-              {" "}
               <CardOnlyText
-                headingText={
+                headingText={t("hero2_card2_heading", language)}
-                  "SugarChain: Blockchain technology meets Agriculture"
+                bodyText={t("hero2_card2_body", language)}
-                }
+                href="https://arxiv.org/abs/2301.08405"
-                bodyText={
+                language={language}
-                  "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"
+              />
-                }
-                href={"https://arxiv.org/abs/2301.08405"}
-              />{" "}
             </ScrollReveal>
             <ScrollReveal direction="up">
-              {" "}
+              <CardWithOnlyImage language={language} />
-              <CardWithOnlyImage />{" "}
             </ScrollReveal>
           </div>
         </div>
@@ -95,3 +88,4 @@ function Hero2() {
 }
 
 export default Hero2;
+