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

- Started working on the about page;

Browse Source 
- Updated the translation;
- Changed the language switch from flags to text
This commit is contained in:
Tiago Ribeiro
2023-10-22 18:31:39 +01:00
parent 95af390d21
commit b54eab9b35
12 changed files with 187 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/about-banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 MiB

5
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,5 @@
import About from "@/templates/About";
export default function Page() {
return <About language="en" />;
}

5
src/app/ar/about/page.tsx Normal file
View File

@@ -0,0 +1,5 @@
import About from "@/templates/About";
export default function Page() {
return <About language="ar" />;
}

11
src/app/layout.tsx
View File

@@ -1,6 +1,11 @@
/* eslint-disable @next/next/no-page-custom-font */
import clsx from "clsx";
import "./globals.css";
import type {Metadata} from "next";
import {Inter} from "next/font/google";
import {Almarai} from "next/font/google";
const almarai = Almarai({subsets: ["arabic"], weight: ["300", "400", "700", "800"]});
const inter = Inter({subsets: ["latin"]});
@@ -17,8 +22,12 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
<meta httpEquiv="Content-Security-Policy-Report-Only" content="default-src 'self' *.stripe.com *.encoach.com localhost" />
<script async src="https://js.stripe.com/v3/pricing-table.js" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet" />
</head>
<body className={inter.className}>{children}</body>
<body className={clsx(almarai.className, "font-almarai")}>{children}</body>
</html>
);
}

219
src/components/Navbar.tsx
View File

