Translated the home page to work with both EN and AR

src/app/ar/page.tsx

@@ -0,0 +1,6 @@
+import Home from "@/templates/Home";
+import {NextPageContext} from "next";
+
+export default function Page({}: NextPageContext) {
+	return <Home language="ar" />;
+}

src/app/join/page.tsx

@@ -9,7 +9,7 @@ import Footer from "@/components/Footer";
 export default function Home() {
 	return (
 		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
-			<Navbar currentPage="/join" />
+			<Navbar currentPage="/join" language="en" />
 
 			<section className="w-full relative bg-white py-20 lg:py-48 px-8 flex flex-col items-center text-center gap-4">
 				<h2 className="text-3xl font-bold">Available Packages</h2>
@@ -22,7 +22,7 @@ export default function Home() {
 				</div>
 			</section>
 
-			<Footer />
+			<Footer language="en" />
 		</main>
 	);
 }

src/app/layout.tsx

@@ -1,8 +1,6 @@
 import "./globals.css";
 import type {Metadata} from "next";
 import {Inter} from "next/font/google";
-import {Elements} from "@stripe/react-stripe-js";
-import {loadStripe} from "@stripe/stripe-js";
 
 const inter = Inter({subsets: ["latin"]});
 

src/app/page.tsx

@@ -1,168 +1,5 @@
-/* eslint-disable @next/next/no-img-element */
+import Home from "@/templates/Home";
-import Link from "next/link";
-import {BsCardChecklist, BsClipboardFill, BsClockFill, BsInstagram, BsShieldFillCheck, BsTwitter} from "react-icons/bs";
-import {BiLogoFacebook} from "react-icons/bi";
-import Navbar from "@/components/Navbar";
-import Footer from "@/components/Footer";
 
-export default function Home() {
+export default function Page() {
-	return (
+	return <Home language="en" />;
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
-			<Navbar currentPage="/" />
-
-			<section className="w-full relative bg-white">
-				<img src="/home/first_banner.png" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
-				<Link href="/join">
-					<button className="absolute bottom-1/10 left-1/12 bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
-						Get Started
-					</button>
-				</Link>
-			</section>
-
-			<section className="w-full grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-8 p-8 md:p-24 bg-white">
-				<div className="flex flex-col items-center gap-6">
-					<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
-						<BsClockFill className="text-mti-rose-light w-10 h-10" />
-					</div>
-					<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
-						<span className="font-bold text-xl">Placeholder</span>
-						<span>Sit accusamus maxime maiores rerum cupiditate dolorum inventore.</span>
-					</div>
-				</div>
-				<div className="flex flex-col items-center gap-6">
-					<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
-						<BsClipboardFill className="text-mti-rose-light w-10 h-10" />
-					</div>
-					<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
-						<span className="font-bold text-xl">Placeholder</span>
-						<span>Sit accusamus maxime maiores rerum cupiditate dolorum inventore.</span>
-					</div>
-				</div>
-				<div className="flex flex-col items-center gap-6">
-					<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
-						<BsCardChecklist className="text-mti-rose-light w-10 h-10" />
-					</div>
-					<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
-						<span className="font-bold text-xl">Placeholder</span>
-						<span>Sit accusamus maxime maiores rerum cupiditate dolorum inventore.</span>
-					</div>
-				</div>
-				<div className="flex flex-col items-center gap-6">
-					<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
-						<BsShieldFillCheck className="text-mti-rose-light w-10 h-10" />
-					</div>
-					<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
-						<span className="font-bold text-xl">Placeholder</span>
-						<span>Sit accusamus maxime maiores rerum cupiditate dolorum inventore.</span>
-					</div>
-				</div>
-			</section>
-
-			<section className="w-full p-8 py-16 md:py-32 md:px-16 lg:px-28 bg-mti-gray-seasalt items-center justify-center flex flex-col gap-10 relative">
-				<span className="text-xl">
-					<span className="text-white bg-mti-rose-light px-1 py-0">Interested</span> in us?
-				</span>
-				<span className="text-4xl font-bold max-w-sm text-center">
-					Contact us and <span className="text-mti-rose-light">Start</span> Learning
-				</span>
-				<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">
-						Contact Us
-					</button>
-				</Link>
-				<div className="lg:absolute top-1/2 lg:-translate-y-2/3 right-1/6 flex flex-col items-center">
-					<em className="text-xs text-mti-purple-light font-semibold">WhatsApp Contact</em>
-					<img className="w-32 h-32" alt="WhatsApp QR Code for MTI" src="/whatsapp_qrcode.png" />
-					<div className="w-full h-full relative">
-						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6" />
-						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-0 -left-6" />
-						<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-6 -left-6" />
-						<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-12 -left-6" />
-						<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-18 -left-6" />
-						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 -left-6" />
-						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-6" />
-						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-12" />
-						<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-18" />
-					</div>
-				</div>
-			</section>
-
-			<section className="w-full p-8 md:p-20 lg:p-32 flex flex-col gap-12 md:flex-row items-center justify-around bg-white">
-				<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">About us</span> Message from CEO
-					</span>
-					<div className="flex flex-col gap-3">
-						<span className="text-4xl font-bold max-w-md">
-							&ldquo;We are the best service and the <span className="text-mti-rose-light">only one</span>&rdquo;
-						</span>
-						<p className="max-w-lg text-base">
-							Engaged in education, especially in providing teaching services for students who do not have the opportunity to learn in
-							conventional institutions.
-						</p>
-					</div>
-					<Link href="/about">
-						<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">
-							Learn more
-						</button>
-					</Link>
-				</div>
-				<div className="w-fit h-fit relative">
-					<div className="w-64 h-64 md:w-80 md:h-80 rounded-t-[80px] rounded-br-[80px] md:rounded-t-[120px] md:rounded-br-[120px] overflow-hidden">
-						<img className="w-full h-full" alt="MTI's CEO" src="/placeholder_person.png" />
-					</div>
-					<div>
-						<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 -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" />
-						<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-20" />
-						<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-30" />
-					</div>
-				</div>
-			</section>
-
-			<section className="w-full p-8 md:p-20 xl:p-32 flex bg-white flex-col gap-8 md:gap-24 lg:gap-32">
-				<div className="flex flex-col gap-12 w-full">
-					<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">Our Partners</span>
-					<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
-						<img src="/logos/dq_logo.png" alt="DQ's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
-						<img
-							src="/logos/knowledge_grid_academy_logo.png"
-							alt="Knowledge Grid Academy's Logo"
-							className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
-						/>
-						<img src="/logos/sohar_logo.png" alt="Sohar's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
-						<img
-							src="/logos/partner_logo_unknown.png"
-							alt="Unknown Partner's Logo"
-							className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
-						/>
-						<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
-							<img src="/logos/sohar_aluminium_logo.png" alt="Sohar Aluminium's Logo" />
-						</div>
-					</div>
-				</div>
-				<div className="flex flex-col gap-12 w-full">
-					<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">Accreditation</span>
-					<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
-						<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
-							<img src="/logos/idp_logo.png" alt="IDP's Logo" />
-						</div>
-						<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
-							<img src="/logos/ielts_logo.png" alt="IELTS's Logo" />
-						</div>
-						<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
-							<img src="/logos/ec_council_logo.png" alt="EC Council's Logo" />
-						</div>
-					</div>
-				</div>
-			</section>
-
-			<Footer />
-		</main>
-	);
 }

src/app/success/page.tsx

@@ -53,7 +53,7 @@ export default function Home() {
 
 	return (
 		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
-			<Navbar currentPage="/success" />
+			<Navbar currentPage="/success" language="en" />
 
 			<section className="w-full h-full relative bg-white py-32 flex flex-col items-center justify-center text-center gap-4">
 				{isLoading && (
@@ -83,7 +83,7 @@ export default function Home() {
 				)}
 			</section>
 
-			<Footer />
+			<Footer language="en" />
 		</main>
 	);
 }

src/components/Footer.tsx

@@ -1,42 +1,46 @@
 import Link from "next/link";
 import {BiLogoFacebook} from "react-icons/bi";
 import {BsInstagram, BsTwitter} from "react-icons/bs";
+import translation from "@/translation/footer.json";
 
-export default function Footer() {
+interface Props {
+	language: "en" | "ar";
+}
+
+export default function Footer({language}: Props) {
 	return (
 		<>
-			<section className="w-full py-10 px-8 md:px-28 bg-mti-gray-seasalt flex flex-col md:flex-row md:justify-between gap-8">
+			<section className="bg-mti-gray-seasalt w-full">
+				<div className="w-full py-10 px-8 md:px-28 flex flex-col md:flex-row md:justify-between gap-8 lg:container lg:mx-auto">
 					<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">Navigation</span>
+						<span className="font-bold text-xl">{translation.navigation.text[language]}</span>
 						<div className="flex flex-col gap-2">
-						<Link href="/about">Why us</Link>
+							<Link href="/about">{translation.navigation.why_us[language]}</Link>
-						<Link href="/about">Capabilities</Link>
+							<Link href="/about">{translation.navigation.capabilities[language]}</Link>
-						<Link href="/about">Expertise</Link>
+							<Link href="/about">{translation.navigation.expertise[language]}</Link>
-						<Link href="/about">History</Link>
+							<Link href="/about">{translation.navigation.history[language]}</Link>
-						<Link href="/about">Contact</Link>
+							<Link href="/about">{translation.navigation.contact[language]}</Link>
 						</div>
 					</div>
 					<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">Services</span>
+						<span className="font-bold text-xl">{translation.services.text[language]}</span>
 						<div className="flex flex-col gap-2">
-						<Link href="#benefits">EnCoach benefits</Link>
+							<Link href="#benefits">{translation.services.encoach_benefits[language]}</Link>
-						<Link href="#testimonials">Student testimonials</Link>
+							<Link href="#testimonials">{translation.services.student_testimonials[language]}</Link>
 						</div>
 					</div>
 					<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">About</span>
+						<span className="font-bold text-xl">{translation.about.text[language]}</span>
 						<div className="flex flex-col gap-2">
-						<Link href="/terms">Terms and Conditions</Link>
+							<Link href="/terms">{translation.about.terms[language]}</Link>
-						<Link href="/privacy-policy">Privacy Policy</Link>
+							<Link href="/privacy-policy">{translation.about.privacy_policy[language]}</Link>
-						<Link href="/about">About</Link>
+							<Link href="/about">{translation.about.text[language]}</Link>
 						</div>
 					</div>
 					<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">Get in Touch</span>
+						<span className="font-bold text-xl">{translation.get_in_touch.title[language]}</span>
 						<div className="flex flex-col gap-4">
-						<span className="max-w-[280px]">
+							<span className="max-w-[280px]">{translation.get_in_touch.text[language]}</span>
-							Stay connected with us and know the latest updates about our services through various social media
-						</span>
 							<div className="flex gap-6 items-center">
 								<Link
 									href="https://facebook.com"
@@ -56,9 +60,12 @@ export default function Footer() {
 							</div>
 						</div>
 					</div>
+				</div>
 			</section>
 
-			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">© EnCoach 2023 all rights reserved</footer>
+			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">
+				© {translation.copyright[language]}
+			</footer>
 		</>
 	);
 }

src/components/Navbar.tsx

@@ -1,13 +1,16 @@
+/* eslint-disable @next/next/no-img-element */
 "use client";
 
 import Link from "next/link";
 import Image from "next/image";
 import clsx from "clsx";
 import {BsList, BsXLg} from "react-icons/bs";
-import {Fragment, useState} from "react";
+import {Fragment, useEffect, useState} from "react";
 import {Dialog, Menu, Transition} from "@headlessui/react";
+import {useRouter} from "next/navigation";
+import translation from "@/translation/navbar.json";
 
-export default function Navbar({currentPage}: {currentPage: string}) {
+export default function Navbar({currentPage, language}: {currentPage: string; language: "en" | "ar"}) {
 	const [isOpen, setIsOpen] = useState(false);
 
 	return (
@@ -23,7 +26,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
 							currentPage === "/" && "border-b-2 border-b-mti-purple-light",
 						)}>
-						Home
+						{translation.home[language]}
 					</Link>
 					<Link
 						href=""
@@ -31,7 +34,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
 							currentPage === "/services" && "border-b-2 border-b-mti-purple-light",
 						)}>
-						Services
+						{translation.services[language]}
 					</Link>
 					<Link
 						href=""
@@ -39,7 +42,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
 							currentPage === "/about" && "border-b-2 border-b-mti-purple-light",
 						)}>
-						About us
+						{translation.about[language]}
 					</Link>
 					<Link
 						href=""
@@ -47,7 +50,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
 							currentPage === "/history" && "border-b-2 border-b-mti-purple-light",
 						)}>
