Merged master into contact-us-form
This commit is contained in:
Tiago Ribeiro
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -26,9 +26,6 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
|
||||
httpEquiv="Content-Security-Policy-Report-Only"
|
||||
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.gstatic.com" crossOrigin="" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet" />
|
||||
|
||||
@@ -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}
|
||||
@@ -130,11 +130,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
|
||||
))}
|
||||
<Link
|
||||
href="https://platform.encoach.com/register"
|
||||
className={clsx(
|
||||
"w-fit transition duration-300 ease-in-out",
|
||||
currentPage === "/join" &&
|
||||
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
|
||||
)}>
|
||||
className="w-fit transition duration-300 ease-in-out">
|
||||
{translation.join[language]}
|
||||
</Link>
|
||||
<Link href="https://platform.encoach.com" className={clsx("w-fit transition duration-300 ease-in-out")}>
|
||||
|
||||
@@ -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>;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
@@ -77,7 +79,7 @@ export default function Home({language}: Props) {
|
||||
<Title>{translation.learn_ai.title[language]}</Title>
|
||||
<p className="max-w-lg text-base">{translation.learn_ai.description[language]}</p>
|
||||
</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">
|
||||
{translation.learn_more[language]}
|
||||
</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-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" />
|
||||
|
||||
@@ -21,6 +21,28 @@ interface Package {
|
||||
}
|
||||
|
||||
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 getData = async () => {
|
||||
// Fetch data from external API
|
||||
@@ -40,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) => (
|
||||
@@ -51,8 +72,7 @@ export default function Page({language}: {language: "en" | "ar"}) {
|
||||
<div className="flex flex-col items-start mb-2">
|
||||
<Image src="/logo_title.png" alt="EnCoach's Logo" width={32} height={32} />
|
||||
<span className="font-semibold text-xl">
|
||||
EnCoach - {p.duration}{" "}
|
||||
{capitalize(p.duration === 1 ? p.duration_unit.slice(0, p.duration_unit.length - 1) : p.duration_unit)}
|
||||
{translation.encoach[language]} - {durationAndDurationUnitParser(p.duration, p.duration_unit)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 items-start w-full">
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -57,10 +57,6 @@
|
||||
"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.",
|
||||
"ar": "خوارزمياتنا توفر نتائج وتقييم سريع للاختبار، وتقدم ملاحظات موجزًة على الجوانب التي تتميز بها والجوانب التي تحتاج إلى تحسين. لذا ليس هناك حاجة لدفع مبلغ ضخم لمدرس وقضاء ساعات وساعات في مراجعة أدائك. مع إنكوتش، ستتلقى التقييم في غضون ثوانٍ."
|
||||
},
|
||||
"join": {
|
||||
"en": "Join",
|
||||
"ar": "انضم"
|
||||
}
|
||||
},
|
||||
"learn_more": {
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
"ar": "منصة انكوتش"
|
||||
},
|
||||
"join": {
|
||||
"en": "Join",
|
||||
"en": "Sign up",
|
||||
"ar": "انضم إلينا"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"joinus": {
|
||||
"en": "Join us",
|
||||
"en": "Sign up",
|
||||
"ar": "انضم إلينا"
|
||||
},
|
||||
"title": {
|
||||
@@ -22,5 +22,39 @@
|
||||
"packageIncludesC": {
|
||||
"en": "Allow yourself to correctly prepare for the exam",
|
||||
"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": "إنكوتش"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user