Updated the language of the home page

2023-10-22 15:59:37 +01:00
parent a39cf68569
commit 967ad60a1e
4 changed files with 60 additions and 103 deletions
--- a/src/templates/Home.tsx
+++ b/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">
-							<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>
+						<Tag>{translation.learn_ai.tag[language]}</Tag>
 						<div className="flex flex-col gap-3">
-							<span className="text-4xl font-bold max-w-md">
-								{translation.learn_ai.title.text[language]}{" "}
-								<span className="text-mti-rose-light">{translation.learn_ai.title.highlight[language]}</span>
-							</span>
+							<Title>{translation.learn_ai.title[language]}</Title>
 							<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">
-							<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>
+						<Tag>{translation.encoach_benefits.tag[language]}</Tag>
 						<div className="flex flex-col gap-3">
-							<span className="text-4xl font-bold max-w-md">
-								{translation.encoach_benefits.title.text[language]}{" "}
-								<span className="text-mti-rose-light">{translation.encoach_benefits.title.highlight[language]}</span>
-							</span>
+							<Title>{translation.encoach_benefits.title[language]}</Title>
 							<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">
-						<span className="text-white bg-mti-rose-light px-1 py-0">{translation.interested.tag.highlight[language]}</span>{" "}
-						{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>
+					<Tag>{translation.interested.tag[language]}</Tag>
+					<Title className="!max-w-sm text-center">{translation.interested.title[language]}</Title>
 					<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">
-							<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>
+						<Tag>{translation.ceo_message.tag[language]}</Tag>
 						<div className="flex flex-col gap-3">
-							<span className="text-4xl font-bold max-w-md">
-								&ldquo;{translation.ceo_message.title.text[language]}{" "}
-								<span className="text-mti-rose-light">{translation.ceo_message.title.highlight[language]}</span>&rdquo;
-							</span>
+							<Title>{translation.ceo_message.title[language]}</Title>
 							<p className="max-w-lg text-base">{translation.ceo_message.description[language]}</p>
 						</div>
 						<Link href="/about">
--- a/src/translation/home.json
+++ b/src/translation/home.json
@@ -47,28 +47,16 @@
  },
  "learn_ai": {
    "tag": {
-      "text": {
-        "en": "Learn with AI",
-        "ar": "الإنكوتش"
-      },
-      "highlight": {
-        "en": "Join us",
-        "ar": "فوائد"
-      }
+      "en": "{{Join us}} Learn with AI",
+      "ar": "{{انضم الینا}} الاصطناعي م بواسطة الذكاء"
    },
    "title": {
-      "text": {
-        "en": "Get your answers evaluated by",
-        "ar": "لقد تم تسجيل الطلاب على موقعنا"
-      },
-      "highlight": {
-        "en": "AI",
-        "ar": "منصة"
-      }
+      "en": "Get your answers evaluated by {{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",
-        "ar": "الإنكوتش"
-      },
-      "benefits": {
-        "en": "benefits",
-        "ar": "فوائد"
-      }
+      "en": "{{EnCoach}} benefits",
+      "ar": "ائد {{انكوتس}}"
    },
    "title": {
-      "text": {
-        "en": "Students have registered on our",
-        "ar": "لقد تم تسجيل الطلاب على موقعنا"
-      },
-      "highlight": {
-        "en": "platform",
-        "ar": "منصة"
-      }
+      "en": "Students have registered on our {{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",
-        "ar": "مهتم"
-      },
-      "text": {
-        "en": "in us?",
-        "ar": "بنا؟"
-      }
+      "en": "{{Interested}} in us?",
+      "ar": "مھتم بنا ؟"
    },
    "title": {
-      "beginning": {
-        "en": "Contact us and",
-        "ar": "اتصل بنا و"
-      },
-      "highlight": {
-        "en": "Start",
-        "ar": "يبدأ"
-      },
-      "end": {
-        "en": "Learning",
-        "ar": "تعلُّم"
-      }
+      "en": "Contact us and {{Start}} Learning",
+      "ar": "تواصل معنا {{وابدأ}} التعلم"
    },
    "contact_us": {
      "en": "Contact us",
@@ -141,24 +101,12 @@
  },
  "ceo_message": {
    "tag": {
-      "highlight": {
-        "en": "About us",
-        "ar": "معلومات عنا"
-      },
-      "text": {
-        "en": "Message from CEO",
-        "ar": "رسالة من الرئيس التنفيذي"
-      }
+      "en": "{{About us}} Message from CEO",
+      "ar": "الرئیس التنفیذي {{معلومات عنا ،}} رسالة"
    },
    "title": {
-      "highlight": {
-        "en": "only one",
-        "ar": "واحد فقط"
-      },
-      "text": {
-        "en": "We are the best service and the",
-        "ar": "نحن أفضل الخدمات و"
-      }
+      "en": "\"We are the best service and the {{only one}}\"",
+      "ar": "نحن الخدمة الأفضل {{والمنصة الوحیدة من نوعھا}}"
    },
    "description": {
      "en": "Engaged in education, especially in providing teaching services for students who do not have the opportunity to learn in conventional institutions.",