Created the history page with a timeline

2024-02-01 23:45:15 +00:00
parent 2d3da1d725
commit 4fa00c47ed
6 changed files with 283 additions and 40 deletions
--- a/src/app/ar/history/page.tsx
+++ b/src/app/ar/history/page.tsx
@@ -1,6 +1,7 @@
 import About from "@/templates/About";
 import ComingSoon from "@/templates/ComingSoon";
+import History from "@/templates/History";

 export default function Page() {
-	return <ComingSoon page="/history" language="ar" />;
+	return <History language="ar" />;
 }
--- a/src/app/history/page.tsx
+++ b/src/app/history/page.tsx
@@ -1,6 +1,7 @@
 import About from "@/templates/About";
 import ComingSoon from "@/templates/ComingSoon";
+import History from "@/templates/History";

 export default function Page() {
-	return <ComingSoon page="/history" language="en" />;
+	return <History language="en" />;
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,52 +1,39 @@
 /* eslint-disable @next/next/no-page-custom-font */
 import clsx from "clsx";
 import "./globals.css";
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import { Almarai } from "next/font/google";
+import type {Metadata} from "next";
+import {Inter} from "next/font/google";
+import {Almarai} from "next/font/google";

 const almarai = Almarai({
-  subsets: ["arabic"],
-  weight: ["300", "400", "700", "800"],
+	subsets: ["arabic"],
+	weight: ["300", "400", "700", "800"],
 });

-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({subsets: ["latin"]});

 export const metadata: Metadata = {
-  title: "EnCoach",
-  description: "We are the best service and the only one",
+	title: "EnCoach",
+	description: "We are the best service and the only one",
 };

-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <head>
-        <link rel="icon" href="/favicon.ico" sizes="any" />
-        <meta
-          httpEquiv="Content-Security-Policy-Report-Only"
-          content="default-src 'self' *.stripe.com *.encoach.com staging.encoach.com localhost"
-        />
+export default function RootLayout({children}: {children: React.ReactNode}) {
+	return (
+		<html lang="en">
+			<head>
+				<link rel="icon" href="/favicon.ico" sizes="any" />
+				<meta
+					httpEquiv="Content-Security-Policy-Report-Only"
+					content="default-src 'self' *.stripe.com *.encoach.com staging.encoach.com localhost"
+				/>

-        <script async src="https://js.stripe.com/v3/pricing-table.js" />
+				<script async src="https://js.stripe.com/v3/pricing-table.js" />

-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin=""
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap"
-          rel="stylesheet"
-        />
-      </head>
-      <body className={clsx(almarai.className, "font-almarai")}>
-        {children}
-      </body>
-    </html>
-  );
+				<link rel="preconnect" href="https://fonts.googleapis.com" />
+				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+				<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet" />
+			</head>
+			<body className={clsx(almarai.className, "font-almarai")}>{children}</body>
+		</html>
+	);
 }
