From 069a26f90031ff60a46a331b5f9e1a2eee9646c4 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.err@outlook.com>
Date: Sun, 15 Oct 2023 19:43:07 +0100
Subject: [PATCH] Improved the responsiveness of the website

---
 package.json                    |   2 +
 src/app/join/page.tsx           | 153 ++++-----------------------
 src/app/page.tsx                | 140 +++++-------------------
 src/app/success/page.tsx        |  87 +--------------
 src/components/Footer.tsx       |  64 +++++++++++
 src/components/Navbar.tsx       | 182 ++++++++++++++++++++++++++++++++
 src/components/PricingTable.tsx |  16 +++
 yarn.lock                       |  14 ++-
 8 files changed, 325 insertions(+), 333 deletions(-)
 create mode 100644 src/components/Footer.tsx
 create mode 100644 src/components/Navbar.tsx
 create mode 100644 src/components/PricingTable.tsx

diff --git a/package.json b/package.json
index 76ac192..70067ee 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.17",
     "@stripe/react-stripe-js": "^2.3.1",
     "@stripe/stripe-js": "^2.1.7",
     "axios": "^1.5.1",
+    "clsx": "^2.0.0",
     "moment": "^2.29.4",
     "next": "13.5.4",
     "react": "^18",
diff --git a/src/app/join/page.tsx b/src/app/join/page.tsx
index b91b76a..e211213 100644
--- a/src/app/join/page.tsx
+++ b/src/app/join/page.tsx
@@ -1,145 +1,28 @@
-"use client";
-
 /* eslint-disable @next/next/no-img-element */
-import Image from "next/image";
 import Link from "next/link";
-import {
-	BsBookFill,
-	BsCardChecklist,
-	BsClipboardFill,
-	BsClock,
-	BsClockFill,
-	BsFacebook,
-	BsFillBookFill,
-	BsInstagram,
-	BsSearch,
-	BsShieldFillCheck,
-	BsTwitter,
-} from "react-icons/bs";
+import {BsInstagram, BsTwitter} from "react-icons/bs";
 import {BiLogoFacebook} from "react-icons/bi";
