Merge pull request 'fix(test): fix context image url path' (#6) from web into main

Reviewed-on: #6

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/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-card-illo">
-                  <card.Illo />
-                </div>
-
-                {/* Body */}
-                <div className="pr-card-body">
                 <div className="pr-mode-top">
                   <div className={`pr-mode-icon ${card.color}`}>
                     {card.icon}
                   </div>
+                  <div className={`pr-mode-badge ${card.color}`}>
+                    {card.badge}
+                  </div>
+                </div>
+                <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>
+                <p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
               </div>
             ))}
           </div>

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) => {

vite.config.ts

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