Updated the code to allow for images

src/app/about/page.tsx

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

src/app/ar/about/page.tsx

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

src/app/ar/contact/page.tsx

@@ -5,12 +5,12 @@ import ContactUs from "@/templates/ContactUs";
 import ContactPage from "@/types/cms/contact";
 
 export default async function Page() {
-	const {data} = await getData<ContactPage>("contact", "ar");
+	const data = await getData<ContactPage>("contact", "ar");
 
 	return (
 		<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir="rtl">
 			<Navbar currentPage="/contact" language="ar" />
-			<ContactUs data={data.data.attributes} />;
+			<ContactUs data={data} />;
 			<Footer language="ar" />
 		</main>
 	);

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

@@ -15,7 +15,7 @@ export async function generateStaticParams() {
 }
 
 export default async function Page({params: {country}}: PageProps) {
-	const {data} = await getData<CountryManagerContactsPage>("country-managers-contact", language);
+	const data = await getData<CountryManagerContactsPage>("country-managers-contact", language);
 
-	return <AgentContacts data={data.data.attributes} country={country} page={`/contacts/${country}`} language={language} />;
+	return <AgentContacts data={data} country={country} page={`/contacts/${country}`} language={language} />;
 }

src/app/ar/history/page.tsx

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

src/app/ar/page.tsx

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

src/app/ar/price/page.tsx

@@ -5,12 +5,12 @@ import Price from "@/templates/Price";
 import PricePage from "@/types/cms/price";
 
 export default async function Page() {
-	const {data} = await getData<PricePage>("price", "ar");
+	const data = await getData<PricePage>("price", "ar");
 
 	return (
 		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir="rtl">
 			<Navbar currentPage="/price" language="ar" />
-			<Price data={data.data.attributes} language="ar" />
+			<Price data={data} language="ar" />
 			<Footer language="ar" />
 		</main>
 	);

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

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

src/app/ar/services/page.tsx

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

src/app/ar/terms/page.tsx

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

src/app/contact/page.tsx

@@ -5,12 +5,12 @@ import ContactUs from "@/templates/ContactUs";
 import ContactPage from "@/types/cms/contact";
 
 export default async function Page() {
-	const {data} = await getData<ContactPage>("contact", "en");
+	const data = await getData<ContactPage>("contact", "en");
 
 	return (
 		<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir="ltr">
 			<Navbar currentPage="/contact" language="en" />
-			<ContactUs data={data.data.attributes} />;
+			<ContactUs data={data} />;
 			<Footer language="en" />
 		</main>
 	);

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

@@ -15,7 +15,7 @@ export async function generateStaticParams() {
 }
 
 export default async function Page({params: {country}}: PageProps) {
-	const {data} = await getData<CountryManagerContactsPage>("country-managers-contact", language);
+	const data = await getData<CountryManagerContactsPage>("country-managers-contact", language);
 
-	return <AgentContacts data={data.data.attributes} country={country} page={`/contacts/${country}`} language={language} />;
+	return <AgentContacts data={data} country={country} page={`/contacts/${country}`} language={language} />;
 }

src/app/history/page.tsx

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

src/app/page.tsx

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

src/app/price/page.tsx

@@ -5,12 +5,12 @@ import Price from "@/templates/Price";
 import PricePage from "@/types/cms/price";
 
 export default async function Page() {
-	const {data} = await getData<PricePage>("price", "en");
+	const data = await getData<PricePage>("price", "en");
 
 	return (
 		<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir="ltr">
 			<Navbar currentPage="/price" language="en" />
-			<Price data={data.data.attributes} language="en" />
+			<Price data={data} language="en" />
 			<Footer language="en" />
 		</main>
 	);

src/app/privacy-policy/page.tsx

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

src/app/services/page.tsx

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

src/app/terms/page.tsx

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

src/cms/index.ts

@@ -13,11 +13,10 @@ interface StrapiResponse<T> {
 	meta: object;
 }
 
-type Result<T> = {data: StrapiResponse<T>; isError: boolean};
+export async function getData<T>(page: string, locale: "ar" | "en"): Promise<T> {
-
-export async function getData<T>(page: string, locale: "ar" | "en"): Promise<Result<T>> {
 	const request = await axios.get<StrapiResponse<T>>(`${process.env.STRAPI_URL}/api/${page}/?populate=deep&locale=${locale}`, {
 		headers: {Authorization: `Bearer ${process.env.STRAPI_TOKEN}`},
 	});
-	return {data: request.data, isError: request.status !== 200};
+
+	return request.data.data.attributes;
 }

src/components/Footer/index.tsx

@@ -7,7 +7,7 @@ interface Props {
 }
 
 export default async function FooterContainer({language}: Props) {
-	const {data} = await getData<FooterSection>("footer", language);
+	const data = await getData<FooterSection>("footer", language);
 
-	return <Footer data={data.data.attributes} language={language} />;
+	return <Footer data={data} language={language} />;
 }

src/components/Navbar/index.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 export default async function NavbarContainer({currentPage, language}: Props) {
-	const {data} = await getData<NavBarSection>("nav-bar", language);
+	const data = await getData<NavBarSection>("nav-bar", language);
 
-	return <Navbar data={data.data.attributes} language={language} currentPage={currentPage} />;
+	return <Navbar data={data} language={language} currentPage={currentPage} />;
 }

src/templates/Home.tsx

@@ -22,7 +22,11 @@ export default function Home({language, data}: Props) {
 			<Navbar currentPage="/" language={language} />
 
 			<section className="w-full relative bg-white">
-				<img src="/banner_encoach_home.png" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
+				<img
+					src={data.Banner?.url || "/banner_encoach_home.png"}
+					alt={data.Banner?.alternativeText ?? "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">
 						{data.GetStartedButton}

src/types/cms/common.ts

@@ -13,3 +13,24 @@ export type TitleWithTagAndText = TagTitle & TitleWithText;
 export interface TitleWithTextAndList extends TitleWithText {
 	List: string;
 }
+
+export interface ImageData {
+	data: {
+		id: number;
+		attributes: Image;
+	};
+}
+
+export interface Image {
+	name: string;
+	alternativeText: string | null;
+	caption: string | null;
+	width: number;
+	height: number;
+	hash: string;
+	ext: string;
+	mime: string;
+	size: number;
+	url: string;
+	previewUrl: string | null;
+}

src/types/cms/home.ts

@@ -1,6 +1,6 @@
-import {TagTitle, TitleWithTagAndText, TitleWithText} from "./common";
+import {TagTitle, TitleWithTagAndText, TitleWithText, ImageData, Image} from "./common";
 
-export default interface HomePage {
+interface Base {
 	GetStartedButton: string;
 	Modules: Modules;
 	LearnAI: TitleWithTagAndText;
@@ -12,6 +12,14 @@ export default interface HomePage {
 	Accreditation: string;
 }
 
+export default interface HomePage extends Base {
+	Banner: Image;
+}
+
+export interface HomePageData extends Base {
+	Banner: ImageData;
+}
+
 interface Modules {
 	Reading: TitleWithText;
 	Listening: TitleWithText;