Updated some client pages to externalize the Navbar and Footer

src/app/ar/contact/page.tsx

@@ -1,9 +1,17 @@
 import {getData} from "@/cms";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 import ContactUs from "@/templates/ContactUs";
 import ContactPage from "@/types/cms/contact";
 
 export default async function Page() {
 	const {data} = await getData<ContactPage>("contact", "ar");
 
-	return <ContactUs data={data.data.attributes} page="/contact" language="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} />;
+			<Footer language="ar" />
+		</main>
+	);
 }

src/app/ar/price/page.tsx

@@ -1,9 +1,17 @@
 import {getData} from "@/cms";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 import Price from "@/templates/Price";
 import PricePage from "@/types/cms/price";
 
 export default async function Page() {
 	const {data} = await getData<PricePage>("price", "ar");
 
-	return <Price data={data.data.attributes} language="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" />
+			<Footer language="ar" />
+		</main>
+	);
 }

src/app/contact/page.tsx

@@ -1,9 +1,17 @@
 import {getData} from "@/cms";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 import ContactUs from "@/templates/ContactUs";
 import ContactPage from "@/types/cms/contact";
 
 export default async function Page() {
 	const {data} = await getData<ContactPage>("contact", "en");
 
-	return <ContactUs data={data.data.attributes} page="/contact" language="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} />;
+			<Footer language="en" />
+		</main>
+	);
 }

src/app/price/page.tsx

@@ -1,9 +1,17 @@
 import {getData} from "@/cms";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 import Price from "@/templates/Price";
 import PricePage from "@/types/cms/price";
 
 export default async function Page() {
 	const {data} = await getData<PricePage>("price", "en");
 
-	return <Price data={data.data.attributes} language="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" />
+			<Footer language="en" />
+		</main>
+	);
 }

src/templates/ContactUs.tsx

@@ -18,9 +18,7 @@ type FormValues = {
 };
 
 interface Props {
-	language: "en" | "ar";
 	data: ContactPage;
-	page: string;
 }
 
 const ErrorMessage = ({message}: {message: string}) => (
@@ -28,7 +26,7 @@ const ErrorMessage = ({message}: {message: string}) => (
 		<span className="text-mti-red">{message}</span>
 	</div>
 );
-export default function App({language, data, page}: Props) {
+export default function App({data}: Props) {
 	const selectOptions = [
 		{
 			label: data.Feedback,
@@ -92,8 +90,6 @@ export default function App({language, data, page}: Props) {
 	return (
 		<>
 			<ToastContainer />
-			<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="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>{data.Title}</Title>
@@ -151,8 +147,6 @@ export default function App({language, data, page}: Props) {
 					<Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" />
 				</div>
 			</section>
-				<Footer language={language} />
-			</main>
 		</>
 	);
 }

src/templates/Price.tsx

@@ -67,8 +67,7 @@ export default function Page({language, data}: Props) {
 		getData();
 	}, []);
 	return (
-		<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">{data.Title}</h2>
 				<div className="grid grid-cols-2 gap-8">
@@ -103,7 +102,6 @@ export default function Page({language, data}: Props) {
 					{data.SignUp}
 				</Link>
 			</section>
-			<Footer language={language} />
-		</main>
+		</>
 	);
 }