-						History
+						{translation.history[language]}
 					</Link>
 					<Link
 						href=""
@@ -55,20 +58,39 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
 							currentPage === "/contact" && "border-b-2 border-b-mti-purple-light",
 						)}>
-						Contact
+						{translation.contact[language]}
 					</Link>
 				</div>
 				<div className="flex items-center w-fit 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">
-						Platform
+						{translation.platform[language]}
 					</Link>
 					<Link
 						href="/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">
-						Join
+						{translation.join[language]}
 					</Link>
+					<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-8 h-8 relative">
+						{language === "ar" ? (
+							<Link href={`${currentPage}`}>
+								<img
+									src="uk-flag.png"
+									alt="English"
+									className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
+								/>
+							</Link>
+						) : (
+							<Link href={`/ar${currentPage}`}>
+								<img
+									src="oman-flag.jpg"
+									alt="Arabic"
+									className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
+								/>
+							</Link>
+						)}
+					</div>
 				</div>
 			</header>
 
@@ -100,9 +122,30 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 										<Link href="/">
 											<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
 										</Link>
+										<div className="flex gap-4 items-center">
+											<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-6 h-6 relative">
+												{language === "ar" ? (
+													<Link href={`${currentPage}`}>
+														<img
+															src="uk-flag.png"
+															alt="English"
+															className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
+														/>
+													</Link>
+												) : (
+													<Link href={`/ar${currentPage}`}>
+														<img
+															src="oman-flag.jpg"
+															alt="Arabic"
+															className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
+														/>
+													</Link>
+												)}
+											</div>
 											<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
 												<BsXLg className="text-2xl text-mti-purple-light" onClick={() => setIsOpen(false)} />
 											</div>
