Merge pull request 'web' (#2) from web into main

Reviewed-on: #2

index.html

@@ -5,7 +5,6 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://www.geogebra.org/apps/deployggb.js"></script>
-
     <script
       defer
       src="https://alt.omukk.dev/script.js"

package.json

@@ -35,8 +35,6 @@
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
     "three": "^0.183.2",
-    "troika-three-text": "^0.52.4",
-    "troika-worker-utils": "^0.52.0",
     "vaul": "^1.1.2",
     "zustand": "^5.0.9"
   },

pnpm-lock.yaml

@@ -83,12 +83,6 @@ importers:
       three:
         specifier: ^0.183.2
         version: 0.183.2
-      troika-three-text:
-        specifier: ^0.52.4
-        version: 0.52.4(three@0.183.2)
-      troika-worker-utils:
-        specifier: ^0.52.0
-        version: 0.52.0
       vaul:
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)

src/App.tsx

@@ -21,7 +21,6 @@ import { Drills } from "./pages/student/drills/page";
 import { HardTestModules } from "./pages/student/hard-test-modules/page";
 import { QuestMap } from "./pages/student/QuestMap";
 import { Register } from "./pages/auth/Register";
-import { PracticeSheetList } from "./pages/student/practice-sheet/page";
 
 function App() {
   const router = createBrowserRouter([
@@ -81,10 +80,6 @@ function App() {
               path: "practice/hard-test-modules",
               element: <HardTestModules />,
             },
-            {
-              path: "practice/practice-sheet",
-              element: <PracticeSheetList />,
-            },
           ],
         },
         {

src/components/AppSidebar.tsx

@@ -19,7 +19,6 @@ import {
   Trophy,
   Map,
   SquareLibrary,
-  ListIcon,
 } from "lucide-react";
 
 import { useState } from "react";
@@ -363,7 +362,6 @@ export function AppSidebar() {
                         />
                         <span>Targeted Practice</span>
                       </NavLink>
-
                       <NavLink
                         to="/student/practice/drills"
                         className={({ isActive }) =>
@@ -398,23 +396,6 @@ export function AppSidebar() {
                         />
                         <span>Hard Test Modules</span>
                       </NavLink>
-                      <NavLink
-                        to="/student/practice/practice-sheet"
-                        className={({ isActive }) =>
-                          `flex items-center gap-2.5 rounded-2xl px-2 py-2 text-sm font-satoshi transition-colors duration-200 ${
-                            isActive
-                              ? "bg-white text-slate-900"
-                              : "text-slate-500 hover:bg-white hover:text-slate-900"
-                          }`
-                        }
-                      >
-                        <ListIcon
-                          size={18}
-                          strokeWidth={3}
-                          className="text-slate-400"
-                        />
-                        <span>Practice Sheet</span>
-                      </NavLink>
                     </SidebarMenuSub>
                   )}
                 </SidebarMenuItem>

src/pages/auth/Login.tsx

@@ -313,13 +313,6 @@ const STYLES = `
     display:flex;align-items:center;gap:0.5rem;
   }
 
-  .lg-success {
-    background:#f0fdf4;border:2px solid #bbf7d0;border-radius:14px;padding:0.8rem 1rem;
-    font-family:'Nunito Sans',sans-serif;font-size:0.82rem;font-weight:700;color:#15803d;
-    display:flex;align-items:center;gap:0.5rem;
-    animation: formPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
-  }
-
   .lg-btn {
     width:100%;padding:1rem;background:#f97316;color:white;border:none;border-radius:100px;cursor:pointer;
     font-family:'Nunito',sans-serif;font-size:1rem;font-weight:900;
@@ -372,14 +365,8 @@ export const Login = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const {
+  const { login, isAuthenticated, isLoading, error, clearError } =
-    login,
+    useAuthStore();
-    isAuthenticated,
-    isLoading,
-    error,
-    clearError,
-    registrationMessage,
-  } = useAuthStore();
   const from =
     (location.state as LocationState)?.from?.pathname || "/student/home";
 
@@ -686,12 +673,6 @@ export const Login = () => {
               </label>
             </div>
 
-            {registrationMessage && (
-              <div className="lg-success">
-                <span>✅</span> {registrationMessage}
-              </div>
-            )}
-
             {error && (
               <div className="lg-error">
                 <span>⚠️</span> {error}

src/pages/auth/Register.tsx

@@ -1,22 +1,18 @@
-import { useState, useRef, useCallback } from "react";
+import { useState } from "react";
-import type { FormEvent, DragEvent } from "react";
+import type { FormEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuthStore } from "../../stores/authStore";
 import {
   Loader2,
   Mail,
   Lock,
+  ImageIcon,
   BookOpen,
   Star,
   Zap,
   Trophy,
-  Upload,
-  X,
-  Camera,
 } from "lucide-react";
 
-import { api } from "../../utils/api";
-
 const STYLES = `
   @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
@@ -44,6 +40,7 @@ const STYLES = `
     flex-shrink: 0;
   }
 
+  /* Blobs inside left panel */
   .rg-panel-blob {
     position: absolute; pointer-events: none; border-radius: 50%;
     opacity: 0.18;
@@ -76,6 +73,7 @@ const STYLES = `
     50%      { transform: translate(-20px, -28px) scale(1.06); }
   }
 
+  /* Floating decorative shapes */
   .rg-shape {
     position: absolute; pointer-events: none;
     animation: floatShape 8s ease-in-out infinite;
@@ -85,6 +83,7 @@ const STYLES = `
     50%      { transform: translateY(-16px) rotate(12deg); }
   }
 
+  /* Stars scattered */
   .rg-star {
     position: absolute; pointer-events: none;
     color: #fde68a; opacity: 0.55;
@@ -95,6 +94,7 @@ const STYLES = `
     50%      { opacity: 0.9; transform: scale(1.3); }
   }
 
+  /* Left panel content */
   .rg-panel-content {
     position: relative; z-index: 1;
     display: flex; flex-direction: column;
@@ -133,6 +133,7 @@ const STYLES = `
     font-size: 1rem; font-weight: 600; color: #c4b5fd; line-height: 1.6;
   }
 
+  /* Feature pills */
   .rg-features { display: flex; flex-direction: column; gap: 0.85rem; }
   .rg-feature {
     display: flex; align-items: center; gap: 0.85rem;
@@ -162,6 +163,7 @@ const STYLES = `
     font-size: 0.75rem; font-weight: 600; color: #a5b4fc;
   }
 
+  /* Social proof */
   .rg-social-proof {
     display: flex; align-items: center; gap: 0.75rem;
     padding: 0.1rem 0;
@@ -181,7 +183,7 @@ const STYLES = `
   }
   .rg-social-proof p strong { color: #fde68a; }
 
-  /* ─── RIGHT PANEL ─── */
+  /* ─── RIGHT PANEL (form) ─── */
   .rg-right {
     flex: 1;
     display: flex; align-items: center; justify-content: center;
@@ -189,6 +191,7 @@ const STYLES = `
     position: relative; overflow: hidden;
   }
 
+  /* Subtle bg dots on right */
   .rg-bg-dot {
     position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.10;
     animation: bgDotFloat 9s ease-in-out infinite;
@@ -209,6 +212,7 @@ const STYLES = `
     to   { opacity: 1; transform: translateY(0) scale(1); }
   }
 
+  /* Form header */
   .rg-form-header { display: flex; flex-direction: column; gap: 0.4rem; }
   .rg-form-header h1 {
     font-size: 2rem; font-weight: 900; color: #1e1b4b;
@@ -219,152 +223,41 @@ const STYLES = `
     font-size: 0.88rem; font-weight: 600; color: #9ca3af;
   }
 
-  /* ─── AVATAR UPLOAD ─── */
+  /* Avatar row */
-  .av-upload-wrap {
+  .rg-avatar-row {
-    display: flex;
+    display: flex; align-items: center; gap: 1.1rem;
-    align-items: center;
+    background: #f9fafb; border: 2.5px solid #f3f4f6;
-    gap: 1.25rem;
+    border-radius: 18px; padding: 0.9rem 1.1rem;
+    transition: border-color 0.2s;
   }
-
+  .rg-avatar-row:focus-within { border-color: #c4b5fd; background: white; }
-  /* The circular avatar preview */
+  .rg-avatar-ring {
-  .av-circle {
+    width: 52px; height: 52px; border-radius: 50%;
-    position: relative;
+    border: 2.5px dashed #e5e7eb;
-    width: 72px; height: 72px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    cursor: pointer;
-  }
-  .av-circle-inner {
-    width: 100%; height: 100%;
-    border-radius: 50%;
-    overflow: hidden;
-    background: linear-gradient(135deg, #ede9fe, #faf5ff);
-    border: 2.5px solid #e5e7eb;
     display: flex; align-items: center; justify-content: center;
-    transition: border-color 0.25s, box-shadow 0.25s;
+    overflow: hidden; background: white; flex-shrink: 0;
-    position: relative;
+    transition: border-color 0.25s, border-style 0.25s;
   }
-  .av-circle:hover .av-circle-inner {
+  .rg-avatar-ring.filled { border-style: solid; border-color: #a855f7; }
-    border-color: #a855f7;
+  .rg-avatar-ring img { width: 100%; height: 100%; object-fit: cover; }
-    box-shadow: 0 0 0 4px rgba(168,85,247,0.12);
+  .rg-avatar-input-col { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
+  .rg-avatar-label {
+    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
+    text-transform: uppercase; color: #6b7280;
   }
-  .av-circle-inner img {
+  .rg-avatar-input {
-    width: 100%; height: 100%; object-fit: cover;
+    background: transparent; border: none; outline: none;
-  }
-  .av-circle-inner.has-image {
-    border-color: #a855f7;
-    border-style: solid;
-    box-shadow: 0 0 0 3px rgba(168,85,247,0.15);
-  }
-  /* Camera overlay on hover */
-  .av-circle-overlay {
-    position: absolute; inset: 0; border-radius: 50%;
-    background: rgba(109,40,217,0.55);
-    display: flex; align-items: center; justify-content: center;
-    opacity: 0; transition: opacity 0.2s;
-    pointer-events: none;
-  }
-  .av-circle:hover .av-circle-overlay { opacity: 1; }
-  /* Remove button */
-  .av-remove-btn {
-    position: absolute;
-    top: -3px; right: -3px;
-    width: 20px; height: 20px;
-    border-radius: 50%;
-    background: #ef4444;
-    border: 2px solid white;
-    display: flex; align-items: center; justify-content: center;
-    cursor: pointer;
-    transition: transform 0.15s, background 0.15s;
-    z-index: 2;
-  }
-  .av-remove-btn:hover { background: #dc2626; transform: scale(1.15); }
-
-  /* Drop zone (right side) */
-  .av-dropzone {
-    flex: 1;
-    border: 2px dashed #e5e7eb;
-    border-radius: 16px;
-    padding: 0.9rem 1.1rem;
-    display: flex; flex-direction: column;
-    align-items: flex-start; gap: 0.35rem;
-    background: #fafafa;
-    cursor: pointer;
-    transition: border-color 0.2s, background 0.2s, transform 0.15s;
-    position: relative;
-    overflow: hidden;
-  }
-  .av-dropzone:hover, .av-dropzone.dragover {
-    border-color: #a855f7;
-    background: #fdf4ff;
-    transform: scale(1.01);
-  }
-  .av-dropzone.dragover {
-    border-style: solid;
-    box-shadow: 0 0 0 4px rgba(168,85,247,0.1);
-  }
-  .av-dropzone-title {
-    font-size: 0.82rem; font-weight: 800; color: #1e1b4b;
-    display: flex; align-items: center; gap: 0.4rem;
-  }
-  .av-dropzone-sub {
     font-family: 'Nunito Sans', sans-serif;
-    font-size: 0.7rem; font-weight: 600; color: #9ca3af;
+    font-size: 0.85rem; font-weight: 600; color: #1e1b4b;
-  }
-  .av-dropzone-types {
-    display: flex; gap: 0.3rem; margin-top: 0.1rem;
-  }
-  .av-type-badge {
-    font-family: 'Nunito Sans', sans-serif;
-    font-size: 0.62rem; font-weight: 700;
-    padding: 0.15rem 0.45rem;
-    border-radius: 6px;
-    background: #ede9fe; color: #7c3aed;
-    letter-spacing: 0.04em; text-transform: uppercase;
-  }
-  /* Shimmer drag-over effect */
-  .av-dropzone.dragover::after {
-    content: '';
-    position: absolute; inset: 0;
-    background: linear-gradient(120deg, transparent 30%, rgba(168,85,247,0.07) 50%, transparent 70%);
-    animation: shimmer 1s linear infinite;
-  }
-  @keyframes shimmer {
-    from { transform: translateX(-100%); }
-    to   { transform: translateX(100%); }
-  }
-
-  /* Upload progress bar */
-  .av-progress-wrap {
     width: 100%;
-    height: 4px; border-radius: 999px;
-    background: #f3f4f6; overflow: hidden;
-    margin-top: 0.4rem;
   }
-  .av-progress-bar {
+  .rg-avatar-input::placeholder { color: #d1d5db; }
-    height: 100%; border-radius: 999px;
+  .rg-avatar-hint {
-    background: linear-gradient(90deg, #a855f7, #6d28d9);
-    transition: width 0.2s ease;
-  }
-  .av-uploading-label {
     font-family: 'Nunito Sans', sans-serif;
-    font-size: 0.7rem; font-weight: 700; color: #a855f7;
+    font-size: 0.7rem; font-weight: 600; color: #c4b5fd;
-    display: flex; align-items: center; gap: 0.3rem;
-    margin-top: 0.2rem;
-  }
-  .av-upload-spinner {
-    animation: spin 0.8s linear infinite;
-  }
-  @keyframes spin { to { transform: rotate(360deg); } }
-
-  /* Upload error */
-  .av-upload-error {
-    font-family: 'Nunito Sans', sans-serif;
-    font-size: 0.7rem; font-weight: 700; color: #e11d48;
-    margin-top: 0.2rem;
   }
 
-  /* Fields */
+  /* Fields grid */
   .rg-fields { display: flex; flex-direction: column; gap: 1rem; }
   .rg-row { display: flex; gap: 1rem; }
   .rg-row .rg-field { flex: 1; }
@@ -414,6 +307,7 @@ const STYLES = `
   .rg-strength-hint.medium { color: #eab308; }
   .rg-strength-hint.strong { color: #22c55e; }
 
+  /* Error */
   .rg-error {
     background: #fff1f2; border: 2px solid #fecdd3;
     border-radius: 14px; padding: 0.8rem 1rem;
@@ -422,6 +316,7 @@ const STYLES = `
     display: flex; align-items: center; gap: 0.5rem;
   }
 
+  /* Submit */
   .rg-btn {
     width: 100%; padding: 1rem;
     background: #a855f7; color: white; border: none;
@@ -441,6 +336,7 @@ const STYLES = `
   .rg-btn:disabled:hover { transform: none; box-shadow: 0 4px 0 #d1d5db; }
 
   .rg-spinner { animation: spin 0.8s linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
 
   .rg-form-footer {
     text-align: center;
@@ -452,6 +348,7 @@ const STYLES = `
   }
   .rg-link:hover { color: #7c3aed; }
 
+  /* Responsive */
   @media (max-width: 860px) {
     .rg-left { display: none; }
     .rg-right { padding: 2rem 1.5rem; }
@@ -553,195 +450,13 @@ const BG_DOTS = [
 ];
 
 const INITIALS = ["JD", "AS", "MK", "RP", "LL"];
-const ACCEPTED = ["image/jpeg", "image/png", "image/webp", "image/gif"];
 
-// ─── Avatar Upload Component ───────────────────────────────────────────────
-interface AvatarUploadProps {
-  avatarUrl: string;
-  onAvatarChange: (url: string) => void;
-  disabled?: boolean;
-}
-
-function AvatarUpload({
-  avatarUrl,
-  onAvatarChange,
-  disabled,
-}: AvatarUploadProps) {
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [isUploading, setIsUploading] = useState(false);
-  const [uploadProgress, setUploadProgress] = useState(0);
-  const [uploadError, setUploadError] = useState("");
-  const [previewUrl, setPreviewUrl] = useState("");
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const processFile = useCallback(
-    async (file: File) => {
-      if (!ACCEPTED.includes(file.type)) {
-        setUploadError("Please upload a JPG, PNG, WebP, or GIF image.");
-        return;
-      }
-      if (file.size > 5 * 1024 * 1024) {
-        setUploadError("Image must be under 5 MB.");
-        return;
-      }
-
-      setUploadError("");
-      // Show local preview immediately
-      const local = URL.createObjectURL(file);
-      setPreviewUrl(local);
-      setIsUploading(true);
-      setUploadProgress(0);
-
-      // Fake progress ticks while uploading
-      const ticker = setInterval(() => {
-        setUploadProgress((p) => Math.min(p + 12, 85));
-      }, 120);
-
-      try {
-        const uploadedUrl = await api.uploadAvatar(file);
-        clearInterval(ticker);
-        setUploadProgress(100);
-        onAvatarChange(uploadedUrl);
-        setTimeout(() => {
-          setIsUploading(false);
-          setUploadProgress(0);
-        }, 600);
-      } catch {
-        clearInterval(ticker);
-        setIsUploading(false);
-        setUploadProgress(0);
-        setPreviewUrl("");
-        setUploadError("Upload failed. Please try again.");
-      }
-    },
-    [onAvatarChange],
-  );
-
-  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragOver(false);
-    const file = e.dataTransfer.files[0];
-    if (file) processFile(file);
-  };
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) processFile(file);
-    e.target.value = "";
-  };
-
-  const handleRemove = (ev: React.MouseEvent) => {
-    ev.stopPropagation();
-    setPreviewUrl("");
-    onAvatarChange("");
-    setUploadError("");
-  };
-
-  const displayUrl = previewUrl || avatarUrl;
-
-  return (
-    <div className="av-upload-wrap">
-      {/* Hidden file input */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={ACCEPTED.join(",")}
-        style={{ display: "none" }}
-        onChange={handleFileChange}
-        disabled={disabled || isUploading}
-      />
-
-      {/* Avatar circle */}
-      <div
-        className="av-circle"
-        onClick={() =>
-          !disabled && !isUploading && fileInputRef.current?.click()
-        }
-        title="Click to change photo"
-      >
-        <div className={`av-circle-inner ${displayUrl ? "has-image" : ""}`}>
-          {displayUrl ? (
-            <img src={displayUrl} alt="Avatar preview" />
-          ) : (
-            <Camera size={24} color="#c4b5fd" />
-          )}
-          <div className="av-circle-overlay">
-            <Camera size={18} color="white" />
-          </div>
-        </div>
-        {displayUrl && !isUploading && (
-          <div
-            className="av-remove-btn"
-            onClick={handleRemove}
-            title="Remove photo"
-          >
-            <X size={10} color="white" strokeWidth={3} />
-          </div>
-        )}
-      </div>
-
-      {/* Drop zone */}
-      <div
-        className={`av-dropzone ${isDragOver ? "dragover" : ""}`}
-        onClick={() =>
-          !disabled && !isUploading && fileInputRef.current?.click()
-        }
-        onDragOver={(e) => {
-          e.preventDefault();
-          setIsDragOver(true);
-        }}
-        onDragLeave={() => setIsDragOver(false)}
-        onDrop={handleDrop}
-      >
-        {isUploading ? (
-          <>
-            <div className="av-uploading-label">
-              <Loader2 size={12} className="av-upload-spinner" />
-              Uploading photo…
-            </div>
-            <div className="av-progress-wrap">
-              <div
-                className="av-progress-bar"
-                style={{ width: `${uploadProgress}%` }}
-              />
-            </div>
-          </>
-        ) : (
-          <>
-            <div className="av-dropzone-title">
-              <Upload size={13} color="#a855f7" />
-              {displayUrl ? "Change photo" : "Upload a photo"}
-            </div>
-            <div className="av-dropzone-sub">
-              {isDragOver ? "Drop it here!" : "Click or drag & drop"}
-            </div>
-            <div className="av-dropzone-types">
-              {["PNG", "JPG", "WebP"].map((t) => (
-                <span key={t} className="av-type-badge">
-                  {t}
-                </span>
-              ))}
-              <span
-                className="av-type-badge"
-                style={{ background: "#fef3c7", color: "#b45309" }}
-              >
-                Max 5 MB
-              </span>
-            </div>
-          </>
-        )}
-        {uploadError && <div className="av-upload-error">⚠️ {uploadError}</div>}
-      </div>
-    </div>
-  );
-}
-
-// ─── Main Register Page ───────────────────────────────────────────────────
 export const Register = () => {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [avatarUrl, setAvatarUrl] = useState("");
   const [password, setPassword] = useState("");
+  const [avatarError, setAvatarError] = useState(false);
 
   const navigate = useNavigate();
   const { register, isLoading, error, clearError } = useAuthStore();
@@ -758,7 +473,7 @@ export const Register = () => {
       avatar_url: avatarUrl,
       password,
     });
-    if (success) navigate("/login", { replace: true });
+    if (success) navigate("/student/home", { replace: true });
   };
 
   return (
@@ -771,6 +486,7 @@ export const Register = () => {
         <div className="rg-panel-blob rg-panel-blob-2" />
         <div className="rg-panel-blob rg-panel-blob-3" />
 
+        {/* Decorative floating dots */}
         {PANEL_DOTS.map((d, i) => (
           <div
             key={i}
@@ -791,6 +507,7 @@ export const Register = () => {
           />
         ))}
 
+        {/* Stars */}
         {[
           { top: "14%", left: "20%", size: 14, delay: "0s" },
           { top: "28%", left: "78%", size: 10, delay: "0.7s" },
@@ -813,6 +530,7 @@ export const Register = () => {
           />
         ))}
 
+        {/* Decorative ring shapes */}
         {[
           { size: 90, top: "72%", left: "5%", delay: "0.2s", dur: "10s" },
           { size: 60, top: "8%", left: "55%", delay: "1.1s", dur: "13s" },
@@ -836,10 +554,13 @@ export const Register = () => {
         ))}
 
         <div className="rg-panel-content">
+          {/* Logo */}
           <div className="rg-panel-logo">
             <div className="rg-panel-logo-badge">📚</div>
             <span className="rg-panel-logo-text">EdBridge</span>
           </div>
+
+          {/* Headline */}
           <div className="rg-panel-headline">
             <h2>
               Ace the SAT.
@@ -852,6 +573,8 @@ export const Register = () => {
               SAT scores with personalized practice.
             </p>
           </div>
+
+          {/* Feature pills */}
           <div className="rg-features">
             {FEATURES.map((f, i) => (
               <div className="rg-feature" key={i}>
@@ -865,6 +588,8 @@ export const Register = () => {
               </div>
             ))}
           </div>
+
+          {/* Social proof */}
           <div className="rg-social-proof">
             <div className="rg-avatars">
               {INITIALS.map((s, i) => (
@@ -903,20 +628,62 @@ export const Register = () => {
         ))}
 
         <div className="rg-form-wrap">
+          {/* Header */}
           <div className="rg-form-header">
             <h1>Create your account ✨</h1>
             <p>Fill in the details below to get started</p>
           </div>
 
-          {/* ── Avatar Upload ── */}
+          {/* Avatar URL row */}
-          <AvatarUpload
+          <div className="rg-avatar-row">
-            avatarUrl={avatarUrl}
+            <div
-            onAvatarChange={setAvatarUrl}
+              className={`rg-avatar-ring ${avatarUrl && !avatarError ? "filled" : ""}`}
-            disabled={isLoading}
+            >
-          />
+              {avatarUrl && !avatarError ? (
+                <img
+                  src={avatarUrl}
+                  alt="Avatar"
+                  onError={() => setAvatarError(true)}
+                />
+              ) : (
+                <ImageIcon size={20} color="#d1d5db" />
+              )}
+            </div>
+            <div className="rg-avatar-input-col">
+              <span className="rg-avatar-label">
+                Avatar URL{" "}
+                <span
+                  style={{
+                    fontWeight: 600,
+                    textTransform: "none",
+                    letterSpacing: 0,
+                    color: "#c4b5fd",
+                    fontSize: "0.68rem",
+                  }}
+                >
+                  (optional)
+                </span>
+              </span>
+              <input
+                className="rg-avatar-input"
+                type="url"
+                placeholder="https://example.com/photo.jpg"
+                value={avatarUrl}
+                onChange={(e) => {
+                  setAvatarUrl(e.target.value);
+                  setAvatarError(false);
+                }}
+                disabled={isLoading}
+              />
+              <span className="rg-avatar-hint">
+                Paste any image URL to set your profile photo
+              </span>
+            </div>
+          </div>
 
           {/* Fields */}
           <div className="rg-fields">
+            {/* Name + Email row */}
             <div className="rg-row">
               <div className="rg-field">
                 <label className="rg-label" htmlFor="name">
@@ -937,6 +704,7 @@ export const Register = () => {
               </div>
             </div>
 
+            {/* Email */}
             <div className="rg-field">
               <label className="rg-label" htmlFor="email">
                 Email
@@ -955,6 +723,7 @@ export const Register = () => {
               </div>
             </div>
 
+            {/* Password */}
             <div className="rg-field">
               <label className="rg-label" htmlFor="password">
                 Password
@@ -988,12 +757,14 @@ export const Register = () => {
               )}
             </div>
 
+            {/* Error */}
             {error && (
               <div className="rg-error">
                 <span>⚠️</span> {error}
               </div>
             )}
 
+            {/* Submit */}
             <button
               className="rg-btn"
               onClick={handleSubmit}
@@ -1001,7 +772,8 @@ export const Register = () => {
             >
               {isLoading ? (
                 <>
-                  <Loader2 size={18} className="rg-spinner" /> Creating account…
+                  <Loader2 size={18} className="rg-spinner" /> Creating
+                  account...
                 </>
               ) : (
                 "Create Account →"

src/pages/student/Practice.tsx

@@ -1,4 +1,12 @@
-import { DraftingCompass, FileText, Target, Trophy, Zap } from "lucide-react";
+import {
+  BookOpen,
+  Clock,
+  DraftingCompass,
+  Loader2,
+  Target,
+  Trophy,
+  Zap,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { InfoHeader } from "../../components/InfoHeader";
 
@@ -18,13 +26,13 @@ const STYLES = `
 
   .pr-screen {
     min-height: 100vh;
-    padding-bottom: 40px;
     background: #fffbf4;
     font-family: 'Nunito', sans-serif;
     position: relative;
     overflow-x: hidden;
   }
 
+  /* On desktop, account for sidebar */
   @media (min-width: 768px) {
     .pr-screen {
       padding-left: calc(17rem + 1.25rem);
@@ -62,9 +70,10 @@ const STYLES = `
     display: flex; flex-direction: column; gap: 1.5rem;
   }
 
+  /* Desktop / wide layout */
   @media (min-width: 900px) {
     .pr-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
-    .pr-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; }
+    .pr-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
 
     .pr-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
     .pr-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
@@ -86,6 +95,29 @@ const STYLES = `
   .pr-anim-3 { animation-delay: 0.15s; }
   .pr-anim-4 { animation-delay: 0.2s; }
 
+  /* ── Header ── */
+  .pr-header {
+    display: flex; align-items: center; justify-content: space-between;
+    animation: prPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
+  }
+  .pr-logo-btn {
+    width: 44px; height: 44px; border-radius: 14px;
+    background: linear-gradient(135deg, #a855f7, #7c3aed);
+    display: flex; align-items: center; justify-content: center;
+    box-shadow: 0 4px 0 #5b21b644;
+  }
+  .pr-xp-chip {
+    display: flex; align-items: center; gap: 0.5rem;
+    background: white; border: 2.5px solid #e9d5ff;
+    border-radius: 100px; padding: 0.45rem 1rem;
+    font-size: 0.85rem; font-weight: 800; color: #7c3aed;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
+  }
+  .pr-xp-dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: linear-gradient(135deg, #a855f7, #7c3aed);
+  }
+
   /* ── Hero banner ── */
   .pr-hero {
     border-radius: 24px;
@@ -143,15 +175,15 @@ const STYLES = `
   /* ── Mode card ── */
   .pr-mode-card {
     background: white; border: 2.5px solid #f3f4f6; border-radius: 22px;
-    padding: 0;
+    padding: 1.1rem 1.25rem;
     box-shadow: 0 4px 14px rgba(0,0,0,0.04);
-    cursor: pointer; display: flex; flex-direction: column;
+    cursor: pointer; display: flex; flex-direction: column; gap: 0.85rem;
     transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
     position: relative; overflow: hidden;
   }
   .pr-mode-card:hover  {
-    transform: translateY(-4px);
+    transform: translateY(-3px);
-    box-shadow: 0 14px 32px rgba(0,0,0,0.1);
+    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
   }
   .pr-mode-card:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,0,0,0.06); }
 
@@ -161,455 +193,71 @@ const STYLES = `
   .pr-mode-card.cyan:hover   { border-color: #67e8f9; }
   .pr-mode-card.lime   { border-color: #d9f99d; }
   .pr-mode-card.lime:hover   { border-color: #bef264; }
-  .pr-mode-card.amber  { border-color: #fde68a; }
-  .pr-mode-card.amber:hover  { border-color: #fcd34d; }
-
-  /* Illustration strip at top of card */
-  .pr-card-illo {
-    width: 100%;
-    height: 110px;
-    position: relative;
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-  .pr-card-illo svg {
-    width: 100%;
-    height: 100%;
-  }
-
-  /* Card body below illustration */
-  .pr-card-body {
-    padding: 1rem 1.1rem 1rem;
-    display: flex; flex-direction: column; gap: 0.6rem;
-    flex: 1;
-  }
 
   .pr-mode-top {
-    display: flex; align-items: center; gap: 0.6rem;
+    display: flex; align-items: flex-start; justify-content: space-between;
   }
   .pr-mode-icon {
-    width: 36px; height: 36px; border-radius: 12px;
+    width: 44px; height: 44px; border-radius: 14px;
     display: flex; align-items: center; justify-content: center;
-    flex-shrink: 0;
   }
-  .pr-mode-icon.red  { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 3px 0 #b91c1c44; }
+  .pr-mode-icon.red  { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 4px 0 #b91c1c44; }
-  .pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 3px 0 #0e7490aa; }
+  .pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 4px 0 #0e7490aa; }
-  .pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 3px 0 #4d7c0f44; }
+  .pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 4px 0 #4d7c0f44; }
-  .pr-mode-icon.amber{ background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 3px 0 #92400e44; }
+
+  .pr-mode-badge {
+    width: 36px; height: 36px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .pr-mode-badge.red  { background: #fff5f5; }
+  .pr-mode-badge.cyan { background: #ecfeff; }
+  .pr-mode-badge.lime { background: #f7ffe4; }
 
   .pr-mode-title {
-    font-size: 0.95rem; font-weight: 900; color: #1e1b4b;
+    font-size: 1rem; font-weight: 900; color: #1e1b4b;
   }
   .pr-mode-desc {
     font-family: 'Nunito Sans', sans-serif;
-    font-size: 0.76rem; font-weight: 600; color: #9ca3af;
+    font-size: 0.78rem; font-weight: 600; color: #9ca3af;
-    line-height: 1.4;
   }
   .pr-mode-arrow {
     font-size: 0.75rem; font-weight: 800; margin-top: auto;
     display: flex; align-items: center; gap: 0.25rem;
     transition: gap 0.2s ease;
-    padding-top: 0.25rem;
   }
   .pr-mode-card:hover .pr-mode-arrow { gap: 0.5rem; }
   .pr-mode-arrow.red  { color: #ef4444; }
   .pr-mode-arrow.cyan { color: #06b6d4; }
   .pr-mode-arrow.lime { color: #84cc16; }
-  .pr-mode-arrow.amber{ color: #f59e0b; }
-
-  /* Wiggle on hover for illustration elements */
-  .pr-mode-card:hover .illo-wiggle {
-    animation: illoWiggle 0.5s ease;
-  }
-  @keyframes illoWiggle {
-    0%,100%{transform:rotate(0deg);}
-    25%{transform:rotate(-5deg);}
-    75%{transform:rotate(5deg);}
-  }
 `;
 
-/* ── SVG Illustrations for each card ── */
-
-const IlloTargeted = () => (
-  <svg
-    viewBox="0 0 260 110"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    preserveAspectRatio="xMidYMid slice"
-  >
-    <rect width="260" height="110" fill="#fff5f5" />
-    {/* soft bg circles */}
-    <circle cx="200" cy="55" r="70" fill="#fee2e2" opacity="0.6" />
-    <circle cx="220" cy="30" r="30" fill="#fecaca" opacity="0.4" />
-    {/* Target rings */}
-    <circle
-      cx="195"
-      cy="58"
-      r="44"
-      stroke="#fca5a5"
-      strokeWidth="2.5"
-      fill="none"
-    />
-    <circle
-      cx="195"
-      cy="58"
-      r="30"
-      stroke="#f87171"
-      strokeWidth="2.5"
-      fill="none"
-    />
-    <circle cx="195" cy="58" r="16" fill="#ef4444" opacity="0.9" />
-    <circle cx="195" cy="58" r="6" fill="white" />
-    {/* Arrow hitting bullseye */}
-    <line
-      x1="130"
-      y1="20"
-      x2="187"
-      y2="56"
-      stroke="#dc2626"
-      strokeWidth="3"
-      strokeLinecap="round"
-    />
-    <polygon points="187,56 178,46 192,49" fill="#dc2626" />
-    {/* Arrow fletching */}
-    <line
-      x1="130"
-      y1="20"
-      x2="120"
-      y2="12"
-      stroke="#dc2626"
-      strokeWidth="2"
-      strokeLinecap="round"
-    />
-    <line
-      x1="130"
-      y1="20"
-      x2="122"
-      y2="25"
-      stroke="#dc2626"
-      strokeWidth="2"
-      strokeLinecap="round"
-    />
-    {/* Sparkles */}
-    <circle cx="60" cy="35" r="4" fill="#fbbf24" opacity="0.7" />
-    <circle cx="80" cy="70" r="3" fill="#f87171" opacity="0.5" />
-    <circle cx="45" cy="75" r="5" fill="#fca5a5" opacity="0.4" />
-    <path d="M50 30 l3 -8 l3 8 l-6 0Z" fill="#ef4444" opacity="0.4" />
-    <path d="M100 80 l2 -6 l2 6 l-4 0Z" fill="#fca5a5" opacity="0.5" />
-  </svg>
-);
-
-const IlloDrills = () => (
-  <svg
-    viewBox="0 0 260 110"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    preserveAspectRatio="xMidYMid slice"
-  >
-    <rect width="260" height="110" fill="#ecfeff" />
-    <circle cx="50" cy="55" r="65" fill="#cffafe" opacity="0.5" />
-    <circle cx="25" cy="25" r="28" fill="#a5f3fc" opacity="0.35" />
-    {/* Stopwatch body */}
-    <circle
-      cx="70"
-      cy="62"
-      r="36"
-      fill="white"
-      stroke="#22d3ee"
-      strokeWidth="3"
-    />
-    <circle
-      cx="70"
-      cy="62"
-      r="28"
-      fill="#ecfeff"
-      stroke="#67e8f9"
-      strokeWidth="1.5"
-    />
-    {/* Clock hands */}
-    <line
-      x1="70"
-      y1="62"
-      x2="70"
-      y2="40"
-      stroke="#06b6d4"
-      strokeWidth="3"
-      strokeLinecap="round"
-    />
-    <line
-      x1="70"
-      y1="62"
-      x2="88"
-      y2="70"
-      stroke="#0891b2"
-      strokeWidth="2.5"
-      strokeLinecap="round"
-    />
-    <circle cx="70" cy="62" r="3.5" fill="#0891b2" />
-    {/* Crown / button */}
-    <rect x="64" y="22" width="12" height="6" rx="3" fill="#22d3ee" />
-    <rect x="56" y="18" width="8" height="5" rx="2.5" fill="#06b6d4" />
-    {/* Lightning bolts (speed) */}
-    <path
-      d="M148 20 l-10 22 h10 l-10 22"
-      stroke="#f59e0b"
-      strokeWidth="3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-    />
-    <path
-      d="M170 30 l-8 18 h8 l-8 18"
-      stroke="#fbbf24"
-      strokeWidth="2.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      opacity="0.7"
-    />
-    <path
-      d="M192 38 l-6 14 h6 l-6 14"
-      stroke="#fcd34d"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      opacity="0.5"
-    />
-    {/* Speed lines */}
-    <line
-      x1="115"
-      y1="52"
-      x2="140"
-      y2="52"
-      stroke="#22d3ee"
-      strokeWidth="2"
-      strokeLinecap="round"
-      opacity="0.5"
-    />
-    <line
-      x1="120"
-      y1="62"
-      x2="138"
-      y2="62"
-      stroke="#22d3ee"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      opacity="0.35"
-    />
-    <line
-      x1="118"
-      y1="72"
-      x2="136"
-      y2="72"
-      stroke="#22d3ee"
-      strokeWidth="1"
-      strokeLinecap="round"
-      opacity="0.25"
-    />
-    {/* dots */}
-    <circle cx="220" cy="28" r="5" fill="#22d3ee" opacity="0.4" />
-    <circle cx="240" cy="75" r="4" fill="#06b6d4" opacity="0.3" />
-    <circle cx="210" cy="88" r="3" fill="#67e8f9" opacity="0.4" />
-  </svg>
-);
-
-const IlloHard = () => (
-  <svg
-    viewBox="0 0 260 110"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    preserveAspectRatio="xMidYMid slice"
-  >
-    <rect width="260" height="110" fill="#f7ffe4" />
-    <circle cx="210" cy="55" r="70" fill="#d9f99d" opacity="0.5" />
-    <circle cx="230" cy="20" r="30" fill="#bef264" opacity="0.3" />
-    {/* Trophy */}
-    <rect x="168" y="78" width="44" height="8" rx="4" fill="#84cc16" />
-    <rect x="182" y="68" width="16" height="12" rx="2" fill="#a3e635" />
-    <path
-      d="M163 28 h54 v28 a27 27 0 0 1 -54 0 Z"
-      fill="white"
-      stroke="#84cc16"
-      strokeWidth="2.5"
-    />
-    <path
-      d="M163 38 Q148 38 148 52 Q148 63 163 63"
-      stroke="#a3e635"
-      strokeWidth="2.5"
-      fill="none"
-      strokeLinecap="round"
-    />
-    <path
-      d="M217 38 Q232 38 232 52 Q232 63 217 63"
-      stroke="#a3e635"
-      strokeWidth="2.5"
-      fill="none"
-      strokeLinecap="round"
-    />
-    {/* Star inside trophy */}
-    <path
-      d="M190 38 l3 9 h9 l-7 5 3 9 -8 -6 -8 6 3 -9 -7 -5 h9 Z"
-      fill="#fbbf24"
-    />
-    {/* Mountain / difficulty hills */}
-    <path d="M20 90 L55 35 L90 90Z" fill="#86efac" opacity="0.7" />
-    <path d="M60 90 L95 50 L130 90Z" fill="#4ade80" opacity="0.5" />
-    <path d="M85 90 L120 40 L155 90Z" fill="#22c55e" opacity="0.35" />
-    {/* flag on tallest */}
-    <line
-      x1="120"
-      y1="40"
-      x2="120"
-      y2="22"
-      stroke="#16a34a"
-      strokeWidth="2"
-      strokeLinecap="round"
-    />
-    <path d="M120 22 l12 5 l-12 5 Z" fill="#16a34a" />
-    {/* sparkles */}
-    <path
-      d="M30 28 l2 -5 l2 5 l5 2 l-5 2 l-2 5 l-2 -5 l-5 -2 Z"
-      fill="#fbbf24"
-      opacity="0.6"
-    />
-    <path
-      d="M240 88 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
-      fill="#a3e635"
-      opacity="0.5"
-    />
-  </svg>
-);
-
-const IlloSheet = () => (
-  <svg
-    viewBox="0 0 260 110"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    preserveAspectRatio="xMidYMid slice"
-  >
-    <rect width="260" height="110" fill="#fffbeb" />
-    <circle cx="55" cy="55" r="65" fill="#fef3c7" opacity="0.6" />
-    <circle cx="30" cy="80" r="30" fill="#fde68a" opacity="0.35" />
-    {/* Paper sheet */}
-    <rect
-      x="30"
-      y="18"
-      width="72"
-      height="82"
-      rx="8"
-      fill="white"
-      stroke="#fcd34d"
-      strokeWidth="2.5"
-    />
-    {/* Folded corner */}
-    <path d="M82 18 L102 38 L82 38 Z" fill="#fde68a" />
-    <path d="M82 18 L102 38" stroke="#fcd34d" strokeWidth="2" />
-    {/* Lines on paper */}
-    <line
-      x1="42"
-      y1="50"
-      x2="84"
-      y2="50"
-      stroke="#e5e7eb"
-      strokeWidth="2"
-      strokeLinecap="round"
-    />
-    <line
-      x1="42"
-      y1="60"
-      x2="90"
-      y2="60"
-      stroke="#e5e7eb"
-      strokeWidth="2"
-      strokeLinecap="round"
-    />
-    <line
-      x1="42"
-      y1="70"
-      x2="78"
-      y2="70"
-      stroke="#e5e7eb"
-      strokeWidth="2"
-      strokeLinecap="round"
-    />
-    <line
-      x1="42"
-      y1="80"
-      x2="86"
-      y2="80"
-      stroke="#e5e7eb"
-      strokeWidth="2"
-      strokeLinecap="round"
-    />
-    {/* Checkmark on first line */}
-    <path
-      d="M42 42 l5 5 l9 -9"
-      stroke="#22c55e"
-      strokeWidth="2.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-    />
-    {/* Pencil */}
-    <g transform="rotate(-35 155 55)">
-      <rect x="138" y="28" width="14" height="52" rx="3" fill="#fbbf24" />
-      <path d="M138 76 L145 90 L152 76 Z" fill="#f97316" />
-      <rect x="138" y="28" width="14" height="10" rx="3" fill="#9ca3af" />
-      <rect x="140" y="30" width="10" height="6" rx="2" fill="#d1d5db" />
-    </g>
-    {/* Stars / highlights */}
-    <path
-      d="M200 22 l2 -6 l2 6 l6 2 l-6 2 l-2 6 l-2 -6 l-6 -2 Z"
-      fill="#f59e0b"
-      opacity="0.7"
-    />
-    <path
-      d="M230 65 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
-      fill="#fbbf24"
-      opacity="0.5"
-    />
-    <circle cx="215" cy="88" r="4" fill="#fcd34d" opacity="0.4" />
-    <circle cx="240" cy="35" r="3" fill="#fbbf24" opacity="0.35" />
-  </svg>
-);
-
 const MODE_CARDS = [
   {
     color: "red",
-    icon: <Target size={18} color="white" />,
+    icon: <Target size={20} color="white" />,
+    badge: <Loader2 size={22} color="#ef4444" />,
     title: "Targeted Practice",
     desc: "Focus on your weak spots and improve fast",
     route: "/student/practice/targeted-practice",
     arrow: "Practice →",
-    Illo: IlloTargeted,
   },
   {
     color: "cyan",
-    icon: <Zap size={18} color="white" />,
+    icon: <Zap size={20} color="white" />,
+    badge: <Clock size={22} color="#06b6d4" />,
     title: "Drills",
     desc: "Train speed and accuracy under pressure",
     route: "/student/practice/drills",
     arrow: "Drill →",
-    Illo: IlloDrills,
   },
   {
     color: "lime",
-    icon: <Trophy size={18} color="white" />,
+    icon: <Trophy size={20} color="white" />,
+    badge: <BookOpen size={22} color="#84cc16" />,
     title: "Hard Modules",
     desc: "Push yourself with the toughest questions",
     route: "/student/practice/hard-test-modules",
     arrow: "Challenge →",
-    Illo: IlloHard,
-  },
-  {
-    color: "amber",
-    icon: <FileText size={18} color="white" />,
-    title: "Practice Sheet",
-    desc: "Work through curated question sets at your own pace",
-    route: "/student/practice/practice-sheet",
-    arrow: "Start Sheet →",
-    Illo: IlloSheet,
   },
 ] as const;
 
@@ -649,7 +297,6 @@ export const Practice = () => {
       <div className="pr-inner">
         {/* ── Header ── */}
         <InfoHeader mode="LEVEL" />
-
         {/* ── Hero banner ── */}
         <div className="pr-hero pr-anim pr-anim-1">
           <div className="pr-hero-icon-bg">
@@ -660,12 +307,7 @@ export const Practice = () => {
           <p className="pr-hero-sub">
             Take a full adaptive test and benchmark your SAT readiness.
           </p>
-          <button
+          <button className="pr-hero-btn">Take a practice test →</button>
-            onClick={() => navigate("/student/practice/practice-sheet")}
-            className="pr-hero-btn"
-          >
-            Take a practice test →
-          </button>
         </div>
 
         {/* ── Practice modes ── */}
@@ -680,22 +322,19 @@ export const Practice = () => {
                 className={`pr-mode-card ${card.color}`}
                 onClick={() => navigate(card.route)}
               >
-                {/* Illustration */}
+                <div className="pr-mode-top">
-                <div className="pr-card-illo">
+                  <div className={`pr-mode-icon ${card.color}`}>
-                  <card.Illo />
+                    {card.icon}
-                </div>
+                  </div>
-
+                  <div className={`pr-mode-badge ${card.color}`}>
-                {/* Body */}
+                    {card.badge}
-                <div className="pr-card-body">
-                  <div className="pr-mode-top">
-                    <div className={`pr-mode-icon ${card.color}`}>
-                      {card.icon}
-                    </div>
-                    <p className="pr-mode-title">{card.title}</p>
                   </div>
-                  <p className="pr-mode-desc">{card.desc}</p>
-                  <p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
                 </div>
+                <div>
+                  <p className="pr-mode-title">{card.title}</p>
+                  <p className="pr-mode-desc">{card.desc}</p>
+                </div>
+                <p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
               </div>
             ))}
           </div>

src/pages/student/QuestMap.tsx

@@ -12,7 +12,7 @@ import { ChestOpenModal } from "../../components/ChestOpenModal";
 import { InfoHeader } from "../../components/InfoHeader";
 import { Canvas, useThree, useFrame } from "@react-three/fiber";
 import { Island3D } from "../../components/Island3D";
-import { OrbitControls, Stars } from "@react-three/drei";
+import { Billboard, OrbitControls, Stars, Text } from "@react-three/drei";
 import * as THREE from "three";
 
 // ─── Map geometry ─────────────────────────────────────────────────────────────
@@ -860,6 +860,11 @@ const RouteSegment = ({
       {/* Travelling ship on the active leg */}
       {isActive && !isDone && (
         <group ref={shipRef}>
+          <Billboard>
+            <Text fontSize={0.3} anchorX="center" anchorY="middle">
+              ⛵
+            </Text>
+          </Billboard>
           {/* Gold wake glow disk */}
           <mesh rotation-x={-Math.PI / 2} position-y={0.04}>
             <circleGeometry args={[0.19, 16]} />

src/pages/student/practice/Test.tsx

@@ -1170,7 +1170,6 @@ export const Test = () => {
   const handleQuitExam = () => {
     useExamConfigStore.getState().clearPayload();
     quitExam();
-    navigate("/student/home", { replace: true });
   };
 
   const toggleEliminate = (questionId: string, optionId: string) => {
@@ -1704,15 +1703,16 @@ export const Test = () => {
                           </p>
                         </div>
                       )}
-                      {currentQuestion?.context_image_url && (
+                      {currentQuestion?.context_image_url &&
-                        <div className="t-card p-6">
+                        currentQuestion.context_image_url !== "NULL" && (
-                          <img
+                          <div className="t-card p-6">
-                            src={currentQuestion.context_image_url}
+                            <img
-                            alt="Question context"
+                              src="https://placehold.co/600x400"
-                            className="w-full h-auto rounded-xl"
+                              alt="Question context"
-                          />
+                              className="w-full h-auto rounded-xl"
-                        </div>
+                            />
-                      )}
+                          </div>
+                        )}
                       <div className="t-card t-card-purple p-6">
                         <p className="font-bold text-lg text-[#1e1b4b] leading-relaxed">
                           {currentQuestion?.text &&
@@ -1755,24 +1755,26 @@ export const Test = () => {
                       </div>
                     ) : (
                       <>
-                        {currentQuestion?.context_image_url && (
+                        {currentQuestion?.context_image_url &&
-                          <div className="t-card p-6">
+                          currentQuestion.context_image_url !== "NULL" && (
-                            <img
+                            <div className="t-card p-6">
-                              src={currentQuestion.context_image_url}
+                              <img
-                              alt="Question context"
+                                src="https://placehold.co/600x400"
-                              className="w-full h-auto rounded-xl"
+                                alt="Question context"
-                            />
+                                className="w-full h-auto rounded-xl"
-                          </div>
+                              />
-                        )}
+                            </div>
-                        {currentQuestion?.context && (
+                          )}
-                          <div className="t-card p-6">
+                        {currentQuestion?.context &&
-                            <HighlightableRichText
+                          currentQuestion.context !== "NULL" && (
-                              fieldKey={`${currentQuestion?.id ?? "unknown"}:context`}
+                            <div className="t-card p-6">
-                              text={currentQuestion.context}
+                              <HighlightableRichText
-                              className="font-semibold text-gray-700 leading-relaxed"
+                                fieldKey={`${currentQuestion?.id ?? "unknown"}:context`}
-                            />
+                                text={currentQuestion.context}
-                          </div>
+                                className="font-semibold text-gray-700 leading-relaxed"
-                        )}
+                              />
+                            </div>
+                          )}
                       </>
                     )}
                   </div>

src/utils/api.ts

@@ -284,38 +284,5 @@ class ApiClient {
       body: JSON.stringify(titleData),
     });
   }
-
-  /*------------UPLOADS-------------- */
-  // token is optional — the /uploads/ endpoint appears to be public
-  // (no Authorization header in the curl example). Pass a token if needed.
-  async uploadAvatar(file: File, token?: string): Promise<string> {
-    const formData = new FormData();
-    formData.append("file", file);
-
-    const headers: HeadersInit = { accept: "application/json" };
-    if (token) headers["Authorization"] = `Bearer ${token}`;
-    // Note: Do NOT set Content-Type manually — fetch sets it automatically
-    // with the correct multipart/form-data boundary when the body is FormData.
-
-    const url = `${this.baseURL}/uploads/`;
-    const response = await fetch(url, {
-      method: "POST",
-      headers,
-      body: formData,
-    });
-
-    if (!response.ok) {
-      const error: ApiError = await response.json().catch(() => ({
-        message: "Upload failed",
-      }));
-      throw new Error(error.detail || error.message || "Upload failed");
-    }
-
-    const data = await response.json();
-    // Adjust the field name below to match your API's response shape,
-    // e.g. data.url, data.file_url, data.avatar_url, etc.
-    return data.url as string;
-  }
 }
-
 export const api = new ApiClient(API_URL);

vite.config.ts

@@ -11,13 +11,4 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          troika: ["troika-three-text", "troika-worker-utils"],
-        },
-      },
-    },
-  },
 });