@@ -10,6 +10,14 @@ import {Dialog, Menu, Transition} from "@headlessui/react";
import {useRouter} from "next/navigation";
import translation from "@/translation/navbar.json";
const items = [
{page: "/", key: "home"},
{page: "/services", key: "services"},
{page: "/about", key: "about"},
{page: "/history", key: "history"},
{page: "/contact", key: "contact"},
];
export default function Navbar({currentPage, language}: {currentPage: string; language: "en" | "ar"}) {
const [isOpen, setIsOpen] = useState(false);
@@ -17,49 +25,20 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
<>
<header className="w-full px-11 py-3 md:flex justify-between items-center -md:hidden shadow-sm">
<Link href="/">
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
<Image src="/logo_title.png" alt="EnCoach logo" width={80} height={80} />
</Link>
<div className="flex gap-8 items-center w-fit">
<Link
href="/"
className={clsx(
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
currentPage === "/" && "border-b-2 border-b-mti-purple-light",
)}>
{translation.home[language]}
</Link>
<Link
href=""
className={clsx(
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
currentPage === "/services" && "border-b-2 border-b-mti-purple-light",
)}>
{translation.services[language]}
</Link>
<Link
href=""
className={clsx(
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
currentPage === "/about" && "border-b-2 border-b-mti-purple-light",
)}>
{translation.about[language]}
</Link>
<Link
href=""
className={clsx(
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
currentPage === "/history" && "border-b-2 border-b-mti-purple-light",
)}>
{translation.history[language]}
</Link>
<Link
href=""
className={clsx(
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
currentPage === "/contact" && "border-b-2 border-b-mti-purple-light",
)}>
{translation.contact[language]}
</Link>
{items.map((item) => (
<Link
key={item.key}
href={language === "ar" ? `/${language}${item.page}` : item.page}
className={clsx(
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
currentPage === item.page && "border-b-2 border-b-mti-purple-light",
)}>
{(translation as any)[item.key][language]}
</Link>
))}
</div>
<div className="flex items-center w-fit gap-4">
<Link
@@ -68,29 +47,23 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
{translation.platform[language]}
</Link>
<Link
href="/join"
href={language === "ar" ? `/${language}/join` : "join"}
className="transition ease-in-out duration-300 text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark border border-mti-purple-light bg-mti-purple-light px-8 py-2 rounded-xl">
{translation.join[language]}
</Link>
<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-8 h-8 relative">
{language === "ar" ? (
<Link href={`${currentPage}`}>
<img
src="uk-flag.png"
alt="English"
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
/>
</Link>
) : (
<Link href={`/ar${currentPage}`}>
<img
src="oman-flag.jpg"
alt="Arabic"
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
/>
</Link>
)}
</div>
{language === "ar" ? (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
href={`${currentPage}`}>
EN
</Link>
) : (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
href={`/ar${currentPage}`}>
AR
</Link>
)}
</div>
</header>
@@ -120,80 +93,42 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
<Dialog.Panel className="w-full h-screen transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all text-black flex flex-col gap-8">
<Dialog.Title as="header" className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden shadow-sm">
<Link href="/">
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
<Image src="/logo_title.png" alt="EnCoach logo" width={80} height={80} />
</Link>
<div className="flex gap-4 items-center">
<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-6 h-6 relative">
{language === "ar" ? (
<Link href={`${currentPage}`}>
<img
src="uk-flag.png"
alt="English"
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
/>
</Link>
) : (
<Link href={`/ar${currentPage}`}>
<img
src="oman-flag.jpg"
alt="Arabic"
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
/>
</Link>
)}
</div>
{language === "ar" ? (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
href={`${currentPage}`}>
EN
</Link>
) : (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
href={`/ar${currentPage}`}>
AR
</Link>
)}
<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
<BsXLg className="text-2xl text-mti-purple-light" onClick={() => setIsOpen(false)} />
</div>
</div>
</Dialog.Title>
<div className="flex flex-col gap-6 px-8 text-lg">
{items.map((item) => (
<Link
key={item.key}
href={language === "ar" ? `/${language}${item.page}` : item.page}
className={clsx(
"transition ease-in-out duration-300 w-fit",
currentPage === item.page &&
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
)}>
{(translation as any)[item.key][language]}
</Link>
))}
<Link
href="/"
className={clsx(
"transition ease-in-out duration-300 w-fit",
currentPage === "/" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
)}>
{translation.home[language]}
</Link>
<Link
href=""
className={clsx(
"transition ease-in-out duration-300 w-fit",
currentPage === "/services" &&
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
)}>
{translation.services[language]}
</Link>
<Link
href=""
className={clsx(
"transition ease-in-out duration-300 w-fit",
currentPage === "/about" &&
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
)}>
{translation.about[language]}
</Link>
<Link
href=""
className={clsx(
"transition ease-in-out duration-300 w-fit",
currentPage === "/history" &&
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
)}>
{translation.history[language]}
</Link>
<Link
href=""
className={clsx(
"transition ease-in-out duration-300 w-fit",
currentPage === "/contact" &&
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
)}>
{translation.contact[language]}
</Link>
<Link
href="/join"
href={language === "ar" ? `/${language}/join` : "join"}
className={clsx(
"transition ease-in-out duration-300 w-fit",
currentPage === "/join" &&
@@ -217,25 +152,19 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
</Link>
<div className="flex gap-4 items-center">
<div className="border border-mti-purple-light cursor-pointer rounded-full overflow-hidden w-6 h-6 relative">
{language === "ar" ? (
<Link href={`${currentPage}`}>
<img
src="uk-flag.png"
alt="English"
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
/>
</Link>
) : (
<Link href={`/ar${currentPage}`}>
<img
src="oman-flag.jpg"
alt="Arabic"
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 h-full max-w-none"
/>
</Link>
)}
</div>
{language === "ar" ? (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
href={`${currentPage}`}>
EN
</Link>
) : (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300"
href={`/ar${currentPage}`}>
AR
</Link>
)}
<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
</div>

15
src/components/Tag.tsx Normal file
View File

@@ -0,0 +1,15 @@
import reactStringReplace from "react-string-replace";
const HIGHLIGHT = /({{.+}})/g;
export default function Tag({children}: {children: string}) {
return (
<span className="text-lg font-semibold">
{reactStringReplace(children, HIGHLIGHT, (match, i) => (
<span key={i} className="text-white bg-mti-rose-light px-1 py-0">
{match.replaceAll(/[{}]/g, "")}
</span>
))}
</span>
);
}

16
src/components/Title.tsx Normal file
View File

@@ -0,0 +1,16 @@
import clsx from "clsx";
import reactStringReplace from "react-string-replace";
const HIGHLIGHT = /({{.+}})/g;
export default function Title({children, className}: {children: string; className?: string}) {
return (
<span className={clsx("text-4xl font-bold max-w-md", className)}>
{reactStringReplace(children, HIGHLIGHT, (match, i) => (
<span key={i} className="text-mti-rose-light">
{match.replaceAll(/[{}]/g, "")}
</span>
))}
</span>
);
}

29
src/templates/About.tsx Normal file
View File

@@ -0,0 +1,29 @@
/* eslint-disable @next/next/no-img-element */
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import Tag from "@/components/Tag";
import translation from "@/translation/about.json";
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 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>
<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>
</div>
</section>
<Footer language={language} />
</main>
);
}

28
src/templates/Home.tsx
View File

@@ -18,37 +18,13 @@ import Footer from "@/components/Footer";
import translation from "@/translation/home.json";
import reactStringReplace from "react-string-replace";
import clsx from "clsx";
const HIGHLIGHT = /({{.+}})/g;
import Tag from "@/components/Tag";
import Title from "@/components/Title";
interface Props {
language: "en" | "ar";
}
function Tag({children}: {children: string}) {
return (
<span className="text-lg font-semibold">
{reactStringReplace(children, HIGHLIGHT, (match, i) => (
<span key={i} className="text-white bg-mti-rose-light px-1 py-0">
{match.replaceAll(/[{}]/g, "")}
</span>
))}
</span>
);
}
function Title({children, className}: {children: string; className?: string}) {
return (
<span className={clsx("text-4xl font-bold max-w-md", className)}>
{reactStringReplace(children, HIGHLIGHT, (match, i) => (
<span key={i} className="text-mti-rose-light">
{match.replaceAll(/[{}]/g, "")}
</span>
))}
</span>
);
}
export default function Home({language}: Props) {
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">

8
src/translation/about.json Normal file
View File

@@ -0,0 +1,8 @@
{
"encoach_benefits": {
"tag": {
"en": "{{EnCoach}} benefits",
"ar": "..."
}
}
}

40
src/translation/home.json
View File

@@ -1,17 +1,17 @@
{
"get_started_btn": {
"en": "Get Started",
"ar": "البدء"
"ar": "قم بالبدء"
},
"modules": {
"reading": {
"title": {
"en": "Reading",
"ar": "قراءة"
"ar": "القراءة"
},
"description": {
"en": "Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.",
"ar": "حقیق نجاح أكبر. واستثمر في زیادة مفرداتك وتعزیز فھمك للقراءة بھدف قم بتطویر قدراتك على تفسیر النصوص باللغة الإنجلیزیة"
"ar": "قم بتطوير قدراتك على تفسير النصوص باللغة الإنجليزية واستثمر في زيادة مفرداتك وتعزيز فهمك للقراءة بهدف تحقيق نجاح أكبر"
}
},
"listening": {
@@ -21,64 +21,64 @@
},
"description": {
"en": "Improve your ability to follow conversations in English and your ability to understand different accents and intonations.",
"ar": "اللغویة المتنوعة. مھاراتك في التواصل اللغوي وتعامل بثقة مع التحدیات وتحسین قدرتك على فھم مختلف اللھجات. اكتسب طور قدرتك على متابعة المحادثات باللغة الإنجلیزیة"
"ar": "طور قدرتك على متابعة المحادثات باللغة الإنجليزية وتحسين قدرتك على فهم مختلف اللهجات. اكتسب مهاراتك في التواصل اللغوي وتعامل بثقة مع التحديات اللغوية المتنوعة"
}
},
"writing": {
"title": {
"en": "Writing",
"ar": "كتابة"
"ar": "الكتابة"
},
"description": {
"en": "Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.",
"ar": "والأغراض. المعقدة. ستتمكن من التعبیر بثقة في مختلف المواضیع الأشكال، بدءًا من الفقرات البسیطة وصولا ً إلى المقالات استعد للكتابة باللغة الإنجلیزیة في مجموعة متنوعة من"
"ar": "استعد للكتابة باللغة الإنجليزية في مجموعة متنوعة من الأشكال، بدءًا من الفقرات البسيطة وصولاً إلى المقالات المعقدة. ستتمكن من التعبير بثقة في مختلف المواضيع والأغراض"
}
},
"speaking": {
"title": {
"en": "Speaking",
"ar": "تكلم"
"ar": "التحدث"
},
"description": {
"en": "You'll have access to interactive dialogs, pronunciation exercises and speech recordings.",
"ar": "فع ّ ال. فرصة الاستماع والتكلم وتحسین مھاراتك اللغویة بشكل لتدریبك على النطق بمساعدة تمارین احترافیة. ستتاح لك استعد لتجربة حوارات تفاعلیة تم تصمیمھا خصیص ً ا"
"ar": "استعد لتجربة حوارات تفاعلية تم تصميمها خصيصًا لتدريبك على النطق بمساعدة تمارين احترافية. ستتاح لك فرصة الاستماع والتكلم وتحسين مهاراتك اللغوية بشكل فعّال"
}
}
},
"learn_ai": {
"tag": {
"en": "{{Join us}} Learn with AI",
"ar": "{{انضم الینا}} الاصطناعي م بواسطة الذكاء"
"ar": "{{انضم الینا}} تعلم بواسطة الذكاء الاصطناعي"
},
"title": {
"en": "Get your answers evaluated by {{AI}}",
"ar": "ترك {{الذكاء الاصطناعي}} یحلل إجاباتك"
"ar": "اترك {{الذكاء الاصطناعي}} یحلل إجاباتك"
},
"description": {
"en": "Our evaluation system uses artificial intelligence to give you the best feedback possible without the need of a tutor.",
"ar": "یعطیك تقییما ً دقیقا ً دون الحاجة إلى مدرس نظام التقییم لدینا یستخدم الذكاء الاصطناعي في التحلیل"
"ar": "نظام التقييم لدينا يستخدم الذكاء الاصطناعي في التحليل ليعطيك تقييماً دقيقاً دون الحاجة إلى مدرس"
},
"join": {
"en": "Join",
"ar": "ينضم"
"ar": "انضم"
}
},
"learn_more": {
"en": "Learn more",
"ar": "يتعلم أكثر"
"ar": "تعرف على المزيد"
},
"encoach_benefits": {
"tag": {
"en": "{{EnCoach}} benefits",
"ar": "ائد {{انكوتس}}"
"ar": "فوائد {{انكوتس}}"
},
"title": {
"en": "Students have registered on our {{platform}}",
"ar": "لطلبة المسجلون لدینا في {{منصة}} انكوتش"
"ar": "الطلبة المسجلون لدینا في {{منصة}} انكوتش"
},
"description": {
"en": "We already have many students studying online under the guidance of our digital trainer, so come and join the community",
"ar": "رشاد دقیق بواسطة الذكاء الاصطناعي لدینا قائمة من الطلبة المسجلون یستخدمون المنصة مع"
"ar": "لدينا قائمة من الطلبة المسجلون يستخدمون المنصة مع ارشاد دقيق بواسطة الذكاء الاصطناعي"
}
},
"interested": {
@@ -96,13 +96,13 @@
},
"whatsapp": {
"en": "WhatsApp Contact",
"ar": "تواصل واتس اب"
"ar": "تواصل معنا عبر الواتساب"
}
},
"ceo_message": {
"tag": {
"en": "{{About us}} Message from CEO",
"ar": "الرئیس التنفیذي {{معلومات عنا ،}} رسالة"
"ar": " {{معلومات عنا ،}}رسالة الرئيس التنفيذي"
},
"title": {
"en": "\"We are the best service and the {{only one}}\"",
@@ -110,7 +110,7 @@
},
"description": {
"en": "Engaged in education, especially in providing teaching services for students who do not have the opportunity to learn in conventional institutions.",
"ar": "تعمل في مجال التعليم، وخاصة في تقديم الخدمات التعليمية للطلاب الذين لا تتاح لهم فرصة التعلم في المؤسسات التقليدية."
"ar": "ملتزمون بمجال التعليم، وبخاصة في تقديم خدمات تعليمية للطلاب الذين لا يمتلكون فرصة التعلم في المؤسسات التقليدية"
}
},
"our_partners": {
@@ -119,6 +119,6 @@
},
"accreditation": {
"en": "Accreditation",
"ar": "الاعتماد الاكاديمي"
"ar": "الاعتمادات الأكاديمية"
}
}

3
tailwind.config.ts
View File

@@ -9,6 +9,9 @@ const config: Config = {
],
theme: {
extend: {
fontFamily: {
almarai: ["Almarai", "sans-serif"],
},
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",