Created the history page with a timeline
This commit is contained in:
Tiago Ribeiro
@@ -1,6 +1,7 @@
|
|||||||
import About from "@/templates/About";
|
import About from "@/templates/About";
|
||||||
import ComingSoon from "@/templates/ComingSoon";
|
import ComingSoon from "@/templates/ComingSoon";
|
||||||
|
import History from "@/templates/History";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return <ComingSoon page="/history" language="ar" />;
|
return <History language="ar" />;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import About from "@/templates/About";
|
import About from "@/templates/About";
|
||||||
import ComingSoon from "@/templates/ComingSoon";
|
import ComingSoon from "@/templates/ComingSoon";
|
||||||
|
import History from "@/templates/History";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return <ComingSoon page="/history" language="en" />;
|
return <History language="en" />;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,11 +17,7 @@ export const metadata: Metadata = {
|
|||||||
description: "We are the best service and the only one",
|
description: "We are the best service and the only one",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({children}: {children: React.ReactNode}) {
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}) {
|
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
@@ -34,19 +30,10 @@ export default function RootLayout({
|
|||||||
<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.googleapis.com" />
|
||||||
<link
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
|
||||||
rel="preconnect"
|
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet" />
|
||||||
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>
|
</head>
|
||||||
<body className={clsx(almarai.className, "font-almarai")}>
|
<body className={clsx(almarai.className, "font-almarai")}>{children}</body>
|
||||||
{children}
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
89
src/templates/History.tsx
Normal file
89
src/templates/History.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
151
src/translation/history.json
Normal file
151
src/translation/history.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -48,9 +48,23 @@ const config: Config = {
|
|||||||
"18": "4.5rem",
|
"18": "4.5rem",
|
||||||
"30": "7.5rem",
|
"30": "7.5rem",
|
||||||
"1/6": "16%",
|
"1/6": "16%",
|
||||||
|
"2/6": "32%",
|
||||||
|
"3/6": "48%",
|
||||||
|
"4/6": "64%",
|
||||||
|
"5/6": "80%",
|
||||||
"1/8": "12%",
|
"1/8": "12%",
|
||||||
"1/10": "10%",
|
"1/10": "10%",
|
||||||
"1/12": "8%",
|
"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: {
|
screens: {
|
||||||
"-sm": {max: "639px"},
|
"-sm": {max: "639px"},
|
||||||
|
|||||||
Reference in New Issue
Block a user