From 477a69a3be0f2ecf65e54917919b22ed603e44ba Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.err@outlook.com>
Date: Tue, 13 Feb 2024 00:29:29 +0000
Subject: [PATCH] Fixed some minor appearance issues related to the direction
 of the text

---
 src/components/Navbar.tsx  |   2 +-
 src/templates/About.tsx    |  20 +-
 src/templates/Home.tsx     |   6 +-
 src/templates/Services.tsx | 377 +++++++++++++++++--------------------
 4 files changed, 183 insertions(+), 222 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fbf09cc..1b27485 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -28,7 +28,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 				<Link href="/">
 					<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
 				</Link>
-				<div className={clsx("flex w-fit items-center gap-8", language === "ar" && "flex-row-reverse")}>
+				<div className={clsx("flex w-fit items-center gap-8")}>
 					{items.map((item) => (
 						<Link
 							key={item.key}
diff --git a/src/templates/About.tsx b/src/templates/About.tsx
index 97ef04b..a255c46 100644
--- a/src/templates/About.tsx
+++ b/src/templates/About.tsx
@@ -86,12 +86,12 @@ export default function About({language}: Props) {
 			{/* CEO Message Section */}
 			<section id="message" className="w-full bg-white">
 				<div className="w-full flex -md:flex-col -md:items-center -md:pb-16 justify-between gap-8 p-8 md:p-20 container mx-auto">
-					<div className={clsx(language === "ar" ? "text-right" : "text-left", "flex flex-col gap-8 max-w-xl")}>
+					<div className={clsx("flex flex-col gap-8 max-w-xl")}>
 						<Title>{translation.ceo_message.title[language]}</Title>
 						<span>
 							{translation.ceo_message.text[language].split("\n").map((line, index) => (
 								<React.Fragment key={index}>
-									<p className={clsx(language === "ar" ? "text-right" : "text-left")}>{line}</p>
+									<p>{line}</p>
 									<br />
 								</React.Fragment>
 							))}
@@ -115,12 +115,8 @@ export default function About({language}: Props) {
 
 			{/* Capabilities */}
 			<section id="capabilities" className="w-full bg-mti-gray-seasalt">
-				<div
-					className={clsx(
-						"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
-						language === "ar" && "text-right",
-					)}>
-					<div className={clsx("w-full flex", language === "ar" && "justify-end")}>
+				<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
+					<div className={clsx("w-full flex")}>
 						<Title>{translation.capabilities.title[language]}</Title>
 					</div>
 					<span className="text-lg">{translation.capabilities.intro[language]}</span>
@@ -182,12 +178,8 @@ export default function About({language}: Props) {
 
 			{/* Expertise */}
 			<section id="expertise" className="w-full bg-white">
-				<div
-					className={clsx(
-						"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
-						language === "ar" && "text-right",
-					)}>
-					<div className={clsx("w-full flex", language === "ar" && "justify-end")}>
+				<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
+					<div className={clsx("w-full flex")}>
 						<Title>{translation.expertise.title[language]}</Title>
 					</div>
 					<span className="text-lg">{translation.expertise.intro[language]}</span>
diff --git a/src/templates/Home.tsx b/src/templates/Home.tsx
index 056ad06..9addc48 100644
--- a/src/templates/Home.tsx
+++ b/src/templates/Home.tsx
@@ -14,7 +14,9 @@ interface Props {
 
 export default function Home({language}: Props) {
 	return (
-		<main className={clsx("h-screen w-full bg-white text-mti-black flex flex-col", language === "ar" && "text-right")} dir={language === "ar" ? "rtl" : "ltr"}>
+		<main
+			className={clsx("h-screen w-full bg-white text-mti-black flex flex-col", language === "ar" && "text-right")}
+			dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/" language={language} />
 
 			<section className="w-full relative bg-white">
@@ -169,7 +171,7 @@ export default function Home({language}: Props) {
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-10 -bottom-10" />
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-20 -bottom-10" />
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-30 -bottom-10" />
-							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -bottom-10" />
+							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -bottom-10 left-0" />
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 -bottom-10" />
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-0" />
 							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-10" />
diff --git a/src/templates/Services.tsx b/src/templates/Services.tsx
index 0cb7310..93d8600 100644
--- a/src/templates/Services.tsx
+++ b/src/templates/Services.tsx
@@ -2,222 +2,189 @@ import Navbar from "@/components/Navbar";
 import clsx from "clsx";
 import Title from "@/components/Title";
 import {
-  BsBook,
-  BsBlockquoteLeft,
-  BsFillPencilFill,
-  BsMic,
-  BsSoundwave,
-  BsBookmarkStar,
-  BsCheck2Circle,
-  BsEarbuds,
-  BsFileBarGraph,
-  BsBank,
+	BsBook,
+	BsBlockquoteLeft,
+	BsFillPencilFill,
+	BsMic,
+	BsSoundwave,
+	BsBookmarkStar,
+	BsCheck2Circle,
+	BsEarbuds,
+	BsFileBarGraph,
+	BsBank,
 } from "react-icons/bs";
 import translation from "@/translation/services.json";
 import Footer from "@/components/Footer";
 
 interface Props {
-  language: "en" | "ar";
+	language: "en" | "ar";
 }
 
 interface SectionStruct {
-  id: string;
-  title: string;
-  description: string;
-  bullets: {
-    title: string;
-    values: string[];
-    icon: any;
-  }[];
+	id: string;
+	title: string;
+	description: string;
+	bullets: {
+		title: string;
+		values: string[];
+		icon: any;
+	}[];
 }
 
-export default function About({ language }: Props) {
-  const struct = [
-    {
-      id: "english_writing_evaluation",
-      title: translation.english_writing_evaluation.title[language],
-      description: translation.english_writing_evaluation.description[language],
-      bullets: [
-        {
-          title: translation.english_writing_evaluation.evaluation[language],
-          values:
-            translation.english_writing_evaluation.evaluation_values[language],
-          icon: BsBlockquoteLeft,
-        },
-        {
-          title: translation.english_writing_evaluation.acquire[language],
-          values:
-            translation.english_writing_evaluation.acquire_values[language],
-          icon: BsFillPencilFill,
-        },
-      ],
-    },
-    {
-      id: "speaking_practice_evaluation",
-      title: translation.speaking_practice_evaluation.title[language],
-      description:
-        translation.speaking_practice_evaluation.description[language],
-      bullets: [
-        {
-          title: translation.speaking_practice_evaluation.evaluation[language],
-          values:
-            translation.speaking_practice_evaluation.evaluation_values[
-              language
-            ],
-          icon: BsMic,
-        },
-        {
-          title: translation.speaking_practice_evaluation.acquire[language],
-          values:
-            translation.speaking_practice_evaluation.acquire_values[language],
-          icon: BsBook,
-        },
-      ],
-    },
-    {
-      id: "reading_and_listening",
-      title: translation.reading_and_listening.title[language],
-      description: translation.reading_and_listening.description[language],
-      bullets: [
-        {
-          title: translation.reading_and_listening.evaluation[language],
-          values: translation.reading_and_listening.evaluation_values[language],
-          icon: BsSoundwave,
-        },
-        {
-          title: translation.reading_and_listening.acquire[language],
-          values: translation.reading_and_listening.acquire_values[language],
-          icon: BsBookmarkStar,
-        },
-      ],
-    },
-    {
-      id: "practice_tests",
-      title: translation.practice_tests.title[language],
-      description: translation.practice_tests.description[language],
-      bullets: [
-        {
-          title: translation.practice_tests.evaluation[language],
-          values: translation.practice_tests.evaluation_values[language],
-          icon: BsCheck2Circle,
-        },
-        {
-          title: translation.practice_tests.acquire[language],
-          values: translation.practice_tests.acquire_values[language],
-          icon: BsEarbuds,
-        },
-      ],
-    },
-    {
-      id: "progress_tracking",
-      title: translation.progress_tracking.title[language],
-      description: translation.progress_tracking.description[language],
-      bullets: [
-        {
-          title: translation.progress_tracking.advantages[language],
-          values: translation.progress_tracking.advantages_values[language],
-          icon: BsFileBarGraph,
-        },
-      ],
-    },
-  ];
+export default function About({language}: Props) {
+	const struct = [
+		{
+			id: "english_writing_evaluation",
+			title: translation.english_writing_evaluation.title[language],
+			description: translation.english_writing_evaluation.description[language],
+			bullets: [
+				{
+					title: translation.english_writing_evaluation.evaluation[language],
+					values: translation.english_writing_evaluation.evaluation_values[language],
+					icon: BsBlockquoteLeft,
+				},
+				{
+					title: translation.english_writing_evaluation.acquire[language],
+					values: translation.english_writing_evaluation.acquire_values[language],
+					icon: BsFillPencilFill,
+				},
+			],
+		},
+		{
+			id: "speaking_practice_evaluation",
+			title: translation.speaking_practice_evaluation.title[language],
+			description: translation.speaking_practice_evaluation.description[language],
+			bullets: [
+				{
+					title: translation.speaking_practice_evaluation.evaluation[language],
+					values: translation.speaking_practice_evaluation.evaluation_values[language],
+					icon: BsMic,
+				},
+				{
+					title: translation.speaking_practice_evaluation.acquire[language],
+					values: translation.speaking_practice_evaluation.acquire_values[language],
+					icon: BsBook,
+				},
+			],
+		},
+		{
+			id: "reading_and_listening",
+			title: translation.reading_and_listening.title[language],
+			description: translation.reading_and_listening.description[language],
+			bullets: [
+				{
+					title: translation.reading_and_listening.evaluation[language],
+					values: translation.reading_and_listening.evaluation_values[language],
+					icon: BsSoundwave,
+				},
+				{
+					title: translation.reading_and_listening.acquire[language],
+					values: translation.reading_and_listening.acquire_values[language],
+					icon: BsBookmarkStar,
+				},
+			],
+		},
+		{
+			id: "practice_tests",
+			title: translation.practice_tests.title[language],
+			description: translation.practice_tests.description[language],
+			bullets: [
+				{
+					title: translation.practice_tests.evaluation[language],
+					values: translation.practice_tests.evaluation_values[language],
+					icon: BsCheck2Circle,
+				},
+				{
+					title: translation.practice_tests.acquire[language],
+					values: translation.practice_tests.acquire_values[language],
+					icon: BsEarbuds,
+				},
+			],
+		},
+		{
+			id: "progress_tracking",
+			title: translation.progress_tracking.title[language],
+			description: translation.progress_tracking.description[language],
+			bullets: [
+				{
+					title: translation.progress_tracking.advantages[language],
+					values: translation.progress_tracking.advantages_values[language],
+					icon: BsFileBarGraph,
+				},
+			],
+		},
+	];
 
-  const final_struct = [
-    {
-      id: "unified_english_level_test",
-      title: translation.unified_english_level_test.title[language],
-      description: translation.unified_english_level_test.description[language],
-      bullets: [
-        {
-          title: translation.unified_english_level_test.advantages[language],
-          values:
-            translation.unified_english_level_test.advantages_values[language],
-          icon: BsBank,
-        },
-      ],
-    },
-    {
-      id: "customized_packages",
-      title: translation.customized_packages.title[language],
-      description: translation.customized_packages.description[language],
-      bullets: [],
-    },
-  ];
+	const final_struct = [
+		{
+			id: "unified_english_level_test",
+			title: translation.unified_english_level_test.title[language],
+			description: translation.unified_english_level_test.description[language],
+			bullets: [
+				{
+					title: translation.unified_english_level_test.advantages[language],
+					values: translation.unified_english_level_test.advantages_values[language],
+					icon: BsBank,
+				},
+			],
+		},
+		{
+			id: "customized_packages",
+			title: translation.customized_packages.title[language],
+			description: translation.customized_packages.description[language],
+			bullets: [],
+		},
+	];
 
-  const renderStruct = (data: SectionStruct[], getBackgroundColor: (index: number) => string) =>
-    data.map((section, index) => (
-      <section
-        id={section.id}
-        key={section.id}
-        className={`w-full ${getBackgroundColor(index)}`}
-      >
-        <div
-          className={clsx(
-            "w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
-            language === "ar" && "text-right"
-          )}
-        >
-          <div
-            className={clsx("w-full flex", language === "ar" && "justify-end")}
-          >
-            <Title className="max-w-fit">{section.title}</Title>
-          </div>
-          <span className="text-lg">{section.description}</span>
-          <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
-            {section.bullets.map((bullet) => (
-              <div
-                key={bullet.title}
-                className={clsx(
-                  "flex gap-8 items-center",
-                  language === "ar" && "flex-row-reverse"
-                )}
-              >
-                <div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
-                  {bullet.icon && (
-                    <bullet.icon className="text-mti-rose-light w-6 h-6" />
-                  )}
-                </div>
-                <div className="flex flex-col gap-2">
-                  <span className="text-lg font-bold text-mti-rose-light">
-                    {bullet.title}
-                  </span>
-                  <ul className="list-disc gap-2 flex flex-col">
-                    {bullet.values.map((value) => (
-                      <li key={value}>{value}</li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-    ));
+	const renderStruct = (data: SectionStruct[], getBackgroundColor: (index: number) => string) =>
+		data.map((section, index) => (
+			<section id={section.id} key={section.id} className={`w-full ${getBackgroundColor(index)}`}>
+				<div
+					className={clsx(
+						"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
+						language === "ar" && "text-right",
+					)}>
+					<div className={clsx("w-full flex", language === "ar" && "justify-start")}>
+						<Title className="max-w-fit">{section.title}</Title>
+					</div>
+					<span className="text-lg">{section.description}</span>
+					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+						{section.bullets.map((bullet) => (
+							<div key={bullet.title} className={clsx("flex gap-8")}>
+								<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
+									{bullet.icon && <bullet.icon className="text-mti-rose-light w-6 h-6" />}
+								</div>
+								<div className="flex flex-col gap-2">
+									<span className="text-lg font-bold text-mti-rose-light">{bullet.title}</span>
+									<ul className="list-disc gap-2 flex flex-col">
+										{bullet.values.map((value) => (
+											<li key={value}>{value}</li>
+										))}
+									</ul>
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</section>
+		));
 
-  return (
-    <main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
-      <Navbar currentPage="/services" language={language} />
-      <section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
-        <div className="w-full h-full flex flex-col items-center justify-center">
-          <Title>{translation.services[language]}</Title>
-        </div>
-      </section>
-      {renderStruct(
-        struct,
-        (index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`
-      )}
-      <section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
-        <div className="w-full h-full flex flex-col items-center justify-center">
-          <Title className="max-w-fit">
-            {translation.corporate_educational_institutions[language]}
-          </Title>
-        </div>
-      </section>
-      {renderStruct(
-        final_struct,
-        (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`
-      )}
-      <Footer language={language} />
-    </main>
-  );
+	return (
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
+			<Navbar currentPage="/services" language={language} />
+			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
+				<div className="w-full h-full flex flex-col items-center justify-center">
+					<Title>{translation.services[language]}</Title>
+				</div>
+			</section>
+			{renderStruct(struct, (index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`)}
+			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
+				<div className="w-full h-full flex flex-col items-center justify-center">
+					<Title className="max-w-fit">{translation.corporate_educational_institutions[language]}</Title>
+				</div>
+			</section>
+			{renderStruct(final_struct, (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`)}
+			<Footer language={language} />
+		</main>
+	);
 }