devops/encoach_landingpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Added "Coming soon" pages for future pages;

Browse Source 
- Added two more sections to the About page;
- Fixed some typos;
This commit is contained in:
Tiago Ribeiro
2024-02-01 16:40:06 +00:00
parent 26a2c18839
commit e78f8834e6
13 changed files with 414 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/templates/About.tsx
View File

@@ -6,7 +6,23 @@ import Title from "@/components/Title";
import translation from "@/translation/about.json";
import clsx from "clsx";
import React from "react";
import {BsEye, BsEyeFill, BsFlower3, BsRocketTakeoffFill} from "react-icons/bs";
import {BiSolidBrain, BiWorld} from "react-icons/bi";
import {
BsBook,
BsBookFill,
BsClipboard2CheckFill,
BsClipboard2Data,
BsClipboard2DataFill,
BsEye,
BsEyeFill,
BsFlower3,
BsGraphUp,
BsPersonFill,
BsPersonFillExclamation,
BsRepeat,
BsRocketTakeoffFill,
BsTranslate,
} from "react-icons/bs";
interface Props {
language: "en" | "ar";
@@ -97,6 +113,140 @@ export default function About({language}: Props) {
</div>
</section>
{/* Capabilities */}
<section id="capabilities" className="w-full bg-mti-gray-seasalt">
<div
className={clsx(
"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
language === "ar" && "text-right",
)}>
<div className={clsx("w-full flex", language === "ar" && "justify-end")}>
<Title>{translation.capabilities.title[language]}</Title>
</div>
<span className="text-lg">{translation.capabilities.intro[language]}</span>
<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
<BsGraphUp className="text-mti-rose-light w-6 h-6" />
</div>
<div className="flex flex-col gap-2">
<span className="text-lg font-bold text-mti-rose-light">{translation.capabilities.analytics.title[language]}</span>
<p>{translation.capabilities.analytics.text[language]}</p>
</div>
</div>
<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
<BiSolidBrain className="text-mti-rose-light w-6 h-6" />
</div>
<div className="flex flex-col gap-2">
<span className="text-lg font-bold text-mti-rose-light">{translation.capabilities.predictive.title[language]}</span>
<p>{translation.capabilities.predictive.text[language]}</p>
</div>
</div>
<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
<BsTranslate className="text-mti-rose-light w-6 h-6" />
</div>
<div className="flex flex-col gap-2">
<span className="text-lg font-bold text-mti-rose-light">{translation.capabilities.nlp.title[language]}</span>
<p>{translation.capabilities.nlp.text[language]}</p>
</div>
</div>
<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
<BsPersonFill className="text-mti-rose-light w-6 h-6" />
</div>
<div className="flex flex-col gap-2">
<span className="text-lg font-bold text-mti-rose-light">{translation.capabilities.engine.title[language]}</span>
<p>{translation.capabilities.engine.text[language]}</p>
</div>
</div>
<div className={clsx("flex gap-4 items-center md:col-span-2", language === "ar" && "flex-row-reverse")}>
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
<BsRepeat className="text-mti-rose-light w-6 h-6" />
</div>
<div className="flex flex-col gap-2">
<span className="text-lg font-bold text-mti-rose-light">
{translation.capabilities.continuous_learning.title[language]}
</span>
<p>{translation.capabilities.continuous_learning.text[language]}</p>
</div>
</div>
</div>
</div>
</section>
{/* Expertise */}
<section id="expertise" className="w-full bg-white">
<div
className={clsx(
"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
language === "ar" && "text-right",
)}>
<div className={clsx("w-full flex", language === "ar" && "justify-end")}>
<Title>{translation.expertise.title[language]}</Title>
</div>
<span className="text-lg">{translation.expertise.intro[language]}</span>
<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
<BiWorld className="text-mti-rose-light w-6 h-6" />
</div>
<div className="flex flex-col gap-2">
<span className="text-lg font-bold text-mti-rose-light">{translation.expertise.language.title[language]}</span>
<p>{translation.expertise.language.text[language]}</p>
</div>
</div>
<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
<BsClipboard2CheckFill className="text-mti-rose-light w-6 h-6" />
</div>
<div className="flex flex-col gap-2">
<span className="text-lg font-bold text-mti-rose-light">{translation.expertise.ielts.title[language]}</span>
<p>{translation.expertise.ielts.text[language]}</p>
</div>
</div>
<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
<BsClipboard2DataFill className="text-mti-rose-light w-6 h-6" />
</div>
<div className="flex flex-col gap-2">
<span className="text-lg font-bold text-mti-rose-light">{translation.expertise.alignment.title[language]}</span>
<p>{translation.expertise.alignment.text[language]}</p>
</div>
</div>
<div className={clsx("flex gap-4 items-center", language === "ar" && "flex-row-reverse")}>
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
<BsPersonFillExclamation className="text-mti-rose-light w-6 h-6" />
</div>
<div className="flex flex-col gap-2">
<span className="text-lg font-bold text-mti-rose-light">{translation.expertise.native.title[language]}</span>
<p>{translation.expertise.native.text[language]}</p>
</div>
</div>
<div className={clsx("flex gap-4 items-center md:col-span-2", language === "ar" && "flex-row-reverse")}>
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
<BsBook className="text-mti-rose-light w-6 h-6" />
</div>
<div className="flex flex-col gap-2">
<span className="text-lg font-bold text-mti-rose-light">
{translation.expertise.knowledge_experience.title[language]}
</span>
<p>{translation.expertise.knowledge_experience.text[language]}</p>
</div>
</div>
</div>
</div>
</section>
<Footer language={language} />
</main>
);

35
src/templates/ComingSoon.tsx Normal file
View File

@@ -0,0 +1,35 @@
/* eslint-disable @next/next/no-img-element */
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import Tag from "@/components/Tag";
import Title from "@/components/Title";
import translation from "@/translation/about.json";
import clsx from "clsx";
import React from "react";
import {
BsEye,
BsEyeFill,
BsFlower3,
BsRocketTakeoffFill,
} from "react-icons/bs";
interface Props {
page: string;
language: "en" | "ar";
}
export default function ComingSoon({ page, language }: Props) {
return (
<main className="text-mti-black flex h-screen w-full flex-col bg-white">
<Navbar currentPage={page} language={language} />
<section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">
<div className="flex h-full w-full flex-col items-center justify-center">
<Title>Coming soon...</Title>
</div>
</section>
<Footer language={language} />
</main>
);
}