+										</div>
 									</Dialog.Title>
 									<div className="flex flex-col gap-6 px-8 text-lg">
 										<Link
@@ -111,7 +154,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 												"transition ease-in-out duration-300 w-fit",
 												currentPage === "/" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
 											)}>
-											Home
+											{translation.home[language]}
 										</Link>
 										<Link
 											href=""
@@ -120,7 +163,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 												currentPage === "/services" &&
 													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
 											)}>
-											Services
+											{translation.services[language]}
 										</Link>
 										<Link
 											href=""
@@ -129,7 +172,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 												currentPage === "/about" &&
 													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
 											)}>
-											About us
+											{translation.about[language]}
 										</Link>
 										<Link
 											href=""
@@ -138,7 +181,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 												currentPage === "/history" &&
 													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
 											)}>
-											History
+											{translation.history[language]}
 										</Link>
 										<Link
 											href=""
@@ -147,7 +190,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 												currentPage === "/contact" &&
 													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
 											)}>
-											Contact
+											{translation.contact[language]}
 										</Link>
 										<Link
 											href="/join"
@@ -156,10 +199,10 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 												currentPage === "/join" &&
 													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
 											)}>
-											Join
+											{translation.join[language]}
 										</Link>
 										<Link href="https://platform.encoach.com" className={clsx("transition ease-in-out duration-300 w-fit")}>
