Translated the home page to work with both EN and AR
This commit is contained in:
Tiago Ribeiro
BIN
public/oman-flag.jpg
Normal file
BIN
public/oman-flag.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
public/person_laptop_1.jpg
Normal file
BIN
public/person_laptop_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 MiB |
BIN
public/person_laptop_2.jpg
Normal file
BIN
public/person_laptop_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 MiB |
BIN
public/person_laptop_3.jpg
Normal file
BIN
public/person_laptop_3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 MiB |
BIN
public/uk-flag.png
Normal file
BIN
public/uk-flag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
6
src/app/ar/page.tsx
Normal file
6
src/app/ar/page.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import Home from "@/templates/Home";
|
||||
import {NextPageContext} from "next";
|
||||
|
||||
export default function Page({}: NextPageContext) {
|
||||
return <Home language="ar" />;
|
||||
}
|
||||
@@ -9,7 +9,7 @@ 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" />
|
||||
<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>
|
||||
@@ -22,7 +22,7 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
<Footer language="en" />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import "./globals.css";
|
||||
import type {Metadata} from "next";
|
||||
import {Inter} from "next/font/google";
|
||||
import {Elements} from "@stripe/react-stripe-js";
|
||||
import {loadStripe} from "@stripe/stripe-js";
|
||||
|
||||
const inter = Inter({subsets: ["latin"]});
|
||||
|
||||
|
||||
169
src/app/page.tsx
169
src/app/page.tsx
@@ -1,168 +1,5 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import Link from "next/link";
|
||||
import {BsCardChecklist, BsClipboardFill, BsClockFill, BsInstagram, BsShieldFillCheck, BsTwitter} from "react-icons/bs";
|
||||
import {BiLogoFacebook} from "react-icons/bi";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
import Home from "@/templates/Home";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
|
||||
<Navbar currentPage="/" />
|
||||
|
||||
<section className="w-full relative bg-white">
|
||||
<img src="/home/first_banner.png" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
|
||||
<Link href="/join">
|
||||
<button className="absolute bottom-1/10 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">
|
||||
Get Started
|
||||
</button>
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
<section className="w-full grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-8 p-8 md:p-24 bg-white">
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
|
||||
<BsClockFill className="text-mti-rose-light w-10 h-10" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
|
||||
<span className="font-bold text-xl">Placeholder</span>
|
||||
<span>Sit accusamus maxime maiores rerum cupiditate dolorum inventore.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
|
||||
<BsClipboardFill className="text-mti-rose-light w-10 h-10" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
|
||||
<span className="font-bold text-xl">Placeholder</span>
|
||||
<span>Sit accusamus maxime maiores rerum cupiditate dolorum inventore.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
|
||||
<BsCardChecklist className="text-mti-rose-light w-10 h-10" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
|
||||
<span className="font-bold text-xl">Placeholder</span>
|
||||
<span>Sit accusamus maxime maiores rerum cupiditate dolorum inventore.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
|
||||
<BsShieldFillCheck className="text-mti-rose-light w-10 h-10" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
|
||||
<span className="font-bold text-xl">Placeholder</span>
|
||||
<span>Sit accusamus maxime maiores rerum cupiditate dolorum inventore.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full p-8 py-16 md:py-32 md:px-16 lg:px-28 bg-mti-gray-seasalt items-center justify-center flex flex-col gap-10 relative">
|
||||
<span className="text-xl">
|
||||
<span className="text-white bg-mti-rose-light px-1 py-0">Interested</span> in us?
|
||||
</span>
|
||||
<span className="text-4xl font-bold max-w-sm text-center">
|
||||
Contact us and <span className="text-mti-rose-light">Start</span> Learning
|
||||
</span>
|
||||
<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">
|
||||
Contact Us
|
||||
</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">WhatsApp Contact</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" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-0 -left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-6 -left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-12 -left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-18 -left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 -left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-12" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-18" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full p-8 md:p-20 lg:p-32 flex flex-col gap-12 md:flex-row items-center justify-around bg-white">
|
||||
<div className="flex flex-col gap-8">
|
||||
<span className="text-lg font-semibold">
|
||||
<span className="text-white bg-mti-rose-light px-1 py-0">About us</span> Message from CEO
|
||||
</span>
|
||||
<div className="flex flex-col gap-3">
|
||||
<span className="text-4xl font-bold max-w-md">
|
||||
“We are the best service and the <span className="text-mti-rose-light">only one</span>”
|
||||
</span>
|
||||
<p className="max-w-lg text-base">
|
||||
Engaged in education, especially in providing teaching services for students who do not have the opportunity to learn in
|
||||
conventional institutions.
|
||||
</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">
|
||||
Learn more
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="w-fit h-fit relative">
|
||||
<div className="w-64 h-64 md:w-80 md:h-80 rounded-t-[80px] rounded-br-[80px] md:rounded-t-[120px] md:rounded-br-[120px] overflow-hidden">
|
||||
<img className="w-full h-full" alt="MTI's CEO" src="/placeholder_person.png" />
|
||||
</div>
|
||||
<div>
|
||||
<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 -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" />
|
||||
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-20" />
|
||||
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-30" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full p-8 md:p-20 xl:p-32 flex bg-white flex-col gap-8 md:gap-24 lg:gap-32">
|
||||
<div className="flex flex-col gap-12 w-full">
|
||||
<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">Our Partners</span>
|
||||
<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
|
||||
<img src="/logos/dq_logo.png" alt="DQ's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
|
||||
<img
|
||||
src="/logos/knowledge_grid_academy_logo.png"
|
||||
alt="Knowledge Grid Academy's Logo"
|
||||
className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
|
||||
/>
|
||||
<img src="/logos/sohar_logo.png" alt="Sohar's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
|
||||
<img
|
||||
src="/logos/partner_logo_unknown.png"
|
||||
alt="Unknown Partner's Logo"
|
||||
className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
|
||||
/>
|
||||
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
|
||||
<img src="/logos/sohar_aluminium_logo.png" alt="Sohar Aluminium's Logo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-12 w-full">
|
||||
<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">Accreditation</span>
|
||||
<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
|
||||
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
|
||||
<img src="/logos/idp_logo.png" alt="IDP's Logo" />
|
||||
</div>
|
||||
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
|
||||
<img src="/logos/ielts_logo.png" alt="IELTS's Logo" />
|
||||
</div>
|
||||
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
|
||||
<img src="/logos/ec_council_logo.png" alt="EC Council's Logo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
export default function Page() {
|
||||
return <Home language="en" />;
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@ export default function Home() {
|
||||
|
||||
return (
|
||||
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
|
||||
<Navbar currentPage="/success" />
|
||||
<Navbar currentPage="/success" language="en" />
|
||||
|
||||
<section className="w-full h-full relative bg-white py-32 flex flex-col items-center justify-center text-center gap-4">
|
||||
{isLoading && (
|
||||
@@ -83,7 +83,7 @@ export default function Home() {
|
||||
)}
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
<Footer language="en" />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,64 +1,71 @@
|
||||
import Link from "next/link";
|
||||
import {BiLogoFacebook} from "react-icons/bi";
|
||||
import {BsInstagram, BsTwitter} from "react-icons/bs";
|
||||
import translation from "@/translation/footer.json";
|
||||
|
||||
export default function Footer() {
|
||||
interface Props {
|
||||
language: "en" | "ar";
|
||||
}
|
||||
|
||||
export default function Footer({language}: Props) {
|
||||
return (
|
||||
<>
|
||||
<section className="w-full py-10 px-8 md:px-28 bg-mti-gray-seasalt flex flex-col md:flex-row md:justify-between gap-8">
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">Navigation</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href="/about">Why us</Link>
|
||||
<Link href="/about">Capabilities</Link>
|
||||
<Link href="/about">Expertise</Link>
|
||||
<Link href="/about">History</Link>
|
||||
<Link href="/about">Contact</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">Services</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href="#benefits">EnCoach benefits</Link>
|
||||
<Link href="#testimonials">Student testimonials</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">About</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href="/terms">Terms and Conditions</Link>
|
||||
<Link href="/privacy-policy">Privacy Policy</Link>
|
||||
<Link href="/about">About</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">Get in Touch</span>
|
||||
<section className="bg-mti-gray-seasalt w-full">
|
||||
<div className="w-full py-10 px-8 md:px-28 flex flex-col md:flex-row md:justify-between gap-8 lg:container lg:mx-auto">
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="max-w-[280px]">
|
||||
Stay connected with us and know the latest updates about our services through various social media
|
||||
</span>
|
||||
<div className="flex gap-6 items-center">
|
||||
<Link
|
||||
href="https://facebook.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
|
||||
<BiLogoFacebook className="w-6 h-6" />
|
||||
</Link>
|
||||
<Link
|
||||
href="https://twitter.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
|
||||
<BsTwitter className="w-5 h-5" />
|
||||
</Link>
|
||||
<Link
|
||||
href="https://instagram.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
|
||||
<BsInstagram className="w-5 h-5" />
|
||||
</Link>
|
||||
<span className="font-bold text-xl">{translation.navigation.text[language]}</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href="/about">{translation.navigation.why_us[language]}</Link>
|
||||
<Link href="/about">{translation.navigation.capabilities[language]}</Link>
|
||||
<Link href="/about">{translation.navigation.expertise[language]}</Link>
|
||||
<Link href="/about">{translation.navigation.history[language]}</Link>
|
||||
<Link href="/about">{translation.navigation.contact[language]}</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">{translation.services.text[language]}</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href="#benefits">{translation.services.encoach_benefits[language]}</Link>
|
||||
<Link href="#testimonials">{translation.services.student_testimonials[language]}</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">{translation.about.text[language]}</span>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href="/terms">{translation.about.terms[language]}</Link>
|
||||
<Link href="/privacy-policy">{translation.about.privacy_policy[language]}</Link>
|
||||
<Link href="/about">{translation.about.text[language]}</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="font-bold text-xl">{translation.get_in_touch.title[language]}</span>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="max-w-[280px]">{translation.get_in_touch.text[language]}</span>
|
||||
<div className="flex gap-6 items-center">
|
||||
<Link
|
||||
href="https://facebook.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
|
||||
<BiLogoFacebook className="w-6 h-6" />
|
||||
</Link>
|
||||
<Link
|
||||
href="https://twitter.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
|
||||
<BsTwitter className="w-5 h-5" />
|
||||
</Link>
|
||||
<Link
|
||||
href="https://instagram.com"
|
||||
className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
|
||||
<BsInstagram className="w-5 h-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">© EnCoach 2023 all rights reserved</footer>
|
||||
<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">
|
||||
© {translation.copyright[language]}
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
"use client";
|
||||
|
||||
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 {Fragment, useEffect, useState} from "react";
|
||||
import {Dialog, Menu, Transition} from "@headlessui/react";
|
||||
import {useRouter} from "next/navigation";
|
||||
import translation from "@/translation/navbar.json";
|
||||
|
||||
export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
export default function Navbar({currentPage, language}: {currentPage: string; language: "en" | "ar"}) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
@@ -23,7 +26,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/" && "border-b-2 border-b-mti-purple-light",
|
||||
)}>
|
||||
Home
|
||||
{translation.home[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
@@ -31,7 +34,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/services" && "border-b-2 border-b-mti-purple-light",
|
||||
)}>
|
||||
Services
|
||||
{translation.services[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
@@ -39,7 +42,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/about" && "border-b-2 border-b-mti-purple-light",
|
||||
)}>
|
||||
About us
|
||||
{translation.about[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
@@ -47,7 +50,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/history" && "border-b-2 border-b-mti-purple-light",
|
||||
)}>
|
||||
History
|
||||
{translation.history[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
@@ -55,20 +58,39 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/contact" && "border-b-2 border-b-mti-purple-light",
|
||||
)}>
|
||||
Contact
|
||||
{translation.contact[language]}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center w-fit gap-4">
|
||||
<Link
|
||||
href="https://platform.encoach.com"
|
||||
className="transition ease-in-out duration-300 hover:text-white hover:bg-mti-purple-dark border border-mti-purple-dark px-8 py-2 rounded-xl">
|
||||
Platform
|
||||
{translation.platform[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href="/join"
|
||||
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">
|
||||
Join
|
||||
{translation.join[language]}
|
||||
</Link>
|
||||
<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-8 h-8 relative">
|
||||
{language === "ar" ? (
|
||||
<Link href={`${currentPage}`}>
|
||||
<img
|
||||
src="uk-flag.png"
|
||||
alt="English"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href={`/ar${currentPage}`}>
|
||||
<img
|
||||
src="oman-flag.jpg"
|
||||
alt="Arabic"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -100,8 +122,29 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
<Link href="/">
|
||||
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
|
||||
</Link>
|
||||
<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
|
||||
<BsXLg className="text-2xl text-mti-purple-light" onClick={() => setIsOpen(false)} />
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-6 h-6 relative">
|
||||
{language === "ar" ? (
|
||||
<Link href={`${currentPage}`}>
|
||||
<img
|
||||
src="uk-flag.png"
|
||||
alt="English"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href={`/ar${currentPage}`}>
|
||||
<img
|
||||
src="oman-flag.jpg"
|
||||
alt="Arabic"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
|
||||
<BsXLg className="text-2xl text-mti-purple-light" onClick={() => setIsOpen(false)} />
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Title>
|
||||
<div className="flex flex-col gap-6 px-8 text-lg">
|
||||
@@ -111,7 +154,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
Home
|
||||
{translation.home[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
@@ -120,7 +163,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
currentPage === "/services" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
Services
|
||||
{translation.services[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
@@ -129,7 +172,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
currentPage === "/about" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
About us
|
||||
{translation.about[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
@@ -138,7 +181,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
currentPage === "/history" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
History
|
||||
{translation.history[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
@@ -147,7 +190,7 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
currentPage === "/contact" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
Contact
|
||||
{translation.contact[language]}
|
||||
</Link>
|
||||
<Link
|
||||
href="/join"
|
||||
@@ -156,10 +199,10 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
currentPage === "/join" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
Join
|
||||
{translation.join[language]}
|
||||
</Link>
|
||||
<Link href="https://platform.encoach.com" className={clsx("transition ease-in-out duration-300 w-fit")}>
|
||||
Platform
|
||||
{translation.platform[language]}
|
||||
</Link>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
@@ -173,8 +216,29 @@ export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
<Link href="/">
|
||||
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
|
||||
</Link>
|
||||
<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
|
||||
<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-6 h-6 relative">
|
||||
{language === "ar" ? (
|
||||
<Link href={`${currentPage}`}>
|
||||
<img
|
||||
src="uk-flag.png"
|
||||
alt="English"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href={`/ar${currentPage}`}>
|
||||
<img
|
||||
src="oman-flag.jpg"
|
||||
alt="Arabic"
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
|
||||
<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
|
||||
222
src/templates/Home.tsx
Normal file
222
src/templates/Home.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import Link from "next/link";
|
||||
import {BsCardChecklist, BsClipboardFill, BsClockFill, BsInstagram, BsShieldFillCheck, BsTwitter} from "react-icons/bs";
|
||||
import {BiLogoFacebook} from "react-icons/bi";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
import translation from "@/translation/home.json";
|
||||
|
||||
interface Props {
|
||||
language: "en" | "ar";
|
||||
}
|
||||
|
||||
export default function Home({language}: Props) {
|
||||
return (
|
||||
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
|
||||
<Navbar currentPage="/" language={language} />
|
||||
|
||||
<section className="w-full relative bg-white">
|
||||
<img src="/home/first_banner.png" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
|
||||
<Link href="/join">
|
||||
<button className="absolute bottom-1/10 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]}
|
||||
</button>
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
{/* Perks Section */}
|
||||
<section className="w-full bg-white">
|
||||
<div className="w-full grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-8 p-8 md:p-24 container mx-auto">
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
|
||||
<BsClockFill className="text-mti-rose-light w-10 h-10" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
|
||||
<span className="font-bold text-xl">{translation.perks["24_hour_access"].title[language]}</span>
|
||||
<span>{translation.perks["24_hour_access"].description[language]}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
|
||||
<BsClipboardFill className="text-mti-rose-light w-10 h-10" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
|
||||
<span className="font-bold text-xl">{translation.perks.complete_package.title[language]}</span>
|
||||
<span>{translation.perks.complete_package.description[language]}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
|
||||
<BsCardChecklist className="text-mti-rose-light w-10 h-10" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
|
||||
<span className="font-bold text-xl">{translation.perks.enjoy_learning.title[language]}</span>
|
||||
<span>{translation.perks.enjoy_learning.description[language]}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
|
||||
<BsShieldFillCheck className="text-mti-rose-light w-10 h-10" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 items-center text-center max-w-[240px]">
|
||||
<span className="font-bold text-xl">{translation.perks.guaranteed_results.title[language]}</span>
|
||||
<span>{translation.perks.guaranteed_results.description[language]}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* EnCoach Benefits Section */}
|
||||
<section className="w-full bg-white">
|
||||
<div className="w-full p-8 md:p-20 lg:p-32 flex flex-col-reverse gap-8 md:gap-24 md:flex-row items-center justify-center container mx-auto">
|
||||
<div className="relative h-full grid grid-cols-2 place-items-center gap-8 -md:px-8">
|
||||
<div className="w-60 h-60 rounded-xl overflow-hidden flex items-center justify-center">
|
||||
<img src="/person_laptop_3.jpg" alt="Person using a laptop" />
|
||||
</div>
|
||||
<div className="w-60 h-80 rounded-xl overflow-hidden flex items-center justify-center row-span-2">
|
||||
<img src="/person_laptop_1.jpg" alt="Person using a laptop" />
|
||||
</div>
|
||||
<div className="w-60 h-60 rounded-xl overflow-hidden flex items-center justify-center">
|
||||
<img src="/person_laptop_2.jpg" alt="Person using a laptop" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-8">
|
||||
<span className="text-lg font-semibold">
|
||||
<span className="text-white bg-mti-rose-light px-1 py-0">{translation.encoach_benefits.tag.encoach[language]}</span>{" "}
|
||||
{translation.encoach_benefits.tag.benefits[language]}
|
||||
</span>
|
||||
<div className="flex flex-col gap-3">
|
||||
<span className="text-4xl font-bold max-w-md">
|
||||
{translation.encoach_benefits.title.text[language]}{" "}
|
||||
<span className="text-mti-rose-light">{translation.encoach_benefits.title.highlight[language]}</span>
|
||||
</span>
|
||||
<p className="max-w-lg text-base">{translation.encoach_benefits.description[language]}</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]}
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<span className="text-xl">
|
||||
<span className="text-white bg-mti-rose-light px-1 py-0">{translation.interested.tag.highlight[language]}</span>{" "}
|
||||
{translation.interested.tag.text[language]}
|
||||
</span>
|
||||
<span className="text-4xl font-bold max-w-sm text-center">
|
||||
{translation.interested.title.beginning[language]}{" "}
|
||||
<span className="text-mti-rose-light">{translation.interested.title.highlight[language]}</span>{" "}
|
||||
{translation.interested.title.end[language]}
|
||||
</span>
|
||||
<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]}
|
||||
</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>
|
||||
<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" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-0 -left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-6 -left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-12 -left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute bottom-18 -left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 -left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-6" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-12" />
|
||||
<div className="w-3 h-3 bg-mti-purple rounded-full absolute -bottom-6 left-18" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CEO Message Section */}
|
||||
<section className="w-full bg-white">
|
||||
<div className="w-full p-8 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">
|
||||
<span className="text-lg font-semibold">
|
||||
<span className="text-white bg-mti-rose-light px-1 py-0">{translation.ceo_message.tag.highlight[language]}</span>{" "}
|
||||
{translation.ceo_message.tag.text[language]}
|
||||
</span>
|
||||
<div className="flex flex-col gap-3">
|
||||
<span className="text-4xl font-bold max-w-md">
|
||||
“{translation.ceo_message.title.text[language]}{" "}
|
||||
<span className="text-mti-rose-light">{translation.ceo_message.title.highlight[language]}</span>”
|
||||
</span>
|
||||
<p className="max-w-lg text-base">{translation.ceo_message.description[language]}</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]}
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="w-fit h-fit relative">
|
||||
<div className="w-64 h-64 md:w-80 md:h-80 rounded-t-[80px] rounded-br-[80px] md:rounded-t-[120px] md:rounded-br-[120px] overflow-hidden">
|
||||
<img className="w-full h-full" alt="MTI's CEO" src="/placeholder_person.png" />
|
||||
</div>
|
||||
<div>
|
||||
<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 -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" />
|
||||
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-20" />
|
||||
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-30" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Partner and Accreditation Section */}
|
||||
<section className="w-full bg-white">
|
||||
<div className="p-8 md:p-20 xl:p-32 flex flex-col gap-8 md:gap-24 lg:gap-32 w-full container mx-auto">
|
||||
<div className="flex flex-col gap-12 w-full">
|
||||
<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">{translation.our_partners[language]}</span>
|
||||
<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
|
||||
<img src="/logos/dq_logo.png" alt="DQ's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
|
||||
<img
|
||||
src="/logos/knowledge_grid_academy_logo.png"
|
||||
alt="Knowledge Grid Academy's Logo"
|
||||
className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
|
||||
/>
|
||||
<img src="/logos/sohar_logo.png" alt="Sohar's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
|
||||
<img
|
||||
src="/logos/partner_logo_unknown.png"
|
||||
alt="Unknown Partner's Logo"
|
||||
className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
|
||||
/>
|
||||
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
|
||||
<img src="/logos/sohar_aluminium_logo.png" alt="Sohar Aluminium's Logo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-12 w-full">
|
||||
<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">{translation.accreditation[language]}</span>
|
||||
<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
|
||||
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
|
||||
<img src="/logos/idp_logo.png" alt="IDP's Logo" />
|
||||
</div>
|
||||
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
|
||||
<img src="/logos/ielts_logo.png" alt="IELTS's Logo" />
|
||||
</div>
|
||||
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
|
||||
<img src="/logos/ec_council_logo.png" alt="EC Council's Logo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer language={language} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
70
src/translation/footer.json
Normal file
70
src/translation/footer.json
Normal file
@@ -0,0 +1,70 @@
|
||||
{
|
||||
"navigation": {
|
||||
"text": {
|
||||
"en": "Navigation",
|
||||
"ar": "ملاحة"
|
||||
},
|
||||
"why_us": {
|
||||
"en": "Why us",
|
||||
"ar": "لماذا نحن"
|
||||
},
|
||||
"capabilities": {
|
||||
"en": "Capabilities",
|
||||
"ar": "قدرات"
|
||||
},
|
||||
"expertise": {
|
||||
"en": "Expertise",
|
||||
"ar": "خبرة"
|
||||
},
|
||||
"history": {
|
||||
"en": "History",
|
||||
"ar": "تاريخ"
|
||||
},
|
||||
"contact": {
|
||||
"en": "Contact",
|
||||
"ar": "اتصال"
|
||||
}
|
||||
},
|
||||
"services": {
|
||||
"text": {
|
||||
"en": "Services",
|
||||
"ar": "خدمات"
|
||||
},
|
||||
"encoach_benefits": {
|
||||
"en": "EnCoach Benefits",
|
||||
"ar": "فوائد إنكوتش"
|
||||
},
|
||||
"student_testimonials": {
|
||||
"en": "Student Testimonials",
|
||||
"ar": "شهادات الطلاب"
|
||||
}
|
||||
},
|
||||
"about": {
|
||||
"text": {
|
||||
"en": "About",
|
||||
"ar": "عن"
|
||||
},
|
||||
"terms": {
|
||||
"en": "Terms and Conditions",
|
||||
"ar": "الأحكام والشروط"
|
||||
},
|
||||
"privacy_policy": {
|
||||
"en": "Privacy Policy",
|
||||
"ar": "سياسة الخصوصية"
|
||||
}
|
||||
},
|
||||
"get_in_touch": {
|
||||
"title": {
|
||||
"en": "Get in Touch",
|
||||
"ar": "ابقى على تواصل"
|
||||
},
|
||||
"text": {
|
||||
"en": "Stay connected with us and know the latest updates about our services through various social media",
|
||||
"ar": "ابق على تواصل معنا واعرف آخر التحديثات عن خدماتنا عبر وسائل التواصل الاجتماعي المختلفة"
|
||||
}
|
||||
},
|
||||
"copyright": {
|
||||
"en": "EnCoach 2023 all rights reserved",
|
||||
"ar": "إنكوتش 2023 جميع الحقوق محفوظة"
|
||||
}
|
||||
}
|
||||
146
src/translation/home.json
Normal file
146
src/translation/home.json
Normal file
@@ -0,0 +1,146 @@
|
||||
{
|
||||
"get_started_btn": {
|
||||
"en": "Get Started",
|
||||
"ar": "البدء"
|
||||
},
|
||||
"perks": {
|
||||
"24_hour_access": {
|
||||
"title": {
|
||||
"en": "24 hour access",
|
||||
"ar": "وصول 24 ساعة"
|
||||
},
|
||||
"description": {
|
||||
"en": "Always online, always ready to help you train.",
|
||||
"ar": "متصل بالإنترنت دائمًا، ومستعد دائمًا لمساعدتك في التدريب."
|
||||
}
|
||||
},
|
||||
"complete_package": {
|
||||
"title": {
|
||||
"en": "Complete package",
|
||||
"ar": "حزمة كاملة"
|
||||
},
|
||||
"description": {
|
||||
"en": "Every module is available at your fingertips.",
|
||||
"ar": "كل وحدة متاحة في متناول يدك."
|
||||
}
|
||||
},
|
||||
"enjoy_learning": {
|
||||
"title": {
|
||||
"en": "Enjoy learning",
|
||||
"ar": "يتمتع التعلم"
|
||||
},
|
||||
"description": {
|
||||
"en": "Choose between a relaxed single module approach, or a competitive full exam one.",
|
||||
"ar": "اختر بين منهج وحدة واحدة مريح أو اختبار تنافسي كامل."
|
||||
}
|
||||
},
|
||||
"guaranteed_results": {
|
||||
"title": {
|
||||
"en": "Guaranteed results",
|
||||
"ar": "نتائج مضمونة"
|
||||
},
|
||||
"description": {
|
||||
"en": "You will improve your performance through your hard work.",
|
||||
"ar": "سوف تقوم بتحسين أدائك من خلال عملك الجاد."
|
||||
}
|
||||
}
|
||||
},
|
||||
"learn_more": {
|
||||
"en": "Learn more",
|
||||
"ar": "يتعلم أكثر"
|
||||
},
|
||||
"encoach_benefits": {
|
||||
"tag": {
|
||||
"encoach": {
|
||||
"en": "EnCoach",
|
||||
"ar": "الإنكوتش"
|
||||
},
|
||||
"benefits": {
|
||||
"en": "benefits",
|
||||
"ar": "فوائد"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": {
|
||||
"en": "Students have registered on our",
|
||||
"ar": "لقد تم تسجيل الطلاب على موقعنا"
|
||||
},
|
||||
"highlight": {
|
||||
"en": "platform",
|
||||
"ar": "منصة"
|
||||
}
|
||||
},
|
||||
"description": {
|
||||
"en": "We already have many students studying online under the guidance of our digital trainer, so come and join the community",
|
||||
"ar": "لدينا بالفعل العديد من الطلاب الذين يدرسون عبر الإنترنت تحت إشراف مدربنا الرقمي، لذا تعال وانضم إلى المجتمع"
|
||||
}
|
||||
},
|
||||
"interested": {
|
||||
"tag": {
|
||||
"highlight": {
|
||||
"en": "Interested",
|
||||
"ar": "مهتم"
|
||||
},
|
||||
"text": {
|
||||
"en": "in us?",
|
||||
"ar": "بنا؟"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"beginning": {
|
||||
"en": "Contact us and",
|
||||
"ar": "اتصل بنا و"
|
||||
},
|
||||
"highlight": {
|
||||
"en": "Start",
|
||||
"ar": "يبدأ"
|
||||
},
|
||||
"end": {
|
||||
"en": "Learning",
|
||||
"ar": "تعلُّم"
|
||||
}
|
||||
},
|
||||
"contact_us": {
|
||||
"en": "Contact us",
|
||||
"ar": "اتصل بنا"
|
||||
},
|
||||
"whatsapp": {
|
||||
"en": "WhatsApp Contact",
|
||||
"ar": "تواصل واتس اب"
|
||||
}
|
||||
},
|
||||
"ceo_message": {
|
||||
"tag": {
|
||||
"highlight": {
|
||||
"en": "About us",
|
||||
"ar": "معلومات عنا"
|
||||
},
|
||||
"text": {
|
||||
"en": "Message from CEO",
|
||||
"ar": "رسالة من الرئيس التنفيذي"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"highlight": {
|
||||
"en": "only one",
|
||||
"ar": "واحد فقط"
|
||||
},
|
||||
"text": {
|
||||
"en": "We are the best service and the",
|
||||
"ar": "نحن أفضل الخدمات و"
|
||||
}
|
||||
},
|
||||
"description": {
|
||||
"en": "Engaged in education, especially in providing teaching services for students who do not have the opportunity to learn in conventional institutions.",
|
||||
"ar": "تعمل في مجال التعليم، وخاصة في تقديم الخدمات التعليمية للطلاب الذين لا تتاح لهم فرصة التعلم في المؤسسات التقليدية."
|
||||
}
|
||||
},
|
||||
"our_partners": {
|
||||
"en": "Our Partners",
|
||||
"ar": "شركاؤنا"
|
||||
},
|
||||
"accreditation": {
|
||||
"en": "Accreditation",
|
||||
"ar": "الاعتماد الاكاديمي"
|
||||
}
|
||||
}
|
||||
30
src/translation/navbar.json
Normal file
30
src/translation/navbar.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"home": {
|
||||
"en": "Home",
|
||||
"ar": "بيت"
|
||||
},
|
||||
"services": {
|
||||
"en": "Services",
|
||||
"ar": "خدمات"
|
||||
},
|
||||
"about": {
|
||||
"en": "About us",
|
||||
"ar": "معلومات عنا"
|
||||
},
|
||||
"history": {
|
||||
"en": "History",
|
||||
"ar": "تاريخ"
|
||||
},
|
||||
"contact": {
|
||||
"en": "Contact",
|
||||
"ar": "اتصال"
|
||||
},
|
||||
"platform": {
|
||||
"en": "Platform",
|
||||
"ar": "منصة"
|
||||
},
|
||||
"join": {
|
||||
"en": "Join",
|
||||
"ar": "منصة"
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,12 @@
|
||||
import type {Config} from "tailwindcss";
|
||||
|
||||
const config: Config = {
|
||||
content: ["./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}"],
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/templates/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
|
||||
Reference in New Issue
Block a user