devops/encoach_landingpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Translated the home page to work with both EN and AR

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-21 14:22:57 +01:00
parent 0c747f6332
commit 799abc813d
17 changed files with 627 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/Navbar.tsx
View File

@@ -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>
</>