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

Finished designing the About page

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-22 19:27:44 +01:00
parent b54eab9b35
commit 1a035071a6
5 changed files with 141 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/templates/About.tsx
View File

@@ -2,7 +2,10 @@
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import Tag from "@/components/Tag";
import Title from "@/components/Title";
import translation from "@/translation/about.json";
import React from "react";
import {BsEye, BsEyeFill, BsFlower3, BsRocketTakeoffFill} from "react-icons/bs";
interface Props {
language: "en" | "ar";
@@ -13,13 +16,83 @@ export default function About({language}: Props) {
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<Navbar currentPage="/about" language={language} />
<section className="w-full bg-mti-purple-light h-96 flex items-center justify-center overflow-hidden">
<img src="/about-banner.jpg" alt="IELTS Packages - Together we prepare for the future" className="bg-cover" />
<section className="w-full h-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">
<Tag>{translation.title.tag[language]}</Tag>
<Title>{translation.title.text[language]}</Title>
</div>
</section>
<section className="w-full bg-white">
<div className="w-full grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-8 p-8 md:p-20 container mx-auto">
<Tag>{translation.encoach_benefits.tag[language]}</Tag>
{/* About Us Section */}
<section id="about" className="w-full bg-white">
<div className="w-full flex flex-col items-center gap-8 p-8 md:p-20 container mx-auto">
<Title>{translation.about.title[language]}</Title>
<span>
{translation.about.text[language].split("\n").map((line, index) => (
<React.Fragment key={index}>
<p>{line}</p>
<br />
</React.Fragment>
))}
</span>
</div>
</section>
{/* Vision, Mission & Values Section */}
<section id="values" className="w-full bg-mti-gray-seasalt">
<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-16 p-8 md:p-16 container mx-auto">
<div className="flex flex-col items-center gap-4 text-center">
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
<BsEyeFill className="text-mti-rose-light w-10 h-10" />
</div>
<span className="text-lg">{translation.mission_vision_values.vision[language]}</span>
</div>
<div className="flex flex-col items-center gap-4 text-center">
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
<BsRocketTakeoffFill className="text-mti-rose-light w-10 h-10" />
</div>
<span className="text-lg">{translation.mission_vision_values.mission[language]}</span>
</div>
<div className="flex flex-col items-center gap-4 md:col-span-2">
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center w-fit h-fit">
<BsFlower3 className="text-mti-rose-light w-10 h-10" />
</div>
<div className="text-lg flex flex-wrap items-center justify-center max-w-xl gap-x-8 gap-y-4">
{translation.mission_vision_values.values[language].map((x) => (
<span key={x}>{x}</span>
))}
</div>
</div>
</div>
</section>
{/* 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="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>{line}</p>
<br />
</React.Fragment>
))}
</span>
</div>
<div className="w-fit h-fit relative">
<div className="w-64 h-64 md:w-80 md:h-80 rounded-t-[80px] rounded-br-[80px] md:rounded-t-[120px] md:rounded-br-[120px] overflow-hidden">
<img className="w-full h-full" alt="MTI's CEO" src="/placeholder_person.png" />
</div>
<div>
<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 -bottom-10" />
<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-0" />
<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-10" />
<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-20" />
<div className="w-5 h-5 rounded-full bg-mti-rose-ultralight absolute -left-10 bottom-30" />
<span className="absolute left-1/2 -translate-x-2/3 -bottom-10">{translation.ceo_message.name[language]}</span>
</div>
</div>
</div>
</section>

2
src/templates/Home.tsx
View File

@@ -168,7 +168,7 @@ export default function Home({language}: Props) {
<Title>{translation.ceo_message.title[language]}</Title>
<p className="max-w-lg text-base">{translation.ceo_message.description[language]}</p>
</div>
<Link href="/about">
<Link href={`${language === "ar" ? "/ar" : ""}/about#message`}>
<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
{translation.learn_more[language]}
</button>