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

Merged in dir (pull request #4)

Browse Source 
Applied dir to all pages
This commit is contained in:
João Ramos
2024-02-13 00:30:04 +00:00
committed by Tiago Ribeiro
parent 8287bbae18 477a69a3be
commit b53b66fcbd
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="/"> <Link href="/">
<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} /> <Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
</Link> </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) => ( {items.map((item) => (
<Link <Link
key={item.key} key={item.key}

22
src/templates/About.tsx
View File

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

5
src/templates/Price.tsx
View File

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

6
src/templates/Privacy.tsx
View File

@@ -22,16 +22,16 @@ interface Content {
export default function Privacy({language}: Props) { export default function Privacy({language}: Props) {
return ( 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} /> <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"> <div className="w-full h-full flex flex-col items-center justify-center">
<Title>{translation.title[language]}</Title> <Title>{translation.title[language]}</Title>
</div> </div>
</section> </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 <div
className={clsx( className={clsx(
"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto", "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 clsx from "clsx";
import Title from "@/components/Title"; import Title from "@/components/Title";
import { import {
BsBook, BsBook,
BsBlockquoteLeft, BsBlockquoteLeft,
BsFillPencilFill, BsFillPencilFill,
BsMic, BsMic,
BsSoundwave, BsSoundwave,
BsBookmarkStar, BsBookmarkStar,
BsCheck2Circle, BsCheck2Circle,
BsEarbuds, BsEarbuds,
BsFileBarGraph, BsFileBarGraph,
BsBank, BsBank,
} from "react-icons/bs"; } from "react-icons/bs";
import translation from "@/translation/services.json"; import translation from "@/translation/services.json";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
interface Props { interface Props {
language: "en" | "ar"; language: "en" | "ar";
} }
interface SectionStruct { interface SectionStruct {
id: string; id: string;
title: string; title: string;
description: string; description: string;
bullets: { bullets: {
title: string; title: string;
values: string[]; values: string[];
icon: any; icon: any;
}[]; }[];
} }
export default function About({ language }: Props) { export default function About({language}: Props) {
const struct = [ const struct = [
{ {
id: "english_writing_evaluation", id: "english_writing_evaluation",
title: translation.english_writing_evaluation.title[language], title: translation.english_writing_evaluation.title[language],
description: translation.english_writing_evaluation.description[language], description: translation.english_writing_evaluation.description[language],
bullets: [ bullets: [
{ {
title: translation.english_writing_evaluation.evaluation[language], title: translation.english_writing_evaluation.evaluation[language],
values: values: translation.english_writing_evaluation.evaluation_values[language],
translation.english_writing_evaluation.evaluation_values[language], icon: BsBlockquoteLeft,
icon: BsBlockquoteLeft, },
}, {
{ title: translation.english_writing_evaluation.acquire[language],
title: translation.english_writing_evaluation.acquire[language], values: translation.english_writing_evaluation.acquire_values[language],
values: icon: BsFillPencilFill,
translation.english_writing_evaluation.acquire_values[language], },
icon: BsFillPencilFill, ],
}, },
], {
}, id: "speaking_practice_evaluation",
{ title: translation.speaking_practice_evaluation.title[language],
id: "speaking_practice_evaluation", description: translation.speaking_practice_evaluation.description[language],
title: translation.speaking_practice_evaluation.title[language], bullets: [
description: {
translation.speaking_practice_evaluation.description[language], title: translation.speaking_practice_evaluation.evaluation[language],
bullets: [ values: translation.speaking_practice_evaluation.evaluation_values[language],
{ icon: BsMic,
title: translation.speaking_practice_evaluation.evaluation[language], },
values: {
translation.speaking_practice_evaluation.evaluation_values[ title: translation.speaking_practice_evaluation.acquire[language],
language values: translation.speaking_practice_evaluation.acquire_values[language],
], icon: BsBook,
icon: BsMic, },
}, ],
{ },
title: translation.speaking_practice_evaluation.acquire[language], {
values: id: "reading_and_listening",
translation.speaking_practice_evaluation.acquire_values[language], title: translation.reading_and_listening.title[language],
icon: BsBook, description: translation.reading_and_listening.description[language],
}, bullets: [
], {
}, title: translation.reading_and_listening.evaluation[language],
{ values: translation.reading_and_listening.evaluation_values[language],
id: "reading_and_listening", icon: BsSoundwave,
title: translation.reading_and_listening.title[language], },
description: translation.reading_and_listening.description[language], {
bullets: [ title: translation.reading_and_listening.acquire[language],
{ values: translation.reading_and_listening.acquire_values[language],
title: translation.reading_and_listening.evaluation[language], icon: BsBookmarkStar,
values: translation.reading_and_listening.evaluation_values[language], },
icon: BsSoundwave, ],
}, },
{ {
title: translation.reading_and_listening.acquire[language], id: "practice_tests",
values: translation.reading_and_listening.acquire_values[language], title: translation.practice_tests.title[language],
icon: BsBookmarkStar, description: translation.practice_tests.description[language],
}, bullets: [
], {
}, title: translation.practice_tests.evaluation[language],
{ values: translation.practice_tests.evaluation_values[language],
id: "practice_tests", icon: BsCheck2Circle,
title: translation.practice_tests.title[language], },
description: translation.practice_tests.description[language], {
bullets: [ title: translation.practice_tests.acquire[language],
{ values: translation.practice_tests.acquire_values[language],
title: translation.practice_tests.evaluation[language], icon: BsEarbuds,
values: translation.practice_tests.evaluation_values[language], },
icon: BsCheck2Circle, ],
}, },
{ {
title: translation.practice_tests.acquire[language], id: "progress_tracking",
values: translation.practice_tests.acquire_values[language], title: translation.progress_tracking.title[language],
icon: BsEarbuds, description: translation.progress_tracking.description[language],
}, bullets: [
], {
}, title: translation.progress_tracking.advantages[language],
{ values: translation.progress_tracking.advantages_values[language],
id: "progress_tracking", icon: BsFileBarGraph,
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 = [ const final_struct = [
{ {
id: "unified_english_level_test", id: "unified_english_level_test",
title: translation.unified_english_level_test.title[language], title: translation.unified_english_level_test.title[language],
description: translation.unified_english_level_test.description[language], description: translation.unified_english_level_test.description[language],
bullets: [ bullets: [
{ {
title: translation.unified_english_level_test.advantages[language], title: translation.unified_english_level_test.advantages[language],
values: values: translation.unified_english_level_test.advantages_values[language],
translation.unified_english_level_test.advantages_values[language], icon: BsBank,
icon: BsBank, },
}, ],
], },
}, {
{ id: "customized_packages",
id: "customized_packages", title: translation.customized_packages.title[language],
title: translation.customized_packages.title[language], description: translation.customized_packages.description[language],
description: translation.customized_packages.description[language], bullets: [],
bullets: [], },
}, ];
];
const renderStruct = (data: SectionStruct[], getBackgroundColor: (index: number) => string) => const renderStruct = (data: SectionStruct[], getBackgroundColor: (index: number) => string) =>
data.map((section, index) => ( data.map((section, index) => (
<section <section id={section.id} key={section.id} className={`w-full ${getBackgroundColor(index)}`}>
id={section.id} <div
key={section.id} className={clsx(
className={`w-full ${getBackgroundColor(index)}`} "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( <div className={clsx("w-full flex", language === "ar" && "justify-start")}>
"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto", <Title className="max-w-fit">{section.title}</Title>
language === "ar" && "text-right" </div>
)} <span className="text-lg">{section.description}</span>
> <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
<div {section.bullets.map((bullet) => (
className={clsx("w-full flex", language === "ar" && "justify-end")} <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">
<Title className="max-w-fit">{section.title}</Title> {bullet.icon && <bullet.icon className="text-mti-rose-light w-6 h-6" />}
</div> </div>
<span className="text-lg">{section.description}</span> <div className="flex flex-col gap-2">
<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8"> <span className="text-lg font-bold text-mti-rose-light">{bullet.title}</span>
{section.bullets.map((bullet) => ( <ul className="list-disc gap-2 flex flex-col">
<div {bullet.values.map((value) => (
key={bullet.title} <li key={value}>{value}</li>
className={clsx( ))}
"flex gap-8 items-center", </ul>
language === "ar" && "flex-row-reverse" </div>
)} </div>
> ))}
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit"> </div>
{bullet.icon && ( </div>
<bullet.icon className="text-mti-rose-light w-6 h-6" /> </section>
)} ));
</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 ( 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="/services" language={language} /> <Navbar currentPage="/services" language={language} />
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16"> <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"> <div className="w-full h-full flex flex-col items-center justify-center">
<Title>{translation.services[language]}</Title> <Title>{translation.services[language]}</Title>
</div> </div>
</section> </section>
{renderStruct( {renderStruct(struct, (index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`)}
struct, <section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
(index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}` <div className="w-full h-full flex flex-col items-center justify-center">
)} <Title className="max-w-fit">{translation.corporate_educational_institutions[language]}</Title>
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16"> </div>
<div className="w-full h-full flex flex-col items-center justify-center"> </section>
<Title className="max-w-fit"> {renderStruct(final_struct, (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`)}
{translation.corporate_educational_institutions[language]} <Footer language={language} />
</Title> </main>
</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) { export default function Terms({language}: Props) {
return ( 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} /> <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"> <div className="w-full h-full flex flex-col items-center justify-center">
<Title>{translation.title[language]}</Title> <Title>{translation.title[language]}</Title>
</div> </div>
</section> </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 <div
className={clsx( className={clsx(
"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto", "w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",