Merge branch 'master' into nested-country-managers
This commit is contained in:
Tiago Ribeiro
@@ -1,6 +1,5 @@
|
||||
import About from "@/templates/About";
|
||||
import ComingSoon from "@/templates/ComingSoon";
|
||||
import Services from "@/templates/Services";
|
||||
|
||||
export default function Page() {
|
||||
return <ComingSoon page="/services" language="ar" />;
|
||||
return <Services language="ar" />;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import About from "@/templates/About";
|
||||
import ComingSoon from "@/templates/ComingSoon";
|
||||
import Services from "@/templates/Services";
|
||||
|
||||
export default function Page() {
|
||||
return <ComingSoon page="/services" language="en" />;
|
||||
return <Services language="en" />;
|
||||
}
|
||||
|
||||
@@ -4,289 +4,210 @@ import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import clsx from "clsx";
|
||||
import { BsList, BsXLg } from "react-icons/bs";
|
||||
import { Fragment, useState } from "react";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import {BsList, BsXLg} from "react-icons/bs";
|
||||
import {Fragment, useState} from "react";
|
||||
import {Dialog, Transition} from "@headlessui/react";
|
||||
import translation from "@/translation/navbar.json";
|
||||
import NestedNavbarEntry from "@/components/NestedNavbarEntry";
|
||||
|
||||
const items = [
|
||||
{ page: "/", key: "home" },
|
||||
{ page: "/services", key: "services" },
|
||||
{ page: "/price", key: "price" },
|
||||
{ page: "/about", key: "about" },
|
||||
{ page: "/history", key: "history" },
|
||||
{ page: "/contact", key: "contact" },
|
||||
{
|
||||
key: "country_manager",
|
||||
page: '',
|
||||
entries: [
|
||||
{
|
||||
key: "Egypt",
|
||||
entries: [
|
||||
{
|
||||
name: "Modern Technology",
|
||||
number: "+226578480830",
|
||||
email: "egypt@encoach.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "Oman",
|
||||
entries: [
|
||||
{
|
||||
name: "Smartway education",
|
||||
number: "+9689944094",
|
||||
email: "oman@encoach.com",
|
||||
},
|
||||
{ name: "MTI", number: "+9687445609", email: "mti@encoach.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "Saudi Arabia",
|
||||
entries: [
|
||||
{
|
||||
name: "Edutrach services",
|
||||
number: "+96658499347",
|
||||
email: "edu@encoach.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{page: "/", key: "home"},
|
||||
{page: "/services", key: "services"},
|
||||
{page: "/price", key: "price"},
|
||||
{page: "/about", key: "about"},
|
||||
{page: "/history", key: "history"},
|
||||
{page: "/contact", key: "contact"},
|
||||
{
|
||||
key: "country_manager",
|
||||
page: "",
|
||||
entries: [
|
||||
{
|
||||
key: "Egypt",
|
||||
entries: [
|
||||
{
|
||||
name: "Modern Technology",
|
||||
number: "+226578480830",
|
||||
email: "egypt@encoach.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "Oman",
|
||||
entries: [
|
||||
{
|
||||
name: "Smartway education",
|
||||
number: "+9689944094",
|
||||
email: "oman@encoach.com",
|
||||
},
|
||||
{name: "MTI", number: "+9687445609", email: "mti@encoach.com"},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "Saudi Arabia",
|
||||
entries: [
|
||||
{
|
||||
name: "Edutrach services",
|
||||
number: "+96658499347",
|
||||
email: "edu@encoach.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function Navbar({
|
||||
currentPage,
|
||||
language,
|
||||
}: {
|
||||
currentPage: string;
|
||||
language: "en" | "ar";
|
||||
}) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
export default function Navbar({currentPage, language}: {currentPage: string; language: "en" | "ar"}) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="-md:hidden w-full items-center justify-between px-11 py-3 shadow-sm md:flex">
|
||||
<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"
|
||||
)}
|
||||
>
|
||||
{items.map((item) =>
|
||||
item.entries ? (
|
||||
<NestedNavbarEntry
|
||||
key={item.key}
|
||||
entry={item}
|
||||
language={language}
|
||||
translation={translation}
|
||||
/>
|
||||
) : (
|
||||
<Link
|
||||
key={item.key}
|
||||
href={
|
||||
language === "ar" ? `/${language}${item.page}` : item.page
|
||||
}
|
||||
className={clsx(
|
||||
"hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2",
|
||||
currentPage === item.page &&
|
||||
"border-b-mti-purple-light border-b-2"
|
||||
)}
|
||||
>
|
||||
{(translation as any)[item.key][language]}
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div className="flex w-fit items-center gap-4">
|
||||
<Link
|
||||
href="https://platform.encoach.com"
|
||||
className="hover:bg-mti-purple-dark border-mti-purple-dark rounded-xl border px-8 py-2 transition duration-300 ease-in-out hover:text-white"
|
||||
>
|
||||
{translation.platform[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href="https://platform.encoach.com/register"
|
||||
className="hover:bg-mti-purple-dark hover:border-mti-purple-dark border-mti-purple-light bg-mti-purple-light rounded-xl border px-8 py-2 text-white transition duration-300 ease-in-out"
|
||||
>
|
||||
{translation.join[language]}
|
||||
</Link>
|
||||
{language === "ar" ? (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`${currentPage}`}
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`/ar${currentPage}`}
|
||||
>
|
||||
AR
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
return (
|
||||
<>
|
||||
<header className="-md:hidden w-full items-center justify-between px-11 py-3 shadow-sm md:flex">
|
||||
<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")}>
|
||||
{items.map((item) => (
|
||||
<Link
|
||||
key={item.key}
|
||||
href={language === "ar" ? `/${language}${item.page}` : item.page}
|
||||
className={clsx(
|
||||
"hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2",
|
||||
currentPage === item.page && "border-b-mti-purple-light border-b-2",
|
||||
)}>
|
||||
{(translation as any)[item.key][language]}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex w-fit items-center gap-4">
|
||||
<Link
|
||||
href="https://platform.encoach.com"
|
||||
className="hover:bg-mti-purple-dark border-mti-purple-dark rounded-xl border px-8 py-2 transition duration-300 ease-in-out hover:text-white">
|
||||
{translation.platform[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href="https://platform.encoach.com/register"
|
||||
className="hover:bg-mti-purple-dark hover:border-mti-purple-dark border-mti-purple-light bg-mti-purple-light rounded-xl border px-8 py-2 text-white transition duration-300 ease-in-out">
|
||||
{translation.join[language]}
|
||||
</Link>
|
||||
{language === "ar" ? (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`${currentPage}`}>
|
||||
EN
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`/ar${currentPage}`}>
|
||||
AR
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-10"
|
||||
onClose={() => setIsOpen(false)}
|
||||
>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
||||
</Transition.Child>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={() => setIsOpen(false)}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0">
|
||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
|
||||
<Dialog.Title
|
||||
as="header"
|
||||
className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden"
|
||||
>
|
||||
<Link href="/">
|
||||
<Image
|
||||
src="/logo_title.png"
|
||||
alt="EnCoach logo"
|
||||
width={128}
|
||||
height={128}
|
||||
/>
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
{language === "ar" ? (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`${currentPage}`}
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`/ar${currentPage}`}
|
||||
>
|
||||
AR
|
||||
</Link>
|
||||
)}
|
||||
<div
|
||||
className="cursor-pointer"
|
||||
onClick={() => setIsOpen(false)}
|
||||
tabIndex={0}
|
||||
>
|
||||
<BsXLg
|
||||
className="text-mti-purple-light text-2xl"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Title>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-col gap-6 px-8 text-lg",
|
||||
language === "ar" && "items-end"
|
||||
)}
|
||||
>
|
||||
{items.map((item) => (
|
||||
<Link
|
||||
key={item.key}
|
||||
href={
|
||||
language === "ar"
|
||||
? `/${language}${item.page}`
|
||||
: item.page
|
||||
}
|
||||
className={clsx(
|
||||
"w-fit transition duration-300 ease-in-out",
|
||||
currentPage === item.page &&
|
||||
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
|
||||
)}
|
||||
>
|
||||
{(translation as any)[item.key][language]}
|
||||
</Link>
|
||||
))}
|
||||
<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 "
|
||||
)}
|
||||
>
|
||||
{translation.join[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href="https://platform.encoach.com"
|
||||
className={clsx(
|
||||
"w-fit transition duration-300 ease-in-out"
|
||||
)}
|
||||
>
|
||||
{translation.platform[language]}
|
||||
</Link>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95">
|
||||
<Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
|
||||
<Dialog.Title as="header" className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden">
|
||||
<Link href="/">
|
||||
<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
{language === "ar" ? (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`${currentPage}`}>
|
||||
EN
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`/ar${currentPage}`}>
|
||||
AR
|
||||
</Link>
|
||||
)}
|
||||
<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
|
||||
<BsXLg className="text-mti-purple-light text-2xl" onClick={() => setIsOpen(false)} />
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Title>
|
||||
<div className={clsx("flex flex-col gap-6 px-8 text-lg", language === "ar" && "items-end")}>
|
||||
{items.map((item) => (
|
||||
<Link
|
||||
key={item.key}
|
||||
href={language === "ar" ? `/${language}${item.page}` : item.page}
|
||||
className={clsx(
|
||||
"w-fit transition duration-300 ease-in-out",
|
||||
currentPage === item.page &&
|
||||
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
|
||||
)}>
|
||||
{(translation as any)[item.key][language]}
|
||||
</Link>
|
||||
))}
|
||||
<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 ",
|
||||
)}>
|
||||
{translation.join[language]}
|
||||
</Link>
|
||||
<Link href="https://platform.encoach.com" className={clsx("w-fit transition duration-300 ease-in-out")}>
|
||||
{translation.platform[language]}
|
||||
</Link>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
|
||||
<header className="-md:flex w-full items-center justify-between px-8 py-2 md:hidden">
|
||||
<Link href="/">
|
||||
<Image
|
||||
src="/logo_title.png"
|
||||
alt="EnCoach logo"
|
||||
width={69}
|
||||
height={69}
|
||||
/>
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
{language === "ar" ? (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`${currentPage}`}
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`/ar${currentPage}`}
|
||||
>
|
||||
AR
|
||||
</Link>
|
||||
)}
|
||||
<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
|
||||
<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
<header className="-md:flex w-full items-center justify-between px-8 py-2 md:hidden">
|
||||
<Link href="/">
|
||||
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
{language === "ar" ? (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`${currentPage}`}>
|
||||
EN
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
|
||||
href={`/ar${currentPage}`}>
|
||||
AR
|
||||
</Link>
|
||||
)}
|
||||
<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
|
||||
<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
@@ -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" />
|
||||
|
||||
@@ -40,10 +40,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) => (
|
||||
|
||||
@@ -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",
|
||||
|
||||
190
src/templates/Services.tsx
Normal file
190
src/templates/Services.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
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,
|
||||
} from "react-icons/bs";
|
||||
import translation from "@/translation/services.json";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
interface Props {
|
||||
language: "en" | "ar";
|
||||
}
|
||||
|
||||
interface SectionStruct {
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
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-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" 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",
|
||||
|
||||
222
src/translation/services.json
Normal file
222
src/translation/services.json
Normal file
@@ -0,0 +1,222 @@
|
||||
{
|
||||
"services": {
|
||||
"en": "Services",
|
||||
"ar": "الخدمات"
|
||||
},
|
||||
"english_writing_evaluation": {
|
||||
"title": {
|
||||
"en": "Automated English Writing Evaluation",
|
||||
"ar": "تقييم كتابة اللغة الإنجليزية التلقائي"
|
||||
},
|
||||
"description": {
|
||||
"en": "Swiftly assess your writing with EnCoach's AI platform, offering detailed feedback in seconds. Save time and receive a comprehensive brief highlighting covered aspects and ways to enhance English writing skills. Identify weaknesses, improve, and approach your IELTS confidently.",
|
||||
"ar": "قم بتقييم كتابتك بسرعة باستخدام منصتنا الذكية إنكوتش واحصل على تعليقات مفصلة في ثوانٍ. وفّر وقتًا واحصل على ملخص شامل يسلط الضوء على الجوانب المغطاة وطرق تعزيز مهارات الكتابة باللغة الإنجليزية. حدد النقاط الضعيفة وقم بالتحسين واستعد بثقة لاختبار الآيلتس"
|
||||
},
|
||||
"evaluation": {
|
||||
"en": "Evaluation is based on the following:",
|
||||
"ar": "يتم تقييم الكتابة استنادًا إلى ما يلي"
|
||||
},
|
||||
"evaluation_values": {
|
||||
"en": [
|
||||
"Grammar mistakes",
|
||||
"Sentence ",
|
||||
"Punctuation mistakes",
|
||||
"Cohesiveness and consistency with the topic"
|
||||
],
|
||||
"ar": [
|
||||
" أخطاء القواعد النحوية",
|
||||
" بناء الجملة",
|
||||
" أخطاء حروف التشكيل وحروف الجر",
|
||||
" الانسجام والاتساق مع الموضوع"
|
||||
]
|
||||
},
|
||||
"acquire": {
|
||||
"en": "What you will acquire with EnCoach:",
|
||||
"ar": "ما ستحصل عليه من خلال إنكوتش :"
|
||||
},
|
||||
"acquire_values": {
|
||||
"en": [
|
||||
"Tips for effective writing.",
|
||||
"Quality writing strategies.",
|
||||
"Sample text to compare your writing to."
|
||||
],
|
||||
"ar": [
|
||||
" نصائح للكتابة الفعّالة.",
|
||||
"استراتيجيات كتابة عالية الجودة.",
|
||||
"نصوص نموذجية لمقارنتها مع إجابتك."
|
||||
]
|
||||
}
|
||||
},
|
||||
"speaking_practice_evaluation": {
|
||||
"title": {
|
||||
"en": "English Speaking Practice and Evaluation",
|
||||
"ar": "تمرن وقيم مهارة التحدث باللغة الإنجليزية"
|
||||
},
|
||||
"description": {
|
||||
"en": "Elevate English speaking with EnCoach's practice and evaluation. Instant feedback and results save time for efficient improvement, fostering a professional accent.",
|
||||
"ar": "قم بتطوير مهارة التحدث باللغة الإنجليزية من خلال تمرينات وتقييمات إنكوتش. تعليقات فورية ونتائج سريعة توفر وقتًا للتحسين الفعّال، وتساهم في تحسين النطق بشكل حرفي."
|
||||
},
|
||||
"evaluation": {
|
||||
"en": "Evaluation is based on the following:",
|
||||
"ar": "يتم تقييم المهارة استنادًا إلى ما يلي:"
|
||||
},
|
||||
"evaluation_values": {
|
||||
"en": ["Pronunciation and Vocabulary", "Grammar when speaking"],
|
||||
"ar": [" النطق والمفردات", " القواعد النحوية عند التحدث"]
|
||||
},
|
||||
"acquire": {
|
||||
"en": "What you will acquire with EnCoach:",
|
||||
"ar": "ما ستحصل عليه من خلال إنكوتش:"
|
||||
},
|
||||
"acquire_values": {
|
||||
"en": ["Correct pronunciation", "Enhanced vocabulary"],
|
||||
"ar": ["النطق الصحيح", "تحسين المفردات"]
|
||||
}
|
||||
},
|
||||
"reading_and_listening": {
|
||||
"title": {
|
||||
"en": "Reading and Listening Comprehension Practice",
|
||||
"ar": "تمرين فهم القراءة والاستماع"
|
||||
},
|
||||
"description": {
|
||||
"en": "EnCoach prepares you for IELTS reading and listening with diverse accents and instant feedback. Our materials address vocabulary concerns, ensuring you excel.",
|
||||
"ar": "يُعد إنكوتش استعدادًا لاختبار الآيلتس في مهارتي القراءة والاستماع من خلال توفير مجموعة متنوعة من اللهجات والتعليقات الفورية. تتناول موادنا تحديات المفردات، مما يضمن تفوقك في هذه المهارات"
|
||||
},
|
||||
"evaluation": {
|
||||
"en": "Evaluation is based on the following:",
|
||||
"ar": "يتم تقييم المهارة استنادًا إلى ما يلي:"
|
||||
},
|
||||
"evaluation_values": {
|
||||
"en": ["Correct answers", "Contextual analysis", "Response time"],
|
||||
"ar": [" الإجابات الصحيحة", " تحليل السياق", " وقت الاستجابة"]
|
||||
},
|
||||
"acquire": {
|
||||
"en": "What you will acquire with EnCoach:",
|
||||
"ar": "ما ستحصل عليه من خلال إنكوتش :"
|
||||
},
|
||||
"acquire_values": {
|
||||
"en": [
|
||||
"Understanding different accents.",
|
||||
"Strategies for analyzing the context of the written material.",
|
||||
"Improved time management.",
|
||||
"Computer-based IELTS exam prep",
|
||||
"Reading skills: skimming, main ideas, writer’s context"
|
||||
],
|
||||
"ar": [
|
||||
" فهم لهجات مختلفة.",
|
||||
"استراتيجيات لتحليل سياق المواد المكتوبة.",
|
||||
"تحسين إدارة الوقت.",
|
||||
"تحضير امتحان الآيلتس على الحاسوب.",
|
||||
"مهارات القراءة: السرعة في القراءة، وفهم الأفكار الرئيسية، وسياق الكاتب."
|
||||
]
|
||||
}
|
||||
},
|
||||
"practice_tests": {
|
||||
"title": {
|
||||
"en": "Practice Tests and Score Evaluation",
|
||||
"ar": "اختبارات تطبيقية مقيمة بالدرجات"
|
||||
},
|
||||
"description": {
|
||||
"en": "Prepare for your IELTS test with EnCoach. With instant evaluation for each section, we help you improve and succeed.",
|
||||
"ar": "استعد لامتحان الإيلتس الخاص بك مع إنكوتش بتقييم فوري لكل قسم، نساعدك على التحسين والنجاح."
|
||||
},
|
||||
"evaluation": {
|
||||
"en": "Evaluation is based on the following:",
|
||||
"ar": "يتم تقييم الدرجات استنادًا إلى ما يلي:"
|
||||
},
|
||||
"evaluation_values": {
|
||||
"en": ["No. of correct answers", "Speed of responses"],
|
||||
"ar": [" عدد الإجابات الصحيحة", " سرعة الاستجابات"]
|
||||
},
|
||||
"acquire": {
|
||||
"en": "What you will acquire with EnCoach:",
|
||||
"ar": "ما ستحصل عليه من خلال إنكوتش:"
|
||||
},
|
||||
"acquire_values": {
|
||||
"en": [
|
||||
"Tips and tricks to score 8+",
|
||||
"Better writing and speaking strategies",
|
||||
"Training of your ear to pick different accents",
|
||||
"In-depth understanding of the reading material"
|
||||
],
|
||||
"ar": [
|
||||
"نصائح وحيل للحصول على عالية.",
|
||||
"استراتيجيات أفضل للكتابة والتحدث.",
|
||||
"تدريب أذنك للتعرف على اللهجات المختلفة.",
|
||||
"فهم عميق للمواد المقروءة."
|
||||
]
|
||||
}
|
||||
},
|
||||
"progress_tracking": {
|
||||
"title": {
|
||||
"en": "Progress Tracking and Analytics",
|
||||
"ar": "تتبع التقدم والتحليلات"
|
||||
},
|
||||
"description": {
|
||||
"en": "Monitor IELTS preparation progress with EnCoach. Instant feedback, detailed analysis, and improvement insights optimize performance for success.",
|
||||
"ar": "راقب تقدم استعدادك لاختبار الآيلتس مع إنكوتش وأحصل على تعليقات فوريه مع تحليل مفصل لأجل متابعة التحسين "
|
||||
},
|
||||
"advantages": {
|
||||
"en": "Advantages of progress tracking and analytics:",
|
||||
"ar": "مزايا تتبع التقدم والتحليلات"
|
||||
},
|
||||
"advantages_values": {
|
||||
"en": [
|
||||
"Highlighting weaknesses,",
|
||||
"Assessing pre-existing knowledge",
|
||||
"Providing thorough analyses for writing, speaking, listening, and reading sections"
|
||||
],
|
||||
"ar": [
|
||||
"إبراز النقاط الضعيفة.",
|
||||
"تقييم المعرفة السابقة.",
|
||||
"توفير تحليلات شاملة لأقسام الكتابة، والتحدث، والاستماع، والقراءة."
|
||||
]
|
||||
}
|
||||
},
|
||||
"corporate_educational_institutions": {
|
||||
"en": "Corporate and Educational Institutions",
|
||||
"ar": "الشركات والمؤسسات التعليمية"
|
||||
},
|
||||
"unified_english_level_test": {
|
||||
"title": {
|
||||
"en": "Unified English level test for corporate and educational institutions",
|
||||
"ar": "اختبار موحد لمستوى اللغة الإنجليزية للشركات والمؤسسات التعليمية"
|
||||
},
|
||||
"description": {
|
||||
"en": "EnCoach elevates language skills through unified English-level tests for companies and educational institutions. Showcase proficiency efficiently with internationally recognized CEFR level classification.",
|
||||
"ar": "يعزز إنكوتش مهارات اللغة من خلال اختبارات موحدة لمستوى اللغة الإنجليزية للشركات والمؤسسات التعليمية. تقييم المستوى المتوافق مع التصنيف المعترف به دوليًا وفقًا لمستويات CEFR."
|
||||
},
|
||||
"advantages": {
|
||||
"en": "Advantages of Unified English level test:",
|
||||
"ar": "مزايا اختبارات موحدة لمستوى اللغة الإنجليزية:"
|
||||
},
|
||||
"advantages_values": {
|
||||
"en": [
|
||||
"Cost-effective tests",
|
||||
"CEFR Benchmark ",
|
||||
"Developed by language experts",
|
||||
"Quick language proficiency proof",
|
||||
"Business English acquisition",
|
||||
"Academic English improvement"
|
||||
],
|
||||
"ar": [
|
||||
" اختبارات فعّالة من حيث التكلفة",
|
||||
" منسجم مع المعايير CEFR",
|
||||
" تم تطويرها بواسطة خبراء اللغة",
|
||||
" إثبات سريع لمهارات اللغة",
|
||||
" اكتساب اللغة الإنجليزية بكل احتراف",
|
||||
" تحسين اللغة الإنجليزية الأكاديمية"
|
||||
]
|
||||
}
|
||||
},
|
||||
"customized_packages": {
|
||||
"title": {
|
||||
"en": "Customized Packages for Corporate and Educational Institutions",
|
||||
"ar": "حزم مخصصة للشركات والمؤسسات التعليمية"
|
||||
},
|
||||
"description": {
|
||||
"en": "EnCoach offers tailored packages for corporate and educational institutions, meeting specific English level needs. Achieve success with effective and efficient training.",
|
||||
"ar": "يقدم إنكوتش حزم مخصصة للشركات والمؤسسات التعليمية، تلبي احتياجات فحص اللغة الإنجليزية. حقق النجاح من خلال تدريب فعّال ."
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user