Separated the ProfileLevel into multiple components and made a Card one

src/pages/exam.tsx

@@ -10,6 +10,9 @@ import {useRouter} from "next/router";
 import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
 import ProfileLevel from "@/components/ProfileLevel";
 
+// TODO: Remove this import
+import JSON_USER from "@/demo/user.json";
+
 export default function Home() {
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
 	const router = useRouter();
@@ -28,14 +31,11 @@ export default function Home() {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<main className="w-full h-screen flex flex-col items-center bg-white text-black">
-				<Navbar />
+				<Navbar profilePicture={JSON_USER.profilePicture} />
 				<div className="w-full h-full relative">
 					<section className="h-full w-full flex flex-col items-center justify-center">
 						{/* //TODO: Change this section to work with the user account */}
-						<ProfileLevel
-							user={{profilePicture: "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg", experience: 43760}}
-							className="h-1/2"
-						/>
+						<ProfileLevel user={JSON_USER} className="h-1/2" />
 						<div className="h-1/2 flex flex-col">
 							<div className="h-1/2 flex gap-8">
 								<div