Separated the ProfileLevel into multiple components and made a Card one

src/components/Navbar.tsx

@@ -1,9 +1,17 @@
+import Link from "next/link";
+
+interface Props {
+	profilePicture: string;
+}
+
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar() {
+export default function Navbar({profilePicture}: Props) {
 	return (
 		<div className="navbar bg-neutral-100 drop-shadow-md text-black">
 			<div className="flex-1">
-				<a className="btn btn-ghost normal-case text-xl">IELTS GPT</a>
+				<Link className="btn btn-ghost normal-case text-xl" href="/">
+					IELTS GPT
+				</Link>
 			</div>
 			<div className="flex-none gap-2">
 				<div className="form-control">
@@ -12,7 +20,7 @@ export default function Navbar() {
 				<div className="dropdown dropdown-end">
 					<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
 						<div className="w-10 rounded-full">
-							<img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" alt="Profile picture" />
+							<img src={profilePicture} alt="Profile picture" />
 						</div>
 					</label>
 					<ul tabIndex={0} className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">