-											Platform
+											{translation.platform[language]}
 										</Link>
 									</div>
 								</Dialog.Panel>
@@ -173,9 +216,30 @@ export default function Navbar({currentPage}: {currentPage: string}) {
 				<Link href="/">
 					<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
 				</Link>
+				<div className="flex gap-4 items-center">
+					<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-6 h-6 relative">
+						{language === "ar" ? (
+							<Link href={`${currentPage}`}>
+								<img
+									src="uk-flag.png"
+									alt="English"
+									className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
+								/>
+							</Link>
+						) : (
+							<Link href={`/ar${currentPage}`}>
+								<img
+									src="oman-flag.jpg"
+									alt="Arabic"
+									className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
+								/>
+							</Link>
+						)}
+					</div>
 					<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
 						<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
 					</div>
+				</div>
 			</header>
 		</>
 	);

src/templates/Home.tsx

@@ -0,0 +1,222 @@
+/* eslint-disable @next/next/no-img-element */
+import Link from "next/link";
+import {BsCardChecklist, BsClipboardFill, BsClockFill, BsInstagram, BsShieldFillCheck, BsTwitter} from "react-icons/bs";
+import {BiLogoFacebook} from "react-icons/bi";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import translation from "@/translation/home.json";
+
+interface Props {
+	language: "en" | "ar";
+}
+
+export default function Home({language}: Props) {
+	return (
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+			<Navbar currentPage="/" language={language} />
+
+			<section className="w-full relative bg-white">
+				<img src="/home/first_banner.png" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
+				<Link href="/join">
+					<button className="absolute bottom-1/10 left-1/12 bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
+						{translation.get_started_btn[language]}
+					</button>
+				</Link>
+			</section>
+
+			{/* Perks 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-24 container mx-auto">
+					<div className="flex flex-col items-center gap-6">
+						<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
+							<BsClockFill className="text-mti-rose-light w-10 h-10" />
+						</div>
+						<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
+							<span className="font-bold text-xl">{translation.perks["24_hour_access"].title[language]}</span>
+							<span>{translation.perks["24_hour_access"].description[language]}</span>
+						</div>
+					</div>
+					<div className="flex flex-col items-center gap-6">
+						<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
+							<BsClipboardFill className="text-mti-rose-light w-10 h-10" />
+						</div>
+						<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
+							<span className="font-bold text-xl">{translation.perks.complete_package.title[language]}</span>
+							<span>{translation.perks.complete_package.description[language]}</span>
+						</div>
+					</div>
+					<div className="flex flex-col items-center gap-6">
+						<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
+							<BsCardChecklist className="text-mti-rose-light w-10 h-10" />
+						</div>
+						<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
+							<span className="font-bold text-xl">{translation.perks.enjoy_learning.title[language]}</span>
+							<span>{translation.perks.enjoy_learning.description[language]}</span>
+						</div>
+					</div>
+					<div className="flex flex-col items-center gap-6">
+						<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
+							<BsShieldFillCheck className="text-mti-rose-light w-10 h-10" />
+						</div>
+						<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
+							<span className="font-bold text-xl">{translation.perks.guaranteed_results.title[language]}</span>
+							<span>{translation.perks.guaranteed_results.description[language]}</span>
+						</div>
+					</div>
+				</div>
+			</section>
+
+			{/* EnCoach Benefits Section */}
+			<section className="w-full bg-white">
+				<div className="w-full p-8 md:p-20 lg:p-32 flex flex-col-reverse gap-8 md:gap-24 md:flex-row items-center justify-center container mx-auto">
+					<div className="relative h-full grid grid-cols-2 place-items-center gap-8 -md:px-8">
+						<div className="w-60 h-60 rounded-xl overflow-hidden flex items-center justify-center">
+							<img src="/person_laptop_3.jpg" alt="Person using a laptop" />
+						</div>
+						<div className="w-60 h-80 rounded-xl overflow-hidden flex items-center justify-center row-span-2">
+							<img src="/person_laptop_1.jpg" alt="Person using a laptop" />
+						</div>
+						<div className="w-60 h-60 rounded-xl overflow-hidden flex items-center justify-center">
+							<img src="/person_laptop_2.jpg" alt="Person using a laptop" />
+						</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>
+						<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>
+							<p className="max-w-lg text-base">{translation.encoach_benefits.description[language]}</p>
+						</div>
+						<Link href="/about">
+							<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.learn_more[language]}
+							</button>
+						</Link>
+					</div>
+				</div>
+			</section>
+
+			{/* 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>
+					<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]}
+						</button>
+					</Link>
+					<div className="lg:absolute top-1/2 lg:-translate-y-2/3 right-1/6 flex flex-col items-center">
+						<em className="text-xs text-mti-purple-light font-semibold">{translation.interested.whatsapp[language]}</em>
+						<img className="w-32 h-32" alt="WhatsApp QR Code for MTI" src="/whatsapp_qrcode.png" />
+						<div className="w-full h-full relative">
+							<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6" />
+							<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-0 -left-6" />
+							<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-6 -left-6" />
+							<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-12 -left-6" />
+							<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-18 -left-6" />
+							<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 -left-6" />
+							<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-6" />
+							<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-12" />
+							<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-18" />
+						</div>
+					</div>
+				</div>
+			</section>
+
+			{/* CEO Message Section */}
+			<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>
+						<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>
+							<p className="max-w-lg text-base">{translation.ceo_message.description[language]}</p>
+						</div>
+						<Link href="/about">
+							<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.learn_more[language]}
+							</button>
+						</Link>
+					</div>
+					<div className="w-fit h-fit relative">
+						<div className="w-64 h-64 md:w-80 md:h-80 rounded-t-[80px] rounded-br-[80px] md:rounded-t-[120px] md:rounded-br-[120px] overflow-hidden">
+							<img className="w-full h-full" alt="MTI's CEO" src="/placeholder_person.png" />
+						</div>
+						<div>
+							<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 -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" />
+							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-20" />
+							<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-30" />
+						</div>
+					</div>
+				</div>
+			</section>
+
+			{/* Partner and Accreditation Section */}
+			<section className="w-full bg-white">
+				<div className="p-8 md:p-20 xl:p-32 flex flex-col gap-8 md:gap-24 lg:gap-32 w-full container mx-auto">
+					<div className="flex flex-col gap-12 w-full">
+						<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">{translation.our_partners[language]}</span>
+						<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
+							<img src="/logos/dq_logo.png" alt="DQ's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
+							<img
+								src="/logos/knowledge_grid_academy_logo.png"
+								alt="Knowledge Grid Academy's Logo"
+								className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
+							/>
+							<img src="/logos/sohar_logo.png" alt="Sohar's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
+							<img
+								src="/logos/partner_logo_unknown.png"
+								alt="Unknown Partner's Logo"
+								className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
+							/>
+							<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
+								<img src="/logos/sohar_aluminium_logo.png" alt="Sohar Aluminium's Logo" />
+							</div>
+						</div>
+					</div>
+					<div className="flex flex-col gap-12 w-full">
+						<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">{translation.accreditation[language]}</span>
+						<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
+							<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
+								<img src="/logos/idp_logo.png" alt="IDP's Logo" />
+							</div>
+							<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
+								<img src="/logos/ielts_logo.png" alt="IELTS's Logo" />
+							</div>
+							<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
+								<img src="/logos/ec_council_logo.png" alt="EC Council's Logo" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+
+			<Footer language={language} />
+		</main>
+	);
+}

