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

Updated the whole website to work according to the CMS

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-03-19 01:02:07 +00:00
parent 91ee920b42
commit 5ee1364afb
36 changed files with 617 additions and 648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/templates/Home.tsx
View File

@@ -7,12 +7,14 @@ import translation from "@/translation/home.json";
import clsx from "clsx";
import Tag from "@/components/Tag";
import Title from "@/components/Title";
import HomePage from "@/types/cms/home";
interface Props {
language: "en" | "ar";
data: HomePage;
}
export default function Home({language}: Props) {
export default function Home({language, data}: Props) {
return (
<main
className={clsx("h-screen w-full bg-white text-mti-black flex flex-col", language === "ar" && "text-right")}
@@ -23,7 +25,7 @@ export default function Home({language}: Props) {
<img src="/banner_encoach_home.png" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
<Link href={language === "ar" ? "/ar/price" : "/price"}>
<button className="absolute bottom-1/12 -lg:hidden left-1/12 bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
{translation.get_started_btn[language]}
{data.GetStartedButton}
</button>
</Link>
</section>
@@ -36,8 +38,8 @@ export default function Home({language}: Props) {
<BsBook className="text-mti-rose-light w-10 h-10" />
</div>
<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
<span className="font-bold text-xl">{translation.modules.reading.title[language]}</span>
<span>{translation.modules.reading.description[language]}</span>
<span className="font-bold text-xl">{data.Modules.Reading.Title}</span>
<span>{data.Modules.Reading.Text}</span>
</div>
</div>
<div className="flex flex-col items-center gap-6">
@@ -45,8 +47,8 @@ export default function Home({language}: Props) {
<BsHeadphones className="text-mti-rose-light w-10 h-10" />
</div>
<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
<span className="font-bold text-xl">{translation.modules.listening.title[language]}</span>
<span>{translation.modules.listening.description[language]}</span>
<span className="font-bold text-xl">{data.Modules.Listening.Title}</span>
<span>{data.Modules.Listening.Text}</span>
</div>
</div>
<div className="flex flex-col items-center gap-6">
@@ -54,8 +56,8 @@ export default function Home({language}: Props) {
<BsPen className="text-mti-rose-light w-10 h-10" />
</div>
<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
<span className="font-bold text-xl">{translation.modules.writing.title[language]}</span>
<span>{translation.modules.writing.description[language]}</span>
<span className="font-bold text-xl">{data.Modules.Writing.Title}</span>
<span>{data.Modules.Writing.Text}</span>
</div>
</div>
<div className="flex flex-col items-center gap-6">
@@ -63,8 +65,8 @@ export default function Home({language}: Props) {
<BsMegaphone className="text-mti-rose-light w-10 h-10" />
</div>
<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
<span className="font-bold text-xl">{translation.modules.speaking.title[language]}</span>
<span>{translation.modules.speaking.description[language]}</span>
<span className="font-bold text-xl">{data.Modules.Speaking.Title}</span>
<span>{data.Modules.Speaking.Text}</span>
</div>
</div>
</div>
@@ -74,14 +76,14 @@ export default function Home({language}: Props) {
<section className="w-full bg-mti-gray-seasalt">
<div className="w-full p-8 lg:py-24 lg:px-12 flex flex-col gap-8 md:gap-24 lg:flex-row items-center justify-center container mx-auto">
<div className="flex flex-col gap-8">
<Tag>{translation.learn_ai.tag[language]}</Tag>
<Tag>{data.LearnAI.Tag}</Tag>
<div className={clsx("flex flex-col gap-3", language === "ar" && "items-end")}>
<Title>{translation.learn_ai.title[language]}</Title>
<p className="max-w-lg text-base">{translation.learn_ai.description[language]}</p>
<Title>{data.LearnAI.Title}</Title>
<p className="max-w-lg text-base">{data.LearnAI.Text}</p>
</div>
<Link href="/price">
<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
{translation.learn_more[language]}
{data.LearnMore}
</button>
</Link>
</div>
@@ -106,14 +108,14 @@ export default function Home({language}: Props) {
</div>
</div>
<div className="flex flex-col gap-8">
<Tag>{translation.encoach_benefits.tag[language]}</Tag>
<Tag>{data.EnCoachBenefits.Tag}</Tag>
<div className={clsx("flex flex-col gap-3", language === "ar" && "items-end")}>
<Title>{translation.encoach_benefits.title[language]}</Title>
<p className="max-w-lg text-base">{translation.encoach_benefits.description[language]}</p>
<Title>{data.EnCoachBenefits.Title}</Title>
<p className="max-w-lg text-base">{data.EnCoachBenefits.Text}</p>
</div>
<Link href="/about">
<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
{translation.learn_more[language]}
{data.LearnMore}
</button>
</Link>
</div>
@@ -123,15 +125,15 @@ export default function Home({language}: Props) {
{/* Interested Section */}
<section className="w-full bg-mti-gray-seasalt">
<div className="w-full p-8 py-16 md:py-32 md:px-16 lg:px-28 items-center justify-center flex flex-col gap-10 relative container mx-auto">
<Tag>{translation.interested.tag[language]}</Tag>
<Title className="!max-w-sm text-center">{translation.interested.title[language]}</Title>
<Tag>{data.Interested.Tag}</Tag>
<Title className="!max-w-sm text-center">{data.Interested.Title}</Title>
<Link href="/contact">
<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
{translation.interested.contact_us[language]}
{data.Interested.ContactUs}
</button>
</Link>
<div className="lg:absolute top-1/2 lg:-translate-y-2/3 right-1/6 flex flex-col items-center">
<em className="text-xs text-mti-purple-light font-semibold">{translation.interested.whatsapp[language]}</em>
<em className="text-xs text-mti-purple-light font-semibold">{data.Interested.WhatsAppContact}</em>
<img className="w-32 h-32" alt="WhatsApp QR Code for MTI" src="/whatsapp_qrcode.png" />
<div className="w-full h-full relative">
<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6" />
@@ -152,14 +154,14 @@ export default function Home({language}: Props) {
<section className="w-full bg-white">
<div className="w-full px-8 pt-12 pb-20 md:p-20 lg:p-32 flex flex-col gap-12 md:flex-row items-center justify-around container mx-auto">
<div className="flex flex-col gap-8">
<Tag>{translation.ceo_message.tag[language]}</Tag>
<Tag>{data.CEOMessage.Tag}</Tag>
<div className={clsx("flex flex-col gap-3", language === "ar" && "items-end")}>
<Title>{translation.ceo_message.title[language]}</Title>
<p className="max-w-lg text-base">{translation.ceo_message.description[language]}</p>
<Title>{data.CEOMessage.Title}</Title>
<p className="max-w-lg text-base">{data.CEOMessage.Text}</p>
</div>
<Link href={`${language === "ar" ? "/ar" : ""}/about#message`}>
<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
{translation.learn_more[language]}
{data.LearnMore}
</button>
</Link>
</div>