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

Changed the direction of the rows

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-23 23:55:08 +01:00
parent ea8b20f50c
commit 28d91f1afa
3 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Footer.tsx
View File

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

4
src/components/Navbar.tsx
View File

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

8
src/templates/Home.tsx
View File

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