-import {PaymentElement} from "@stripe/react-stripe-js";
-import {Elements} from "@stripe/react-stripe-js";
-import {loadStripe} from "@stripe/stripe-js";
-
-const stripePromise = loadStripe("pk_test_51NzD5xFI67mXFum2XDMXiLu89SbCAMY5O0RnKjlU6XqyfboRVvFHI3f5OJHaxsrjjB7WqDYqN7Y3eF8mq3sF354F00l30L5GuJ");
+import Navbar from "@/components/Navbar";
+import PricingTable from "@/components/PricingTable";
+import Footer from "@/components/Footer";
 
 export default function Home() {
 	return (
-		<Elements stripe={stripePromise}>
-			<script async src="https://js.stripe.com/v3/pricing-table.js" />
-			<main className="h-screen w-full bg-white text-mti-black flex flex-col">
-				<header className="w-full px-11 py-3 flex justify-between items-center">
-					<Link href="/">
-						<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
-					</Link>
-					<div className="flex gap-8 items-center w-fit">
-						<Link href="/" className="border-b-2 border-b-mti-purple-light transition ease-in-out duration-300">
-							Home
-						</Link>
-						<Link href="/services" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-							Services
-						</Link>
-						<Link href="/about" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-							About us
-						</Link>
-						<Link href="/history" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-							History
-						</Link>
-						<Link href="/contact" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-							Contact
-						</Link>
-					</div>
-					<div className="flex items-center w-fit gap-9">
-						<Link
-							href="/join"
-							className="transition ease-in-out duration-300 hover:text-white hover:bg-mti-purple-dark border border-mti-purple-dark px-8 py-2 rounded-xl">
-							Join
-						</Link>
-					</div>
-				</header>
+		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
+			<Navbar currentPage="/join" />
 
-				<section className="w-full relative bg-white py-48 flex flex-col items-center text-center gap-4">
-					<h2 className="text-3xl font-bold">Available Packages</h2>
-					<div className="flex flex-col gap-1">
-						<span className="max-w-lg">
-							Please select a page. Once the payment process is complete, you will receive a code via e-mail to register to the
-							application.
-						</span>
-						<span className="max-w-lg">
-							(Or have time added to your account, if already registered with the given e-mail during the payment process).
-						</span>
-						<span>
-							If you already have a code, please register{" "}
-							<Link
-								href="https://encoach.com/register"
-								className="font-semibold text-mti-purple-light underline hover:text-mti-purple-dark transition ease-in-out duration-300">
-								here
-							</Link>
-							.
-						</span>
-					</div>
+			<section className="w-full relative bg-white py-20 lg:py-48 px-8 flex flex-col items-center text-center gap-4">
+				<h2 className="text-3xl font-bold">Available Packages</h2>
+				<div className="flex flex-col gap-1">
+					<span className="max-w-lg">
+						Once the payment process is complete, you will receive a code via e-mail to register to the application.
+					</span>
+					<span className="max-w-lg">(Or have time added to your account, if already registered with the given e-mail).</span>
+					<PricingTable />
+				</div>
+			</section>
 
-					{/** @ts-ignore */}
-					<stripe-pricing-table pricing-table-id={process.env.STRIPE_PRICING_TABLE} publishable-key={process.env.STRIPE_KEY} />
-				</section>
-
-				<section className="w-full py-10 px-28 bg-mti-gray-seasalt grid grid-cols-4">
-					<div className="flex flex-col gap-4">
-						<span className="font-bold text-xl">Navigation</span>
-						<div className="flex flex-col gap-2">
-							<Link href="/about">Why us</Link>
-							<Link href="/about">Capabilities</Link>
-							<Link href="/about">Expertise</Link>
-							<Link href="/about">History</Link>
-							<Link href="/about">Contact</Link>
-						</div>
-					</div>
-					<div className="flex flex-col gap-4">
-						<span className="font-bold text-xl">Services</span>
-						<div className="flex flex-col gap-2">
-							<Link href="#benefits">EnCoach benefits</Link>
-							<Link href="#testimonials">Student testimonials</Link>
-						</div>
-					</div>
-					<div className="flex flex-col gap-4">
-						<span className="font-bold text-xl">About</span>
-						<div className="flex flex-col gap-2">
-							<Link href="/terms">Terms and Conditions</Link>
-							<Link href="/privacy-policy">Privacy Policy</Link>
-							<Link href="/about">About</Link>
-						</div>
-					</div>
-					<div className="flex flex-col gap-4">
-						<span className="font-bold text-xl">Get in Touch</span>
-						<div className="flex flex-col gap-4">
-							<span className="max-w-[280px]">
-								Stay connected with us and know the latest updates about our services through various social media
-							</span>
-							<div className="flex gap-6 items-center">
-								<Link
-									href="https://facebook.com"
-									className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
-									<BiLogoFacebook className="w-6 h-6" />
-								</Link>
-								<Link
-									href="https://twitter.com"
-									className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
-									<BsTwitter className="w-5 h-5" />
-								</Link>
-								<Link
-									href="https://instagram.com"
-									className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
-									<BsInstagram className="w-5 h-5" />
-								</Link>
-							</div>
-						</div>
-					</div>
-				</section>
-
-				<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">
-					© EnCoach 2023 all rights reserved
-				</footer>
-			</main>
-		</Elements>
+			<Footer />
+		</main>
 	);
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 063001f..cea6920 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,64 +1,25 @@
 /* eslint-disable @next/next/no-img-element */
-import Image from "next/image";
 import Link from "next/link";
-import {
-	BsBookFill,
-	BsCardChecklist,
-	BsClipboardFill,
-	BsClock,
-	BsClockFill,
-	BsFacebook,
-	BsFillBookFill,
-	BsInstagram,
-	BsSearch,
-	BsShieldFillCheck,
-	BsTwitter,
-} from "react-icons/bs";
+import {BsCardChecklist, BsClipboardFill, BsClockFill, BsInstagram, BsShieldFillCheck, BsTwitter} from "react-icons/bs";
 import {BiLogoFacebook} from "react-icons/bi";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 
 export default function Home() {
 	return (
 		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
-			<header className="w-full px-11 py-3 flex justify-between items-center">
-				<Link href="/">
-					<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
-				</Link>
-				<div className="flex gap-8 items-center w-fit">
-					<Link href="/" className="border-b-2 border-b-mti-purple-light transition ease-in-out duration-300">
-						Home
-					</Link>
-					<Link href="/services" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-						Services
-					</Link>
-					<Link href="/about" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-						About us
-					</Link>
-					<Link href="/history" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-						History
-					</Link>
-					<Link href="/contact" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-						Contact
-					</Link>
-				</div>
-				<div className="flex items-center w-fit gap-9">
-					<Link
-						href="/join"
-						className="transition ease-in-out duration-300 hover:text-white hover:bg-mti-purple-dark border border-mti-purple-dark px-8 py-2 rounded-xl">
-						Join
-					</Link>
-				</div>
-			</header>
+			<Navbar currentPage="/" />
 
 			<section className="w-full relative bg-white">
 				<img src="/home/first_banner.png" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
-				<Link href="https://encoach.com">
+				<Link href="/join">
 					<button className="absolute bottom-1/10 left-1/12 bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
 						Get Started
 					</button>
 				</Link>
 			</section>
 
-			<section className="w-full grid grid-cols-4 p-24 bg-white">
+			<section className="w-full grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-8 p-8 md:p-24 bg-white">
 				<div className="flex flex-col items-center gap-6">
 					<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
 						<BsClockFill className="text-mti-rose-light w-10 h-10" />
@@ -97,7 +58,7 @@ export default function Home() {
 				</div>
 			</section>
 
-			<section className="w-full py-32 px-28 bg-mti-gray-seasalt items-center justify-center flex flex-col gap-10 relative">
+			<section className="w-full p-8 py-16 md:py-32 md:px-16 lg:px-28 bg-mti-gray-seasalt items-center justify-center flex flex-col gap-10 relative">
 				<span className="text-xl">
 					<span className="text-white bg-mti-rose-light px-1 py-0">Interested</span> in us?
 				</span>
@@ -109,7 +70,7 @@ export default function Home() {
 						Contact Us
 					</button>
 				</Link>
-				<div className="absolute top-1/2 -translate-y-2/3 right-1/4 flex flex-col items-center">
+				<div className="lg:absolute top-1/2 lg:-translate-y-2/3 right-1/6 flex flex-col items-center">
 					<em className="text-xs text-mti-purple-light font-semibold">WhatsApp Contact</em>
 					<img className="w-32 h-32" alt="WhatsApp QR Code for MTI" src="/whatsapp_qrcode.png" />
 					<div className="w-full h-full relative">
@@ -126,7 +87,7 @@ export default function Home() {
 				</div>
 			</section>
 
-			<section className="w-full py-32 px-32 flex items-center justify-around bg-white">
+			<section className="w-full p-8 md:p-20 lg:p-32 flex flex-col gap-12 md:flex-row items-center justify-around bg-white">
 				<div className="flex flex-col gap-8">
 					<span className="text-lg font-semibold">
 						<span className="text-white bg-mti-rose-light px-1 py-0">About us</span> Message from CEO
@@ -147,7 +108,7 @@ export default function Home() {
 					</Link>
 				</div>
 				<div className="w-fit h-fit relative">
-					<div className="w-80 h-80 rounded-t-[120px] rounded-br-[120px] overflow-hidden">
+					<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>
@@ -164,93 +125,44 @@ export default function Home() {
 				</div>
 			</section>
 
-			<section className="w-full py-32 px-32 flex bg-white flex-col gap-32">
+			<section className="w-full p-8 md:p-20 xl:p-32 flex bg-white flex-col gap-8 md:gap-24 lg:gap-32">
 				<div className="flex flex-col gap-12 w-full">
 					<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">Our Partners</span>
-					<div className="flex gap-9 flex-wrap items-center">
-						<img src="/logos/dq_logo.png" alt="DQ's Logo" className="w-52 h-52 shadow-lg rounded-xl" />
+					<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
+						<img src="/logos/dq_logo.png" alt="DQ's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
 						<img
 							src="/logos/knowledge_grid_academy_logo.png"
 							alt="Knowledge Grid Academy's Logo"
-							className="w-52 h-52 shadow-lg rounded-xl"
+							className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
 						/>
-						<img src="/logos/sohar_logo.png" alt="Sohar's Logo" className="w-52 h-52 shadow-lg rounded-xl" />
-						<img src="/logos/partner_logo_unknown.png" alt="Unknown Partner's Logo" className="w-52 h-52 shadow-lg rounded-xl" />
-						<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
+						<img src="/logos/sohar_logo.png" alt="Sohar's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
+						<img
+							src="/logos/partner_logo_unknown.png"
+							alt="Unknown Partner's Logo"
+							className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
+						/>
+						<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
 							<img src="/logos/sohar_aluminium_logo.png" alt="Sohar Aluminium's Logo" />
 						</div>
 					</div>
 				</div>
 				<div className="flex flex-col gap-12 w-full">
 					<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">Accreditation</span>
-					<div className="flex gap-9 flex-wrap items-center">
-						<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
+					<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
+						<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
 							<img src="/logos/idp_logo.png" alt="IDP's Logo" />
 						</div>
-						<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
+						<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
 							<img src="/logos/ielts_logo.png" alt="IELTS's Logo" />
 						</div>
-						<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
+						<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
 							<img src="/logos/ec_council_logo.png" alt="EC Council's Logo" />
 						</div>
 					</div>
 				</div>
 			</section>
 
-			<section className="w-full py-10 px-28 bg-mti-gray-seasalt grid grid-cols-4">
-				<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">Navigation</span>
-					<div className="flex flex-col gap-2">
-						<Link href="/about">Why us</Link>
-						<Link href="/about">Capabilities</Link>
-						<Link href="/about">Expertise</Link>
-						<Link href="/about">History</Link>
-						<Link href="/about">Contact</Link>
-					</div>
-				</div>
-				<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">Services</span>
-					<div className="flex flex-col gap-2">
-						<Link href="#benefits">EnCoach benefits</Link>
-						<Link href="#testimonials">Student testimonials</Link>
-					</div>
-				</div>
-				<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">About</span>
-					<div className="flex flex-col gap-2">
-						<Link href="/terms">Terms and Conditions</Link>
-						<Link href="/privacy-policy">Privacy Policy</Link>
-						<Link href="/about">About</Link>
-					</div>
-				</div>
-				<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">Get in Touch</span>
-					<div className="flex flex-col gap-4">
-						<span className="max-w-[280px]">
-							Stay connected with us and know the latest updates about our services through various social media
-						</span>
-						<div className="flex gap-6 items-center">
-							<Link
-								href="https://facebook.com"
-								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
-								<BiLogoFacebook className="w-6 h-6" />
-							</Link>
-							<Link
-								href="https://twitter.com"
-								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
-								<BsTwitter className="w-5 h-5" />
-							</Link>
-							<Link
-								href="https://instagram.com"
-								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
-								<BsInstagram className="w-5 h-5" />
-							</Link>
-						</div>
-					</div>
-				</div>
-			</section>
-
-			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">© EnCoach 2023 all rights reserved</footer>
+			<Footer />
 		</main>
 	);
 }
diff --git a/src/app/success/page.tsx b/src/app/success/page.tsx
index c292196..10bcacf 100644
--- a/src/app/success/page.tsx
+++ b/src/app/success/page.tsx
@@ -20,6 +20,8 @@ import {
 import {BiLogoFacebook} from "react-icons/bi";
 import {useEffect, useState} from "react";
 import axios from "axios";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 
 export default function Home() {
 	const [isValid, setIsValid] = useState(true);
@@ -51,35 +53,7 @@ export default function Home() {
 
 	return (
 		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
-			<header className="w-full px-11 py-3 flex justify-between items-center">
-				<Link href="/">
-					<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
-				</Link>
-				<div className="flex gap-8 items-center w-fit">
-					<Link href="/" className="border-b-2 border-b-mti-purple-light transition ease-in-out duration-300">
-						Home
-					</Link>
-					<Link href="/services" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-						Services
-					</Link>
-					<Link href="/about" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-						About us
-					</Link>
-					<Link href="/history" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-						History
-					</Link>
-					<Link href="/contact" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
-						Contact
-					</Link>
-				</div>
-				<div className="flex items-center w-fit gap-9">
-					<Link
-						href="/join"
-						className="transition ease-in-out duration-300 hover:text-white hover:bg-mti-purple-dark border border-mti-purple-dark px-8 py-2 rounded-xl">
-						Join
-					</Link>
-				</div>
-			</header>
+			<Navbar currentPage="/success" />
 
 			<section className="w-full h-full relative bg-white py-32 flex flex-col items-center justify-center text-center gap-4">
 				{isLoading && (
@@ -109,60 +83,7 @@ export default function Home() {
 				)}
 			</section>
 
-			<section className="w-full py-10 px-28 bg-mti-gray-seasalt grid grid-cols-4">
-				<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">Navigation</span>
-					<div className="flex flex-col gap-2">
-						<Link href="/about">Why us</Link>
-						<Link href="/about">Capabilities</Link>
-						<Link href="/about">Expertise</Link>
-						<Link href="/about">History</Link>
-						<Link href="/about">Contact</Link>
-					</div>
-				</div>
-				<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">Services</span>
-					<div className="flex flex-col gap-2">
-						<Link href="#benefits">EnCoach benefits</Link>
-						<Link href="#testimonials">Student testimonials</Link>
-					</div>
-				</div>
-				<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">About</span>
-					<div className="flex flex-col gap-2">
-						<Link href="/terms">Terms and Conditions</Link>
-						<Link href="/privacy-policy">Privacy Policy</Link>
-						<Link href="/about">About</Link>
-					</div>
-				</div>
-				<div className="flex flex-col gap-4">
-					<span className="font-bold text-xl">Get in Touch</span>
-					<div className="flex flex-col gap-4">
-						<span className="max-w-[280px]">
-							Stay connected with us and know the latest updates about our services through various social media
-						</span>
-						<div className="flex gap-6 items-center">
-							<Link
-								href="https://facebook.com"
-								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
-								<BiLogoFacebook className="w-6 h-6" />
-							</Link>
-							<Link
-								href="https://twitter.com"
-								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
-								<BsTwitter className="w-5 h-5" />
-							</Link>
-							<Link
-								href="https://instagram.com"
-								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
-								<BsInstagram className="w-5 h-5" />
-							</Link>
-						</div>
-					</div>
-				</div>
-			</section>
-
-			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">© EnCoach 2023 all rights reserved</footer>
+			<Footer />
 		</main>
 	);
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..d1534aa
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,64 @@
+import Link from "next/link";
+import {BiLogoFacebook} from "react-icons/bi";
+import {BsInstagram, BsTwitter} from "react-icons/bs";
+
+export default function Footer() {
+	return (
+		<>
+			<section className="w-full py-10 px-8 md:px-28 bg-mti-gray-seasalt flex flex-col md:flex-row md:justify-between gap-8">
+				<div className="flex flex-col gap-4">
+					<span className="font-bold text-xl">Navigation</span>
+					<div className="flex flex-col gap-2">
+						<Link href="/about">Why us</Link>
+						<Link href="/about">Capabilities</Link>
+						<Link href="/about">Expertise</Link>
+						<Link href="/about">History</Link>
+						<Link href="/about">Contact</Link>
+					</div>
+				</div>
+				<div className="flex flex-col gap-4">
+					<span className="font-bold text-xl">Services</span>
+					<div className="flex flex-col gap-2">
+						<Link href="#benefits">EnCoach benefits</Link>
+						<Link href="#testimonials">Student testimonials</Link>
+					</div>
+				</div>
+				<div className="flex flex-col gap-4">
+					<span className="font-bold text-xl">About</span>
+					<div className="flex flex-col gap-2">
+						<Link href="/terms">Terms and Conditions</Link>
+						<Link href="/privacy-policy">Privacy Policy</Link>
+						<Link href="/about">About</Link>
+					</div>
+				</div>
+				<div className="flex flex-col gap-4">
+					<span className="font-bold text-xl">Get in Touch</span>
+					<div className="flex flex-col gap-4">
+						<span className="max-w-[280px]">
+							Stay connected with us and know the latest updates about our services through various social media
+						</span>
+						<div className="flex gap-6 items-center">
+							<Link
+								href="https://facebook.com"
+								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
+								<BiLogoFacebook className="w-6 h-6" />
+							</Link>
+							<Link
+								href="https://twitter.com"
+								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
+								<BsTwitter className="w-5 h-5" />
+							</Link>
+							<Link
+								href="https://instagram.com"
+								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
+								<BsInstagram className="w-5 h-5" />
+							</Link>
+						</div>
+					</div>
+				</div>
+			</section>
+
+			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">© EnCoach 2023 all rights reserved</footer>
+		</>
+	);
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..035aae4
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import clsx from "clsx";
+import {BsList, BsXLg} from "react-icons/bs";
+import {Fragment, useState} from "react";
+import {Dialog, Menu, Transition} from "@headlessui/react";
+
+export default function Navbar({currentPage}: {currentPage: string}) {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<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} />
+				</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 === "/" && "",
+						)}>
+						Home
+					</Link>
+					<Link
+						href="/services"
+						className={clsx(
+							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
+							currentPage === "/services" && "",
+						)}>
+						Services
+					</Link>
+					<Link
+						href="/about"
+						className={clsx(
+							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
+							currentPage === "/about" && "",
+						)}>
+						About us
+					</Link>
+					<Link
+						href="/history"
+						className={clsx(
+							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
+							currentPage === "/history" && "",
+						)}>
+						History
+					</Link>
+					<Link
+						href="/contact"
+						className={clsx(
+							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
+							currentPage === "/contact" && "",
+						)}>
+						Contact
+					</Link>
+				</div>
+				<div className="flex items-center w-fit gap-4">
+					<Link
+						href="https://encoach.com"
+						className="transition ease-in-out duration-300 hover:text-white hover:bg-mti-purple-dark border border-mti-purple-dark px-8 py-2 rounded-xl">
+						Platform
+					</Link>
+					<Link
+						href="/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">
+						Join
+					</Link>
+				</div>
+			</header>
+
+			<Transition appear show={isOpen} as={Fragment}>
+				<Dialog as="div" className="relative z-10" onClose={() => setIsOpen(false)}>
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0">
+						<div className="fixed inset-0 bg-black bg-opacity-25" />
+					</Transition.Child>
+
+					<div className="fixed inset-0 overflow-y-auto">
+						<div className="flex min-h-full items-center justify-center text-center">
+							<Transition.Child
+								as={Fragment}
+								enter="ease-out duration-300"
+								enterFrom="opacity-0 scale-95"
+								enterTo="opacity-100 scale-100"
+								leave="ease-in duration-200"
+								leaveFrom="opacity-100 scale-100"
+								leaveTo="opacity-0 scale-95">
+								<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} />
+										</Link>
+										<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
+											<BsXLg className="text-2xl text-mti-purple-light" onClick={() => setIsOpen(false)} />
+										</div>
+									</Dialog.Title>
+									<div className="flex flex-col gap-6 px-8 text-lg">
+										<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 ",
+											)}>
+											Home
+										</Link>
+										<Link
+											href="/services"
+											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 ",
+											)}>
+											Services
+										</Link>
+										<Link
+											href="/about"
+											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 ",
+											)}>
+											About us
+										</Link>
+										<Link
+											href="/history"
+											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 ",
+											)}>
+											History
+										</Link>
+										<Link
+											href="/contact"
+											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 ",
+											)}>
+											Contact
+										</Link>
+										<Link
+											href="/join"
+											className={clsx(
+												"transition ease-in-out duration-300 w-fit",
+												currentPage === "/join" &&
+													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+											)}>
+											Join
+										</Link>
+										<Link href="https://encoach.com" className={clsx("transition ease-in-out duration-300 w-fit")}>
+											Platform
+										</Link>
+									</div>
+								</Dialog.Panel>
+							</Transition.Child>
+						</div>
+					</div>
+				</Dialog>
+			</Transition>
+
+			<header className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden">
+				<Link href="/">
+					<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+				</Link>
+				<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
+					<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
+				</div>
+			</header>
+		</>
+	);
+}
diff --git a/src/components/PricingTable.tsx b/src/components/PricingTable.tsx
new file mode 100644
index 0000000..435e8e9
--- /dev/null
+++ b/src/components/PricingTable.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import {Elements} from "@stripe/react-stripe-js";
+import {loadStripe} from "@stripe/stripe-js";
+
+const stripePromise = loadStripe("pk_test_51NzD5xFI67mXFum2XDMXiLu89SbCAMY5O0RnKjlU6XqyfboRVvFHI3f5OJHaxsrjjB7WqDYqN7Y3eF8mq3sF354F00l30L5GuJ");
+
+export default function PricingTable() {
+	return (
+		<Elements stripe={stripePromise}>
+			<script async src="https://js.stripe.com/v3/pricing-table.js" />
+			{/** @ts-ignore */}
+			<stripe-pricing-table id="pricing" pricing-table-id={process.env.STRIPE_PRICING_TABLE} publishable-key={process.env.STRIPE_KEY} />
+		</Elements>
+	);
+}
diff --git a/yarn.lock b/yarn.lock
index 1b4077f..ff7c5ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -51,6 +51,13 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.51.0.tgz#6d419c240cfb2b66da37df230f7e7eef801c32fa"
   integrity sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg==
 
+"@headlessui/react@^1.7.17":
+  version "1.7.17"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
+  integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
+  dependencies:
+    client-only "^0.0.1"
+
 "@humanwhocodes/config-array@^0.11.11":
   version "0.11.11"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"
@@ -601,11 +608,16 @@ chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
-client-only@0.0.1:
+client-only@0.0.1, client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"