Translated the home page to work with both EN and AR
This commit is contained in:
Tiago Ribeiro
@@ -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>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user