notkshitij/CropCompass
1
1
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Activity

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

Browse Source
This commit is contained in:
K
2025-06-20 23:17:54 +05:30
parent a70afd8615
commit 36781b3af4
3 changed files with 52 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/locales/en.json
+10 -2
View File
@@ -67,8 +67,16 @@
"hero_card3_read_more": "Read more", "hero_card3_read_more": "Read more",
"hero_card4_image_alt": "product image", "hero_card4_image_alt": "product image",
"hero_card5_title": "Noteworthy technology acquisitions 2021", "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
+10 -2
View File
@@ -67,8 +67,16 @@
"hero_card3_read_more": "Lire la suite", "hero_card3_read_more": "Lire la suite",
"hero_card4_image_alt": "image du produit", "hero_card4_image_alt": "image du produit",
"hero_card5_title": "Acquisitions technologiques remarquables 2021", "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
+32 -34
View File
@@ -6,6 +6,8 @@ import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer"; import { useInView } from "react-intersection-observer";
import TypeWriterEffect from "react-typewriter-effect"; import TypeWriterEffect from "react-typewriter-effect";
import cards from "./Cards"; import cards from "./Cards";
import { t } from "../../service/translation";
import { useOutletContext } from "react-router-dom";
const ScrollReveal = ({ children, direction = "left" }) => { const ScrollReveal = ({ children, direction = "left" }) => {
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.5 }); const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.5 });
@@ -29,17 +31,22 @@ 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"); const myRef = document.querySelector(".scrollable-div");
return ( return (
<> <>
<section className=" py-12 px-2 md:px-32 text-white"> <section className="py-12 px-2 md:px-32 text-white">
<div className="container mx-auto min-h-[20]"> <div className="container mx-auto min-h-[20]">
<div className="text-center flex-col justify-center align-middle min-h-full"> <div className="text-center flex-col justify-center align-middle min-h-full">
<ScrollReveal direction="up"> <ScrollReveal direction="up">
<h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md"> <h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">
WHY CHOOSE US? {t("testimonial_heading", language)}
</h2> </h2>
</ScrollReveal> </ScrollReveal>
<ScrollReveal direction="up"> <ScrollReveal direction="up">
@@ -50,35 +57,30 @@ const Testimonial = () => {
scrollArea={myRef} scrollArea={myRef}
startDelay={100} startDelay={100}
cursorColor="white" cursorColor="white"
text="⠀Unparalled management for crops & farms." text={t("testimonial_typewriter", language)}
typeSpeed={100} typeSpeed={100}
/> />
</h1> </h1>
</ScrollReveal> </ScrollReveal>
</div> </div>
<div className="flex flex-col sm:flex-row justify-around mt-8 h-auto min-h-[50]"> <div className="flex flex-col sm:flex-row justify-around mt-8 h-auto min-h-[50]">
<ScrollReveal direction="up"> <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"> <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/"> <a href="/user/dashboard/">
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white"> <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
Excellent Dashboards {t("testimonial_card1_title", language)}
</h5> </h5>
</a> </a>
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400"> <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> </p>
<a <a
href="#" href="#"
className="inline-flex font-medium items-center text-blue-600 hover:underline" className="inline-flex font-medium items-center text-blue-600 hover:underline"
> >
Check Out {t("testimonial_check_out", language)}
<svg <svg
className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
aria-hidden="true" aria-hidden="true"
@@ -88,9 +90,9 @@ const Testimonial = () => {
> >
<path <path
stroke="currentColor" 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" 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> </svg>
@@ -103,19 +105,17 @@ const Testimonial = () => {
<img src="/images/crops.png" className="w-7 h-7" alt="" /> <img src="/images/crops.png" className="w-7 h-7" alt="" />
<a href="#"> <a href="#">
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white"> <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> </h5>
</a> </a>
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400"> <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> </p>
<a <a
href="/ai" href="/ai"
className="inline-flex font-medium items-center text-blue-600 hover:underline" className="inline-flex font-medium items-center text-blue-600 hover:underline"
> >
Check Out {t("testimonial_check_out", language)}
<svg <svg
className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
aria-hidden="true" aria-hidden="true"
@@ -125,9 +125,9 @@ const Testimonial = () => {
> >
<path <path
stroke="currentColor" 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" 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> </svg>
@@ -140,19 +140,17 @@ const Testimonial = () => {
<img src="/images/planner.png" className="w-7 h-7" alt="" /> <img src="/images/planner.png" className="w-7 h-7" alt="" />
<a href="/user/dashboard/monitoring"> <a href="/user/dashboard/monitoring">
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white"> <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
Crop Planner {t("testimonial_card3_title", language)}
</h5> </h5>
</a> </a>
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400"> <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> </p>
<a <a
href="#" href="#"
className="inline-flex font-medium items-center text-blue-600 hover:underline" className="inline-flex font-medium items-center text-blue-600 hover:underline"
> >
Check Out {t("testimonial_check_out", language)}
<svg <svg
className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
aria-hidden="true" aria-hidden="true"
@@ -162,9 +160,9 @@ const Testimonial = () => {
> >
<path <path
stroke="currentColor" 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" 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> </svg>