From e78f8834e621c51130c2a2b077cfc7069d8b1021 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.err@outlook.com>
Date: Thu, 1 Feb 2024 16:40:06 +0000
Subject: [PATCH] - Added "Coming soon" pages for future pages; - Added two
 more sections to the About page; - Fixed some typos;

---
 src/app/ar/contact/page.tsx  |   6 ++
 src/app/ar/history/page.tsx  |   6 ++
 src/app/ar/services/page.tsx |   6 ++
 src/app/contact/page.tsx     |   6 ++
 src/app/history/page.tsx     |   6 ++
 src/app/layout.tsx           |  61 +++++++++-----
 src/app/services/page.tsx    |   6 ++
 src/components/Footer.tsx    |   8 +-
 src/components/Navbar.tsx    |  52 ++++++------
 src/templates/About.tsx      | 152 ++++++++++++++++++++++++++++++++++-
 src/templates/ComingSoon.tsx |  35 ++++++++
 src/translation/about.json   | 122 +++++++++++++++++++++++++++-
 src/translation/home.json    |   2 +-
 13 files changed, 414 insertions(+), 54 deletions(-)
 create mode 100644 src/app/ar/contact/page.tsx
 create mode 100644 src/app/ar/history/page.tsx
 create mode 100644 src/app/ar/services/page.tsx
 create mode 100644 src/app/contact/page.tsx
 create mode 100644 src/app/history/page.tsx
 create mode 100644 src/app/services/page.tsx
 create mode 100644 src/templates/ComingSoon.tsx

diff --git a/src/app/ar/contact/page.tsx b/src/app/ar/contact/page.tsx
new file mode 100644
index 0000000..4d72b14
--- /dev/null
+++ b/src/app/ar/contact/page.tsx
@@ -0,0 +1,6 @@
+import About from "@/templates/About";
+import ComingSoon from "@/templates/ComingSoon";
+
+export default function Page() {
+	return <ComingSoon page="/contact" language="ar" />;
+}
diff --git a/src/app/ar/history/page.tsx b/src/app/ar/history/page.tsx
new file mode 100644
index 0000000..3c80ec4
--- /dev/null
+++ b/src/app/ar/history/page.tsx
@@ -0,0 +1,6 @@
+import About from "@/templates/About";
+import ComingSoon from "@/templates/ComingSoon";
+
+export default function Page() {
+	return <ComingSoon page="/history" language="ar" />;
+}
diff --git a/src/app/ar/services/page.tsx b/src/app/ar/services/page.tsx
new file mode 100644
index 0000000..32b6d2c
--- /dev/null
+++ b/src/app/ar/services/page.tsx
@@ -0,0 +1,6 @@
+import About from "@/templates/About";
+import ComingSoon from "@/templates/ComingSoon";
+
+export default function Page() {
+	return <ComingSoon page="/services" language="ar" />;
+}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..f3392ac
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,6 @@
+import About from "@/templates/About";
+import ComingSoon from "@/templates/ComingSoon";
+
+export default function Page() {
+	return <ComingSoon page="/contact" language="en" />;
+}
diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx
new file mode 100644
index 0000000..5962c09
--- /dev/null
+++ b/src/app/history/page.tsx
@@ -0,0 +1,6 @@
+import About from "@/templates/About";
+import ComingSoon from "@/templates/ComingSoon";
+
+export default function Page() {
+	return <ComingSoon page="/history" language="en" />;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f36abf7..a088e07 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,33 +1,52 @@
 /* eslint-disable @next/next/no-page-custom-font */
 import clsx from "clsx";
 import "./globals.css";
-import type {Metadata} from "next";
-import {Inter} from "next/font/google";
-import {Almarai} from "next/font/google";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { Almarai } from "next/font/google";
 
-const almarai = Almarai({subsets: ["arabic"], weight: ["300", "400", "700", "800"]});
+const almarai = Almarai({
+  subsets: ["arabic"],
+  weight: ["300", "400", "700", "800"],
+});
 
-const inter = Inter({subsets: ["latin"]});
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-	title: "EnCoach",
-	description: "We are the best service and the only one",
+  title: "EnCoach",
+  description: "We are the best service and the only one",
 };
 
