Merged master into bug-fixing-12-Feb-24

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}

src/templates/About.tsx

@@ -30,7 +30,7 @@ interface Props {
 
 export default function About({language}: Props) {
 	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/about" language={language} />
 
 			<section className="w-full h-full bg-mti-purple text-white text-center p-8 md:p-16">
@@ -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
+				<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
-					className={clsx(
+					<div className={clsx("w-full flex")}>
-						"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>{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
+				<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
-					className={clsx(
+					<div className={clsx("w-full flex")}>
-						"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>{translation.expertise.title[language]}</Title>
 					</div>
 					<span className="text-lg">{translation.expertise.intro[language]}</span>

src/templates/ComingSoon.tsx

@@ -20,7 +20,7 @@ interface Props {
 
 export default function ComingSoon({ page, language }: Props) {
   return (
-    <main className="text-mti-black flex h-screen w-full flex-col bg-white">
+    <main className="text-mti-black flex h-screen w-full flex-col bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
       <Navbar currentPage={page} language={language} />
 
       <section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">

src/templates/History.tsx

@@ -50,7 +50,7 @@ const Element = ({date, label, isEven, language, Icon}: ElementProps) => {
 
 export default function History({language}: Props) {
 	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/history" language={language} />
 
 			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">

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")}>
+		<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" />

src/templates/Price.tsx

@@ -62,10 +62,9 @@ export default function Page({language}: {language: "en" | "ar"}) {
 		getData();
 	}, []);
 	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/price" language={language} />
-
+			<section className="w-full relative bg-white px-8 flex flex-col items-center text-center gap-4">
-			<section className="w-full relative bg-white px-8 flex flex-col items-center text-center gap-4" dir={language === "ar" ? "rtl" : "ltr"}>
 				<h2 className="text-3xl font-bold">{translation.title[language]}</h2>
 				<div className="grid grid-cols-2 gap-8">
 					{payments.map((p) => (

src/templates/Privacy.tsx

@@ -22,16 +22,16 @@ interface Content {
 
 export default function Privacy({language}: Props) {
 	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/terms" language={language} />
 
-			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16" dir={language === "ar" ? "rtl" : "ltr"}>
+			<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.title[language]}</Title>
 				</div>
 			</section>
 
-			<section id="terms" className="w-full h-fit bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
+			<section id="terms" className="w-full h-fit bg-white">
 				<div
 					className={clsx(
 						"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",

src/templates/Services.tsx

@@ -31,7 +31,7 @@ interface SectionStruct {
 	}[];
 }
 
-export default function About({ language }: Props) {
+export default function About({language}: Props) {
 	const struct = [
 		{
 			id: "english_writing_evaluation",
@@ -40,14 +40,12 @@ export default function About({ language }: Props) {
 			bullets: [
 				{
 					title: translation.english_writing_evaluation.evaluation[language],
-          values:
+					values: translation.english_writing_evaluation.evaluation_values[language],
-            translation.english_writing_evaluation.evaluation_values[language],
 					icon: BsBlockquoteLeft,
 				},
 				{
 					title: translation.english_writing_evaluation.acquire[language],
-          values:
+					values: translation.english_writing_evaluation.acquire_values[language],
-            translation.english_writing_evaluation.acquire_values[language],
 					icon: BsFillPencilFill,
 				},
 			],
@@ -55,21 +53,16 @@ export default function About({ language }: Props) {
 		{
 			id: "speaking_practice_evaluation",
 			title: translation.speaking_practice_evaluation.title[language],
-      description:
+			description: translation.speaking_practice_evaluation.description[language],
-        translation.speaking_practice_evaluation.description[language],
 			bullets: [
 				{
 					title: translation.speaking_practice_evaluation.evaluation[language],
-          values:
+					values: translation.speaking_practice_evaluation.evaluation_values[language],
-            translation.speaking_practice_evaluation.evaluation_values[
-              language
-            ],
 					icon: BsMic,
 				},
 				{
 					title: translation.speaking_practice_evaluation.acquire[language],
-          values:
+					values: translation.speaking_practice_evaluation.acquire_values[language],
-            translation.speaking_practice_evaluation.acquire_values[language],
 					icon: BsBook,
 				},
 			],
@@ -130,8 +123,7 @@ export default function About({ language }: Props) {
 			bullets: [
 				{
 					title: translation.unified_english_level_test.advantages[language],
-          values:
+					values: translation.unified_english_level_test.advantages_values[language],
-            translation.unified_english_level_test.advantages_values[language],
 					icon: BsBank,
 				},
 			],
@@ -146,41 +138,24 @@ export default function About({ language }: Props) {
 
 	const renderStruct = (data: SectionStruct[], getBackgroundColor: (index: number) => string) =>
 		data.map((section, index) => (
-      <section
+			<section id={section.id} key={section.id} className={`w-full ${getBackgroundColor(index)}`}>
-        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"
+						language === "ar" && "text-right",
-          )}
+					)}>
-        >
+					<div className={clsx("w-full flex", language === "ar" && "justify-start")}>
-          <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
+							<div key={bullet.title} className={clsx("flex gap-8")}>
-                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 && <bullet.icon className="text-mti-rose-light w-6 h-6" />}
-                    <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">
+									<span className="text-lg font-bold text-mti-rose-light">{bullet.title}</span>
-                    {bullet.title}
-                  </span>
 									<ul className="list-disc gap-2 flex flex-col">
 										{bullet.values.map((value) => (
 											<li key={value}>{value}</li>
@@ -195,28 +170,20 @@ export default function About({ language }: Props) {
 		));
 
 	return (
-    <main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<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(
+			{renderStruct(struct, (index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`)}
-        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">
+					<Title className="max-w-fit">{translation.corporate_educational_institutions[language]}</Title>
-            {translation.corporate_educational_institutions[language]}
-          </Title>
 				</div>
 			</section>
-      {renderStruct(
+			{renderStruct(final_struct, (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`)}
-        final_struct,
-        (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`
-      )}
 			<Footer language={language} />
 		</main>
 	);

src/templates/Terms.tsx

@@ -22,16 +22,16 @@ interface Content {
 
 export default function Terms({language}: Props) {
 	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
 			<Navbar currentPage="/terms" language={language} />
 
-			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16" dir={language === "ar" ? "rtl" : "ltr"}>
+			<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.title[language]}</Title>
 				</div>
 			</section>
 
-			<section id="terms" className="w-full h-fit bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
+			<section id="terms" className="w-full h-fit bg-white">
 				<div
 					className={clsx(
 						"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",