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

src/components/High/Layout.tsx

@@ -1,19 +1,24 @@
 import {User} from "@/interfaces/user";
+import clsx from "clsx";
 import Navbar from "../Navbar";
 import Sidebar from "../Sidebar";
 
 interface Props {
 	user: User;
 	children: React.ReactNode;
+	className?: string;
 }
 
-export default function Layout({user, children}: Props) {
+export default function Layout({user, children, className}: Props) {
 	return (
-		<main className="w-full h-[100vh] flex flex-col bg-mti-gray-smoke">
+		<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke">
 			<Navbar user={user} />
 			<div className="h-full w-full flex py-4 pb-8 gap-2">
 				<Sidebar path={window.location.pathname} />
-				<div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12 flex flex-col gap-12">{children}</div>
+				<div
+					className={clsx("w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative", className)}>
+					{children}
+				</div>
 			</div>
 		</main>
 	);