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_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
+10 -2
View File
@@ -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
+30 -32
View File
@@ -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,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");
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="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
src="/images/dashboard.png"
alt="dashboard"
className="w-7 h-7"
></img>
<img src="/images/dashboard.png" alt="dashboard" className="w-7 h-7" />
<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
health and keeps track of your burning expenses.
{t("testimonial_card1_body", language)}
</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"
stroke-linejoin="round"
stroke-width="2"
strokeLinecap="round"
strokeLinejoin="round"
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">
{" "}
Crop Disease Prediction{" "}
{t("testimonial_card2_title", language)}
</h5>
</a>
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
Predict the possible crop diseases based on their shown
symptoms.
{t("testimonial_card2_body", language)}
</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"
stroke-linejoin="round"
stroke-width="2"
strokeLinecap="round"
strokeLinejoin="round"
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
pesticides, plan what crops would best suit the present state
of your soil.
{t("testimonial_card3_body", language)}
</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"
stroke-linejoin="round"
stroke-width="2"
strokeLinecap="round"
strokeLinejoin="round"
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>