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

Merged master into bug-fixing-12-Feb-24

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-02-13 00:40:37 +00:00
parent 9ff096f323 b53b66fcbd
commit fc5839eefb
9 changed files with 194 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Navbar.tsx
View File

@@ -28,7 +28,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
<Link href="/">
<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
</Link>
<div className={clsx("flex w-fit items-center gap-8", language === "ar" && "flex-row-reverse")}>
<div className={clsx("flex w-fit items-center gap-8")}>
{items.map((item) => (
<Link
key={item.key}

22
src/templates/About.tsx
View File

@@ -30,7 +30,7 @@ interface Props {
export default function About({language}: Props) {
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
<Navbar currentPage="/about" language={language} />
<section className="w-full h-full bg-mti-purple text-white text-center p-8 md:p-16">
@@ -86,12 +86,12 @@ export default function About({language}: Props) {
{/* CEO Message Section */}
<section id="message" className="w-full bg-white">
<div className="w-full flex -md:flex-col -md:items-center -md:pb-16 justify-between gap-8 p-8 md:p-20 container mx-auto">
<div className={clsx(language === "ar" ? "text-right" : "text-left", "flex flex-col gap-8 max-w-xl")}>
<div className={clsx("flex flex-col gap-8 max-w-xl")}>
<Title>{translation.ceo_message.title[language]}</Title>
<span>
{translation.ceo_message.text[language].split("\n").map((line, index) => (
<React.Fragment key={index}>
<p className={clsx(language === "ar" ? "text-right" : "text-left")}>{line}</p>
<p>{line}</p>
<br />
</React.Fragment>
))}
@@ -115,12 +115,8 @@ export default function About({language}: Props) {
{/* 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")}>
<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
<div className={clsx("w-full flex")}>
<Title>{translation.capabilities.title[language]}</Title>
</div>
<span className="text-lg">{translation.capabilities.intro[language]}</span>
@@ -182,12 +178,8 @@ export default function About({language}: Props) {
{/* 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")}>
<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
<div className={clsx("w-full flex")}>
<Title>{translation.expertise.title[language]}</Title>
</div>
<span className="text-lg">{translation.expertise.intro[language]}</span>

2
src/templates/ComingSoon.tsx
View File

@@ -20,7 +20,7 @@ interface Props {
export default function ComingSoon({ page, language }: Props) {
return (
<main className="text-mti-black flex h-screen w-full flex-col bg-white">
<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
<Navbar currentPage={page} language={language} />
<section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">

2
src/templates/History.tsx
View File

@@ -50,7 +50,7 @@ const Element = ({date, label, isEven, language, Icon}: ElementProps) => {
export default function History({language}: Props) {
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
<Navbar currentPage="/history" language={language} />
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">

6
src/templates/Home.tsx
View File

@@ -14,7 +14,9 @@ interface Props {
export default function Home({language}: Props) {
return (
<main className={clsx("h-screen w-full bg-white text-mti-black flex flex-col", language === "ar" && "text-right")}>
<main
className={clsx("h-screen w-full bg-white text-mti-black flex flex-col", language === "ar" && "text-right")}
dir={language === "ar" ? "rtl" : "ltr"}>
<Navbar currentPage="/" language={language} />
<section className="w-full relative bg-white">
@@ -169,7 +171,7 @@ export default function Home({language}: Props) {
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-10 -bottom-10" />
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-20 -bottom-10" />
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute left-30 -bottom-10" />
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -bottom-10" />
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -bottom-10 left-0" />
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 -bottom-10" />
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-0" />
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-10" />

5
src/templates/Price.tsx
View File

@@ -62,10 +62,9 @@ export default function Page({language}: {language: "en" | "ar"}) {
getData();
}, []);
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
<Navbar currentPage="/price" language={language} />
<section className="w-full relative bg-white px-8 flex flex-col items-center text-center gap-4" dir={language === "ar" ? "rtl" : "ltr"}>
<section className="w-full relative bg-white px-8 flex flex-col items-center text-center gap-4">
<h2 className="text-3xl font-bold">{translation.title[language]}</h2>
<div className="grid grid-cols-2 gap-8">
{payments.map((p) => (

6
src/templates/Privacy.tsx
View File

@@ -22,16 +22,16 @@ interface Content {
export default function Privacy({language}: Props) {
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
<Navbar currentPage="/terms" language={language} />
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16" dir={language === "ar" ? "rtl" : "ltr"}>
<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="terms" className="w-full h-fit bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
<section id="terms" className="w-full h-fit bg-white">
<div
className={clsx(
"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",

377
src/templates/Services.tsx
View File

@@ -2,222 +2,189 @@ 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,
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";
language: "en" | "ar";
}
interface SectionStruct {
id: string;
title: string;
description: string;
bullets: {
title: string;
values: string[];
icon: any;
}[];
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,
},
],
},
];
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 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>
));
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-start")}>
<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")}>
<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>
);
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
<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>
);
}

6
src/templates/Terms.tsx
View File

@@ -22,16 +22,16 @@ interface Content {
export default function Terms({language}: Props) {
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
<Navbar currentPage="/terms" language={language} />
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16" dir={language === "ar" ? "rtl" : "ltr"}>
<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="terms" className="w-full h-fit bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
<section id="terms" className="w-full h-fit bg-white">
<div
className={clsx(
"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",