Created the Privacy Policy page

src/templates/Privacy.tsx

@@ -0,0 +1,65 @@
+/* eslint-disable @next/next/no-img-element */
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
+import Title from "@/components/Title";
+import translation from "@/translation/privacy.json";
+import clsx from "clsx";
+import React from "react";
+import * as BsIcon from "react-icons/bs";
+import {IconType} from "react-icons";
+
+interface Props {
+	language: "en" | "ar";
+}
+
+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) {
+	return (
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+			<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>
+				</div>
+			</section>
+
+			<section id="terms" 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;
+
+						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 && (
+									<ul className="list-disc pl-8">
+										{content.list.map((text, index) => (
+											<li className="whitespace-pre-wrap" key={index}>
+												{text[language]}
+											</li>
+										))}
+									</ul>
+								)}
+							</span>
+						);
+					})}
+				</div>
+			</section>
+
+			<Footer language={language} />
+		</main>
+	);
+}