src/translation/footer.json

@@ -0,0 +1,70 @@
+{
+  "navigation": {
+    "text": {
+      "en": "Navigation",
+      "ar": "ملاحة"
+    },
+    "why_us": {
+      "en": "Why us",
+      "ar": "لماذا نحن"
+    },
+    "capabilities": {
+      "en": "Capabilities",
+      "ar": "قدرات"
+    },
+    "expertise": {
+      "en": "Expertise",
+      "ar": "خبرة"
+    },
+    "history": {
+      "en": "History",
+      "ar": "تاريخ"
+    },
+    "contact": {
+      "en": "Contact",
+      "ar": "اتصال"
+    }
+  },
+  "services": {
+    "text": {
+      "en": "Services",
+      "ar": "خدمات"
+    },
+    "encoach_benefits": {
+      "en": "EnCoach Benefits",
+      "ar": "فوائد إنكوتش"
+    },
+    "student_testimonials": {
+      "en": "Student Testimonials",
+      "ar": "شهادات الطلاب"
+    }
+  },
+  "about": {
+    "text": {
+      "en": "About",
+      "ar": "عن"
+    },
+    "terms": {
+      "en": "Terms and Conditions",
+      "ar": "الأحكام والشروط"
+    },
+    "privacy_policy": {
+      "en": "Privacy Policy",
+      "ar": "سياسة الخصوصية"
+    }
+  },
+  "get_in_touch": {
+    "title": {
+      "en": "Get in Touch",
+      "ar": "ابقى على تواصل"
+    },
+    "text": {
+      "en": "Stay connected with us and know the latest updates about our services through various social media",
+      "ar": "ابق على تواصل معنا واعرف آخر التحديثات عن خدماتنا عبر وسائل التواصل الاجتماعي المختلفة"
+    }
+  },
+  "copyright": {
+    "en": "EnCoach 2023 all rights reserved",
+    "ar": "إنكوتش 2023 جميع الحقوق محفوظة"
+  }
+}

