From 28d91f1afa40504c1f7062c352e7b34d2d95a8c6 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.err@outlook.com>
Date: Mon, 23 Oct 2023 23:55:08 +0100
Subject: [PATCH] Changed the direction of the rows

---
 src/components/Footer.tsx | 9 +++++++--
 src/components/Navbar.tsx | 4 ++--
 src/templates/Home.tsx    | 8 ++++----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 9ca861b..771fb4c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import {BiLogoFacebook} from "react-icons/bi";
 import {BsInstagram, BsTwitter} from "react-icons/bs";
 import translation from "@/translation/footer.json";
+import clsx from "clsx";
 
 interface Props {
 	language: "en" | "ar";
@@ -11,7 +12,11 @@ export default function Footer({language}: Props) {
 	return (
 		<>
 			<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={clsx(
+						"w-full py-10 px-8 md:px-28 flex flex-col md:justify-between gap-8 lg:container lg:mx-auto",
+						language === "ar" ? "md:flex-row-reverse" : "md:flex-row",
+					)}>
 					<div className="flex flex-col gap-4">
 						<span className="font-bold text-xl">{translation.navigation.text[language]}</span>
 						<div className="flex flex-col gap-2">
@@ -41,7 +46,7 @@ export default function Footer({language}: Props) {
 						<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">
+							<div className={clsx("flex gap-6 items-center", language === "ar" && "flex-row-reverse justify-start")}>
 								<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">
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 109c100..d0e9aab 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -27,7 +27,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 				<Link href="/">
 					<Image src="/logo_title.png" alt="EnCoach logo" width={80} height={80} />
 				</Link>
-				<div className="flex gap-8 items-center w-fit">
+				<div className={clsx("flex gap-8 items-center w-fit", language === "ar" && "flex-row-reverse")}>
 					{items.map((item) => (
 						<Link
 							key={item.key}
@@ -114,7 +114,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 											</div>
 										</div>
 									</Dialog.Title>
-									<div className="flex flex-col gap-6 px-8 text-lg">
+									<div className={clsx("flex flex-col gap-6 px-8 text-lg", language === "ar" && "items-end")}>
 										{items.map((item) => (
 											<Link
 												key={item.key}
diff --git a/src/templates/Home.tsx b/src/templates/Home.tsx
index 036589d..b4cbdb9 100644
--- a/src/templates/Home.tsx
+++ b/src/templates/Home.tsx
@@ -27,7 +27,7 @@ interface Props {
 
 export default function Home({language}: Props) {
 	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+		<main className={clsx("h-screen w-full bg-white text-mti-black flex flex-col", language === "ar" && "text-right")}>
 			<Navbar currentPage="/" language={language} />
 
 			<section className="w-full relative bg-white">
@@ -86,7 +86,7 @@ export default function Home({language}: Props) {
 				<div className="w-full p-8 lg:py-24 lg:px-12 flex flex-col gap-8 md:gap-24 lg:flex-row items-center justify-center container mx-auto">
 					<div className="flex flex-col gap-8">
 						<Tag>{translation.learn_ai.tag[language]}</Tag>
-						<div className="flex flex-col gap-3">
+						<div className={clsx("flex flex-col gap-3", language === "ar" && "items-end")}>
 							<Title>{translation.learn_ai.title[language]}</Title>
 							<p className="max-w-lg text-base">{translation.learn_ai.description[language]}</p>
 						</div>
@@ -118,7 +118,7 @@ export default function Home({language}: Props) {
 					</div>
 					<div className="flex flex-col gap-8">
 						<Tag>{translation.encoach_benefits.tag[language]}</Tag>
-						<div className="flex flex-col gap-3">
+						<div className={clsx("flex flex-col gap-3", language === "ar" && "items-end")}>
 							<Title>{translation.encoach_benefits.title[language]}</Title>
 							<p className="max-w-lg text-base">{translation.encoach_benefits.description[language]}</p>
 						</div>
@@ -164,7 +164,7 @@ export default function Home({language}: Props) {
 				<div className="w-full px-8 pt-12 pb-20 md:p-20 lg:p-32 flex flex-col gap-12 md:flex-row items-center justify-around container mx-auto">
 					<div className="flex flex-col gap-8">
 						<Tag>{translation.ceo_message.tag[language]}</Tag>
-						<div className="flex flex-col gap-3">
+						<div className={clsx("flex flex-col gap-3", language === "ar" && "items-end")}>
 							<Title>{translation.ceo_message.title[language]}</Title>
 							<p className="max-w-lg text-base">{translation.ceo_message.description[language]}</p>
 						</div>