- Started working on the about page;

- Updated the translation;
- Changed the language switch from flags to text

src/templates/About.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable @next/next/no-img-element */
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
+import Tag from "@/components/Tag";
+import translation from "@/translation/about.json";
+
+interface Props {
+	language: "en" | "ar";
+}
+
+export default function About({language}: Props) {
+	return (
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+			<Navbar currentPage="/about" language={language} />
+
+			<section className="w-full bg-mti-purple-light h-96 flex items-center justify-center overflow-hidden">
+				<img src="/about-banner.jpg" alt="IELTS Packages - Together we prepare for the future" className="bg-cover" />
+			</section>
+
+			<section className="w-full bg-white">
+				<div className="w-full grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-8 p-8 md:p-20 container mx-auto">
+					<Tag>{translation.encoach_benefits.tag[language]}</Tag>
+				</div>
+			</section>
+
+			<Footer language={language} />
+		</main>
+	);
+}

src/templates/Home.tsx

@@ -18,37 +18,13 @@ import Footer from "@/components/Footer";
 import translation from "@/translation/home.json";
 import reactStringReplace from "react-string-replace";
 import clsx from "clsx";
-
-const HIGHLIGHT = /({{.+}})/g;
+import Tag from "@/components/Tag";
+import Title from "@/components/Title";
 
 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">