-export default function RootLayout({children}: {children: React.ReactNode}) {
-	return (
-		<html lang="en">
-			<head>
-				<link rel="icon" href="/favicon.ico" sizes="any" />
-				<meta httpEquiv="Content-Security-Policy-Report-Only" content="default-src 'self' *.stripe.com *.encoach.com localhost" />
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+        <meta
+          httpEquiv="Content-Security-Policy-Report-Only"
+          content="default-src 'self' *.stripe.com *.encoach.com staging.encoach.com localhost"
+        />
 
-				<script async src="https://js.stripe.com/v3/pricing-table.js" />
+        <script async src="https://js.stripe.com/v3/pricing-table.js" />
 
-				<link rel="preconnect" href="https://fonts.googleapis.com" />
-				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-				<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet" />
-			</head>
-			<body className={clsx(almarai.className, "font-almarai")}>{children}</body>
-		</html>
-	);
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin=""
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body className={clsx(almarai.className, "font-almarai")}>
+        {children}
+      </body>
+    </html>
+  );
 }
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
new file mode 100644
index 0000000..a98ba39
--- /dev/null
+++ b/src/app/services/page.tsx
@@ -0,0 +1,6 @@
+import About from "@/templates/About";
+import ComingSoon from "@/templates/ComingSoon";
+
+export default function Page() {
+  return <ComingSoon page="/services" language="en" />;
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 771fb4c..e4256c4 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -21,10 +21,10 @@ export default function Footer({language}: Props) {
 						<span className="font-bold text-xl">{translation.navigation.text[language]}</span>
 						<div className="flex flex-col gap-2">
 							<Link href="/about">{translation.navigation.why_us[language]}</Link>
-							<Link href="/about">{translation.navigation.capabilities[language]}</Link>
-							<Link href="/about">{translation.navigation.expertise[language]}</Link>
-							<Link href="/about">{translation.navigation.history[language]}</Link>
-							<Link href="/about">{translation.navigation.contact[language]}</Link>
+							<Link href="/about#capabilities">{translation.navigation.capabilities[language]}</Link>
+							<Link href="/about#expertise">{translation.navigation.expertise[language]}</Link>
+							<Link href="/history">{translation.navigation.history[language]}</Link>
+							<Link href="/contact">{translation.navigation.contact[language]}</Link>
 						</div>
 					</div>
 					<div className="flex flex-col gap-4">
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0a4db3c..fbf09cc 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -24,43 +24,43 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 
 	return (
 		<>
-			<header className="w-full px-11 py-3 md:flex justify-between items-center -md:hidden shadow-sm">
+			<header className="-md:hidden w-full items-center justify-between px-11 py-3 shadow-sm md:flex">
 				<Link href="/">
 					<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
 				</Link>
-				<div className={clsx("flex gap-8 items-center w-fit", language === "ar" && "flex-row-reverse")}>
+				<div className={clsx("flex w-fit items-center gap-8", language === "ar" && "flex-row-reverse")}>
 					{items.map((item) => (
 						<Link
 							key={item.key}
 							href={language === "ar" ? `/${language}${item.page}` : item.page}
 							className={clsx(
-								"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
-								currentPage === item.page && "border-b-2 border-b-mti-purple-light",
+								"hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2",
+								currentPage === item.page && "border-b-mti-purple-light border-b-2",
 							)}>
 							{(translation as any)[item.key][language]}
 						</Link>
 					))}
 				</div>
-				<div className="flex items-center w-fit gap-4">
+				<div className="flex w-fit items-center gap-4">
 					<Link
 						href="https://platform.encoach.com"
-						className="transition ease-in-out duration-300 hover:text-white hover:bg-mti-purple-dark border border-mti-purple-dark px-8 py-2 rounded-xl">
+						className="hover:bg-mti-purple-dark border-mti-purple-dark rounded-xl border px-8 py-2 transition duration-300 ease-in-out hover:text-white">
 						{translation.platform[language]}
 					</Link>
 					<Link
-						href={language === "ar" ? `/${language}/join` : "join"}
-						className="transition ease-in-out duration-300 text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark border border-mti-purple-light bg-mti-purple-light px-8 py-2 rounded-xl">
+						href="https://platform.encoach.com/register"
+						className="hover:bg-mti-purple-dark hover:border-mti-purple-dark border-mti-purple-light bg-mti-purple-light rounded-xl border px-8 py-2 text-white transition duration-300 ease-in-out">
 						{translation.join[language]}
 					</Link>
 					{language === "ar" ? (
 						<Link
-							className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
+							className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
 							href={`${currentPage}`}>
 							EN
 						</Link>
 					) : (
 						<Link
-							className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
+							className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
 							href={`/ar${currentPage}`}>
 							AR
 						</Link>
@@ -91,27 +91,27 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 								leave="ease-in duration-200"
 								leaveFrom="opacity-100 scale-100"
 								leaveTo="opacity-0 scale-95">
-								<Dialog.Panel className="w-full h-screen transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all text-black flex flex-col gap-8">
-									<Dialog.Title as="header" className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden shadow-sm">
+								<Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
+									<Dialog.Title as="header" className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden">
 										<Link href="/">
 											<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
 										</Link>
-										<div className="flex gap-4 items-center">
+										<div className="flex items-center gap-4">
 											{language === "ar" ? (
 												<Link
-													className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
+													className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
 													href={`${currentPage}`}>
 													EN
 												</Link>
 											) : (
 												<Link
-													className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
+													className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
 													href={`/ar${currentPage}`}>
 													AR
 												</Link>
 											)}
 											<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
-												<BsXLg className="text-2xl text-mti-purple-light" onClick={() => setIsOpen(false)} />
+												<BsXLg className="text-mti-purple-light text-2xl" onClick={() => setIsOpen(false)} />
 											</div>
 										</div>
 									</Dialog.Title>
@@ -121,23 +121,23 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 												key={item.key}
 												href={language === "ar" ? `/${language}${item.page}` : item.page}
 												className={clsx(
-													"transition ease-in-out duration-300 w-fit",
+													"w-fit transition duration-300 ease-in-out",
 													currentPage === item.page &&
-														"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+														"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
 												)}>
 												{(translation as any)[item.key][language]}
 											</Link>
 										))}
 										<Link
-											href={language === "ar" ? `/${language}/join` : "join"}
+											href="https://platform.encoach.com/register"
 											className={clsx(
-												"transition ease-in-out duration-300 w-fit",
+												"w-fit transition duration-300 ease-in-out",
 												currentPage === "/join" &&
-													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+													"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
 											)}>
 											{translation.join[language]}
 										</Link>
-										<Link href="https://platform.encoach.com" className={clsx("transition ease-in-out duration-300 w-fit")}>
+										<Link href="https://platform.encoach.com" className={clsx("w-fit transition duration-300 ease-in-out")}>
 											{translation.platform[language]}
 										</Link>
 									</div>
@@ -148,20 +148,20 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 				</Dialog>
 			</Transition>
 
-			<header className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden">
+			<header className="-md:flex w-full items-center justify-between px-8 py-2 md:hidden">
 				<Link href="/">
 					<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
 				</Link>
-				<div className="flex gap-4 items-center">
+				<div className="flex items-center gap-4">
 					{language === "ar" ? (
 						<Link
-							className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
+							className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
 							href={`${currentPage}`}>
 							EN
 						</Link>
 					) : (
 						<Link
-							className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
+							className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
 							href={`/ar${currentPage}`}>
 							AR
 						</Link>
diff --git a/src/templates/About.tsx b/src/templates/About.tsx
index dc0e19c..4b691c0 100644
--- a/src/templates/About.tsx
+++ b/src/templates/About.tsx
@@ -6,7 +6,23 @@ import Title from "@/components/Title";
 import translation from "@/translation/about.json";
 import clsx from "clsx";
 import React from "react";
-import {BsEye, BsEyeFill, BsFlower3, BsRocketTakeoffFill} from "react-icons/bs";
+import {BiSolidBrain, BiWorld} from "react-icons/bi";
+import {
+	BsBook,
+	BsBookFill,
+	BsClipboard2CheckFill,
+	BsClipboard2Data,
+	BsClipboard2DataFill,
+	BsEye,
+	BsEyeFill,
+	BsFlower3,
+	BsGraphUp,
+	BsPersonFill,
+	BsPersonFillExclamation,
+	BsRepeat,
+	BsRocketTakeoffFill,
+	BsTranslate,
+} from "react-icons/bs";
 
 interface Props {
 	language: "en" | "ar";
@@ -97,6 +113,140 @@ export default function About({language}: Props) {
 				</div>
 			</section>
 
+			{/* 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")}>
+						<Title>{translation.capabilities.title[language]}</Title>
+					</div>
+					<span className="text-lg">{translation.capabilities.intro[language]}</span>
+					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+						<div className={clsx("flex gap-4 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">
+								<BsGraphUp 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">{translation.capabilities.analytics.title[language]}</span>
+								<p>{translation.capabilities.analytics.text[language]}</p>
+							</div>
+						</div>
+
+						<div className={clsx("flex gap-4 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">
+								<BiSolidBrain 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">{translation.capabilities.predictive.title[language]}</span>
+								<p>{translation.capabilities.predictive.text[language]}</p>
+							</div>
+						</div>
+
+						<div className={clsx("flex gap-4 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">
+								<BsTranslate 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">{translation.capabilities.nlp.title[language]}</span>
+								<p>{translation.capabilities.nlp.text[language]}</p>
+							</div>
+						</div>
+
+						<div className={clsx("flex gap-4 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">
+								<BsPersonFill 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">{translation.capabilities.engine.title[language]}</span>
+								<p>{translation.capabilities.engine.text[language]}</p>
+							</div>
+						</div>
+
+						<div className={clsx("flex gap-4 items-center md:col-span-2", 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">
+								<BsRepeat 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">
+									{translation.capabilities.continuous_learning.title[language]}
+								</span>
+								<p>{translation.capabilities.continuous_learning.text[language]}</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+
+			{/* 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")}>
+						<Title>{translation.expertise.title[language]}</Title>
+					</div>
+					<span className="text-lg">{translation.expertise.intro[language]}</span>
+					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+						<div className={clsx("flex gap-4 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">
+								<BiWorld 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">{translation.expertise.language.title[language]}</span>
+								<p>{translation.expertise.language.text[language]}</p>
+							</div>
+						</div>
+
+						<div className={clsx("flex gap-4 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">
+								<BsClipboard2CheckFill 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">{translation.expertise.ielts.title[language]}</span>
+								<p>{translation.expertise.ielts.text[language]}</p>
+							</div>
+						</div>
+
+						<div className={clsx("flex gap-4 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">
+								<BsClipboard2DataFill 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">{translation.expertise.alignment.title[language]}</span>
+								<p>{translation.expertise.alignment.text[language]}</p>
+							</div>
+						</div>
+
+						<div className={clsx("flex gap-4 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">
+								<BsPersonFillExclamation 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">{translation.expertise.native.title[language]}</span>
+								<p>{translation.expertise.native.text[language]}</p>
+							</div>
+						</div>
+
+						<div className={clsx("flex gap-4 items-center md:col-span-2", 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">
+								<BsBook 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">
+									{translation.expertise.knowledge_experience.title[language]}
+								</span>
+								<p>{translation.expertise.knowledge_experience.text[language]}</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+
 			<Footer language={language} />
 		</main>
 	);
diff --git a/src/templates/ComingSoon.tsx b/src/templates/ComingSoon.tsx
new file mode 100644
index 0000000..7fbaad3
--- /dev/null
+++ b/src/templates/ComingSoon.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable @next/next/no-img-element */
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
+import Tag from "@/components/Tag";
+import Title from "@/components/Title";
+import translation from "@/translation/about.json";
+import clsx from "clsx";
+import React from "react";
+import {
+  BsEye,
+  BsEyeFill,
+  BsFlower3,
+  BsRocketTakeoffFill,
+} from "react-icons/bs";
+
+interface Props {
+  page: string;
+  language: "en" | "ar";
+}
+
+export default function ComingSoon({ page, language }: Props) {
+  return (
+    <main className="text-mti-black flex h-screen w-full flex-col bg-white">
+      <Navbar currentPage={page} language={language} />
+
+      <section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">
+        <div className="flex h-full w-full flex-col items-center justify-center">
+          <Title>Coming soon...</Title>
+        </div>
+      </section>
+
+      <Footer language={language} />
+    </main>
+  );
+}
diff --git a/src/translation/about.json b/src/translation/about.json
index d20ebdb..51c931a 100644
--- a/src/translation/about.json
+++ b/src/translation/about.json
@@ -6,7 +6,7 @@
     },
     "text": {
       "en": "\"We are {{the best}} online learning platform that no one can compare to.\"",
-      "ar": "نحن { {أفضل} } منصة تعلم عبر الإنترنت ولا يوجد أي منافس يمكن مقارنته بنا.\""
+      "ar": "نحن {{أفضل}} منصة تعلم عبر الإنترنت ولا يوجد أي منافس يمكن مقارنته بنا.\""
     }
   },
   "about": {
@@ -60,5 +60,125 @@
       "en": "I am thrilled to welcome you to Encoach Platform, where innovation meets education in the most transformative way possible. In today’s fast-paced world, learning never stops, and our commitment at Encoach is to make education accessible, personalized, and effective for everyone.\nAt Encoach, we believe in the power of Artificial Intelligence to revolutionize the way we learn. Our AI-driven learning platform combines cutting-edge technology with educational expertise, creating a dynamic and tailored learning experience for each student. Through intelligent algorithms, personalized lesson plans, and interactive exercises, we aim to empower individuals to reach their full potential.\nOur team of dedicated experts and developers have worked tirelessly to create a platform that adapts to your unique learning style, ensuring that you receive the support you need, exactly when you need it. Whether you are preparing for exams, enhancing your professional skills, or simply exploring new subjects, our AI-driven approach is designed to make your learning journey engaging, effective, and enjoyable.\nAs the CEO of EnCoach Platform, I am incredibly proud of the work we have accomplished so far, and I am excited about the future we are building together. Education is the key to unlocking opportunities and shaping a brighter future, and with our Encoach learning platform, we are paving the way for a new era of learning excellence.\nThank you for choosing Encoach Platform as your learning partner. I invite you to explore our platform, engage with our innovative resources, and embark on a journey of knowledge and growth. Together, let’s embrace the limitless possibilities of learning powered by Artificial Intelligence.",
       "ar": "يسعدني أن أرحب بكم في منصة انكوتش، حيث يلتقي الابتكار بالتعليم بأكثر الطرق التحويلية الممكنة. في عالم اليوم سريع الخطى، لا يتوقف التعلم أبدًا، والتزامنا في منصة انكوتش جعل التعليم متاحًا وشخصيًا وفعالًا للجميع.\n في منصة انكوتش، نؤمن بقدرة الذكاء الاصطناعي على إحداث ثورة في الطريقة التي نتعلم بها. تجمع منصة انكوتش المعتمدة على الذكاء الاصطناعي لدينا بين التكنولوجيا المتطورة والخبرة التعليمية، مما يخلق تجربة تعليمية ديناميكية ومصممة خصيصًا لكل طالب ، من خلال الخوارزميات الذكية، وخطط المحتوى المخصص، والتمارين التفاعلية، نهدف إلى تمكين الأفراد من تحقيق إمكاناتهم الكاملة.\n لقد عمل فريقنا من الخبراء والمطورين لإنشاء منصة تتكيف مع أسلوب التعلم الفريد الخاص بك، مما يضمن حصولك على الدعم الذي تحتاج إليه. سواء كنت تستعد للامتحانات، أو تعزز مهاراتك المهنية، أو تستكشف ببساطة موضوعات جديدة، فقد تم تصميم نهجنا القائم على الذكاء الاصطناعي لجعل رحلة التعلم الخاصة بك جذابة وفعالة وممتعة.\n بصفتي الرئيس التنفيذي لمنصة انكوتش، أنا فخور للغاية بالعمل الذي أنجزناه حتى الآن، وأنا متحمس للمستقبل الذي نبنيه معًا. يعد التعليم هو المفتاح لفتح الفرص وتشكيل مستقبل أكثر إشراقًا، ومن خلال منصة انكوتش المعتمدة على الذكاء الاصطناعي، فإننا نمهد الطريق لعصر جديد من التميز في التعلم.\n نشكرك على اختيار انكوتش كشريك التعلم الخاص بك.\n أدعوك لاستكشاف منصتنا، والتفاعل مع مواردنا المبتكرة، والشروع في رحلة من المعرفة والنمو. معًا، دعونا نحتضن الإمكانيات اللامحدودة للتعلم المدعوم بالذكاء الاصطناعي."
     }
+  },
+  "capabilities": {
+    "title": {
+      "en": "Capabilities of {{EnCoach}}",
+      "ar": "Capabilities of {{EnCoach}}"
+    },
+    "intro": {
+      "en": "EnCoach is a powerful platform that offers advanced data analytics, predictive modeling, natural language processing (NLP), personalization and recommendation engines.",
+      "ar": "إنكوتش هي منصة قوية تقوم على تقديم تحليل  البيانات بشكل متقدم  ومعالجة اللغة الطبيعية للمستخدمين مع تقديم توصيات مخصصة للمستخدم لتطوير لغته وتحسين أدائه باختبار الآيلتس."
+    },
+    "analytics": {
+      "title": {
+        "en": "Advanced Data Analytics",
+        "ar": "تحليل البيانات المتقدمة"
+      },
+      "text": {
+        "en": "With the ability to analyze large volumes of data, EnCoach highlights the patterns, trends, and insights that may not be easily identified through the traditional methods. This allows users and businesses to make data-driven decisions and gain a competitive edge.",
+        "ar": "بفضل قدرات المنصة على تحليل كميات كبيرة من البيانات تسلط انكوتش الضوء على الأنماط والاتجاهات والأفكار لدى المختبر للغة الإنجليزية التي قد لا يتم تحديدها بسهولة من خلال الأساليب التقليدية. يتيح ذلك للمستخدمين و الجامعات والكليات والشركات اتخاذ قرارات قائمة على البيانات والحصول على ميزة تنافسية."
+      }
+    },
+    "predictive": {
+      "title": {
+        "en": "Predictive Modeling",
+        "ar": "النمذجة التنبؤية"
+      },
+      "text": {
+        "en": "EnCoach can develop predictive models that forecast future outcomes based on historical data. These models enable users to anticipate English levels and proficiency, facilitating proactive strategies and planning.",
+        "ar": "يمكن للإنكوتش تطوير نماذج تنبؤية تتنبأ بالنتائج المستقبلية استنادًا إلى البيانات السابقة. تتيح هذه النماذج للمستخدمين التنبؤ بمستويات واتقان اللغة الإنجليزية، مما يسهل اتباع استراتيجيات استباقية والتخطيط المستقبلي. وتطوير مستواهم بصورة أسرع وأكثر إتقانا."
+      }
+    },
+    "nlp": {
+      "title": {
+        "en": "Natural Language Processing (NLP)",
+        "ar": "معالجة اللغة الطبيعية"
+      },
+      "text": {
+        "en": "EnCoach incorporates NLP capabilities, allowing it to understand and interpret human language. This enables automated text analysis and language translation, opening up opportunities for chatbots, voice assistants, and intelligent search functionalities.",
+        "ar": "تتضمن إنكوتش قدرات اللغة الطبيعية، مما يتيح فهم وتفسير اللغة البشرية. يتيح ذلك تحليل النصوص التلقائي وترجمة اللغة، مما يفتح الفرص أمام وظائف الدردشة الآلية ومساعدي الصوت ووظائف البحث الذكية."
+      }
+    },
+    "engine": {
+      "title": {
+        "en": "Personalization and Recommendation Engines",
+        "ar": "محرك توصيات مخصصة"
+      },
+      "text": {
+        "en": "EnCoach excels at personalization by leveraging machine learning algorithms to understand user preferences and behaviors. This enables the delivery of personalized recommendations, enhancing user engagement and satisfaction.",
+        "ar": "يتفوق إنكوتش في تخصيص الخدمة من خلال استغلال خوارزميات التعلم الآلي لفهم تفضيلات وسلوكيات المستخدم. مما يتيح بذلك تقديم توصيات مخصصة لشخص بعينه ، مما يعزز التفاعل والرضا لدى المستخدم"
+      }
+    },
+    "continuous_learning": {
+      "title": {
+        "en": "Continuous Learning and Adaptation with EnCoach Platform",
+        "ar": "التعلم المستمر والتكيف باستخدام منصة إنكوتش"
+      },
+      "text": {
+        "en": "EnCoach's platform features the ability to learn from new data and adapt its models continuously. This guarantees that EnCoach remains current and can respond to changing circumstances, ultimately enhancing accuracy and performance over time.",
+        "ar": "منصة إنكوتش تتميز بقدرتها على التعلم من البيانات الجديدة وتكييف نماذجها بشكل مستمر. هذا يضمن أن المنصة تظل محدّثًة وقادرًة على التكيف مع التغيرات المحيطة، مما يعزز دقة النتائج وأداء النظام مع مرور الوقت"
+      }
+    }
+  },
+  "expertise": {
+    "title": {
+      "en": "Expertise of {{EnCoach}}",
+      "ar": "خبراء الإنكوتش"
+    },
+    "intro": {
+      "en": "Our team is privileged to have a group of experts specializing in English teaching and IELTS preparation, who have joined us to contribute to the development and review of the EnCoach platform. These professionals bring a wealth of knowledge and expertise to our team.",
+      "ar": "يتشرف فريقنا بوجود مجموعة من الخبراء العالميين المتخصصين في تدريس اللغة الإنجليزية والتحضير لاختبار الآيلتس، الذين انضموا إلينا للمساهمة في تطوير ومراجعة منصة الإنكوتش. يجلب هؤلاء المحترفون ثروة من المعرفة والخبرة لفريقنا."
+    },
+    "language": {
+      "title": {
+        "en": "Language Acquisition",
+        "ar": "اكتساب اللغة"
+      },
+      "text": {
+        "en": "With their extensive background in English teaching, these experts have a deep understanding of language acquisition, effective teaching methodologies, and the specific challenges faced by English language learners.",
+        "ar": "بفضل خلفيتهم الواسعة في تدريس اللغة الإنجليزية، يتمتع هؤلاء الخبراء بفهم عميق لاكتساب اللغة ومنهجيات التدريس الفعالة والتحديات المحددة التي يواجهها متعلمو اللغة الإنجليزية، بناءا عليه تم تصميم المنصة."
+      }
+    },
+    "ielts": {
+      "title": {
+        "en": "IELTS Preparation",
+        "ar": "إعداد الدارس لاختبار الآيلتس"
+      },
+      "text": {
+        "en": "Their experience in IELTS preparation enables them to identify the key areas that require focus and provide valuable insights on how to optimize performance in the exam.",
+        "ar": "تتيح لهم خبرتهم في الإعداد لامتحان الآيلتس تحديد المجالات الرئيسية التي تتطلب التركيز وتقديم رؤى قيمة حول كيفية تحسين الأداء في الاختبار."
+      }
+    },
+    "alignment": {
+      "title": {
+        "en": "Alignment",
+        "ar": "التعديل حسب القواعد العالمية للغة"
+      },
+      "text": {
+        "en": "Their role in reviewing the EnCoach platform ensures that it aligns closely with the IELTS marking criteria. They meticulously analyze the criteria used by examiners to assess candidates' language proficiency and provide valuable input to ensure that our platform accurately reflects those standards.",
+        "ar": "يضمن دور خبرائنا  في مراجعة منصة الإنكوتش توافقها بشكل وثيق مع معايير تقييم الآيلتس. إنهم يقومون بتحليل دقيق للمعايير التي يستخدمها الممتحنين لتقييم الكفاءة اللغوية للمرشحين ويقدمون مدخلات قيمة للتأكد من أن منصتنا تعكس تلك المعايير بدقة."
+      }
+    },
+    "native": {
+      "title": {
+        "en": "Native Speaker Expertise",
+        "ar": "خبرات أصحاب اللغة الناطقين بها"
+      },
+      "text": {
+        "en": "As native speakers of English, they possess a natural command of the language, including its subtle nuances, idiomatic expressions, and cultural context. This native speaker expertise adds an extra layer of authenticity to the EnCoach platform.",
+        "ar": "وباعتبارهم متحدثين أصليين للغة الإنجليزية، فإنهم يمتلكون إتقانًا طبيعيًا للغة، بما في ذلك الفروق الدقيقة والتعبيرات الاصطلاحية والسياق الثقافي. تضيف خبرة المتحدث الأصلي طبقة إضافية من الأصالة إلى منصة الإنكوتش"
+      }
+    },
+    "knowledge_experience": {
+      "title": {
+        "en": "Combined Knowledge and Experience",
+        "ar": "الجمع بين المعرفة والخبرة"
+      },
+      "text": {
+        "en": "The combined knowledge and experience of these experts, both as English teachers and native speakers, significantly enhance the quality and effectiveness of the EnCoach platform.",
+        "ar": "إن المعرفة والخبرة المشتركة لهؤلاء الخبراء، سواء كمدرسين للغة الإنجليزية أو كمتحدثين أصليين، تعمل بشكل كبير على تحسين جودة وفعالية منصة الإنكوتش."
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/src/translation/home.json b/src/translation/home.json
index b89229e..9428d4d 100644
--- a/src/translation/home.json
+++ b/src/translation/home.json
@@ -106,7 +106,7 @@
     },
     "title": {
       "en": "\"We are {{the best}} online learning platform that no one can compare to.\"",
-      "ar": "نحن { {أفضل} } منصة تعلم عبر الإنترنت ولا يوجد أي منافس يمكن مقارنته بنا."
+      "ar": "نحن {{أفضل}} منصة تعلم عبر الإنترنت ولا يوجد أي منافس يمكن مقارنته بنا."
     },
     "description": {
       "en": "At EnCoach, we believe that education is with you all throughout your life. Our mission is to make that education accessible, personalized, and effective for everyone. Our learning platform is where innovation meets education, creating a transformative experience that empowers individuals to reach their full potential.",