Separated the ProfileLevel into multiple components and made a Card one

src/components/ProfileCard.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable @next/next/no-img-element */
+import {User} from "@/interfaces/user";
+import clsx from "clsx";
+import LevelLabel from "./LevelLabel";
+import LevelProgressBar from "./LevelProgressBar";
+
+interface Props {
+	user: User;
+	className: string;
+}
+
+export default function ProfileCard({user, className}: Props) {
+	return (
+		<div className={clsx("bg-white drop-shadow-xl p-8 rounded-xl w-full flex flex-col gap-6", className)}>
+			<div className="flex w-full items-center gap-8">
+				<div className="w-24 rounded-full border-4 border-white drop-shadow-xl">
+					<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
+				</div>
+				<div className="flex flex-col justify-center">
+					<span className="text-neutral-600 font-bold text-2xl">
+						{user.name.first} {user.name.last}
+					</span>
+					<LevelLabel experience={user.experience} />
+				</div>
+			</div>
+			<LevelProgressBar experience={user.experience} progressBarWidth="w-96" />
+		</div>
+	);
+}