feat(ui): add infoheader component, improve quest map visuals

src/pages/student/Practice.tsx

@@ -9,6 +9,8 @@ import {
 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useExamConfigStore } from "../../stores/useExamConfigStore";
+import { LevelBar } from "../../components/LevelBar";
+import { InfoHeader } from "../../components/InfoHeader";
 
 const DOTS = [
   { size: 10, color: "#f97316", top: "8%", left: "5%", delay: "0s" },
@@ -240,10 +242,9 @@ const MODE_CARDS = [
 
 export const Practice = () => {
   const navigate = useNavigate();
-  const userXp = useExamConfigStore.getState().userXp;
 
   return (
-    <div className="pr-screen pb-12">
+    <div className="pr-screen">
       <style>{STYLES}</style>
 
       {/* Blobs */}
@@ -274,15 +275,7 @@ export const Practice = () => {
 
       <div className="pr-inner">
         {/* ── Header ── */}
-        <header className="pr-header">
-          <div className="pr-logo-btn">
-            <BookOpen size={20} color="white" />
-          </div>
-          <div className="pr-xp-chip">
-            <span>⚡ {userXp} XP</span>
-          </div>
-        </header>
-
+        <InfoHeader mode="LEVEL" />
         {/* ── Hero banner ── */}
         <div className="pr-hero pr-anim pr-anim-1">
           <div className="pr-hero-icon-bg">