Updated the language of the home page

package.json

@@ -20,6 +20,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^4.11.0",
+    "react-string-replace": "^1.1.1",
     "sharp": "^0.32.6"
   },
   "devDependencies": {

src/templates/Home.tsx

@@ -16,11 +16,39 @@ import {BiLogoFacebook} from "react-icons/bi";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import translation from "@/translation/home.json";
+import reactStringReplace from "react-string-replace";
+import clsx from "clsx";
+
+const HIGHLIGHT = /({{.+}})/g;
 
 interface Props {
 	language: "en" | "ar";
 }
 
+function Tag({children}: {children: string}) {
+	return (
+		<span className="text-lg font-semibold">
+			{reactStringReplace(children, HIGHLIGHT, (match, i) => (
+				<span key={i} className="text-white bg-mti-rose-light px-1 py-0">
+					{match.replaceAll(/[{}]/g, "")}
+				</span>
+			))}
+		</span>
+	);
+}
+
+function Title({children, className}: {children: string; className?: string}) {
+	return (
+		<span className={clsx("text-4xl font-bold max-w-md", className)}>
+			{reactStringReplace(children, HIGHLIGHT, (match, i) => (
+				<span key={i} className="text-mti-rose-light">
+					{match.replaceAll(/[{}]/g, "")}
+				</span>
+			))}
+		</span>
+	);
+}
+
 export default function Home({language}: Props) {
 	return (
 		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
@@ -81,15 +109,9 @@ export default function Home({language}: Props) {
 			<section className="w-full bg-mti-gray-seasalt">
 				<div className="w-full p-8 lg:py-24 lg:px-12 flex flex-col gap-8 md:gap-24 lg:flex-row items-center justify-center container mx-auto">
 					<div className="flex flex-col gap-8">
-						<span className="text-lg font-semibold">
+						<Tag>{translation.learn_ai.tag[language]}</Tag>
-							<span className="text-white bg-mti-rose-light px-1 py-0">{translation.learn_ai.tag.highlight[language]}</span>{" "}
-							{translation.learn_ai.tag.text[language]}
-						</span>
 						<div className="flex flex-col gap-3">
-							<span className="text-4xl font-bold max-w-md">
+							<Title>{translation.learn_ai.title[language]}</Title>
-								{translation.learn_ai.title.text[language]}{" "}
-								<span className="text-mti-rose-light">{translation.learn_ai.title.highlight[language]}</span>
-							</span>
 							<p className="max-w-lg text-base">{translation.learn_ai.description[language]}</p>
 						</div>
 						<Link href="/join">
@@ -119,15 +141,9 @@ export default function Home({language}: Props) {
 						</div>
 					</div>
 					<div className="flex flex-col gap-8">
-						<span className="text-lg font-semibold">
+						<Tag>{translation.encoach_benefits.tag[language]}</Tag>
-							<span className="text-white bg-mti-rose-light px-1 py-0">{translation.encoach_benefits.tag.encoach[language]}</span>{" "}
-							{translation.encoach_benefits.tag.benefits[language]}
-						</span>
 						<div className="flex flex-col gap-3">
-							<span className="text-4xl font-bold max-w-md">
+							<Title>{translation.encoach_benefits.title[language]}</Title>
-								{translation.encoach_benefits.title.text[language]}{" "}
-								<span className="text-mti-rose-light">{translation.encoach_benefits.title.highlight[language]}</span>
-							</span>
 							<p className="max-w-lg text-base">{translation.encoach_benefits.description[language]}</p>
 						</div>
 						<Link href="/about">
@@ -142,15 +158,8 @@ export default function Home({language}: Props) {
 			{/* Interested Section */}
 			<section className="w-full bg-mti-gray-seasalt">
 				<div className="w-full p-8 py-16 md:py-32 md:px-16 lg:px-28 items-center justify-center flex flex-col gap-10 relative container mx-auto">
-					<span className="text-xl">
+					<Tag>{translation.interested.tag[language]}</Tag>
-						<span className="text-white bg-mti-rose-light px-1 py-0">{translation.interested.tag.highlight[language]}</span>{" "}
+					<Title className="!max-w-sm text-center">{translation.interested.title[language]}</Title>
-						{translation.interested.tag.text[language]}
-					</span>
-					<span className="text-4xl font-bold max-w-sm text-center">
-						{translation.interested.title.beginning[language]}{" "}
-						<span className="text-mti-rose-light">{translation.interested.title.highlight[language]}</span>{" "}
-						{translation.interested.title.end[language]}
-					</span>
 					<Link href="/contact">
 						<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
 							{translation.interested.contact_us[language]}
@@ -178,15 +187,9 @@ export default function Home({language}: Props) {
 			<section className="w-full bg-white">
 				<div className="w-full p-8 md:p-20 lg:p-32 flex flex-col gap-12 md:flex-row items-center justify-around container mx-auto">
 					<div className="flex flex-col gap-8">
-						<span className="text-lg font-semibold">
+						<Tag>{translation.ceo_message.tag[language]}</Tag>
-							<span className="text-white bg-mti-rose-light px-1 py-0">{translation.ceo_message.tag.highlight[language]}</span>{" "}
-							{translation.ceo_message.tag.text[language]}
-						</span>
 						<div className="flex flex-col gap-3">
-							<span className="text-4xl font-bold max-w-md">
+							<Title>{translation.ceo_message.title[language]}</Title>
-								&ldquo;{translation.ceo_message.title.text[language]}{" "}
-								<span className="text-mti-rose-light">{translation.ceo_message.title.highlight[language]}</span>&rdquo;
-							</span>
 							<p className="max-w-lg text-base">{translation.ceo_message.description[language]}</p>
 						</div>
 						<Link href="/about">

src/translation/home.json

@@ -47,28 +47,16 @@
   },
   "learn_ai": {
     "tag": {
-      "text": {
+      "en": "{{Join us}} Learn with AI",
-        "en": "Learn with AI",
+      "ar": "{{انضم الینا}} الاصطناعي م بواسطة الذكاء"
-        "ar": "الإنكوتش"
-      },
-      "highlight": {
-        "en": "Join us",
-        "ar": "فوائد"
-      }
     },
     "title": {
-      "text": {
+      "en": "Get your answers evaluated by {{AI}}",
-        "en": "Get your answers evaluated by",
+      "ar": "ترك {{الذكاء الاصطناعي}} یحلل إجاباتك"
-        "ar": "لقد تم تسجيل الطلاب على موقعنا"
-      },
-      "highlight": {
-        "en": "AI",
-        "ar": "منصة"
-      }
     },
     "description": {
       "en": "Our evaluation system uses artificial intelligence to give you the best feedback possible without the need of a tutor.",
-      "ar": "لدينا بالفعل العديد من الطلاب الذين يدرسون عبر الإنترنت تحت إشراف مدربنا الرقمي، لذا تعال وانضم إلى المجتمع"
+      "ar": "یعطیك تقییما ً دقیقا ً دون الحاجة إلى مدرس نظام التقییم لدینا یستخدم الذكاء الاصطناعي في التحلیل"
     },
     "join": {
       "en": "Join",
@@ -81,54 +69,26 @@
   },
   "encoach_benefits": {
     "tag": {
-      "encoach": {
+      "en": "{{EnCoach}} benefits",
-        "en": "EnCoach",
+      "ar": "ائد {{انكوتس}}"
-        "ar": "الإنكوتش"
-      },
-      "benefits": {
-        "en": "benefits",
-        "ar": "فوائد"
-      }
     },
     "title": {
-      "text": {
+      "en": "Students have registered on our {{platform}}",
-        "en": "Students have registered on our",
+      "ar": "لطلبة المسجلون لدینا في {{منصة}} انكوتش"
-        "ar": "لقد تم تسجيل الطلاب على موقعنا"
-      },
-      "highlight": {
-        "en": "platform",
-        "ar": "منصة"
-      }
     },
     "description": {
       "en": "We already have many students studying online under the guidance of our digital trainer, so come and join the community",
-      "ar": "لدينا بالفعل العديد من الطلاب الذين يدرسون عبر الإنترنت تحت إشراف مدربنا الرقمي، لذا تعال وانضم إلى المجتمع"
+      "ar": "رشاد دقیق بواسطة الذكاء الاصطناعي لدینا قائمة من الطلبة المسجلون یستخدمون المنصة مع"
     }
   },
   "interested": {
     "tag": {
-      "highlight": {
+      "en": "{{Interested}} in us?",
-        "en": "Interested",
+      "ar": "مھتم بنا ؟"
-        "ar": "مهتم"
-      },
-      "text": {
-        "en": "in us?",
-        "ar": "بنا؟"
-      }
     },
     "title": {
-      "beginning": {
+      "en": "Contact us and {{Start}} Learning",
-        "en": "Contact us and",
+      "ar": "تواصل معنا {{وابدأ}} التعلم"
-        "ar": "اتصل بنا و"
-      },
-      "highlight": {
-        "en": "Start",
-        "ar": "يبدأ"
-      },
-      "end": {
-        "en": "Learning",
-        "ar": "تعلُّم"
-      }
     },
     "contact_us": {
       "en": "Contact us",
@@ -141,24 +101,12 @@
   },
   "ceo_message": {
     "tag": {
-      "highlight": {
+      "en": "{{About us}} Message from CEO",
-        "en": "About us",
+      "ar": "الرئیس التنفیذي {{معلومات عنا ،}} رسالة"
-        "ar": "معلومات عنا"
-      },
-      "text": {
-        "en": "Message from CEO",
-        "ar": "رسالة من الرئيس التنفيذي"
-      }
     },
     "title": {
-      "highlight": {
+      "en": "\"We are the best service and the {{only one}}\"",
-        "en": "only one",
+      "ar": "نحن الخدمة الأفضل {{والمنصة الوحیدة من نوعھا}}"
-        "ar": "واحد فقط"
-      },
-      "text": {
-        "en": "We are the best service and the",
-        "ar": "نحن أفضل الخدمات و"
-      }
     },
     "description": {
       "en": "Engaged in education, especially in providing teaching services for students who do not have the opportunity to learn in conventional institutions.",

yarn.lock

@@ -2220,6 +2220,11 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-string-replace@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-1.1.1.tgz#8413a598c60e397fe77df3464f2889f00ba25989"
+  integrity sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ==
+
 react@^18:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"