Created the history page with a timeline

src/templates/History.tsx

@@ -0,0 +1,89 @@
+/* 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/history.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";
+}
+
+interface ElementProps {
+	date: string;
+	Icon: IconType;
+	label: string;
+	language: "ar" | "en";
+	isEven?: boolean;
+}
+
+const Element = ({date, label, isEven, language, Icon}: ElementProps) => {
+	return (
+		<>
+			<div className={clsx("flex items-center gap-8 -md:hidden", isEven && "flex-row-reverse")}>
+				<div className={clsx("w-64 bg-mti-rose-ultralight p-4 rounded-xl", language === "ar" && "text-right")}>
+					<span>{label}</span>
+				</div>
+				<div className="h-16 w-16 rounded-full bg-mti-purple-dark flex items-center justify-center text-white border-white border-4 drop-shadow">
+					<Icon className="h-6 w-6" />
+				</div>
+				<span className={clsx("w-64 text-mti-purple-light font-semibold text-lg", isEven && "text-right")}>{date}</span>
+			</div>
+
+			<div className={clsx("flex items-center gap-8 md:hidden", language === "ar" && "flex-row-reverse text-right")}>
+				<div className="h-16 w-16 rounded-full bg-mti-purple-dark flex items-center justify-center text-white border-white border-4 drop-shadow">
+					<Icon className="h-6 w-6" />
+				</div>
+				<div className="flex flex-col">
+					<span className={clsx("w-64 text-mti-purple-light font-semibold text-lg")}>{date}</span>
+					<div className="w-64 bg-mti-rose-ultralight p-4 rounded-xl">
+						<span>{label}</span>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default function History({language}: Props) {
+	return (
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+			<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>
+				</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) => (
+							<Element
+								date={event.date[language]}
+								label={event.label[language]}
+								Icon={BsIcon[event.icon as keyof typeof BsIcon]}
+								key={index}
+								isEven={(index + 1) % 2 === 0}
+								language={language}
+							/>
+						))}
+					</div>
+					<div
+						className={clsx(
+							"w-2 h-[89%] bg-mti-purple-light absolute md:left-1/2 md:-translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full",
+							language === "en" && "left-1/2 -translate-x-[148px]",
+							language === "ar" && "right-1/2 translate-x-[148px]",
+						)}
+					/>
+				</div>
+			</section>
+
+			<Footer language={language} />
+		</main>
+	);
+}