src/translation/home.json

@@ -0,0 +1,146 @@
+{
+  "get_started_btn": {
+    "en": "Get Started",
+    "ar": "البدء"
+  },
+  "perks": {
+    "24_hour_access": {
+      "title": {
+        "en": "24 hour access",
+        "ar": "وصول 24 ساعة"
+      },
+      "description": {
+        "en": "Always online, always ready to help you train.",
+        "ar": "متصل بالإنترنت دائمًا، ومستعد دائمًا لمساعدتك في التدريب."
+      }
+    },
+    "complete_package": {
+      "title": {
+        "en": "Complete package",
+        "ar": "حزمة كاملة"
+      },
+      "description": {
+        "en": "Every module is available at your fingertips.",
+        "ar": "كل وحدة متاحة في متناول يدك."
+      }
+    },
+    "enjoy_learning": {
+      "title": {
+        "en": "Enjoy learning",
+        "ar": "يتمتع التعلم"
+      },
+      "description": {
+        "en": "Choose between a relaxed single module approach, or a competitive full exam one.",
+        "ar": "اختر بين منهج وحدة واحدة مريح أو اختبار تنافسي كامل."
+      }
+    },
+    "guaranteed_results": {
+      "title": {
+        "en": "Guaranteed results",
+        "ar": "نتائج مضمونة"
+      },
+      "description": {
+        "en": "You will improve your performance through your hard work.",
+        "ar": "سوف تقوم بتحسين أدائك من خلال عملك الجاد."
+      }
+    }
+  },
+  "learn_more": {
+    "en": "Learn more",
+    "ar": "يتعلم أكثر"
+  },
+  "encoach_benefits": {
+    "tag": {
+      "encoach": {
+        "en": "EnCoach",
+        "ar": "الإنكوتش"
+      },
+      "benefits": {
+        "en": "benefits",
+        "ar": "فوائد"
+      }
+    },
+    "title": {
+      "text": {
+        "en": "Students have registered on our",
+        "ar": "لقد تم تسجيل الطلاب على موقعنا"
+      },
+      "highlight": {
+        "en": "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": "لدينا بالفعل العديد من الطلاب الذين يدرسون عبر الإنترنت تحت إشراف مدربنا الرقمي، لذا تعال وانضم إلى المجتمع"
+    }
+  },
+  "interested": {
+    "tag": {
+      "highlight": {
+        "en": "Interested",
+        "ar": "مهتم"
+      },
+      "text": {
+        "en": "in us?",
+        "ar": "بنا؟"
+      }
+    },
+    "title": {
+      "beginning": {
+        "en": "Contact us and",
+        "ar": "اتصل بنا و"
+      },
+      "highlight": {
+        "en": "Start",
+        "ar": "يبدأ"
+      },
+      "end": {
+        "en": "Learning",
+        "ar": "تعلُّم"
+      }
+    },
+    "contact_us": {
+      "en": "Contact us",
+      "ar": "اتصل بنا"
+    },
+    "whatsapp": {
+      "en": "WhatsApp Contact",
+      "ar": "تواصل واتس اب"
+    }
+  },
+  "ceo_message": {
+    "tag": {
+      "highlight": {
+        "en": "About us",
+        "ar": "معلومات عنا"
+      },
+      "text": {
+        "en": "Message from CEO",
+        "ar": "رسالة من الرئيس التنفيذي"
+      }
+    },
+    "title": {
+      "highlight": {
+        "en": "only one",
+        "ar": "واحد فقط"
+      },
+      "text": {
+        "en": "We are the best service and the",
+        "ar": "نحن أفضل الخدمات و"
+      }
+    },
+    "description": {
+      "en": "Engaged in education, especially in providing teaching services for students who do not have the opportunity to learn in conventional institutions.",
+      "ar": "تعمل في مجال التعليم، وخاصة في تقديم الخدمات التعليمية للطلاب الذين لا تتاح لهم فرصة التعلم في المؤسسات التقليدية."
+    }
+  },
+  "our_partners": {
+    "en": "Our Partners",
+    "ar": "شركاؤنا"
+  },
+  "accreditation": {
+    "en": "Accreditation",
+    "ar": "الاعتماد الاكاديمي"
+  }
+}

src/translation/navbar.json

@@ -0,0 +1,30 @@
+{
+  "home": {
+    "en": "Home",
+    "ar": "بيت"
+  },
+  "services": {
+    "en": "Services",
+    "ar": "خدمات"
+  },
+  "about": {
+    "en": "About us",
+    "ar": "معلومات عنا"
+  },
+  "history": {
+    "en": "History",
+    "ar": "تاريخ"
+  },
+  "contact": {
+    "en": "Contact",
+    "ar": "اتصال"
+  },
+  "platform": {
+    "en": "Platform",
+    "ar": "منصة"
+  },
+  "join": {
+    "en": "Join",
+    "ar": "منصة"
+  }
+}

tailwind.config.ts

@@ -1,7 +1,12 @@
 import type {Config} from "tailwindcss";
 
 const config: Config = {
-	content: ["./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}"],
+	content: [
+		"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+		"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+		"./src/templates/**/*.{js,ts,jsx,tsx,mdx}",
+		"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+	],
 	theme: {
 		extend: {
 			backgroundImage: {