--- a/src/templates/History.tsx
+++ b/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>
+	);
+}
--- a/src/translation/history.json
+++ b/src/translation/history.json
@@ -0,0 +1,151 @@
+{
+  "title": {
+    "en": "History",
+    "ar": "تاريخنا"
+  },
+  "events": [
+    {
+      "label": {
+        "en": "Idea conception",
+        "ar": "نشأة الفكرة"
+      },
+      "date": {
+        "en": "December 2021",
+        "ar": "ديسمبر 2021"
+      },
+      "icon": "BsLightbulbFill"
+    },
+    {
+      "label": {
+        "en": "Feasibility study and research",
+        "ar": "دراسة الجدوى والبحث"
+      },
+      "date": {
+        "en": "January 2022",
+        "ar": "يناير 2022"
+      },
+      "icon": "BsBook"
+    },
+    {
+      "label": {
+        "en": "Developer selection process",
+        "ar": "عملية اختيار المطورين"
+      },
+      "date": {
+        "en": "October 2022",
+        "ar": "أكتوبر 2022"
+      },
+      "icon": "BsCode"
+    },
+    {
+      "label": {
+        "en": "Developers identified and onboarded",
+        "ar": "تم تحديد المطورين واختيارهم"
+      },
+      "date": {
+        "en": "January 2023",
+        "ar": "يناير 2023"
+      },
+      "icon": "BsPeopleFill"
+    },
+    {
+      "label": {
+        "en": "Prototype development",
+        "ar": "تطوير النموذج الأولي"
+      },
+      "date": {
+        "en": "February 2023",
+        "ar": "فبراير 2023"
+      },
+      "icon": "BsCodeSlash"
+    },
+    {
+      "label": {
+        "en": "Design and user interface refinement",
+        "ar": "تصميم وتحسين واجهة المستخدم"
+      },
+      "date": {
+        "en": "April 2023",
+        "ar": "أبريل 2023"
+      },
+      "icon": "BsLayoutWtf"
+    },
+    {
+      "label": {
+        "en": "Backend development and integration",
+        "ar": "تطوير ودمج الجانب الخلفي للمنصة"
+      },
+      "date": {
+        "en": "August 2023",
+        "ar": "أغسطس 2023"
+      },
+      "icon": "BsDiscFill"
+    },
+    {
+      "label": {
+        "en": "Beta testing phase",
+        "ar": "مرحلة اختبار النسخة التجريبية (بيتا)"
+      },
+      "date": {
+        "en": "September 2023",
+        "ar": "سبتمبر 2023"
+      },
+      "icon": "BsClipboardDataFill"
+    },
+    {
+      "label": {
+        "en": "Soft launch of EnCoach platform",
+        "ar": "إطلاق تجريبي لمنصة إنكوتش"
+      },
+      "date": {
+        "en": "October 2023",
+        "ar": "أكتوبر 2023"
+      },
+      "icon": "BsCheckLg"
+    },
+    {
+      "label": {
+        "en": "User testing and feedback collection",
+        "ar": "اختبار المستخدمين وجمع الملاحظات والرواجع"
+      },
+      "date": {
+        "en": "November 2023",
+        "ar": "نوفمبر 2023"
+      },
+      "icon": "BsClipboardDataFill"
+    },
+    {
+      "label": {
+        "en": "Security and privacy assessment",
+        "ar": "تقييم الأمان والخصوصية"
+      },
+      "date": {
+        "en": "November 2023",
+        "ar": "نوفمبر 2023"
+      },
+      "icon": "BsShieldFill"
+    },
+    {
+      "label": {
+        "en": "Official launch of EnCoach platform",
+        "ar": "الإطلاق الرسمي لمنصة إنكوتش"
+      },
+      "date": {
+        "en": "December 2023",
+        "ar": "ديسمبر 2023"
+      },
+      "icon": "BsCheck2All"
+    },
+    {
+      "label": {
+        "en": "User onboarding",
+        "ar": "البدء في تسجيل المستخدمين"
+      },
+      "date": {
+        "en": "December 2023",
+        "ar": "ديسمبر 2023"
+      },
+      "icon": "BsPersonFillAdd"
+    }
+  ]
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -48,9 +48,23 @@ const config: Config = {
 				"18": "4.5rem",
 				"30": "7.5rem",
 				"1/6": "16%",
+				"2/6": "32%",
+				"3/6": "48%",
+				"4/6": "64%",
+				"5/6": "80%",
 				"1/8": "12%",
 				"1/10": "10%",
 				"1/12": "8%",
+				"2/12": "16%",
+				"3/12": "24%",
+				"4/12": "32%",
+				"5/12": "40%",
+				"6/12": "48%",
+				"7/12": "56%",
+				"8/12": "64%",
+				"9/12": "72%",
+				"10/12": "80%",
+				"11/12": "88%",
 			},
 			screens: {
 				"-sm": {max: "639px"},