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

Merged master into contact-us-form

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-02-13 00:41:15 +00:00
parent 58a047f7e6 9f89e23da0
commit 653bcf7f93
15 changed files with 256 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/join/page.tsx
View File

@@ -1,28 +0,0 @@
/* eslint-disable @next/next/no-img-element */
import Link from "next/link";
import {BsInstagram, BsTwitter} from "react-icons/bs";
import {BiLogoFacebook} from "react-icons/bi";
import Navbar from "@/components/Navbar";
import PricingTable from "@/components/PricingTable";
import Footer from "@/components/Footer";
export default function Home() {
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<Navbar currentPage="/join" language="en" />
<section className="w-full relative bg-white py-20 lg:py-48 px-8 flex flex-col items-center text-center gap-4">
<h2 className="text-3xl font-bold">Available Packages</h2>
<div className="flex flex-col gap-1">
<span className="max-w-lg">
Once the payment process is complete, you will receive a code via e-mail to register to the application.
</span>
<span className="max-w-lg">(Or have time added to your account, if already registered with the given e-mail).</span>
<PricingTable />
</div>
</section>
<Footer language="en" />
</main>
);
}

3
src/app/layout.tsx
View File

@@ -26,9 +26,6 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
httpEquiv="Content-Security-Policy-Report-Only" httpEquiv="Content-Security-Policy-Report-Only"
content="default-src 'self' *.stripe.com *.encoach.com staging.encoach.com localhost" content="default-src 'self' *.stripe.com *.encoach.com staging.encoach.com localhost"
/> />
<script async src="https://js.stripe.com/v3/pricing-table.js" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet" />

8
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}
@@ -130,11 +130,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
))} ))}
<Link <Link
href="https://platform.encoach.com/register" href="https://platform.encoach.com/register"
className={clsx( className="w-fit transition duration-300 ease-in-out">
"w-fit transition duration-300 ease-in-out",
currentPage === "/join" &&
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
)}>
{translation.join[language]} {translation.join[language]}
</Link> </Link>
<Link href="https://platform.encoach.com" className={clsx("w-fit transition duration-300 ease-in-out")}> <Link href="https://platform.encoach.com" className={clsx("w-fit transition duration-300 ease-in-out")}>

23
src/components/PricingTable.tsx
View File

@@ -1,23 +0,0 @@
"use client";
import {Elements} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
const stripePromise = loadStripe(process.env.STRIPE_KEY || "");
export default function PricingTable() {
return (
<Elements stripe={stripePromise}>
<stripe-pricing-table id="pricing" pricing-table-id={process.env.STRIPE_PRICING_TABLE} publishable-key={process.env.STRIPE_KEY} />
</Elements>
);
}
// If using TypeScript, add the following snippet to your file as well.
declare global {
namespace JSX {
interface IntrinsicElements {
"stripe-pricing-table": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
}
}
}

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">

