Updated the whole website to work according to the CMS

src/app/about/page.tsx

@@ -1,5 +1,9 @@
+import {getData} from "@/cms";
 import About from "@/templates/About";
+import AboutPage from "@/types/cms/about";
 
-export default function Page() {
-	return <About language="en" />;
+export default async function Page() {
+	const {data} = await getData<AboutPage>("about", "en");
+
+	return <About data={data.data.attributes} language="en" />;
 }

src/app/ar/about/page.tsx

@@ -1,5 +1,9 @@
+import {getData} from "@/cms";
 import About from "@/templates/About";
+import AboutPage from "@/types/cms/about";
 
-export default function Page() {
-	return <About language="ar" />;
+export default async function Page() {
+	const {data} = await getData<AboutPage>("about", "ar");
+
+	return <About data={data.data.attributes} language="ar" />;
 }

src/app/ar/contact/page.tsx

@@ -1,5 +1,9 @@
+import {getData} from "@/cms";
 import ContactUs from "@/templates/ContactUs";
+import ContactPage from "@/types/cms/contact";
 
-export default function Page() {
-  return <ContactUs page="/contact" language="ar" />;
+export default async function Page() {
+	const {data} = await getData<ContactPage>("contact", "ar");
+
+	return <ContactUs data={data.data.attributes} page="/contact" language="ar" />;
 }

src/app/ar/contacts/[country]/page.tsx

@@ -1,19 +1,21 @@
-import { AgentContacts, generateStaticParamsHelper} from "@/templates/AgentContacts";
+import {getData} from "@/cms";
+import {AgentContacts, generateStaticParamsHelper} from "@/templates/AgentContacts";
+import CountryManagerContactsPage from "@/types/cms/countryManagerContacts";
 
 interface PageProps {
-  params: {
-    country: string;
-  };
+	params: {
+		country: string;
+	};
 }
 
 const language = "ar";
 
 export async function generateStaticParams() {
-  return generateStaticParamsHelper(language);
+	return generateStaticParamsHelper(language);
 }
 
-export default async function Page({
-  params: { country },
-}: PageProps) {
-  return <AgentContacts country={country} page={`/contacts/${country}`} language={language} />;
+export default async function Page({params: {country}}: PageProps) {
+	const {data} = await getData<CountryManagerContactsPage>("country-managers-contact", language);
+
+	return <AgentContacts data={data.data.attributes} country={country} page={`/contacts/${country}`} language={language} />;
 }

src/app/ar/history/page.tsx

@@ -1,7 +1,9 @@
-import About from "@/templates/About";
-import ComingSoon from "@/templates/ComingSoon";
+import {getData} from "@/cms";
 import History from "@/templates/History";
+import HistoryPage from "@/types/cms/history";
 
-export default function Page() {
-	return <History language="ar" />;
+export default async function Page() {
+	const {data} = await getData<HistoryPage>("history", "ar");
+
+	return <History data={data.data.attributes} language="ar" />;
 }

src/app/ar/page.tsx

@@ -1,6 +1,10 @@
+import {getData} from "@/cms";
 import Home from "@/templates/Home";
+import HomePage from "@/types/cms/home";
 import {NextPageContext} from "next";
 
-export default function Page() {
-	return <Home language="ar" />;
+export default async function Page() {
+	const {data} = await getData<HomePage>("home", "ar");
+
+	return <Home data={data.data.attributes} language="ar" />;
 }

src/app/ar/price/page.tsx

@@ -1,5 +1,9 @@
+import {getData} from "@/cms";
 import Price from "@/templates/Price";
+import PricePage from "@/types/cms/price";
 
-export default function Page() {
-  return <Price language="ar" />;
+export default async function Page() {
+	const {data} = await getData<PricePage>("price", "ar");
+
+	return <Price data={data.data.attributes} language="ar" />;
 }

src/app/ar/privacy-policy/page.tsx

@@ -1,6 +1,10 @@
+import {getData} from "@/cms";
 import Privacy from "@/templates/Privacy";
 import Terms from "@/templates/Terms";
+import PrivacyPolicyPage from "@/types/cms/privacyPolicy";
 
-export default function Page() {
-	return <Privacy language="ar" />;
+export default async function Page() {
+	const {data} = await getData<PrivacyPolicyPage>("privacy-policy", "ar");
+
+	return <Privacy data={data.data.attributes} language="ar" />;
 }

src/app/ar/services/page.tsx

@@ -1,5 +1,9 @@
+import {getData} from "@/cms";
 import Services from "@/templates/Services";
+import ServicesPage from "@/types/cms/services";
 
-export default function Page() {
-  return <Services language="ar" />;
+export default async function Page() {
+	const {data} = await getData<ServicesPage>("services", "ar");
+
+	return <Services data={data.data.attributes} language="ar" />;
 }

src/app/ar/terms/page.tsx

@@ -1,5 +1,9 @@
+import {getData} from "@/cms";
 import Terms from "@/templates/Terms";
+import TermsAndConditionsPage from "@/types/cms/termsConditions";
 
-export default function Page() {
-	return <Terms language="ar" />;
+export default async function Page() {
+	const {data} = await getData<TermsAndConditionsPage>("terms-and-conditions", "ar");
+
+	return <Terms data={data.data.attributes} language="ar" />;
 }

src/app/contact/page.tsx

@@ -1,5 +1,9 @@
+import {getData} from "@/cms";
 import ContactUs from "@/templates/ContactUs";
+import ContactPage from "@/types/cms/contact";
 
-export default function Page() {
-  return <ContactUs page="/contact" language="en" />;
+export default async function Page() {
+	const {data} = await getData<ContactPage>("contact", "en");
+
+	return <ContactUs data={data.data.attributes} page="/contact" language="en" />;
 }

src/app/contacts/[country]/page.tsx

@@ -1,26 +1,21 @@
-import {
-  AgentContacts,
-  generateStaticParamsHelper,
-} from "@/templates/AgentContacts";
+import {getData} from "@/cms";
+import {AgentContacts, generateStaticParamsHelper} from "@/templates/AgentContacts";
+import CountryManagerContactsPage from "@/types/cms/countryManagerContacts";
 
 interface PageProps {
-  params: {
-    country: string;
-  };
+	params: {
+		country: string;
+	};
 }
 
 const language = "en";
 
 export async function generateStaticParams() {
-  return generateStaticParamsHelper(language);
+	return generateStaticParamsHelper(language);
 }
 
-export default async function Page({ params: { country } }: PageProps) {
-  return (
-    <AgentContacts
-      country={country}
-      page={`/contacts/${country}`}
-      language={language}
-    />
-  );
+export default async function Page({params: {country}}: PageProps) {
+	const {data} = await getData<CountryManagerContactsPage>("country-managers-contact", language);
+
+	return <AgentContacts data={data.data.attributes} country={country} page={`/contacts/${country}`} language={language} />;
 }

src/app/history/page.tsx

@@ -1,7 +1,9 @@
-import About from "@/templates/About";
-import ComingSoon from "@/templates/ComingSoon";
+import {getData} from "@/cms";
 import History from "@/templates/History";
+import HistoryPage from "@/types/cms/history";
 
-export default function Page() {
-	return <History language="en" />;
+export default async function Page() {
+	const {data} = await getData<HistoryPage>("history", "en");
+
+	return <History data={data.data.attributes} language="en" />;
 }

src/app/page.tsx

@@ -1,5 +1,10 @@
+import {getData} from "@/cms";
 import Home from "@/templates/Home";
+import HomePage from "@/types/cms/home";
+import {NextPageContext} from "next";
 
-export default function Page() {
-	return <Home language="en" />;
+export default async function Page() {
+	const {data} = await getData<HomePage>("home", "en");
+
+	return <Home data={data.data.attributes} language="en" />;
 }

src/app/price/page.tsx

@@ -1,5 +1,9 @@
+import {getData} from "@/cms";
 import Price from "@/templates/Price";
+import PricePage from "@/types/cms/price";
 
-export default function Page() {
-	return <Price language="en" />;
+export default async function Page() {
+	const {data} = await getData<PricePage>("price", "en");
+
+	return <Price data={data.data.attributes} language="en" />;
 }

src/app/privacy-policy/page.tsx

@@ -1,6 +1,10 @@
+import {getData} from "@/cms";
 import Privacy from "@/templates/Privacy";
 import Terms from "@/templates/Terms";
+import PrivacyPolicyPage from "@/types/cms/privacyPolicy";
 
-export default function Page() {
-	return <Privacy language="en" />;
+export default async function Page() {
+	const {data} = await getData<PrivacyPolicyPage>("privacy-policy", "en");
+
+	return <Privacy data={data.data.attributes} language="en" />;
 }

src/app/services/page.tsx

@@ -1,5 +1,9 @@
+import {getData} from "@/cms";
 import Services from "@/templates/Services";
+import ServicesPage from "@/types/cms/services";
 
-export default function Page() {
-  return <Services language="en" />;
+export default async function Page() {
+	const {data} = await getData<ServicesPage>("services", "en");
+
+	return <Services data={data.data.attributes} language="en" />;
 }

src/app/terms/page.tsx

@@ -1,5 +1,9 @@
+import {getData} from "@/cms";
 import Terms from "@/templates/Terms";
+import TermsAndConditionsPage from "@/types/cms/termsConditions";
 
-export default function Page() {
-	return <Terms language="en" />;
+export default async function Page() {
+	const {data} = await getData<TermsAndConditionsPage>("terms-and-conditions", "en");
+
+	return <Terms data={data.data.attributes} language="en" />;
 }

src/components/Footer/Footer.tsx

@@ -3,12 +3,15 @@ import {BiLogoFacebook} from "react-icons/bi";
 import {BsInstagram, BsTwitter} from "react-icons/bs";
 import translation from "@/translation/footer.json";
 import clsx from "clsx";
+import FooterSection from "@/types/cms/footer";
 
 interface Props {
 	language: "en" | "ar";
+	data: FooterSection;
 }
 
-interface FooterLinkProps extends Props {
+interface FooterLinkProps {
+	language: "en" | "ar";
 	children: string;
 	href: string;
 }
@@ -17,7 +20,7 @@ const FooterLink = ({language, href, children}: FooterLinkProps) => {
 	return <Link href={`${language === "ar" ? "/ar" : ""}${href}`}>{children}</Link>;
 };
 
-export default function Footer({language}: Props) {
+export default function Footer({language, data}: Props) {
 	return (
 		<>
 			<section className="bg-mti-gray-seasalt w-full">
@@ -27,54 +30,54 @@ export default function Footer({language}: Props) {
 						language === "ar" ? "md:flex-row-reverse" : "md:flex-row",
 					)}>
 					<div className="flex flex-col gap-4">
-						<span className="font-bold text-xl">{translation.navigation.text[language]}</span>
+						<span className="font-bold text-xl">{data.Navigation.Text}</span>
 						<div className="flex flex-col gap-2">
 							<FooterLink language={language} href={`/about`}>
-								{translation.navigation.why_us[language]}
+								{data.Navigation.WhyUs}
 							</FooterLink>
 							<FooterLink language={language} href={`/about#capabilities`}>
-								{translation.navigation.capabilities[language]}
+								{data.Navigation.Capabilities}
 							</FooterLink>
 							<FooterLink language={language} href={`/about#expertise`}>
-								{translation.navigation.expertise[language]}
+								{data.Navigation.Expertise}
 							</FooterLink>
 							<FooterLink language={language} href="/history">
-								{translation.navigation.history[language]}
+								{data.Navigation.History}
 							</FooterLink>
 							<FooterLink language={language} href="/contact">
-								{translation.navigation.contact[language]}
+								{data.Navigation.Contact}
 							</FooterLink>
 						</div>
 					</div>
 					<div className="flex flex-col gap-4">
-						<span className="font-bold text-xl">{translation.services.text[language]}</span>
+						<span className="font-bold text-xl">{data.Services.Text}</span>
 						<div className="flex flex-col gap-2">
 							<FooterLink language={language} href="/#benefits">
-								{translation.services.encoach_benefits[language]}
+								{data.Services.EnCoachBenefits}
 							</FooterLink>
 							<FooterLink language={language} href="#testimonials">
-								{translation.services.student_testimonials[language]}
+								{data.Services.StudentTestimonials}
 							</FooterLink>
 						</div>
 					</div>
 					<div className="flex flex-col gap-4">
-						<span className="font-bold text-xl">{translation.about.text[language]}</span>
+						<span className="font-bold text-xl">{data.About.Text}</span>
 						<div className="flex flex-col gap-2">
 							<FooterLink language={language} href="/terms">
-								{translation.about.terms[language]}
+								{data.About.Terms}
 							</FooterLink>
 							<FooterLink language={language} href="/privacy-policy">
-								{translation.about.privacy_policy[language]}
+								{data.About.PrivacyPolicy}
 							</FooterLink>
 							<FooterLink language={language} href="/about">
-								{translation.about.text[language]}
+								{data.About.Text}
 							</FooterLink>
 						</div>
 					</div>
 					<div className="flex flex-col gap-4">
-						<span className="font-bold text-xl">{translation.get_in_touch.title[language]}</span>
+						<span className="font-bold text-xl">{data.GetInTouch.Title}</span>
 						<div className="flex flex-col gap-4">
-							<span className="max-w-[280px]">{translation.get_in_touch.text[language]}</span>
+							<span className="max-w-[280px]">{data.GetInTouch.Text}</span>
 							<div className={clsx("flex gap-6 items-center", language === "ar" && "flex-row-reverse justify-start")}>
 								<Link
 									href="https://facebook.com"
@@ -97,9 +100,7 @@ export default function Footer({language}: Props) {
 				</div>
 			</section>
 
-			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">
-				© {translation.copyright[language]}
-			</footer>
+			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">© {data.Copyright}</footer>
 		</>
 	);
 }

src/components/Footer/index.tsx

@@ -0,0 +1,13 @@
+import {getData} from "@/cms";
+import Footer from "./Footer";
+import FooterSection from "@/types/cms/footer";
+
+interface Props {
+	language: "en" | "ar";
+}
+
+export default async function FooterContainer({language}: Props) {
+	const {data} = await getData<FooterSection>("footer", language);
+
+	return <Footer data={data.data.attributes} language={language} />;
+}

src/components/Navbar.tsx

@@ -1,303 +0,0 @@
-/* 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, useEffect, useState } from "react";
-import { Dialog, Menu, Transition } from "@headlessui/react";
-import { useRouter } from "next/navigation";
-import translation from "@/translation/navbar.json";
-import { Contact } from "@/types/contact";
-interface Item {
-  page: string;
-  key: string;
-  entries?: {
-    key: string;
-    label: string;
-  }[];
-
-}
-
-async function getCountryManagers(language: "en" | "ar" = "en") {
-  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents?language=${language}`);
-
-  if(!res.ok) {
-    throw new Error("Failed to fetch contacts");
-  }
-
-  return res.json();
-}
-
-export default function Navbar({
-  currentPage,
-  language,
-}: {
-  currentPage: string;
-  language: "en" | "ar";
-}) {
-
-  const [contacts, setContacts] = useState([]);
-
-  useEffect(() => {
-    getCountryManagers(language)
-      .then((contacts) => setContacts(contacts.map((data: Contact) => ({
-        key: data.key,
-        label: data.label,
-      }))))
-      .catch(console.error);
-  }, [language]);
-
-  const items = [
-    { page: "/", key: "home" },
-    { page: "/services", key: "services" },
-    { page: "/price", key: "price" },
-    { page: "/about", key: "about" },
-    { page: "/history", key: "history" },
-    { page: "/contact", key: "contact" },
-    {
-      key: "country_manager",
-      page: "/contacts",
-      entries: contacts,
-    },
-  ] as Item[];
-
-  
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const renderItem = (item: Item, className: string) => {
-    if (item.entries) {
-      return (
-        <div
-          key={item.key}
-          className={clsx(
-            "group relative hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2 z-10 cursor-pointer w-fit",
-            currentPage === item.page && "border-b-mti-purple-light border-b-2"
-          )}
-        >
-          <span className="py-2">
-            {translation[item.key as keyof typeof translation][language]}
-          </span>
-          <ul className="absolute hidden group-hover:block bg-gray-700 text-white rounded shadow-md mt-1">
-            {item.entries?.map((innerEntry) => (
-              <li
-                key={innerEntry.key}
-                className="px-4 py-2 hover:bg-gray-600 whitespace-nowrap h-12 flex items-center"
-              >
-                <Link href={`${language === 'ar' ? '/ar' : ''}${item.page}/${innerEntry.key}`} className="w-full h-full flex items-center">
-                  {innerEntry.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      );
-    }
-
-    return (
-      <Link
-        key={item.key}
-        href={language === "ar" ? `/${language}${item.page}` : item.page}
-        className={className}
-      >
-        {(translation as any)[item.key][language]}
-      </Link>
-    );
-  };
-  return (
-    <>
-      <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 w-fit items-center gap-8")}>
-          {items.map((item) =>
-            renderItem(
-              item,
-              clsx(
-                "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"
-              )
-            )
-          )}
-        </div>
-        <div className="flex w-fit items-center gap-4">
-          <Link
-            href="https://platform.encoach.com"
-            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="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 duration-300 ease-in-out"
-              href={`${currentPage}`}
-            >
-              EN
-            </Link>
-          ) : (
-            <Link
-              className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
-              href={`/ar${currentPage}`}
-            >
-              AR
-            </Link>
-          )}
-        </div>
-      </header>
-
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog
-          as="div"
-          className="relative z-10"
-          onClose={() => setIsOpen(false)}
-        >
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-25" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <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 items-center gap-4">
-                      {language === "ar" ? (
-                        <Link
-                          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 duration-300 ease-in-out"
-                          href={`/ar${currentPage}`}
-                        >
-                          AR
-                        </Link>
-                      )}
-                      <div
-                        className="cursor-pointer"
-                        onClick={() => setIsOpen(false)}
-                        tabIndex={0}
-                      >
-                        <BsXLg
-                          className="text-mti-purple-light text-2xl"
-                          onClick={() => setIsOpen(false)}
-                        />
-                      </div>
-                    </div>
-                  </Dialog.Title>
-                  <div
-                    className={clsx(
-                      "flex flex-col gap-6 px-8 text-lg",
-                      language === "ar" && "items-end"
-                    )}
-                  >
-                    {items.map((item) =>
-                      renderItem(
-                        item,
-                        clsx(
-                          "w-fit transition duration-300 ease-in-out",
-                          currentPage === item.page &&
-                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
-                        )
-                      )
-                    )}
-                    <Link
-                      href="https://platform.encoach.com/register"
-                      className="w-fit transition duration-300 ease-in-out"
-                    >
-                      {translation.join[language]}
-                    </Link>
-                    <Link
-                      href="https://platform.encoach.com"
-                      className={clsx(
-                        "w-fit transition duration-300 ease-in-out"
-                      )}
-                    >
-                      {translation.platform[language]}
-                    </Link>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
-
-      <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 items-center gap-4">
-          {language === "ar" ? (
-            <Link
-              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 duration-300 ease-in-out"
-              href={`/ar${currentPage}`}
-            >
-              AR
-            </Link>
-          )}
-          <div className="cursor-pointer" onClick={() => setIsOpen(true)}>
-            <BsList className="text-2xl" onClick={() => setIsOpen(true)} />
-          </div>
-        </div>
-      </header>
-    </>
-  );
-}

src/components/Navbar/Navbar.tsx

@@ -0,0 +1,243 @@
+/* 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, useEffect, useState} from "react";
+import {Dialog, Menu, Transition} from "@headlessui/react";
+import {useRouter} from "next/navigation";
+import translation from "@/translation/navbar.json";
+import {Contact} from "@/types/contact";
+import NavBarSection from "@/types/cms/navbar";
+interface Item {
+	page: string;
+	key: string;
+	entries?: {
+		key: string;
+		label: string;
+	}[];
+}
+
+interface Props {
+	currentPage: string;
+	language: "en" | "ar";
+	data: NavBarSection;
+}
+
+async function getCountryManagers(language: "en" | "ar" = "en") {
+	const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents?language=${language}`);
+
+	if (!res.ok) {
+		throw new Error("Failed to fetch contacts");
+	}
+
+	return res.json();
+}
+
+export default function Navbar({currentPage, language, data}: Props) {
+	const [contacts, setContacts] = useState([]);
+
+	useEffect(() => {
+		getCountryManagers(language)
+			.then((contacts) =>
+				setContacts(
+					contacts.map((data: Contact) => ({
+						key: data.key,
+						label: data.label,
+					})),
+				),
+			)
+			.catch(console.error);
+	}, [language]);
+
+	const items = [
+		{page: "/", key: "Home"},
+		{page: "/services", key: "Services"},
+		{page: "/price", key: "Price"},
+		{page: "/about", key: "About"},
+		{page: "/history", key: "History"},
+		{page: "/contact", key: "Contact"},
+		{
+			key: "CountryManager",
+			page: "/contacts",
+			entries: contacts,
+		},
+	] as Item[];
+
+	const [isOpen, setIsOpen] = useState(false);
+
+	const renderItem = (item: Item, className: string) => {
+		if (item.entries) {
+			return (
+				<div
+					key={item.key}
+					className={clsx(
+						"group relative hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2 z-10 cursor-pointer w-fit",
+						currentPage === item.page && "border-b-mti-purple-light border-b-2",
+					)}>
+					<span className="py-2">{data[item.key as keyof typeof data]}</span>
+					<ul className="absolute hidden group-hover:block bg-gray-700 text-white rounded shadow-md mt-1">
+						{item.entries?.map((innerEntry) => (
+							<li key={innerEntry.key} className="px-4 py-2 hover:bg-gray-600 whitespace-nowrap h-12 flex items-center">
+								<Link
+									href={`${language === "ar" ? "/ar" : ""}${item.page}/${innerEntry.key}`}
+									className="w-full h-full flex items-center">
+									{innerEntry.label}
+								</Link>
+							</li>
+						))}
+					</ul>
+				</div>
+			);
+		}
+
+		return (
+			<Link key={item.key} href={language === "ar" ? `/${language}${item.page}` : item.page} className={className}>
+				{data[item.key as keyof typeof data]}
+			</Link>
+		);
+	};
+	return (
+		<>
+			<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 w-fit items-center gap-8")}>
+					{items.map((item) =>
+						renderItem(
+							item,
+							clsx(
+								"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",
+							),
+						),
+					)}
+				</div>
+				<div className="flex w-fit items-center gap-4">
+					<Link
+						href="https://platform.encoach.com"
+						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">
+						{data.Platform}
+					</Link>
+					<Link
+						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">
+						{data.Join}
+					</Link>
+					{language === "ar" ? (
+						<Link
+							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 duration-300 ease-in-out"
+							href={`/ar${currentPage}`}>
+							AR
+						</Link>
+					)}
+				</div>
+			</header>
+
+			<Transition appear show={isOpen} as={Fragment}>
+				<Dialog as="div" className="relative z-10" onClose={() => setIsOpen(false)}>
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0">
+						<div className="fixed inset-0 bg-black bg-opacity-25" />
+					</Transition.Child>
+
+					<div className="fixed inset-0 overflow-y-auto">
+						<div className="flex min-h-full items-center justify-center text-center">
+							<Transition.Child
+								as={Fragment}
+								enter="ease-out duration-300"
+								enterFrom="opacity-0 scale-95"
+								enterTo="opacity-100 scale-100"
+								leave="ease-in duration-200"
+								leaveFrom="opacity-100 scale-100"
+								leaveTo="opacity-0 scale-95">
+								<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 items-center gap-4">
+											{language === "ar" ? (
+												<Link
+													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 duration-300 ease-in-out"
+													href={`/ar${currentPage}`}>
+													AR
+												</Link>
+											)}
+											<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
+												<BsXLg className="text-mti-purple-light text-2xl" onClick={() => setIsOpen(false)} />
+											</div>
+										</div>
+									</Dialog.Title>
+									<div className={clsx("flex flex-col gap-6 px-8 text-lg", language === "ar" && "items-end")}>
+										{items.map((item) =>
+											renderItem(
+												item,
+												clsx(
+													"w-fit transition duration-300 ease-in-out",
+													currentPage === item.page &&
+														"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+												),
+											),
+										)}
+										<Link href="https://platform.encoach.com/register" className="w-fit transition duration-300 ease-in-out">
+											{data.Join}
+										</Link>
+										<Link href="https://platform.encoach.com" className={clsx("w-fit transition duration-300 ease-in-out")}>
+											{data.Platform}
+										</Link>
+									</div>
+								</Dialog.Panel>
+							</Transition.Child>
+						</div>
+					</div>
+				</Dialog>
+			</Transition>
+
+			<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 items-center gap-4">
+					{language === "ar" ? (
+						<Link
+							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 duration-300 ease-in-out"
+							href={`/ar${currentPage}`}>
+							AR
+						</Link>
+					)}
+					<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
+						<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
+					</div>
+				</div>
+			</header>
+		</>
+	);
+}

src/components/Navbar/index.tsx

@@ -0,0 +1,14 @@
+import {getData} from "@/cms";
+import Navbar from "./Navbar";
+import NavBarSection from "@/types/cms/navbar";
+
+interface Props {
+	currentPage: string;
+	language: "en" | "ar";
+}
+
+export default async function NavbarContainer({currentPage, language}: Props) {
+	const {data} = await getData<NavBarSection>("nav-bar", language);
+
+	return <Navbar data={data.data.attributes} language={language} currentPage={currentPage} />;
+}

src/templates/About.tsx

@@ -4,6 +4,7 @@ import Navbar from "@/components/Navbar";
 import Tag from "@/components/Tag";
 import Title from "@/components/Title";
 import translation from "@/translation/about.json";
+import AboutPage from "@/types/cms/about";
 import clsx from "clsx";
 import React from "react";
 import {BiSolidBrain, BiWorld} from "react-icons/bi";
@@ -26,26 +27,27 @@ import {
 
 interface Props {
 	language: "en" | "ar";
+	data: AboutPage;
 }
 
-export default function About({language}: Props) {
+export default function About({language, data}: Props) {
 	return (
 		<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">
 				<div className="w-full h-full flex flex-col items-center justify-center">
-					<Tag>{translation.title.tag[language]}</Tag>
-					<Title>{translation.title.text[language]}</Title>
+					<Tag>{data.TagTitle.Tag}</Tag>
+					<Title>{data.TagTitle.Title}</Title>
 				</div>
 			</section>
 
 			{/* About Us Section */}
 			<section id="about" className="w-full bg-white">
 				<div className="w-full flex flex-col items-center gap-8 p-8 md:p-20 container mx-auto">
-					<Title>{translation.about.title[language]}</Title>
+					<Title>{data.AboutSection.Title}</Title>
 					<span>
-						{translation.about.text[language].split("\n").map((line, index) => (
+						{data.AboutSection.Text.split("\n").map((line, index) => (
 							<React.Fragment key={index}>
 								<p className={clsx(language === "ar" ? "text-right" : "text-left")}>{line}</p>
 								<br />
@@ -62,20 +64,20 @@ export default function About({language}: Props) {
 						<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
 							<BsEyeFill className="text-mti-rose-light w-10 h-10" />
 						</div>
-						<span className="text-lg">{translation.mission_vision_values.vision[language]}</span>
+						<span className="text-lg">{data.MissionVisionValuesSection.Vision}</span>
 					</div>
 					<div className="flex flex-col items-center gap-4 text-center">
 						<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
 							<BsRocketTakeoffFill className="text-mti-rose-light w-10 h-10" />
 						</div>
-						<span className="text-lg">{translation.mission_vision_values.mission[language]}</span>
+						<span className="text-lg">{data.MissionVisionValuesSection.Mission}</span>
 					</div>
 					<div className="flex flex-col items-center gap-4 md:col-span-2">
 						<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
 							<BsFlower3 className="text-mti-rose-light w-10 h-10" />
 						</div>
 						<div className="text-lg flex flex-wrap items-center justify-center max-w-xl gap-x-8 gap-y-4">
-							{translation.mission_vision_values.values[language].map((x) => (
+							{data.MissionVisionValuesSection.Values.split("\n").map((x) => (
 								<span key={x}>{x}</span>
 							))}
 						</div>
@@ -87,9 +89,9 @@ export default function About({language}: Props) {
 			<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("flex flex-col gap-8 max-w-xl")}>
-						<Title>{translation.ceo_message.title[language]}</Title>
+						<Title>{data.CEOMessage.Title}</Title>
 						<span>
-							{translation.ceo_message.text[language].split("\n").map((line, index) => (
+							{data.CEOMessage.Text.split("\n").map((line, index) => (
 								<React.Fragment key={index}>
 									<p>{line}</p>
 									<br />
@@ -107,7 +109,7 @@ export default function About({language}: Props) {
 							<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-10" />
 							<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-20" />
 							<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-30" />
-							<span className="absolute left-1/2 -translate-x-2/3 -bottom-10">{translation.ceo_message.name[language]}</span>
+							<span className="absolute left-1/2 -translate-x-2/3 -bottom-10">{data.CEOMessage.Name}</span>
 						</div>
 					</div>
 				</div>
@@ -117,17 +119,17 @@ export default function About({language}: Props) {
 			<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")}>
 					<div className={clsx("w-full flex")}>
-						<Title>{translation.capabilities.title[language]}</Title>
+						<Title>{data.Capabilities.Title}</Title>
 					</div>
-					<span className="text-lg">{translation.capabilities.intro[language]}</span>
+					<span className="text-lg">{data.Capabilities.Intro}</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>
+								<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.Analytics.Title}</span>
+								<p>{data.Capabilities.Analytics.Text}</p>
 							</div>
 						</div>
 
@@ -136,8 +138,8 @@ export default function About({language}: Props) {
 								<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>
+								<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.Predictive.Title}</span>
+								<p>{data.Capabilities.Predictive.Text}</p>
 							</div>
 						</div>
 
@@ -146,8 +148,8 @@ export default function About({language}: Props) {
 								<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>
+								<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.NLP.Title}</span>
+								<p>{data.Capabilities.NLP.Text}</p>
 							</div>
 						</div>
 
@@ -156,8 +158,8 @@ export default function About({language}: Props) {
 								<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>
+								<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.Engine.Title}</span>
+								<p>{data.Capabilities.Engine.Text}</p>
 							</div>
 						</div>
 
@@ -166,10 +168,8 @@ export default function About({language}: Props) {
 								<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>
+								<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.ContinuousLearning.Title}</span>
+								<p>{data.Capabilities.ContinuousLearning.Text}</p>
 							</div>
 						</div>
 					</div>
@@ -180,17 +180,17 @@ export default function About({language}: Props) {
 			<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")}>
 					<div className={clsx("w-full flex")}>
-						<Title>{translation.expertise.title[language]}</Title>
+						<Title>{data.Expertise.Title}</Title>
 					</div>
-					<span className="text-lg">{translation.expertise.intro[language]}</span>
+					<span className="text-lg">{data.Expertise.Intro}</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>
+								<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.Language.Title}</span>
+								<p>{data.Expertise.Language.Text}</p>
 							</div>
 						</div>
 
@@ -199,8 +199,8 @@ export default function About({language}: Props) {
 								<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>
+								<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.IELTS.Title}</span>
+								<p>{data.Expertise.IELTS.Text}</p>
 							</div>
 						</div>
 
@@ -209,8 +209,8 @@ export default function About({language}: Props) {
 								<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>
+								<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.Alignment.Title}</span>
+								<p>{data.Expertise.Alignment.Text}</p>
 							</div>
 						</div>
 
@@ -219,8 +219,8 @@ export default function About({language}: Props) {
 								<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>
+								<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.Native.Title}</span>
+								<p>{data.Expertise.Native.Text}</p>
 							</div>
 						</div>
 
@@ -229,10 +229,8 @@ export default function About({language}: Props) {
 								<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>
+								<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.KnowledgeExperience.Title}</span>
+								<p>{data.Expertise.KnowledgeExperience.Text}</p>
 							</div>
 						</div>
 					</div>

src/templates/AgentContacts.tsx

@@ -3,12 +3,14 @@ import Navbar from "@/components/Navbar";
 import Title from "@/components/Title";
 import {Contact} from "@/types/contact";
 import translation from "@/translation/agentcontacts.json";
+import CountryManagerContactsPage from "@/types/cms/countryManagerContacts";
 type Language = "en" | "ar";
 
 interface Props {
 	country: string;
 	page: string;
 	language: Language;
+	data: CountryManagerContactsPage;
 }
 
 async function getCountryManagers(country: string, language: Language = "en") {
@@ -27,7 +29,7 @@ export async function generateStaticParamsHelper(language: Language = "en") {
 		country: key.toLowerCase().replaceAll(" ", ""),
 	}));
 }
-export async function AgentContacts({language, page, country}: Props) {
+export async function AgentContacts({language, page, country, data}: Props) {
 	const contact = (await getCountryManagers(country, language)) as Contact;
 
 	return (
@@ -44,15 +46,15 @@ export async function AgentContacts({language, page, country}: Props) {
 				{contact.entries.map((entry) => (
 					<div key={entry.name}>
 						<h2>
-							<strong>{translation.name[language]}: </strong>
+							<strong>{data.Name}: </strong>
 							{entry.name}
 						</h2>
 						<p>
-							<strong>{translation.number[language]}: </strong>
+							<strong>{data.Number}: </strong>
 							{entry.number}
 						</p>
 						<p>
-							<strong>{translation.email[language]}: </strong>
+							<strong>{data.Email}: </strong>
 							{entry.email}
 						</p>
 					</div>

src/templates/ComingSoon.tsx

@@ -6,30 +6,25 @@ 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 {BsEye, BsEyeFill, BsFlower3, BsRocketTakeoffFill} from "react-icons/bs";
 
 interface Props {
-  page: string;
-  language: "en" | "ar";
+	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" dir={language === "ar" ? "rtl" : "ltr"}>
-      <Navbar currentPage={page} language={language} />
+export default function ComingSoon({page, language}: Props) {
+	return (
+		<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">
-        <div className="flex h-full w-full flex-col items-center justify-center">
-          <Title>Coming soon...</Title>
-        </div>
-      </section>
+			<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>
-  );
+			<Footer language={language} />
+		</main>
+	);
 }

src/templates/ContactUs.tsx

@@ -7,6 +7,7 @@ import Title from "@/components/Title";
 import translation from "@/translation/contactus.json";
 import Image from "next/image";
 import {toast, ToastContainer} from "react-toastify";
+import ContactPage from "@/types/cms/contact";
 
 type FormValues = {
 	name: string;
@@ -18,6 +19,7 @@ type FormValues = {
 
 interface Props {
 	language: "en" | "ar";
+	data: ContactPage;
 	page: string;
 }
 
@@ -26,18 +28,18 @@ const ErrorMessage = ({message}: {message: string}) => (
 		<span className="text-mti-red">{message}</span>
 	</div>
 );
-export default function App({language, page}: Props) {
+export default function App({language, data, page}: Props) {
 	const selectOptions = [
 		{
-			label: translation.feedback[language],
+			label: data.Feedback,
 			value: "feedback",
 		},
 		{
-			label: translation.bug[language],
+			label: data.Bug,
 			value: "bug",
 		},
 		{
-			label: translation.help[language],
+			label: data.Help,
 			value: "help",
 		},
 	];
@@ -53,7 +55,7 @@ export default function App({language, page}: Props) {
 	});
 
 	const {errors, isDirty, isValid} = formState;
-	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+	const onSubmit: SubmitHandler<FormValues> = async (body) => {
 		try {
 			const response = await fetch(`https://platform.encoach.com/api/tickets`, {
 				method: "POST",
@@ -62,29 +64,29 @@ export default function App({language, page}: Props) {
 				},
 				body: JSON.stringify({
 					reporter: {
-						name: data.name,
-						email: data.email,
+						name: body.name,
+						email: body.email,
 					},
-					subject: data.subject,
-					type: data.type,
+					subject: body.subject,
+					type: body.type,
 					reportedFrom: window?.location.toString() || "",
 					status: "submitted",
 					date: new Date().toISOString(),
-					description: data.description,
+					description: body.description,
 				}),
 			});
 
 			if (response.status === 200) {
-				const data = await response.json();
+				const body = await response.json();
 				// Pass data to the page via props
-				if (data.ok) {
-					toast.success(translation.ticketSuccess[language]);
+				if (body.ok) {
+					toast.success(data.TicketSuccess);
 					return;
 				}
 			}
 		} catch (err) {}
 
-		toast.error(translation.ticketError[language]);
+		toast.error(data.TicketError);
 	};
 
 	return (
@@ -94,7 +96,7 @@ export default function App({language, page}: Props) {
 				<Navbar currentPage={page} 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.title[language]}</Title>
+						<Title>{data.Title}</Title>
 					</div>
 				</section>
 				<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
@@ -102,31 +104,31 @@ export default function App({language, page}: Props) {
 						<input
 							id="name"
 							type="text"
-							placeholder={translation.name[language]}
+							placeholder={data.Name}
 							{...register("name", {required: true})}
 							className="input input-bordered md:w-full sm:w-1/2  max-w-md"
 						/>
-						{errors.name && errors.name.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
+						{errors.name && errors.name.type === "required" && <ErrorMessage message={data.FieldRequired} />}
 						<input
 							id="email"
-							placeholder={translation.email[language]}
+							placeholder={data.Email}
 							type="text"
 							{...register("email", {required: true, pattern: /^\S+@\S+$/i})}
 							className="input input-bordered md:w-full sm:w-1/2  max-w-md"
 						/>
-						{errors.email && errors.email.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
-						{errors.email && errors.email.type === "pattern" && <ErrorMessage message={translation.invalidEmail[language]} />}
+						{errors.email && errors.email.type === "required" && <ErrorMessage message={data.FieldRequired} />}
+						{errors.email && errors.email.type === "pattern" && <ErrorMessage message={data.InvalidEmail} />}
 						<input
 							id="subject"
-							placeholder={translation.subject[language]}
+							placeholder={data.Subject}
 							type="text"
 							{...register("subject", {required: true})}
 							className="input input-bordered md:w-full sm:w-1/2 max-w-md"
 						/>
-						{errors.subject && errors.subject.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
+						{errors.subject && errors.subject.type === "required" && <ErrorMessage message={data.FieldRequired} />}
 						<select id="type" {...register("type", {required: true})} className="select select-bordered md:w-full sm:w-1/2 max-w-md">
 							<option value="" disabled>
-								{translation.selectType[language]}
+								{data.SelectType}
 							</option>
 							{selectOptions.map((option) => (
 								<option key={option.value} value={option.value}>
@@ -134,18 +136,16 @@ export default function App({language, page}: Props) {
 								</option>
 							))}
 						</select>
-						{errors.type && errors.type.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
+						{errors.type && errors.type.type === "required" && <ErrorMessage message={data.FieldRequired} />}
 						<textarea
 							id="description"
-							placeholder={translation.description[language]}
+							placeholder={data.Description}
 							{...register("description", {required: true})}
 							className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md"
 							rows={5}
 						/>
-						{errors.description && errors.description.type === "required" && (
-							<ErrorMessage message={translation.fieldRequired[language]} />
-						)}
-						<input type="submit" className="btn" disabled={!isDirty || !isValid} value={translation.submit[language]} />
+						{errors.description && errors.description.type === "required" && <ErrorMessage message={data.FieldRequired} />}
+						<input type="submit" className="btn" disabled={!isDirty || !isValid} value={data.Submit} />
 					</form>
 					<div className="flex flex-col">
 						<Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" />

src/templates/History.tsx

@@ -2,14 +2,15 @@
 import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
 import Title from "@/components/Title";
-import translation from "@/translation/history.json";
 import clsx from "clsx";
 import React from "react";
 import * as BsIcon from "react-icons/bs";
 import {IconType} from "react-icons";
+import HistoryPage from "@/types/cms/history";
 
 interface Props {
 	language: "en" | "ar";
+	data: HistoryPage;
 }
 
 interface ElementProps {
@@ -48,25 +49,25 @@ const Element = ({date, label, isEven, language, Icon}: ElementProps) => {
 	);
 };
 
-export default function History({language}: Props) {
+export default function History({language, data}: Props) {
 	return (
 		<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">
 				<div className="w-full h-full flex flex-col items-center justify-center">
-					<Title>{translation.title[language]}</Title>
+					<Title>{data.Title}</Title>
 				</div>
 			</section>
 
 			<section id="history" className="w-full h-fit bg-white">
 				<div className="w-full h-fit flex flex-col items-center gap-8 p-8 md:p-20 container mx-auto relative">
 					<div className="flex flex-col gap-8 z-20">
-						{translation.events.map((event, index) => (
+						{data.Events.map((event, index) => (
 							<Element
-								date={event.date[language]}
-								label={event.label[language]}
-								Icon={BsIcon[event.icon as keyof typeof BsIcon]}
+								date={event.Date}
+								label={event.Label}
+								Icon={BsIcon[event.Icon as keyof typeof BsIcon]}
 								key={index}
 								isEven={(index + 1) % 2 === 0}
 								language={language}

src/templates/Home.tsx

@@ -7,12 +7,14 @@ import translation from "@/translation/home.json";
 import clsx from "clsx";
 import Tag from "@/components/Tag";
 import Title from "@/components/Title";
+import HomePage from "@/types/cms/home";
 
 interface Props {
 	language: "en" | "ar";
+	data: HomePage;
 }
 
-export default function Home({language}: Props) {
+export default function Home({language, data}: Props) {
 	return (
 		<main
 			className={clsx("h-screen w-full bg-white text-mti-black flex flex-col", language === "ar" && "text-right")}
@@ -23,7 +25,7 @@ export default function Home({language}: Props) {
 				<img src="/banner_encoach_home.png" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
 				<Link href={language === "ar" ? "/ar/price" : "/price"}>
 					<button className="absolute bottom-1/12 -lg:hidden 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]}
+						{data.GetStartedButton}
 					</button>
 				</Link>
 			</section>
@@ -36,8 +38,8 @@ export default function Home({language}: Props) {
 							<BsBook className="text-mti-rose-light w-10 h-10" />
 						</div>
 						<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
-							<span className="font-bold text-xl">{translation.modules.reading.title[language]}</span>
-							<span>{translation.modules.reading.description[language]}</span>
+							<span className="font-bold text-xl">{data.Modules.Reading.Title}</span>
+							<span>{data.Modules.Reading.Text}</span>
 						</div>
 					</div>
 					<div className="flex flex-col items-center gap-6">
@@ -45,8 +47,8 @@ export default function Home({language}: Props) {
 							<BsHeadphones className="text-mti-rose-light w-10 h-10" />
 						</div>
 						<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
-							<span className="font-bold text-xl">{translation.modules.listening.title[language]}</span>
-							<span>{translation.modules.listening.description[language]}</span>
+							<span className="font-bold text-xl">{data.Modules.Listening.Title}</span>
+							<span>{data.Modules.Listening.Text}</span>
 						</div>
 					</div>
 					<div className="flex flex-col items-center gap-6">
@@ -54,8 +56,8 @@ export default function Home({language}: Props) {
 							<BsPen className="text-mti-rose-light w-10 h-10" />
 						</div>
 						<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
-							<span className="font-bold text-xl">{translation.modules.writing.title[language]}</span>
-							<span>{translation.modules.writing.description[language]}</span>
+							<span className="font-bold text-xl">{data.Modules.Writing.Title}</span>
+							<span>{data.Modules.Writing.Text}</span>
 						</div>
 					</div>
 					<div className="flex flex-col items-center gap-6">
@@ -63,8 +65,8 @@ export default function Home({language}: Props) {
 							<BsMegaphone className="text-mti-rose-light w-10 h-10" />
 						</div>
 						<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
-							<span className="font-bold text-xl">{translation.modules.speaking.title[language]}</span>
-							<span>{translation.modules.speaking.description[language]}</span>
+							<span className="font-bold text-xl">{data.Modules.Speaking.Title}</span>
+							<span>{data.Modules.Speaking.Text}</span>
 						</div>
 					</div>
 				</div>
@@ -74,14 +76,14 @@ export default function Home({language}: Props) {
 			<section className="w-full bg-mti-gray-seasalt">
 				<div className="w-full p-8 lg:py-24 lg:px-12 flex flex-col gap-8 md:gap-24 lg:flex-row items-center justify-center container mx-auto">
 					<div className="flex flex-col gap-8">
-						<Tag>{translation.learn_ai.tag[language]}</Tag>
+						<Tag>{data.LearnAI.Tag}</Tag>
 						<div className={clsx("flex flex-col gap-3", language === "ar" && "items-end")}>
-							<Title>{translation.learn_ai.title[language]}</Title>
-							<p className="max-w-lg text-base">{translation.learn_ai.description[language]}</p>
+							<Title>{data.LearnAI.Title}</Title>
+							<p className="max-w-lg text-base">{data.LearnAI.Text}</p>
 						</div>
 						<Link href="/price">
 							<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]}
+								{data.LearnMore}
 							</button>
 						</Link>
 					</div>
@@ -106,14 +108,14 @@ export default function Home({language}: Props) {
 						</div>
 					</div>
 					<div className="flex flex-col gap-8">
-						<Tag>{translation.encoach_benefits.tag[language]}</Tag>
+						<Tag>{data.EnCoachBenefits.Tag}</Tag>
 						<div className={clsx("flex flex-col gap-3", language === "ar" && "items-end")}>
-							<Title>{translation.encoach_benefits.title[language]}</Title>
-							<p className="max-w-lg text-base">{translation.encoach_benefits.description[language]}</p>
+							<Title>{data.EnCoachBenefits.Title}</Title>
+							<p className="max-w-lg text-base">{data.EnCoachBenefits.Text}</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]}
+								{data.LearnMore}
 							</button>
 						</Link>
 					</div>
@@ -123,15 +125,15 @@ export default function Home({language}: Props) {
 			{/* 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">
-					<Tag>{translation.interested.tag[language]}</Tag>
-					<Title className="!max-w-sm text-center">{translation.interested.title[language]}</Title>
+					<Tag>{data.Interested.Tag}</Tag>
+					<Title className="!max-w-sm text-center">{data.Interested.Title}</Title>
 					<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]}
+							{data.Interested.ContactUs}
 						</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>
+						<em className="text-xs text-mti-purple-light font-semibold">{data.Interested.WhatsAppContact}</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" />
@@ -152,14 +154,14 @@ export default function Home({language}: Props) {
 			<section className="w-full bg-white">
 				<div className="w-full px-8 pt-12 pb-20 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">
-						<Tag>{translation.ceo_message.tag[language]}</Tag>
+						<Tag>{data.CEOMessage.Tag}</Tag>
 						<div className={clsx("flex flex-col gap-3", language === "ar" && "items-end")}>
-							<Title>{translation.ceo_message.title[language]}</Title>
-							<p className="max-w-lg text-base">{translation.ceo_message.description[language]}</p>
+							<Title>{data.CEOMessage.Title}</Title>
+							<p className="max-w-lg text-base">{data.CEOMessage.Text}</p>
 						</div>
 						<Link href={`${language === "ar" ? "/ar" : ""}/about#message`}>
 							<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]}
+								{data.LearnMore}
 							</button>
 						</Link>
 					</div>

src/templates/Price.tsx

@@ -8,7 +8,7 @@ import clsx from "clsx";
 import Navbar from "@/components/Navbar";
 import Link from "next/link";
 import Footer from "@/components/Footer";
-import translation from "@/translation/price.json";
+import PricePage from "@/types/cms/price";
 
 type DurationUnit = "weeks" | "days" | "months" | "years";
 
@@ -20,28 +20,33 @@ interface Package {
 	price: number;
 }
 
-export default function Page({language}: {language: "en" | "ar"}) {
+interface Props {
+	language: "en" | "ar";
+	data: PricePage;
+}
+
+export default function Page({language, data}: Props) {
 	const getDurationUnit = (duration: number, durationUnitSingular: string, durationUnitPlural: string) => {
-		if(duration >= 2 && duration <= 10) {
+		if (duration >= 2 && duration <= 10) {
 			return durationUnitPlural;
 		}
 
 		return durationUnitSingular;
-	}
+	};
 	const durationAndDurationUnitParser = (duration: number, duration_unit: DurationUnit) => {
-		if(language === 'ar') {
+		if (language === "ar") {
 			switch (duration_unit) {
 				case "days":
-					return `${duration} ${getDurationUnit(duration, translation.days.singular[language], translation.days.plural[language])}`;
+					return `${duration} ${getDurationUnit(duration, data.Days.Singular, data.Days.Plural)}`;
 				case "weeks":
-					return `${duration} ${getDurationUnit(duration, translation.weeks.singular[language], translation.weeks.plural[language])}`;
+					return `${duration} ${getDurationUnit(duration, data.Weeks.Singular, data.Weeks.Plural)}`;
 				case "months":
-					return `${duration} ${getDurationUnit(duration, translation.months.singular[language], translation.months.plural[language])}`;
+					return `${duration} ${getDurationUnit(duration, data.Months.Singular, data.Months.Plural)}`;
 			}
 		}
 
 		return `${duration} ${capitalize(duration === 1 ? duration_unit.slice(0, duration_unit.length - 1) : duration_unit)}`;
-	}
+	};
 
 	const [payments, setPayments] = React.useState<Package[]>([]);
 	const getData = async () => {
@@ -65,14 +70,14 @@ export default function Page({language}: {language: "en" | "ar"}) {
 		<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">
-				<h2 className="text-3xl font-bold">{translation.title[language]}</h2>
+				<h2 className="text-3xl font-bold">{data.Title}</h2>
 				<div className="grid grid-cols-2 gap-8">
 					{payments.map((p) => (
 						<div key={p.id} className={clsx("p-4 bg-white rounded-xl flex flex-col gap-6 items-start")}>
 							<div className="flex flex-col items-start mb-2">
 								<Image src="/logo_title.png" alt="EnCoach's Logo" width={32} height={32} />
 								<span className="font-semibold text-xl">
-									{translation.encoach[language]} - {durationAndDurationUnitParser(p.duration, p.duration_unit)}
+									{data.EnCoach} - {durationAndDurationUnitParser(p.duration, p.duration_unit)}
 								</span>
 							</div>
 							<div className="flex flex-col gap-2 items-start w-full">
@@ -82,11 +87,11 @@ export default function Page({language}: {language: "en" | "ar"}) {
 								</span>
 							</div>
 							<div className="flex flex-col gap-1 items-start">
-								<span>{translation.packageIncludes[language]}</span>
+								<span>{data.PackageIncludes}</span>
 								<ul className="flex flex-col items-start text-sm">
-									<li>- {translation.packageIncludesA[language]}</li>
-									<li>- {translation.packageIncludesB[language]}</li>
-									<li>- {translation.packageIncludesC[language]}</li>
+									<li>- {data.PackageIncludesA}</li>
+									<li>- {data.PackageIncludesB}</li>
+									<li>- {data.PackageIncludesB}</li>
 								</ul>
 							</div>
 						</div>
@@ -95,7 +100,7 @@ export default function Page({language}: {language: "en" | "ar"}) {
 				<Link
 					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 mb-8"
 					href={`https://platform.encoach.com/register`}>
-					{translation.joinus[language]}
+					{data.SignUp}
 				</Link>
 			</section>
 			<Footer language={language} />

src/templates/Privacy.tsx

@@ -7,48 +7,40 @@ import clsx from "clsx";
 import React from "react";
 import * as BsIcon from "react-icons/bs";
 import {IconType} from "react-icons";
+import PrivacyPolicyPage from "@/types/cms/privacyPolicy";
 
 interface Props {
 	language: "en" | "ar";
+	data: PrivacyPolicyPage;
 }
 
-type ContentKey = keyof typeof translation.content;
-type Translation = {ar: string; en: string};
-interface Content {
-	title?: Translation;
-	text?: Translation;
-	list?: Translation[];
-}
-
-export default function Privacy({language}: Props) {
+export default function Privacy({language, data}: Props) {
 	return (
 		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
-			<Navbar currentPage="/terms" language={language} />
+			<Navbar currentPage="/privacy-policy" 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.title[language]}</Title>
+					<Title>{data.Title}</Title>
 				</div>
 			</section>
 
-			<section id="terms" className="w-full h-fit bg-white">
+			<section id="privacy-policy" 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",
 						language === "ar" ? "text-right" : "text-left",
 					)}>
-					{Object.keys(translation.content).map((key) => {
-						const content = translation.content[key as ContentKey] as Content;
-
+					{data.Content.map((content, index) => {
 						return (
-							<span className="flex flex-col gap-1" key={key} id={key}>
-								{content.title && <h2 className="font-semibold text-lg text-mti-purple-light">{content.title[language]}</h2>}
-								{content.text && <p className="whitespace-pre-wrap">{content.text[language]}</p>}
-								{content.list && (
+							<span className="flex flex-col gap-1" key={index} id={index.toString()}>
+								{content.Title && <h2 className="font-semibold text-lg text-mti-purple-light">{content.Title}</h2>}
+								{content.Text && <p className="whitespace-pre-wrap">{content.Text}</p>}
+								{content.List && (
 									<ul className="list-disc pl-8">
-										{content.list.map((text, index) => (
+										{content.List.split("\n").map((text, index) => (
 											<li className="whitespace-pre-wrap" key={index}>
-												{text[language]}
+												{text}
 											</li>
 										))}
 									</ul>

src/templates/Services.tsx

@@ -1,6 +1,7 @@
 import Navbar from "@/components/Navbar";
 import clsx from "clsx";
 import Title from "@/components/Title";
+import * as BsIcon from "react-icons/bs";
 import {
 	BsBook,
 	BsBlockquoteLeft,
@@ -13,11 +14,12 @@ import {
 	BsFileBarGraph,
 	BsBank,
 } from "react-icons/bs";
-import translation from "@/translation/services.json";
 import Footer from "@/components/Footer";
+import ServicesPage from "@/types/cms/services";
 
 interface Props {
 	language: "en" | "ar";
+	data: ServicesPage;
 }
 
 interface SectionStruct {
@@ -31,84 +33,33 @@ interface SectionStruct {
 	}[];
 }
 
-export default function About({language}: Props) {
-	const struct = [
-		{
-			id: "english_writing_evaluation",
-			title: translation.english_writing_evaluation.title[language],
-			description: translation.english_writing_evaluation.description[language],
+export default function Services({language, data}: Props) {
+	const struct: SectionStruct[] = [
+		...data.ModuleEvaluation.map((module, index) => ({
+			id: index.toString(),
+			description: module.Text,
+			title: module.Title,
 			bullets: [
 				{
-					title: translation.english_writing_evaluation.evaluation[language],
-					values: translation.english_writing_evaluation.evaluation_values[language],
-					icon: BsBlockquoteLeft,
+					title: module.Evaluation,
+					values: module.EvaluationValues.split("\n"),
+					icon: BsIcon[module.EvaluationIcon as keyof typeof BsIcon],
 				},
 				{
-					title: translation.english_writing_evaluation.acquire[language],
-					values: translation.english_writing_evaluation.acquire_values[language],
-					icon: BsFillPencilFill,
+					title: module.Acquire,
+					values: module.AcquireValues.split("\n"),
+					icon: BsIcon[module.AcquireIcon as keyof typeof BsIcon],
 				},
 			],
-		},
-		{
-			id: "speaking_practice_evaluation",
-			title: translation.speaking_practice_evaluation.title[language],
-			description: translation.speaking_practice_evaluation.description[language],
-			bullets: [
-				{
-					title: translation.speaking_practice_evaluation.evaluation[language],
-					values: translation.speaking_practice_evaluation.evaluation_values[language],
-					icon: BsMic,
-				},
-				{
-					title: translation.speaking_practice_evaluation.acquire[language],
-					values: translation.speaking_practice_evaluation.acquire_values[language],
-					icon: BsBook,
-				},
-			],
-		},
-		{
-			id: "reading_and_listening",
-			title: translation.reading_and_listening.title[language],
-			description: translation.reading_and_listening.description[language],
-			bullets: [
-				{
-					title: translation.reading_and_listening.evaluation[language],
-					values: translation.reading_and_listening.evaluation_values[language],
-					icon: BsSoundwave,
-				},
-				{
-					title: translation.reading_and_listening.acquire[language],
-					values: translation.reading_and_listening.acquire_values[language],
-					icon: BsBookmarkStar,
-				},
-			],
-		},
-		{
-			id: "practice_tests",
-			title: translation.practice_tests.title[language],
-			description: translation.practice_tests.description[language],
-			bullets: [
-				{
-					title: translation.practice_tests.evaluation[language],
-					values: translation.practice_tests.evaluation_values[language],
-					icon: BsCheck2Circle,
-				},
-				{
-					title: translation.practice_tests.acquire[language],
-					values: translation.practice_tests.acquire_values[language],
-					icon: BsEarbuds,
-				},
-			],
-		},
+		})),
 		{
 			id: "progress_tracking",
-			title: translation.progress_tracking.title[language],
-			description: translation.progress_tracking.description[language],
+			title: data.ProgressTracking.Title,
+			description: data.ProgressTracking.Text,
 			bullets: [
 				{
-					title: translation.progress_tracking.advantages[language],
-					values: translation.progress_tracking.advantages_values[language],
+					title: data.ProgressTracking.Advantages,
+					values: data.ProgressTracking.AdvantageValues.split("\n"),
 					icon: BsFileBarGraph,
 				},
 			],
@@ -118,20 +69,20 @@ export default function About({language}: Props) {
 	const final_struct = [
 		{
 			id: "unified_english_level_test",
-			title: translation.unified_english_level_test.title[language],
-			description: translation.unified_english_level_test.description[language],
+			title: data.UnifiedEnglishLevelTest.Title,
+			description: data.UnifiedEnglishLevelTest.Text,
 			bullets: [
 				{
-					title: translation.unified_english_level_test.advantages[language],
-					values: translation.unified_english_level_test.advantages_values[language],
+					title: data.UnifiedEnglishLevelTest.Advantages,
+					values: data.UnifiedEnglishLevelTest.AdvantageValues.split("\n"),
 					icon: BsBank,
 				},
 			],
 		},
 		{
 			id: "customized_packages",
-			title: translation.customized_packages.title[language],
-			description: translation.customized_packages.description[language],
+			title: data.CustomizedPackages.Title,
+			description: data.CustomizedPackages.Text,
 			bullets: [],
 		},
 	];
@@ -174,13 +125,13 @@ export default function About({language}: Props) {
 			<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>
+					<Title>{data.Title}</Title>
 				</div>
 			</section>
 			{renderStruct(struct, (index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`)}
 			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
 				<div className="w-full h-full flex flex-col items-center justify-center">
-					<Title className="max-w-fit">{translation.corporate_educational_institutions[language]}</Title>
+					<Title className="max-w-fit">{data.CorporateEducationalInstitutions}</Title>
 				</div>
 			</section>
 			{renderStruct(final_struct, (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`)}

src/templates/Terms.tsx

@@ -2,32 +2,23 @@
 import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
 import Title from "@/components/Title";
-import translation from "@/translation/terms.json";
 import clsx from "clsx";
 import React from "react";
-import * as BsIcon from "react-icons/bs";
-import {IconType} from "react-icons";
+import TermsAndConditionsPage from "@/types/cms/termsConditions";
 
 interface Props {
 	language: "en" | "ar";
+	data: TermsAndConditionsPage;
 }
 
-type ContentKey = keyof typeof translation.content;
-type Translation = {ar: string; en: string};
-interface Content {
-	title: Translation;
-	text: Translation;
-	list?: Translation[];
-}
-
-export default function Terms({language}: Props) {
+export default function Terms({language, data}: Props) {
 	return (
 		<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">
 				<div className="w-full h-full flex flex-col items-center justify-center">
-					<Title>{translation.title[language]}</Title>
+					<Title>{data.Title}</Title>
 				</div>
 			</section>
 
@@ -37,17 +28,17 @@ export default function Terms({language}: Props) {
 						"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",
 						language === "ar" ? "text-right" : "text-left",
 					)}>
-					{Object.keys(translation.content).map((key) => {
-						const content = translation.content[key as ContentKey] as Content;
-
+					{data.Content.map((content, index) => {
 						return (
-							<span className="flex flex-col gap-1" key={key} id={key}>
-								<h2 className="font-semibold text-lg text-mti-purple-light">{content.title[language]}</h2>
-								<p className="whitespace-pre-wrap">{content.text[language]}</p>
-								{content.list && (
+							<span className="flex flex-col gap-1" key={index} id={index.toString()}>
+								{content.Title && <h2 className="font-semibold text-lg text-mti-purple-light">{content.Title}</h2>}
+								{content.Text && <p className="whitespace-pre-wrap">{content.Text}</p>}
+								{content.List && (
 									<ul className="list-disc pl-8">
-										{content.list.map((text, index) => (
-											<li key={index}>{text[language]}</li>
+										{content.List.split("\n").map((text, index) => (
+											<li className="whitespace-pre-wrap" key={index}>
+												{text}
+											</li>
 										))}
 									</ul>
 								)}

src/types/cms/footer.ts

@@ -1,7 +1,10 @@
+import {TitleWithText} from "./common";
+
 export default interface FooterSection {
 	Navigation: Navigation;
 	Services: Services;
 	About: About;
+	GetInTouch: TitleWithText;
 	Copyright: string;
 }
 

src/types/cms/home.ts

@@ -1,4 +1,4 @@
-import {TitleWithTagAndText, TitleWithText} from "./common";
+import {TagTitle, TitleWithTagAndText, TitleWithText} from "./common";
 
 export default interface HomePage {
 	GetStartedButton: string;
@@ -19,6 +19,7 @@ interface Modules {
 	Speaking: TitleWithText;
 }
 
-interface Interested extends TitleWithTagAndText {
+interface Interested extends TagTitle {
 	WhatsAppContact: string;
+	ContactUs: string;
 }

src/types/cms/services.ts

@@ -3,7 +3,7 @@ import {TitleWithText} from "./common";
 export default interface ServicesPage {
 	Title: string;
 	ModuleEvaluation: ModuleEvaluation[];
-	UnifiedEnglishLevelTest: ModuleEvaluation[];
+	UnifiedEnglishLevelTest: ProgressTracking;
 	ProgressTracking: ProgressTracking;
 	CorporateEducationalInstitutions: string;
 	CustomizedPackages: TitleWithText;
@@ -14,8 +14,10 @@ interface ModuleEvaluation {
 	Text: string;
 	Evaluation: string;
 	EvaluationValues: string;
+	EvaluationIcon: string;
 	Acquire: string;
 	AcquireValues: string;
+	AcquireIcon: string;
 }
 
 interface ProgressTracking {