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

Created the Terms and Conditions page

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-02-02 11:17:26 +00:00
parent e2d35bcfb7
commit 95984cfe83
6 changed files with 470 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/templates/Home.tsx
View File

@@ -1,11 +1,6 @@
/* eslint-disable @next/next/no-img-element */
import Link from "next/link";
import {
BsBook,
BsHeadphones,
BsMegaphone,
BsPen,
} from "react-icons/bs";
import {BsBook, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import translation from "@/translation/home.json";
@@ -38,7 +33,7 @@ export default function Home({language}: Props) {
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
<BsBook className="text-mti-rose-light w-10 h-10" />
</div>
<div className="flex flex-col gap-4 items-center text-center max-w-[260px]">
<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
<span className="font-bold text-xl">{translation.modules.reading.title[language]}</span>
<span>{translation.modules.reading.description[language]}</span>
</div>
@@ -47,7 +42,7 @@ export default function Home({language}: Props) {
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
<BsHeadphones className="text-mti-rose-light w-10 h-10" />
</div>
<div className="flex flex-col gap-4 items-center text-center max-w-[260px]">
<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
<span className="font-bold text-xl">{translation.modules.listening.title[language]}</span>
<span>{translation.modules.listening.description[language]}</span>
</div>
@@ -56,7 +51,7 @@ export default function Home({language}: Props) {
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
<BsPen className="text-mti-rose-light w-10 h-10" />
</div>
<div className="flex flex-col gap-4 items-center text-center max-w-[260px]">
<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
<span className="font-bold text-xl">{translation.modules.writing.title[language]}</span>
<span>{translation.modules.writing.description[language]}</span>
</div>
@@ -65,7 +60,7 @@ export default function Home({language}: Props) {
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
<BsMegaphone className="text-mti-rose-light w-10 h-10" />
</div>
<div className="flex flex-col gap-4 items-center text-center max-w-[260px]">
<div className={clsx("flex flex-col gap-4 items-center max-w-[260px]", language === "ar" ? "text-right" : "text-left")}>
<span className="font-bold text-xl">{translation.modules.speaking.title[language]}</span>
<span>{translation.modules.speaking.description[language]}</span>
</div>

63
src/templates/Terms.tsx Normal file
View File

@@ -0,0 +1,63 @@
/* eslint-disable @next/next/no-img-element */
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import Title from "@/components/Title";
import translation from "@/translation/terms.json";
import clsx from "clsx";
import React from "react";
import * as BsIcon from "react-icons/bs";
import {IconType} from "react-icons";
interface Props {
language: "en" | "ar";
}
type ContentKey = keyof typeof translation.content;
type Translation = {ar: string; en: string};
interface Content {
title: Translation;
text: Translation;
list?: Translation[];
}
export default function Terms({language}: Props) {
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<Navbar currentPage="/terms" language={language} />
<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>{translation.title[language]}</Title>
</div>
</section>
<section id="terms" className="w-full h-fit bg-white">
<div
className={clsx(
"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",
language === "ar" ? "text-right" : "text-left",
)}>
{Object.keys(translation.content).map((key) => {
const content = translation.content[key as ContentKey] as Content;
return (
<span className="flex flex-col gap-1" key={key} id={key}>
<h2 className="font-semibold text-lg text-mti-purple-light">{content.title[language]}</h2>
<p className="whitespace-pre-wrap">{content.text[language]}</p>
{content.list && (
<ul className="list-disc pl-8">
{content.list.map((text, index) => (
<li key={index}>{text[language]}</li>
))}
</ul>
)}
</span>
);
})}
</div>
</section>
<Footer language={language} />
</main>
);
}