104 lines
4.6 KiB
TypeScript
104 lines
4.6 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
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 clsx from "clsx";
|
|
import React from "react";
|
|
import {BsEye, BsEyeFill, BsFlower3, BsRocketTakeoffFill} from "react-icons/bs";
|
|
|
|
interface Props {
|
|
language: "en" | "ar";
|
|
}
|
|
|
|
export default function About({language}: Props) {
|
|
return (
|
|
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
|
|
<Navbar currentPage="/about" language={language} />
|
|
|
|
<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>
|
|
|
|
{/* 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 className={clsx(language === "ar" ? "text-right" : "text-left")}>{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={clsx(language === "ar" ? "text-right" : "text-left", "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>
|
|
<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>
|
|
|
|
<Footer language={language} />
|
|
</main>
|
|
);
|
|
}
|