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

Fixed some minor appearance issues related to the direction of the text

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-02-13 00:29:29 +00:00
parent 8c1ec834f3
commit 477a69a3be
4 changed files with 183 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Navbar.tsx
View File

@@ -28,7 +28,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
<Link href="/">
<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
</Link>
<div className={clsx("flex w-fit items-center gap-8", language === "ar" && "flex-row-reverse")}>
<div className={clsx("flex w-fit items-center gap-8")}>
{items.map((item) => (
<Link
key={item.key}

20
src/templates/About.tsx
View File

@@ -86,12 +86,12 @@ export default function About({language}: Props) {
{/* CEO Message Section */}
<section id="message" className="w-full bg-white">
<div className="w-full flex -md:flex-col -md:items-center -md:pb-16 justify-between gap-8 p-8 md:p-20 container mx-auto">
<div className={clsx(language === "ar" ? "text-right" : "text-left", "flex flex-col gap-8 max-w-xl")}>
<div className={clsx("flex flex-col gap-8 max-w-xl")}>
<Title>{translation.ceo_message.title[language]}</Title>
<span>
{translation.ceo_message.text[language].split("\n").map((line, index) => (
<React.Fragment key={index}>
<p className={clsx(language === "ar" ? "text-right" : "text-left")}>{line}</p>
<p>{line}</p>
<br />
</React.Fragment>
))}
@@ -115,12 +115,8 @@ export default function About({language}: Props) {
{/* Capabilities */}
<section id="capabilities" className="w-full bg-mti-gray-seasalt">
<div
className={clsx(
"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
language === "ar" && "text-right",
)}>
<div className={clsx("w-full flex", language === "ar" && "justify-end")}>
<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
<div className={clsx("w-full flex")}>
<Title>{translation.capabilities.title[language]}</Title>
</div>
<span className="text-lg">{translation.capabilities.intro[language]}</span>
@@ -182,12 +178,8 @@ export default function About({language}: Props) {
{/* Expertise */}
<section id="expertise" className="w-full bg-white">
<div
className={clsx(
"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
language === "ar" && "text-right",
)}>
<div className={clsx("w-full flex", language === "ar" && "justify-end")}>
<div className={clsx("w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto")}>
<div className={clsx("w-full flex")}>
<Title>{translation.expertise.title[language]}</Title>
</div>
<span className="text-lg">{translation.expertise.intro[language]}</span>

6
src/templates/Home.tsx
View File

@@ -14,7 +14,9 @@ interface Props {
export default function Home({language}: Props) {
return (
<main className={clsx("h-screen w-full bg-white text-mti-black flex flex-col", language === "ar" && "text-right")} dir={language === "ar" ? "rtl" : "ltr"}>
<main
className={clsx("h-screen w-full bg-white text-mti-black flex flex-col", language === "ar" && "text-right")}
dir={language === "ar" ? "rtl" : "ltr"}>
<Navbar currentPage="/" language={language} />
<section className="w-full relative bg-white">
@@ -169,7 +171,7 @@ export default function Home({language}: Props) {
<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 -bottom-10 left-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-0" />
<div className="w-5 h-5 rounded-full bg-mti-purple-ultralight absolute -left-10 bottom-10" />

65
src/templates/Services.tsx
View File

@@ -40,14 +40,12 @@ export default function About({ language }: Props) {
bullets: [
{
title: translation.english_writing_evaluation.evaluation[language],
values:
translation.english_writing_evaluation.evaluation_values[language],
values: translation.english_writing_evaluation.evaluation_values[language],
icon: BsBlockquoteLeft,
},
{
title: translation.english_writing_evaluation.acquire[language],
values:
translation.english_writing_evaluation.acquire_values[language],
values: translation.english_writing_evaluation.acquire_values[language],
icon: BsFillPencilFill,
},
],
@@ -55,21 +53,16 @@ export default function About({ language }: Props) {
{
id: "speaking_practice_evaluation",
title: translation.speaking_practice_evaluation.title[language],
description:
translation.speaking_practice_evaluation.description[language],
description: translation.speaking_practice_evaluation.description[language],
bullets: [
{
title: translation.speaking_practice_evaluation.evaluation[language],
values:
translation.speaking_practice_evaluation.evaluation_values[
language
],
values: translation.speaking_practice_evaluation.evaluation_values[language],
icon: BsMic,
},
{
title: translation.speaking_practice_evaluation.acquire[language],
values:
translation.speaking_practice_evaluation.acquire_values[language],
values: translation.speaking_practice_evaluation.acquire_values[language],
icon: BsBook,
},
],
@@ -130,8 +123,7 @@ export default function About({ language }: Props) {
bullets: [
{
title: translation.unified_english_level_test.advantages[language],
values:
translation.unified_english_level_test.advantages_values[language],
values: translation.unified_english_level_test.advantages_values[language],
icon: BsBank,
},
],
@@ -146,41 +138,24 @@ export default function About({ language }: Props) {
const renderStruct = (data: SectionStruct[], getBackgroundColor: (index: number) => string) =>
data.map((section, index) => (
<section
id={section.id}
key={section.id}
className={`w-full ${getBackgroundColor(index)}`}
>
<section id={section.id} key={section.id} className={`w-full ${getBackgroundColor(index)}`}>
<div
className={clsx(
"w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
language === "ar" && "text-right"
)}
>
<div
className={clsx("w-full flex", language === "ar" && "justify-end")}
>
language === "ar" && "text-right",
)}>
<div className={clsx("w-full flex", language === "ar" && "justify-start")}>
<Title className="max-w-fit">{section.title}</Title>
</div>
<span className="text-lg">{section.description}</span>
<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
{section.bullets.map((bullet) => (
<div
key={bullet.title}
className={clsx(
"flex gap-8 items-center",
language === "ar" && "flex-row-reverse"
)}
>
<div key={bullet.title} className={clsx("flex gap-8")}>
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
{bullet.icon && (
<bullet.icon className="text-mti-rose-light w-6 h-6" />
)}
{bullet.icon && <bullet.icon className="text-mti-rose-light w-6 h-6" />}
</div>
<div className="flex flex-col gap-2">
<span className="text-lg font-bold text-mti-rose-light">
{bullet.title}
</span>
<span className="text-lg font-bold text-mti-rose-light">{bullet.title}</span>
<ul className="list-disc gap-2 flex flex-col">
{bullet.values.map((value) => (
<li key={value}>{value}</li>
@@ -202,21 +177,13 @@ export default function About({ language }: Props) {
<Title>{translation.services[language]}</Title>
</div>
</section>
{renderStruct(
struct,
(index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`
)}
{renderStruct(struct, (index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`)}
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
<div className="w-full h-full flex flex-col items-center justify-center">
<Title className="max-w-fit">
{translation.corporate_educational_institutions[language]}
</Title>
<Title className="max-w-fit">{translation.corporate_educational_institutions[language]}</Title>
</div>
</section>
{renderStruct(
final_struct,
(index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`
)}
{renderStruct(final_struct, (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`)}
<Footer language={language} />
</main>
);