Finished designing the About page
This commit is contained in:
Tiago Ribeiro
BIN
public/about-banner.png
Normal file
BIN
public/about-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 338 KiB |
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,8 +1,66 @@
|
||||
{
|
||||
"encoach_benefits": {
|
||||
"title": {
|
||||
"tag": {
|
||||
"en": "{{EnCoach}} benefits",
|
||||
"ar": "..."
|
||||
"en": "{{EnCoach}} About us",
|
||||
"ar": "نبذة عنا {{انكوتس}}"
|
||||
},
|
||||
"text": {
|
||||
"en": "\"We are the best service and the {{only one}}\"",
|
||||
"ar": "نحن الخدمة الأفضل {{والمنصة الوحیدة من نوعھا}}"
|
||||
}
|
||||
},
|
||||
"about": {
|
||||
"title": {
|
||||
"en": "About us",
|
||||
"ar": "نبذة عنا"
|
||||
},
|
||||
"text": {
|
||||
"en": "EnCoach – the AI for getting your target IELTS. Driven exclusively by AI, our solution identifies your specific gaps in performance, advises bespoke improvements and ensures optimal language preparation for the IELTS test.\nPitch goodbye to old-fashioned ways of preparing and say hello to a lively, effective study experience with EnCoach. Our sophisticated algorithms analyze your current level of ability and pinpoint the precise areas in which you need to improve. You will get personalized exercises and materials aimed at improving your weak points and enhancing your strong ones.\nWith our interactive practice modules, you’ll participate in extensive reading tasks, develop your listening skills, improve the coherence of your writing and increase your fluency in speaking. AI-based system carefully assesses your work and gives you immediate feedback on what aspects of your skills are already pretty awesome and what areas still need to be polished. This feedback helps you concentrate on the exact skills and techniques to get your target IELTS score.\n",
|
||||
"ar": "الاصطناعي لمساعدتك في تحقیق الدرجة المستھدفة. إلى أي تدخل بشري حیث یوفر لك تعلیمات وملاحظات من خلال تقنیة الذكاء التدرب على إختبار الإیلتس في أي وقت باستخدام المنصة كما ترید. - لا تحتاج إنكوتش ھو مدربك الشخصي لامتحان الآیلتس على مدار الساعة، یمكنك\nفي امتحان الآیلتس. على التركیز على المھارات والتقنیات المحددة للحصول على الدرجة المستھدفة بالفعل والمجالات التي لا تزال تحتاج إلى تحسینھا. تساعدك ھذه الملاحظات بعنایة فائقة ویقدم لك ملاحظات فوریة حول الجوانب التي تتمتع بمھارة جیدة فصاحتك في التحدث. یقوم النظام القائم على الذكاء الاصطناعي بتقییم إدائك وتطویر مھارات الاستماع الخاصة بك، وتحسین ترابط كتابتك، وزیادة من خلال وحدات الممارسة التفاعلیة لدینا، ستشارك في مھمات قراءة شاملة،\nمخصصة تھدف إلى تحسین نقاط ضعفك وتعزیز نقاط قوتك. المجالات الدقیقة التي تحتاج إلى تحسینھا. ستحصل على تمارین ومواد إنكوتش. تعمل خوارزمیاتنا المتطورة على تحلیل مستوى قدراتك الحالیة وتحدد ودع طرق الإعداد للإیلتس التقلیدیة وتمتع بتجربة دراسیة حیة وفعالة مع\nنصائح وارشادات تعدك لغویا وبشكل لاختبار الآیلتس. الاصطناعي، عن طریق تحلیل نقاط الضعف الخاصة بك لیضمن لك تقدیم المستھدفة في امتحان الآیلتس. تعمل المنظومة حصرا ً بواسطة الذكاء إنكوتش – منظومة الذكاء الاصطناعي التي تؤھلك للحصول على درجتك الدرجة المستھدفة التي ترغب فیھا تنتظرك، ابدأ رحلتك مع إنكوتش الیوم.\nشریكك المخلص في تحقیق النجاح في امتحان الآیلتس. المستھدف في الإیلتس. سجل الآن ولتكن منصتنا المدعومة بالذكاء الاصطناعي لإختبار الآیلتس. أطلق قدراتك، تغلب على القیود الخاصة بك وحقق نجاحك انضم إلى مجتمع إنكوتش الآن واترك الذكاء الاصطناعي یساعدك في التحضیر"
|
||||
}
|
||||
},
|
||||
"mission_vision_values": {
|
||||
"mission": {
|
||||
"en": "Empower students preparing for language exams through innovative AI-driven learning experiences.",
|
||||
"ar": "مبتكرة قائمة على تكنولوجیا الذكاء الاصطناعي. مھمتنا ھي تمكین الطلاب الذین یستعدون لامتحانات اللغة من خلال تجارب تعلم"
|
||||
},
|
||||
"vision": {
|
||||
"en": "Innovate language test preparation through AI.",
|
||||
"ar": "الابتكار في تحضیر امتحانات اللغة من خلال التقنیة الذكاء الاصطناعي"
|
||||
},
|
||||
"values": {
|
||||
"en": [
|
||||
"Personalization",
|
||||
"Adaptability",
|
||||
"Accessibility",
|
||||
"Efficiency",
|
||||
"Data-driven Insights",
|
||||
"Interactive Learning",
|
||||
"Continuous Improvement"
|
||||
],
|
||||
"ar": [
|
||||
"التخصیص",
|
||||
"القدرة على التكیف",
|
||||
"إمكانیة الوصول",
|
||||
"الكفاءة",
|
||||
"الرؤى المستندة إلى الب انات",
|
||||
"التعلم التفاعلي",
|
||||
"التحسین المستمر"
|
||||
]
|
||||
}
|
||||
},
|
||||
"ceo_message": {
|
||||
"title": {
|
||||
"en": "Welcome to {{EnCoach}}",
|
||||
"ar": "مرحبًا بك في {{إنكوتش}}"
|
||||
},
|
||||
"name": {
|
||||
"en": "Name",
|
||||
"ar": "Name"
|
||||
},
|
||||
"text": {
|
||||
"en": "I am thrilled to welcome you to Encoach Platform, where innovation meets education in the most transformative way possible. In today’s fast-paced world, learning never stops, and our commitment at Encoach is to make education accessible, personalized, and effective for everyone.\nAt Encoach, we believe in the power of Artificial Intelligence to revolutionize the way we learn. Our AI-driven learning platform combines cutting-edge technology with educational expertise, creating a dynamic and tailored learning experience for each student. Through intelligent algorithms, personalized lesson plans, and interactive exercises, we aim to empower individuals to reach their full potential.\nOur team of dedicated experts and developers have worked tirelessly to create a platform that adapts to your unique learning style, ensuring that you receive the support you need, exactly when you need it. Whether you are preparing for exams, enhancing your professional skills, or simply exploring new subjects, our AI-driven approach is designed to make your learning journey engaging, effective, and enjoyable.\nAs the CEO of EnCoach Platform, I am incredibly proud of the work we have accomplished so far, and I am excited about the future we are building together. Education is the key to unlocking opportunities and shaping a brighter future, and with our Encoach learning platform, we are paving the way for a new era of learning excellence.\nThank you for choosing Encoach Platform as your learning partner. I invite you to explore our platform, engage with our innovative resources, and embark on a journey of knowledge and growth. Together, let’s embrace the limitless possibilities of learning powered by Artificial Intelligence.",
|
||||
"ar": "لذكاء الاصطناعي، فإننا نمھد الطریق لعصر جدید من التمیز في التعلم. الفرص وتشكیل مستقبل أكثر إشراق ً ا، ومن خلال منصة انكوتش المعتمدة على حتى الآن، وأنا متحمس للمستقبل الذي نبنیھ مع ً ا. یعد التعلیم ھو المفتاح لفتح بصفتي الرئیس التنفیذي لمنصة انكوتش، أنا فخور للغایة بالعمل الذي أنجزناه\nالخاصة بك جذابة وفعالة وممتعة. جدیدة، فقد تم تصمیم نھجنا القائم على الذكاء الاصطناعي لجعل رحلة التعلم تستعد للامتحانات، أو تعزز مھاراتك المھنیة، أو تستكشف ببساطة موضوعات الفرید الخاص بك، مما یضمن حصولك على الدعم الذي تحتاج إلیھ. سواء كنت لقد عمل فریقنا من الخبراء والمطورین لإنشاء منصة تتكیف مع أسلوب التعلم\nإمكاناتھم الكاملة. المحتوى المخصص، والتمارین التفاعلیة، نھدف إلى تمكین الأفراد من تحقیق دینامیكیة ومصممة خصیص ً ا لكل طالب. من خلال الخوارزمیات الذكیة، وخطط لدینا بین التكنولوجیا المتطورة والخبرة التعلیمیة، مما یخلق تجربة تعلیمیة الطریقة التي نتعلم بھا. تجمع منصة انكوتش المعتمدة على الذكاء الاصطناعي في منصة انكوتش، نؤمن بقدرة الذكاء الاصطناعي على إحداث ثورة في\nوالتزامنا في منصة انكوتش جعل التعلیم متاح ً ا وشخصی ً ا وفعا ً لا للجمیع. الطرق التحویلیة الممكنة. في عالم الیوم سریع الخطى، لا یتوقف التعلم أبد ً ا، یسعدني أن أرحب بكم في منصة انكوتش، حیث یلتقي الابتكار بالتعلیم بأكثر مع ً ا، دعونا نحتضن الإمكانیات اللامحدودة للتعلم المدعوم بالذكاء الاصطناعي. منصتنا، والتفاعل مع مواردنا المبتكرة، والشروع في رحلة من المعرفة والنمو. نشكرك على اختیار انكوتش كشریك التعلم الخاص بك. أدعوك لاستكشاف"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
},
|
||||
"about": {
|
||||
"en": "About us",
|
||||
"ar": "معلومات عنا"
|
||||
"ar": "نبذة عنا"
|
||||
},
|
||||
"history": {
|
||||
"en": "History",
|
||||
|
||||
Reference in New Issue
Block a user