Made Testimonial.jsx multilingual. Also updated en and fr translations for the same.

Frontend/src/locales/en.json

@@ -67,8 +67,16 @@
   "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."
+  "hero_card5_body": "Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.",
-
 
+  "testimonial_heading": "WHY CHOOSE US?",
+  "testimonial_typewriter": "Unparalleled management for crops & farms.",
+  "testimonial_card1_title": "Excellent Dashboards",
+  "testimonial_card1_body": "Our descriptive dashboards give insights into your crop's health and keep track of your burning expenses.",
+  "testimonial_card2_title": "Crop Disease Prediction",
+  "testimonial_card2_body": "Predict the possible crop diseases based on their shown symptoms.",
+  "testimonial_card3_title": "Crop Planner",
+  "testimonial_card3_body": "Based on previous season's crop and used fertilizers and pesticides, plan what crops would best suit the present state of your soil.",
+  "testimonial_check_out": "Check Out"
 
 }

Frontend/src/locales/fr.json

@@ -67,8 +67,16 @@
   "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."
+  "hero_card5_body": "Voici les plus grandes acquisitions technologiques d'entreprise de 2021 à ce jour, par ordre chronologique inverse.",
-
 
+  "testimonial_heading": "POURQUOI NOUS CHOISIR ?",
+  "testimonial_typewriter": "Gestion inégalée pour les cultures et les fermes.",
+  "testimonial_card1_title": "Tableaux de bord excellents",
+  "testimonial_card1_body": "Nos tableaux de bord descriptifs donnent un aperçu de la santé de vos cultures et suivent vos dépenses importantes.",
+  "testimonial_card2_title": "Prédiction des maladies des cultures",
+  "testimonial_card2_body": "Prédisez les maladies possibles des cultures en fonction des symptômes observés.",
+  "testimonial_card3_title": "Planificateur de cultures",
+  "testimonial_card3_body": "En fonction des cultures de la saison précédente et des engrais et pesticides utilisés, planifiez les cultures qui conviendraient le mieux à l’état actuel de votre sol.",
+  "testimonial_check_out": "Voir"
 
 }

Frontend/src/pages/Home/Testimonial.jsx

@@ -6,6 +6,8 @@ import { motion } from "framer-motion";
 import { useInView } from "react-intersection-observer";
 import TypeWriterEffect from "react-typewriter-effect";
 import cards from "./Cards";
+import { t } from "../../service/translation";
+import { useOutletContext } from "react-router-dom";
 
 const ScrollReveal = ({ children, direction = "left" }) => {
   const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.5 });
@@ -29,7 +31,12 @@ const ScrollReveal = ({ children, direction = "left" }) => {
   );
 };
 
-const Testimonial = () => {
+const Testimonial = (props) => {
+  // Get language from context or props, default to 'en'
+  const outletContext = useOutletContext?.();
+  const language =
+    (outletContext && outletContext.language) || props.language || "en";
+
   const myRef = document.querySelector(".scrollable-div");
 
   return (
@@ -39,7 +46,7 @@ const Testimonial = () => {
           <div className="text-center flex-col justify-center align-middle min-h-full">
             <ScrollReveal direction="up">
               <h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">
-                WHY CHOOSE US?
+                {t("testimonial_heading", language)}
               </h2>
             </ScrollReveal>
             <ScrollReveal direction="up">
@@ -50,7 +57,7 @@ const Testimonial = () => {
                   scrollArea={myRef}
                   startDelay={100}
                   cursorColor="white"
-                  text="⠀Unparalled management for crops & farms."
+                  text={t("testimonial_typewriter", language)}
                   typeSpeed={100}
                 />
               </h1>
@@ -60,25 +67,20 @@ const Testimonial = () => {
           <div className="flex flex-col sm:flex-row justify-around mt-8 h-auto min-h-[50]">
             <ScrollReveal direction="up">
               <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-                <img
+                <img src="/images/dashboard.png" alt="dashboard" className="w-7 h-7" />
-                  src="/images/dashboard.png"
-                  alt="dashboard"
-                  className="w-7 h-7"
-                ></img>
                 <a href="/user/dashboard/">
                   <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
-                    Excellent Dashboards
+                    {t("testimonial_card1_title", language)}
                   </h5>
                 </a>
                 <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
-                  Our descriptive dashboards give insights into your crop's
+                  {t("testimonial_card1_body", language)}
-                  health and keeps track of your burning expenses.
                 </p>
                 <a
                   href="#"
                   className="inline-flex font-medium items-center text-blue-600 hover:underline"
                 >
-                  Check Out
+                  {t("testimonial_check_out", language)}
                   <svg
                     className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
                     aria-hidden="true"
@@ -88,9 +90,9 @@ const Testimonial = () => {
                   >
                     <path
                       stroke="currentColor"
-                      stroke-linecap="round"
+                      strokeLinecap="round"
-                      stroke-linejoin="round"
+                      strokeLinejoin="round"
-                      stroke-width="2"
+                      strokeWidth="2"
                       d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
                     />
                   </svg>
@@ -103,19 +105,17 @@ const Testimonial = () => {
                 <img src="/images/crops.png" className="w-7 h-7" alt="" />
                 <a href="#">
                   <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
-                    {" "}
+                    {t("testimonial_card2_title", language)}
-                    Crop Disease Prediction{" "}
                   </h5>
                 </a>
                 <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
-                  Predict the possible crop diseases based on their shown
+                  {t("testimonial_card2_body", language)}
-                  symptoms.
                 </p>
                 <a
                   href="/ai"
                   className="inline-flex font-medium items-center text-blue-600 hover:underline"
                 >
-                  Check Out
+                  {t("testimonial_check_out", language)}
                   <svg
                     className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
                     aria-hidden="true"
@@ -125,9 +125,9 @@ const Testimonial = () => {
                   >
                     <path
                       stroke="currentColor"
-                      stroke-linecap="round"
+                      strokeLinecap="round"
-                      stroke-linejoin="round"
+                      strokeLinejoin="round"
-                      stroke-width="2"
+                      strokeWidth="2"
                       d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
                     />
                   </svg>
@@ -140,19 +140,17 @@ const Testimonial = () => {
                 <img src="/images/planner.png" className="w-7 h-7" alt="" />
                 <a href="/user/dashboard/monitoring">
                   <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
-                    Crop Planner
+                    {t("testimonial_card3_title", language)}
                   </h5>
                 </a>
                 <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
-                  Based on previous season's crop and used pertilizers and
+                  {t("testimonial_card3_body", language)}
-                  pesticides, plan what crops would best suit the present state
-                  of your soil.
                 </p>
                 <a
                   href="#"
                   className="inline-flex font-medium items-center text-blue-600 hover:underline"
                 >
-                  Check Out
+                  {t("testimonial_check_out", language)}
                   <svg
                     className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
                     aria-hidden="true"
@@ -162,9 +160,9 @@ const Testimonial = () => {
                   >
                     <path
                       stroke="currentColor"
-                      stroke-linecap="round"
+                      strokeLinecap="round"
-                      stroke-linejoin="round"
+                      strokeLinejoin="round"
-                      stroke-width="2"
+                      strokeWidth="2"
                       d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
                     />
                   </svg>