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

Added Service page

Browse Source
This commit is contained in:
Joao Ramos
2024-02-07 22:23:38 +00:00
parent 36d6c8c405
commit 31f5a52060
4 changed files with 449 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/templates/Services.tsx Normal file
View File

@@ -0,0 +1,223 @@
import Navbar from "@/components/Navbar";
import clsx from "clsx";
import Title from "@/components/Title";
import {
BsBook,
BsBlockquoteLeft,
BsFillPencilFill,
BsMic,
BsSoundwave,
BsBookmarkStar,
BsCheck2Circle,
BsEarbuds,
BsFileBarGraph,
BsBank,
} from "react-icons/bs";
import translation from "@/translation/services.json";
import Footer from "@/components/Footer";
interface Props {
language: "en" | "ar";
}
interface SectionStruct {
id: string;
title: string;
description: string;
bullets: {
title: string;
values: string[];
icon: any;
}[];
}
export default function About({ language }: Props) {
const struct = [
{
id: "english_writing_evaluation",
title: translation.english_writing_evaluation.title[language],
description: translation.english_writing_evaluation.description[language],
bullets: [
{
title: translation.english_writing_evaluation.evaluation[language],
values:
translation.english_writing_evaluation.evaluation_values[language],
icon: BsBlockquoteLeft,
},
{
title: translation.english_writing_evaluation.acquire[language],
values:
translation.english_writing_evaluation.acquire_values[language],
icon: BsFillPencilFill,
},
],
},
{
id: "speaking_practice_evaluation",
title: translation.speaking_practice_evaluation.title[language],
description:
translation.speaking_practice_evaluation.description[language],
bullets: [
{
title: translation.speaking_practice_evaluation.evaluation[language],
values:
translation.speaking_practice_evaluation.evaluation_values[
language
],
icon: BsMic,
},
{
title: translation.speaking_practice_evaluation.acquire[language],
values:
translation.speaking_practice_evaluation.acquire_values[language],
icon: BsBook,
},
],
},
{
id: "reading_and_listening",
title: translation.reading_and_listening.title[language],
description: translation.reading_and_listening.description[language],
bullets: [
{
title: translation.reading_and_listening.evaluation[language],
values: translation.reading_and_listening.evaluation_values[language],
icon: BsSoundwave,
},
{
title: translation.reading_and_listening.acquire[language],
values: translation.reading_and_listening.acquire_values[language],
icon: BsBookmarkStar,
},
],
},
{
id: "practice_tests",
title: translation.practice_tests.title[language],
description: translation.practice_tests.description[language],
bullets: [
{
title: translation.practice_tests.evaluation[language],
values: translation.practice_tests.evaluation_values[language],
icon: BsCheck2Circle,
},
{
title: translation.practice_tests.acquire[language],
values: translation.practice_tests.acquire_values[language],
icon: BsEarbuds,
},
],
},
{
id: "progress_tracking",
title: translation.progress_tracking.title[language],
description: translation.progress_tracking.description[language],
bullets: [
{
title: translation.progress_tracking.advantages[language],
values: translation.progress_tracking.advantages_values[language],
icon: BsFileBarGraph,
},
],
},
];
const final_struct = [
{
id: "unified_english_level_test",
title: translation.unified_english_level_test.title[language],
description: translation.unified_english_level_test.description[language],
bullets: [
{
title: translation.unified_english_level_test.advantages[language],
values:
translation.unified_english_level_test.advantages_values[language],
icon: BsBank,
},
],
},
{
id: "customized_packages",
title: translation.customized_packages.title[language],
description: translation.customized_packages.description[language],
bullets: [],
},
];
const renderStruct = (data: SectionStruct[], getBackgroundColor: (index: number) => string) =>
data.map((section, index) => (
<section
id={section.id}
key={section.id}
className={`w-full ${getBackgroundColor(index)}`}
>
<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 className="max-w-fit">{section.title}</Title>
</div>
<span className="text-lg">{section.description}</span>
<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
{section.bullets.map((bullet) => (
<div
key={bullet.title}
className={clsx(
"flex gap-8 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">
{bullet.icon && (
<bullet.icon 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">
{bullet.title}
</span>
<ul className="list-disc gap-2 flex flex-col">
{bullet.values.map((value) => (
<li key={value}>{value}</li>
))}
</ul>
</div>
</div>
))}
</div>
</div>
</section>
));
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<Navbar currentPage="/services" 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.services[language]}</Title>
</div>
</section>
{renderStruct(
struct,
(index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`
)}
<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 className="max-w-fit">
{translation.corporate_educational_institutions[language]}
</Title>
</div>
</section>
{renderStruct(
final_struct,
(index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`
)}
<Footer language={language} />
</main>
);
}