Updated the whole website to work according to the CMS
This commit is contained in:
Tiago Ribeiro
@@ -4,6 +4,7 @@ import Navbar from "@/components/Navbar";
|
||||
import Tag from "@/components/Tag";
|
||||
import Title from "@/components/Title";
|
||||
import translation from "@/translation/about.json";
|
||||
import AboutPage from "@/types/cms/about";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
import {BiSolidBrain, BiWorld} from "react-icons/bi";
|
||||
@@ -26,26 +27,27 @@ import {
|
||||
|
||||
interface Props {
|
||||
language: "en" | "ar";
|
||||
data: AboutPage;
|
||||
}
|
||||
|
||||
export default function About({language}: Props) {
|
||||
export default function About({language, data}: Props) {
|
||||
return (
|
||||
<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">
|
||||
<div className="w-full h-full flex flex-col items-center justify-center">
|
||||
<Tag>{translation.title.tag[language]}</Tag>
|
||||
<Title>{translation.title.text[language]}</Title>
|
||||
<Tag>{data.TagTitle.Tag}</Tag>
|
||||
<Title>{data.TagTitle.Title}</Title>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* About Us Section */}
|
||||
<section id="about" className="w-full bg-white">
|
||||
<div className="w-full flex flex-col items-center gap-8 p-8 md:p-20 container mx-auto">
|
||||
<Title>{translation.about.title[language]}</Title>
|
||||
<Title>{data.AboutSection.Title}</Title>
|
||||
<span>
|
||||
{translation.about.text[language].split("\n").map((line, index) => (
|
||||
{data.AboutSection.Text.split("\n").map((line, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<p className={clsx(language === "ar" ? "text-right" : "text-left")}>{line}</p>
|
||||
<br />
|
||||
@@ -62,20 +64,20 @@ export default function About({language}: Props) {
|
||||
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
|
||||
<BsEyeFill className="text-mti-rose-light w-10 h-10" />
|
||||
</div>
|
||||
<span className="text-lg">{translation.mission_vision_values.vision[language]}</span>
|
||||
<span className="text-lg">{data.MissionVisionValuesSection.Vision}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-4 text-center">
|
||||
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
|
||||
<BsRocketTakeoffFill className="text-mti-rose-light w-10 h-10" />
|
||||
</div>
|
||||
<span className="text-lg">{translation.mission_vision_values.mission[language]}</span>
|
||||
<span className="text-lg">{data.MissionVisionValuesSection.Mission}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-4 md:col-span-2">
|
||||
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
|
||||
<BsFlower3 className="text-mti-rose-light w-10 h-10" />
|
||||
</div>
|
||||
<div className="text-lg flex flex-wrap items-center justify-center max-w-xl gap-x-8 gap-y-4">
|
||||
{translation.mission_vision_values.values[language].map((x) => (
|
||||
{data.MissionVisionValuesSection.Values.split("\n").map((x) => (
|
||||
<span key={x}>{x}</span>
|
||||
))}
|
||||
</div>
|
||||
@@ -87,9 +89,9 @@ export default function About({language}: Props) {
|
||||
<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("flex flex-col gap-8 max-w-xl")}>
|
||||
<Title>{translation.ceo_message.title[language]}</Title>
|
||||
<Title>{data.CEOMessage.Title}</Title>
|
||||
<span>
|
||||
{translation.ceo_message.text[language].split("\n").map((line, index) => (
|
||||
{data.CEOMessage.Text.split("\n").map((line, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<p>{line}</p>
|
||||
<br />
|
||||
@@ -107,7 +109,7 @@ export default function About({language}: Props) {
|
||||
<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-10" />
|
||||
<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-20" />
|
||||
<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-30" />
|
||||
<span className="absolute left-1/2 -translate-x-2/3 -bottom-10">{translation.ceo_message.name[language]}</span>
|
||||
<span className="absolute left-1/2 -translate-x-2/3 -bottom-10">{data.CEOMessage.Name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -117,17 +119,17 @@ export default function About({language}: Props) {
|
||||
<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")}>
|
||||
<div className={clsx("w-full flex")}>
|
||||
<Title>{translation.capabilities.title[language]}</Title>
|
||||
<Title>{data.Capabilities.Title}</Title>
|
||||
</div>
|
||||
<span className="text-lg">{translation.capabilities.intro[language]}</span>
|
||||
<span className="text-lg">{data.Capabilities.Intro}</span>
|
||||
<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className={clsx("flex gap-4 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">
|
||||
<BsGraphUp 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">{translation.capabilities.analytics.title[language]}</span>
|
||||
<p>{translation.capabilities.analytics.text[language]}</p>
|
||||
<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.Analytics.Title}</span>
|
||||
<p>{data.Capabilities.Analytics.Text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -136,8 +138,8 @@ export default function About({language}: Props) {
|
||||
<BiSolidBrain 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">{translation.capabilities.predictive.title[language]}</span>
|
||||
<p>{translation.capabilities.predictive.text[language]}</p>
|
||||
<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.Predictive.Title}</span>
|
||||
<p>{data.Capabilities.Predictive.Text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -146,8 +148,8 @@ export default function About({language}: Props) {
|
||||
<BsTranslate 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">{translation.capabilities.nlp.title[language]}</span>
|
||||
<p>{translation.capabilities.nlp.text[language]}</p>
|
||||
<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.NLP.Title}</span>
|
||||
<p>{data.Capabilities.NLP.Text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -156,8 +158,8 @@ export default function About({language}: Props) {
|
||||
<BsPersonFill 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">{translation.capabilities.engine.title[language]}</span>
|
||||
<p>{translation.capabilities.engine.text[language]}</p>
|
||||
<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.Engine.Title}</span>
|
||||
<p>{data.Capabilities.Engine.Text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -166,10 +168,8 @@ export default function About({language}: Props) {
|
||||
<BsRepeat 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">
|
||||
{translation.capabilities.continuous_learning.title[language]}
|
||||
</span>
|
||||
<p>{translation.capabilities.continuous_learning.text[language]}</p>
|
||||
<span className="text-lg font-bold text-mti-rose-light">{data.Capabilities.ContinuousLearning.Title}</span>
|
||||
<p>{data.Capabilities.ContinuousLearning.Text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,17 +180,17 @@ export default function About({language}: Props) {
|
||||
<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")}>
|
||||
<div className={clsx("w-full flex")}>
|
||||
<Title>{translation.expertise.title[language]}</Title>
|
||||
<Title>{data.Expertise.Title}</Title>
|
||||
</div>
|
||||
<span className="text-lg">{translation.expertise.intro[language]}</span>
|
||||
<span className="text-lg">{data.Expertise.Intro}</span>
|
||||
<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className={clsx("flex gap-4 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">
|
||||
<BiWorld 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">{translation.expertise.language.title[language]}</span>
|
||||
<p>{translation.expertise.language.text[language]}</p>
|
||||
<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.Language.Title}</span>
|
||||
<p>{data.Expertise.Language.Text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -199,8 +199,8 @@ export default function About({language}: Props) {
|
||||
<BsClipboard2CheckFill 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">{translation.expertise.ielts.title[language]}</span>
|
||||
<p>{translation.expertise.ielts.text[language]}</p>
|
||||
<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.IELTS.Title}</span>
|
||||
<p>{data.Expertise.IELTS.Text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -209,8 +209,8 @@ export default function About({language}: Props) {
|
||||
<BsClipboard2DataFill 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">{translation.expertise.alignment.title[language]}</span>
|
||||
<p>{translation.expertise.alignment.text[language]}</p>
|
||||
<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.Alignment.Title}</span>
|
||||
<p>{data.Expertise.Alignment.Text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -219,8 +219,8 @@ export default function About({language}: Props) {
|
||||
<BsPersonFillExclamation 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">{translation.expertise.native.title[language]}</span>
|
||||
<p>{translation.expertise.native.text[language]}</p>
|
||||
<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.Native.Title}</span>
|
||||
<p>{data.Expertise.Native.Text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -229,10 +229,8 @@ export default function About({language}: Props) {
|
||||
<BsBook 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">
|
||||
{translation.expertise.knowledge_experience.title[language]}
|
||||
</span>
|
||||
<p>{translation.expertise.knowledge_experience.text[language]}</p>
|
||||
<span className="text-lg font-bold text-mti-rose-light">{data.Expertise.KnowledgeExperience.Title}</span>
|
||||
<p>{data.Expertise.KnowledgeExperience.Text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,12 +3,14 @@ import Navbar from "@/components/Navbar";
|
||||
import Title from "@/components/Title";
|
||||
import {Contact} from "@/types/contact";
|
||||
import translation from "@/translation/agentcontacts.json";
|
||||
import CountryManagerContactsPage from "@/types/cms/countryManagerContacts";
|
||||
type Language = "en" | "ar";
|
||||
|
||||
interface Props {
|
||||
country: string;
|
||||
page: string;
|
||||
language: Language;
|
||||
data: CountryManagerContactsPage;
|
||||
}
|
||||
|
||||
async function getCountryManagers(country: string, language: Language = "en") {
|
||||
@@ -27,7 +29,7 @@ export async function generateStaticParamsHelper(language: Language = "en") {
|
||||
country: key.toLowerCase().replaceAll(" ", ""),
|
||||
}));
|
||||
}
|
||||
export async function AgentContacts({language, page, country}: Props) {
|
||||
export async function AgentContacts({language, page, country, data}: Props) {
|
||||
const contact = (await getCountryManagers(country, language)) as Contact;
|
||||
|
||||
return (
|
||||
@@ -44,15 +46,15 @@ export async function AgentContacts({language, page, country}: Props) {
|
||||
{contact.entries.map((entry) => (
|
||||
<div key={entry.name}>
|
||||
<h2>
|
||||
<strong>{translation.name[language]}: </strong>
|
||||
<strong>{data.Name}: </strong>
|
||||
{entry.name}
|
||||
</h2>
|
||||
<p>
|
||||
<strong>{translation.number[language]}: </strong>
|
||||
<strong>{data.Number}: </strong>
|
||||
{entry.number}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{translation.email[language]}: </strong>
|
||||
<strong>{data.Email}: </strong>
|
||||
{entry.email}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -6,30 +6,25 @@ import Title from "@/components/Title";
|
||||
import translation from "@/translation/about.json";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
import {
|
||||
BsEye,
|
||||
BsEyeFill,
|
||||
BsFlower3,
|
||||
BsRocketTakeoffFill,
|
||||
} from "react-icons/bs";
|
||||
import {BsEye, BsEyeFill, BsFlower3, BsRocketTakeoffFill} from "react-icons/bs";
|
||||
|
||||
interface Props {
|
||||
page: string;
|
||||
language: "en" | "ar";
|
||||
page: string;
|
||||
language: "en" | "ar";
|
||||
}
|
||||
|
||||
export default function ComingSoon({ page, language }: Props) {
|
||||
return (
|
||||
<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
|
||||
<Navbar currentPage={page} language={language} />
|
||||
export default function ComingSoon({page, language}: Props) {
|
||||
return (
|
||||
<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">
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<Title>Coming soon...</Title>
|
||||
</div>
|
||||
</section>
|
||||
<section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<Title>Coming soon...</Title>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer language={language} />
|
||||
</main>
|
||||
);
|
||||
<Footer language={language} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ import Title from "@/components/Title";
|
||||
import translation from "@/translation/contactus.json";
|
||||
import Image from "next/image";
|
||||
import {toast, ToastContainer} from "react-toastify";
|
||||
import ContactPage from "@/types/cms/contact";
|
||||
|
||||
type FormValues = {
|
||||
name: string;
|
||||
@@ -18,6 +19,7 @@ type FormValues = {
|
||||
|
||||
interface Props {
|
||||
language: "en" | "ar";
|
||||
data: ContactPage;
|
||||
page: string;
|
||||
}
|
||||
|
||||
@@ -26,18 +28,18 @@ const ErrorMessage = ({message}: {message: string}) => (
|
||||
<span className="text-mti-red">{message}</span>
|
||||
</div>
|
||||
);
|
||||
export default function App({language, page}: Props) {
|
||||
export default function App({language, data, page}: Props) {
|
||||
const selectOptions = [
|
||||
{
|
||||
label: translation.feedback[language],
|
||||
label: data.Feedback,
|
||||
value: "feedback",
|
||||
},
|
||||
{
|
||||
label: translation.bug[language],
|
||||
label: data.Bug,
|
||||
value: "bug",
|
||||
},
|
||||
{
|
||||
label: translation.help[language],
|
||||
label: data.Help,
|
||||
value: "help",
|
||||
},
|
||||
];
|
||||
@@ -53,7 +55,7 @@ export default function App({language, page}: Props) {
|
||||
});
|
||||
|
||||
const {errors, isDirty, isValid} = formState;
|
||||
const onSubmit: SubmitHandler<FormValues> = async (data) => {
|
||||
const onSubmit: SubmitHandler<FormValues> = async (body) => {
|
||||
try {
|
||||
const response = await fetch(`https://platform.encoach.com/api/tickets`, {
|
||||
method: "POST",
|
||||
@@ -62,29 +64,29 @@ export default function App({language, page}: Props) {
|
||||
},
|
||||
body: JSON.stringify({
|
||||
reporter: {
|
||||
name: data.name,
|
||||
email: data.email,
|
||||
name: body.name,
|
||||
email: body.email,
|
||||
},
|
||||
subject: data.subject,
|
||||
type: data.type,
|
||||
subject: body.subject,
|
||||
type: body.type,
|
||||
reportedFrom: window?.location.toString() || "",
|
||||
status: "submitted",
|
||||
date: new Date().toISOString(),
|
||||
description: data.description,
|
||||
description: body.description,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
const data = await response.json();
|
||||
const body = await response.json();
|
||||
// Pass data to the page via props
|
||||
if (data.ok) {
|
||||
toast.success(translation.ticketSuccess[language]);
|
||||
if (body.ok) {
|
||||
toast.success(data.TicketSuccess);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (err) {}
|
||||
|
||||
toast.error(translation.ticketError[language]);
|
||||
toast.error(data.TicketError);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -94,7 +96,7 @@ export default function App({language, page}: Props) {
|
||||
<Navbar currentPage={page} 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.title[language]}</Title>
|
||||
<Title>{data.Title}</Title>
|
||||
</div>
|
||||
</section>
|
||||
<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
|
||||
@@ -102,31 +104,31 @@ export default function App({language, page}: Props) {
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder={translation.name[language]}
|
||||
placeholder={data.Name}
|
||||
{...register("name", {required: true})}
|
||||
className="input input-bordered md:w-full sm:w-1/2 max-w-md"
|
||||
/>
|
||||
{errors.name && errors.name.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
|
||||
{errors.name && errors.name.type === "required" && <ErrorMessage message={data.FieldRequired} />}
|
||||
<input
|
||||
id="email"
|
||||
placeholder={translation.email[language]}
|
||||
placeholder={data.Email}
|
||||
type="text"
|
||||
{...register("email", {required: true, pattern: /^\S+@\S+$/i})}
|
||||
className="input input-bordered md:w-full sm:w-1/2 max-w-md"
|
||||
/>
|
||||
{errors.email && errors.email.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
|
||||
{errors.email && errors.email.type === "pattern" && <ErrorMessage message={translation.invalidEmail[language]} />}
|
||||
{errors.email && errors.email.type === "required" && <ErrorMessage message={data.FieldRequired} />}
|
||||
{errors.email && errors.email.type === "pattern" && <ErrorMessage message={data.InvalidEmail} />}
|
||||
<input
|
||||
id="subject"
|
||||
placeholder={translation.subject[language]}
|
||||
placeholder={data.Subject}
|
||||
type="text"
|
||||
{...register("subject", {required: true})}
|
||||
className="input input-bordered md:w-full sm:w-1/2 max-w-md"
|
||||
/>
|
||||
{errors.subject && errors.subject.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
|
||||
{errors.subject && errors.subject.type === "required" && <ErrorMessage message={data.FieldRequired} />}
|
||||
<select id="type" {...register("type", {required: true})} className="select select-bordered md:w-full sm:w-1/2 max-w-md">
|
||||
<option value="" disabled>
|
||||
{translation.selectType[language]}
|
||||
{data.SelectType}
|
||||
</option>
|
||||
{selectOptions.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
@@ -134,18 +136,16 @@ export default function App({language, page}: Props) {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.type && errors.type.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
|
||||
{errors.type && errors.type.type === "required" && <ErrorMessage message={data.FieldRequired} />}
|
||||
<textarea
|
||||
id="description"
|
||||
placeholder={translation.description[language]}
|
||||
placeholder={data.Description}
|
||||
{...register("description", {required: true})}
|
||||
className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md"
|
||||
rows={5}
|
||||
/>
|
||||
{errors.description && errors.description.type === "required" && (
|
||||
<ErrorMessage message={translation.fieldRequired[language]} />
|
||||
)}
|
||||
<input type="submit" className="btn" disabled={!isDirty || !isValid} value={translation.submit[language]} />
|
||||
{errors.description && errors.description.type === "required" && <ErrorMessage message={data.FieldRequired} />}
|
||||
<input type="submit" className="btn" disabled={!isDirty || !isValid} value={data.Submit} />
|
||||
</form>
|
||||
<div className="flex flex-col">
|
||||
<Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" />
|
||||
|
||||
@@ -2,14 +2,15 @@
|
||||
import Footer from "@/components/Footer";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Title from "@/components/Title";
|
||||
import translation from "@/translation/history.json";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
import * as BsIcon from "react-icons/bs";
|
||||
import {IconType} from "react-icons";
|
||||
import HistoryPage from "@/types/cms/history";
|
||||
|
||||
interface Props {
|
||||
language: "en" | "ar";
|
||||
data: HistoryPage;
|
||||
}
|
||||
|
||||
interface ElementProps {
|
||||
@@ -48,25 +49,25 @@ const Element = ({date, label, isEven, language, Icon}: ElementProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default function History({language}: Props) {
|
||||
export default function History({language, data}: Props) {
|
||||
return (
|
||||
<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">
|
||||
<div className="w-full h-full flex flex-col items-center justify-center">
|
||||
<Title>{translation.title[language]}</Title>
|
||||
<Title>{data.Title}</Title>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="history" className="w-full h-fit bg-white">
|
||||
<div className="w-full h-fit flex flex-col items-center gap-8 p-8 md:p-20 container mx-auto relative">
|
||||
<div className="flex flex-col gap-8 z-20">
|
||||
{translation.events.map((event, index) => (
|
||||
{data.Events.map((event, index) => (
|
||||
<Element
|
||||
date={event.date[language]}
|
||||
label={event.label[language]}
|
||||
Icon={BsIcon[event.icon as keyof typeof BsIcon]}
|
||||
date={event.Date}
|
||||
label={event.Label}
|
||||
Icon={BsIcon[event.Icon as keyof typeof BsIcon]}
|
||||
key={index}
|
||||
isEven={(index + 1) % 2 === 0}
|
||||
language={language}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -8,7 +8,7 @@ import clsx from "clsx";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Link from "next/link";
|
||||
import Footer from "@/components/Footer";
|
||||
import translation from "@/translation/price.json";
|
||||
import PricePage from "@/types/cms/price";
|
||||
|
||||
type DurationUnit = "weeks" | "days" | "months" | "years";
|
||||
|
||||
@@ -20,28 +20,33 @@ interface Package {
|
||||
price: number;
|
||||
}
|
||||
|
||||
export default function Page({language}: {language: "en" | "ar"}) {
|
||||
interface Props {
|
||||
language: "en" | "ar";
|
||||
data: PricePage;
|
||||
}
|
||||
|
||||
export default function Page({language, data}: Props) {
|
||||
const getDurationUnit = (duration: number, durationUnitSingular: string, durationUnitPlural: string) => {
|
||||
if(duration >= 2 && duration <= 10) {
|
||||
if (duration >= 2 && duration <= 10) {
|
||||
return durationUnitPlural;
|
||||
}
|
||||
|
||||
return durationUnitSingular;
|
||||
}
|
||||
};
|
||||
const durationAndDurationUnitParser = (duration: number, duration_unit: DurationUnit) => {
|
||||
if(language === 'ar') {
|
||||
if (language === "ar") {
|
||||
switch (duration_unit) {
|
||||
case "days":
|
||||
return `${duration} ${getDurationUnit(duration, translation.days.singular[language], translation.days.plural[language])}`;
|
||||
return `${duration} ${getDurationUnit(duration, data.Days.Singular, data.Days.Plural)}`;
|
||||
case "weeks":
|
||||
return `${duration} ${getDurationUnit(duration, translation.weeks.singular[language], translation.weeks.plural[language])}`;
|
||||
return `${duration} ${getDurationUnit(duration, data.Weeks.Singular, data.Weeks.Plural)}`;
|
||||
case "months":
|
||||
return `${duration} ${getDurationUnit(duration, translation.months.singular[language], translation.months.plural[language])}`;
|
||||
return `${duration} ${getDurationUnit(duration, data.Months.Singular, data.Months.Plural)}`;
|
||||
}
|
||||
}
|
||||
|
||||
return `${duration} ${capitalize(duration === 1 ? duration_unit.slice(0, duration_unit.length - 1) : duration_unit)}`;
|
||||
}
|
||||
};
|
||||
|
||||
const [payments, setPayments] = React.useState<Package[]>([]);
|
||||
const getData = async () => {
|
||||
@@ -65,14 +70,14 @@ export default function Page({language}: {language: "en" | "ar"}) {
|
||||
<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">
|
||||
<h2 className="text-3xl font-bold">{translation.title[language]}</h2>
|
||||
<h2 className="text-3xl font-bold">{data.Title}</h2>
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
{payments.map((p) => (
|
||||
<div key={p.id} className={clsx("p-4 bg-white rounded-xl flex flex-col gap-6 items-start")}>
|
||||
<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">
|
||||
{translation.encoach[language]} - {durationAndDurationUnitParser(p.duration, p.duration_unit)}
|
||||
{data.EnCoach} - {durationAndDurationUnitParser(p.duration, p.duration_unit)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 items-start w-full">
|
||||
@@ -82,11 +87,11 @@ export default function Page({language}: {language: "en" | "ar"}) {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 items-start">
|
||||
<span>{translation.packageIncludes[language]}</span>
|
||||
<span>{data.PackageIncludes}</span>
|
||||
<ul className="flex flex-col items-start text-sm">
|
||||
<li>- {translation.packageIncludesA[language]}</li>
|
||||
<li>- {translation.packageIncludesB[language]}</li>
|
||||
<li>- {translation.packageIncludesC[language]}</li>
|
||||
<li>- {data.PackageIncludesA}</li>
|
||||
<li>- {data.PackageIncludesB}</li>
|
||||
<li>- {data.PackageIncludesB}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,7 +100,7 @@ export default function Page({language}: {language: "en" | "ar"}) {
|
||||
<Link
|
||||
className="transition ease-in-out duration-300 text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark border border-mti-purple-light bg-mti-purple-light px-8 py-2 rounded-xl mb-8"
|
||||
href={`https://platform.encoach.com/register`}>
|
||||
{translation.joinus[language]}
|
||||
{data.SignUp}
|
||||
</Link>
|
||||
</section>
|
||||
<Footer language={language} />
|
||||
|
||||
@@ -7,48 +7,40 @@ import clsx from "clsx";
|
||||
import React from "react";
|
||||
import * as BsIcon from "react-icons/bs";
|
||||
import {IconType} from "react-icons";
|
||||
import PrivacyPolicyPage from "@/types/cms/privacyPolicy";
|
||||
|
||||
interface Props {
|
||||
language: "en" | "ar";
|
||||
data: PrivacyPolicyPage;
|
||||
}
|
||||
|
||||
type ContentKey = keyof typeof translation.content;
|
||||
type Translation = {ar: string; en: string};
|
||||
interface Content {
|
||||
title?: Translation;
|
||||
text?: Translation;
|
||||
list?: Translation[];
|
||||
}
|
||||
|
||||
export default function Privacy({language}: Props) {
|
||||
export default function Privacy({language, data}: Props) {
|
||||
return (
|
||||
<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="/privacy-policy" 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.title[language]}</Title>
|
||||
<Title>{data.Title}</Title>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="terms" className="w-full h-fit bg-white">
|
||||
<section id="privacy-policy" 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",
|
||||
language === "ar" ? "text-right" : "text-left",
|
||||
)}>
|
||||
{Object.keys(translation.content).map((key) => {
|
||||
const content = translation.content[key as ContentKey] as Content;
|
||||
|
||||
{data.Content.map((content, index) => {
|
||||
return (
|
||||
<span className="flex flex-col gap-1" key={key} id={key}>
|
||||
{content.title && <h2 className="font-semibold text-lg text-mti-purple-light">{content.title[language]}</h2>}
|
||||
{content.text && <p className="whitespace-pre-wrap">{content.text[language]}</p>}
|
||||
{content.list && (
|
||||
<span className="flex flex-col gap-1" key={index} id={index.toString()}>
|
||||
{content.Title && <h2 className="font-semibold text-lg text-mti-purple-light">{content.Title}</h2>}
|
||||
{content.Text && <p className="whitespace-pre-wrap">{content.Text}</p>}
|
||||
{content.List && (
|
||||
<ul className="list-disc pl-8">
|
||||
{content.list.map((text, index) => (
|
||||
{content.List.split("\n").map((text, index) => (
|
||||
<li className="whitespace-pre-wrap" key={index}>
|
||||
{text[language]}
|
||||
{text}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import Navbar from "@/components/Navbar";
|
||||
import clsx from "clsx";
|
||||
import Title from "@/components/Title";
|
||||
import * as BsIcon from "react-icons/bs";
|
||||
import {
|
||||
BsBook,
|
||||
BsBlockquoteLeft,
|
||||
@@ -13,11 +14,12 @@ import {
|
||||
BsFileBarGraph,
|
||||
BsBank,
|
||||
} from "react-icons/bs";
|
||||
import translation from "@/translation/services.json";
|
||||
import Footer from "@/components/Footer";
|
||||
import ServicesPage from "@/types/cms/services";
|
||||
|
||||
interface Props {
|
||||
language: "en" | "ar";
|
||||
data: ServicesPage;
|
||||
}
|
||||
|
||||
interface SectionStruct {
|
||||
@@ -31,84 +33,33 @@ interface SectionStruct {
|
||||
}[];
|
||||
}
|
||||
|
||||
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],
|
||||
export default function Services({language, data}: Props) {
|
||||
const struct: SectionStruct[] = [
|
||||
...data.ModuleEvaluation.map((module, index) => ({
|
||||
id: index.toString(),
|
||||
description: module.Text,
|
||||
title: module.Title,
|
||||
bullets: [
|
||||
{
|
||||
title: translation.english_writing_evaluation.evaluation[language],
|
||||
values: translation.english_writing_evaluation.evaluation_values[language],
|
||||
icon: BsBlockquoteLeft,
|
||||
title: module.Evaluation,
|
||||
values: module.EvaluationValues.split("\n"),
|
||||
icon: BsIcon[module.EvaluationIcon as keyof typeof BsIcon],
|
||||
},
|
||||
{
|
||||
title: translation.english_writing_evaluation.acquire[language],
|
||||
values: translation.english_writing_evaluation.acquire_values[language],
|
||||
icon: BsFillPencilFill,
|
||||
title: module.Acquire,
|
||||
values: module.AcquireValues.split("\n"),
|
||||
icon: BsIcon[module.AcquireIcon as keyof typeof BsIcon],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
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],
|
||||
title: data.ProgressTracking.Title,
|
||||
description: data.ProgressTracking.Text,
|
||||
bullets: [
|
||||
{
|
||||
title: translation.progress_tracking.advantages[language],
|
||||
values: translation.progress_tracking.advantages_values[language],
|
||||
title: data.ProgressTracking.Advantages,
|
||||
values: data.ProgressTracking.AdvantageValues.split("\n"),
|
||||
icon: BsFileBarGraph,
|
||||
},
|
||||
],
|
||||
@@ -118,20 +69,20 @@ export default function About({language}: Props) {
|
||||
const final_struct = [
|
||||
{
|
||||
id: "unified_english_level_test",
|
||||
title: translation.unified_english_level_test.title[language],
|
||||
description: translation.unified_english_level_test.description[language],
|
||||
title: data.UnifiedEnglishLevelTest.Title,
|
||||
description: data.UnifiedEnglishLevelTest.Text,
|
||||
bullets: [
|
||||
{
|
||||
title: translation.unified_english_level_test.advantages[language],
|
||||
values: translation.unified_english_level_test.advantages_values[language],
|
||||
title: data.UnifiedEnglishLevelTest.Advantages,
|
||||
values: data.UnifiedEnglishLevelTest.AdvantageValues.split("\n"),
|
||||
icon: BsBank,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "customized_packages",
|
||||
title: translation.customized_packages.title[language],
|
||||
description: translation.customized_packages.description[language],
|
||||
title: data.CustomizedPackages.Title,
|
||||
description: data.CustomizedPackages.Text,
|
||||
bullets: [],
|
||||
},
|
||||
];
|
||||
@@ -174,13 +125,13 @@ export default function About({language}: Props) {
|
||||
<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>
|
||||
<Title>{data.Title}</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>
|
||||
<Title className="max-w-fit">{data.CorporateEducationalInstitutions}</Title>
|
||||
</div>
|
||||
</section>
|
||||
{renderStruct(final_struct, (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`)}
|
||||
|
||||
@@ -2,32 +2,23 @@
|
||||
import Footer from "@/components/Footer";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Title from "@/components/Title";
|
||||
import translation from "@/translation/terms.json";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
import * as BsIcon from "react-icons/bs";
|
||||
import {IconType} from "react-icons";
|
||||
import TermsAndConditionsPage from "@/types/cms/termsConditions";
|
||||
|
||||
interface Props {
|
||||
language: "en" | "ar";
|
||||
data: TermsAndConditionsPage;
|
||||
}
|
||||
|
||||
type ContentKey = keyof typeof translation.content;
|
||||
type Translation = {ar: string; en: string};
|
||||
interface Content {
|
||||
title: Translation;
|
||||
text: Translation;
|
||||
list?: Translation[];
|
||||
}
|
||||
|
||||
export default function Terms({language}: Props) {
|
||||
export default function Terms({language, data}: Props) {
|
||||
return (
|
||||
<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">
|
||||
<div className="w-full h-full flex flex-col items-center justify-center">
|
||||
<Title>{translation.title[language]}</Title>
|
||||
<Title>{data.Title}</Title>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -37,17 +28,17 @@ export default function Terms({language}: Props) {
|
||||
"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",
|
||||
language === "ar" ? "text-right" : "text-left",
|
||||
)}>
|
||||
{Object.keys(translation.content).map((key) => {
|
||||
const content = translation.content[key as ContentKey] as Content;
|
||||
|
||||
{data.Content.map((content, index) => {
|
||||
return (
|
||||
<span className="flex flex-col gap-1" key={key} id={key}>
|
||||
<h2 className="font-semibold text-lg text-mti-purple-light">{content.title[language]}</h2>
|
||||
<p className="whitespace-pre-wrap">{content.text[language]}</p>
|
||||
{content.list && (
|
||||
<span className="flex flex-col gap-1" key={index} id={index.toString()}>
|
||||
{content.Title && <h2 className="font-semibold text-lg text-mti-purple-light">{content.Title}</h2>}
|
||||
{content.Text && <p className="whitespace-pre-wrap">{content.Text}</p>}
|
||||
{content.List && (
|
||||
<ul className="list-disc pl-8">
|
||||
{content.list.map((text, index) => (
|
||||
<li key={index}>{text[language]}</li>
|
||||
{content.List.split("\n").map((text, index) => (
|
||||
<li className="whitespace-pre-wrap" key={index}>
|
||||
{text}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user