8
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">
@@ -77,7 +79,7 @@ export default function Home({language}: Props) {
<Title>{translation.learn_ai.title[language]}</Title> <Title>{translation.learn_ai.title[language]}</Title>
<p className="max-w-lg text-base">{translation.learn_ai.description[language]}</p> <p className="max-w-lg text-base">{translation.learn_ai.description[language]}</p>
</div> </div>
<Link href="/join"> <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"> <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]} {translation.learn_more[language]}
</button> </button>
@@ -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" />

30
src/templates/Price.tsx
View File

@@ -21,6 +21,28 @@ interface Package {
} }
export default function Page({language}: {language: "en" | "ar"}) { export default function Page({language}: {language: "en" | "ar"}) {
const getDurationUnit = (duration: number, durationUnitSingular: string, durationUnitPlural: string) => {
if(duration >= 2 && duration <= 10) {
return durationUnitPlural;
}
return durationUnitSingular;
}
const durationAndDurationUnitParser = (duration: number, duration_unit: DurationUnit) => {
if(language === 'ar') {
switch (duration_unit) {
case "days":
return `${duration} ${getDurationUnit(duration, translation.days.singular[language], translation.days.plural[language])}`;
case "weeks":
return `${duration} ${getDurationUnit(duration, translation.weeks.singular[language], translation.weeks.plural[language])}`;
case "months":
return `${duration} ${getDurationUnit(duration, translation.months.singular[language], translation.months.plural[language])}`;
}
}
return capitalize(duration === 1 ? duration_unit.slice(0, duration_unit.length - 1) : duration_unit);
}
const [payments, setPayments] = React.useState<Package[]>([]); const [payments, setPayments] = React.useState<Package[]>([]);
const getData = async () => { const getData = async () => {
// Fetch data from external API // Fetch data from external API
@@ -40,10 +62,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) => (
@@ -51,8 +72,7 @@ export default function Page({language}: {language: "en" | "ar"}) {
<div className="flex flex-col items-start mb-2"> <div className="flex flex-col items-start mb-2">
<Image src="/logo_title.png" alt="EnCoach's Logo" width={32} height={32} /> <Image src="/logo_title.png" alt="EnCoach's Logo" width={32} height={32} />
<span className="font-semibold text-xl"> <span className="font-semibold text-xl">
EnCoach - {p.duration}{" "} {translation.encoach[language]} - {durationAndDurationUnitParser(p.duration, p.duration_unit)}
{capitalize(p.duration === 1 ? p.duration_unit.slice(0, p.duration_unit.length - 1) : p.duration_unit)}
</span> </span>
</div> </div>
<div className="flex flex-col gap-2 items-start w-full"> <div className="flex flex-col gap-2 items-start w-full">

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",

6
src/translation/home.json
View File

@@ -57,10 +57,6 @@
"description": { "description": {
"en": "Our algorithms provide speedy results and evaluate the test, providing a brief feedback on areas that are strong and the areas where improvement is needed. So there is no need to pay a hefty amount to a tutor and spend hours upon hours to review your performance. With EnCoach, you receive the evaluation within seconds.", "en": "Our algorithms provide speedy results and evaluate the test, providing a brief feedback on areas that are strong and the areas where improvement is needed. So there is no need to pay a hefty amount to a tutor and spend hours upon hours to review your performance. With EnCoach, you receive the evaluation within seconds.",
"ar": "خوارزمياتنا توفر نتائج وتقييم سريع للاختبار، وتقدم ملاحظات موجزًة على الجوانب التي تتميز بها والجوانب التي تحتاج إلى تحسين. لذا ليس هناك حاجة لدفع مبلغ ضخم لمدرس وقضاء ساعات وساعات في مراجعة أدائك. مع إنكوتش، ستتلقى التقييم في غضون ثوانٍ." "ar": "خوارزمياتنا توفر نتائج وتقييم سريع للاختبار، وتقدم ملاحظات موجزًة على الجوانب التي تتميز بها والجوانب التي تحتاج إلى تحسين. لذا ليس هناك حاجة لدفع مبلغ ضخم لمدرس وقضاء ساعات وساعات في مراجعة أدائك. مع إنكوتش، ستتلقى التقييم في غضون ثوانٍ."
},
"join": {
"en": "Join",
"ar": "انضم"
} }
}, },
"learn_more": { "learn_more": {
@@ -121,4 +117,4 @@
"en": "Accreditation", "en": "Accreditation",
"ar": "الاعتمادات الأكاديمية" "ar": "الاعتمادات الأكاديمية"
} }
} }

2
src/translation/navbar.json
View File

@@ -28,7 +28,7 @@
"ar": "منصة انكوتش" "ar": "منصة انكوتش"
}, },
"join": { "join": {
"en": "Join", "en": "Sign up",
"ar": "انضم إلينا" "ar": "انضم إلينا"
} }
} }

36
src/translation/price.json
View File

@@ -1,6 +1,6 @@
{ {
"joinus": { "joinus": {
"en": "Join us", "en": "Sign up",
"ar": "انضم إلينا" "ar": "انضم إلينا"
}, },
"title": { "title": {
@@ -22,5 +22,39 @@
"packageIncludesC": { "packageIncludesC": {
"en": "Allow yourself to correctly prepare for the exam", "en": "Allow yourself to correctly prepare for the exam",
"ar": "امنح نفسك الفرصة للتحضير بشكل صحيح للإختبار" "ar": "امنح نفسك الفرصة للتحضير بشكل صحيح للإختبار"
},
"days": {
"singular": {
"en": "Day",
"ar": "يوم"
},
"plural": {
"en": "Days",
"ar": "أيام"
}
},
"weeks": {
"singular": {
"en": "Week",
"ar": "أسبوع"
},
"plural": {
"en": "Weeks",
"ar": "أسابيع"
}
},
"months": {
"singular": {
"en": "Month",
"ar": "شهر"
},
"plural": {
"en": "Months",
"ar": "شهور"
}
},
"encoach": {
"en": "EnCoach",
"ar": "إنكوتش"
} }
} }