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

src/components/Low/ProgressBar.tsx

@@ -1,22 +1,37 @@
+import {Module} from "@/interfaces";
 import clsx from "clsx";
 
 interface Props {
 	label: string;
 	percentage: number;
-	color: "blue" | "orange" | "green";
+	color: "blue" | "orange" | "green" | Module;
+	useColor?: boolean;
 	className?: string;
 }
 
-export default function ProgressBar({label, percentage, color, className}: Props) {
+export default function ProgressBar({label, percentage, color, useColor = false, className}: Props) {
 	const progressColorClass: {[key in typeof color]: string} = {
 		blue: "bg-mti-blue-light",
 		orange: "bg-mti-orange-light",
 		green: "bg-mti-green-light",
+		reading: "bg-ielts-reading",
+		listening: "bg-ielts-listening",
+		writing: "bg-ielts-writing",
+		speaking: "bg-ielts-speaking",
 	};
 
 	return (
-		<div className={clsx("relative rounded-full bg-mti-gray-anti-flash overflow-hidden flex items-center justify-center", className)}>
-			<div style={{width: `${percentage}%`}} className={clsx("absolute top-0 left-0 h-full overflow-hidden", progressColorClass[color])} />
+		<div
+			className={clsx(
+				"relative rounded-full overflow-hidden flex items-center justify-center",
+				className,
+				!useColor ? "bg-mti-gray-anti-flash" : progressColorClass[color],
+				useColor && "bg-opacity-20",
+			)}>
+			<div
+				style={{width: `${percentage}%`}}
+				className={clsx("absolute transition-all duration-300 ease-in-out top-0 left-0 h-full overflow-hidden", progressColorClass[color])}
+			/>
 			<span className="z-10 justify-self-center text-white text-sm font-bold">{label}</span>
 		</div>
 	);