Implemented the Reading and Listening initial screens according to the new designs, creating new components as needed

src/pages/_app.tsx

@@ -5,7 +5,20 @@ import type {AppProps} from "next/app";
 import "primereact/resources/themes/lara-light-indigo/theme.css";
 import "primereact/resources/primereact.min.css";
 import "primeicons/primeicons.css";
+import {useRouter} from "next/router";
+import {useEffect} from "react";
+import useExamStore from "@/stores/examStore";
 
 export default function App({Component, pageProps}: AppProps) {
+	const reset = useExamStore((state) => state.reset);
+
+	const router = useRouter();
+
+	useEffect(() => {
+		if (router.pathname !== "/exam") {
+			reset();
+		}
+	}, [router.pathname, reset]);
+
 	return <Component {...pageProps} />;
 }

src/pages/exam.tsx

@@ -209,7 +209,11 @@ export default function Page() {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			{user && <Layout user={user}>{renderScreen()}</Layout>}
+			{user && (
+				<Layout user={user} className="justify-between">
+					{renderScreen()}
+				</Layout>
+			)}
 		</>
 	);
 }

src/pages/test.tsx

@@ -127,11 +127,11 @@ export default function Page() {
 										<>
 											<div className="flex gap-4 items-center">
 												<span className="text-xs w-9">
-													{Math.round(recordingDuration / 60)
+													{Math.floor(recordingDuration / 60)
 														.toString(10)
 														.padStart(2, "0")}
 													:
-													{Math.round(recordingDuration % 60)
+													{Math.floor(recordingDuration % 60)
 														.toString(10)
 														.padStart(2, "0")}
 												</span>