ENCOA-234: Changed the login page when a user is going into the /official-exam

src/pages/login.tsx

@@ -2,7 +2,7 @@
 import { User } from "@/interfaces/user";
 import { toast, ToastContainer } from "react-toastify";
 import axios from "axios";
-import {FormEvent, useEffect, useState} from "react";
+import { FormEvent, useEffect, useMemo, useState } from "react";
 import Head from "next/head";
 import useUser from "@/hooks/useUser";
 import { Divider } from "primereact/divider";
@@ -30,13 +30,14 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res, query}) =
 	};
 }, sessionOptions);
 
-export default function Login({ destination }: { destination: string }) {
+export default function Login({ destination = "/" }: { destination?: string }) {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const [rememberPassword, setRememberPassword] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
 	const router = useRouter();
+	const isOfficialExamLogin = useMemo(() => destination.startsWith("/official-exam"), [destination])
 
 	const { user, mutateUser } = useUser({
 		redirectTo: destination,
@@ -110,14 +111,25 @@ export default function Login({ destination }: { destination: string }) {
 			<main className="flex h-[100vh] w-full bg-white text-black">
 				<ToastContainer />
 				<section className="relative hidden h-full w-fit min-w-fit lg:flex">
-					{/* <div className="bg-mti-rose-light absolute z-10 h-full w-full bg-opacity-50" /> */}
+					{!isOfficialExamLogin && (
 						<img src="/red-stock-photo.jpg" alt="People smiling looking at a tablet" className="aspect-auto h-full" />
+					)}
+					{isOfficialExamLogin && (
+						<img src="/purple-stock-photo.png" alt="People smiling looking at a tablet" className="aspect-auto h-full" />
+					)}
 				</section>
 				<section className="flex h-full w-full flex-col items-center justify-center gap-2">
 					<div className={clsx("flex flex-col items-center", !user && "mb-4")}>
 						<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-56" />
+						{!isOfficialExamLogin && (
+							<>
 								<h1 className="text-2xl font-bold lg:text-4xl">Login to your account</h1>
 								<p className="text-mti-gray-cool self-start text-sm font-normal lg:text-base">with your registered Email Address</p>
+							</>
+						)}
+						{isOfficialExamLogin && (
+							<h1 className="text-2xl font-bold lg:text-4xl">Welcome to the Official Exams Portal</h1>
+						)}
 					</div>
 					<Divider className="max-w-xs lg:max-w-md" />
 					{!user && (