feat(practice-sheet): add practice sheet page #9
@ -21,6 +21,7 @@ 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([
|
||||
@ -80,6 +81,10 @@ function App() {
|
||||
path: "practice/hard-test-modules",
|
||||
element: <HardTestModules />,
|
||||
},
|
||||
{
|
||||
path: "practice/practice-sheet",
|
||||
element: <PracticeSheetList />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -19,6 +19,7 @@ import {
|
||||
Trophy,
|
||||
Map,
|
||||
SquareLibrary,
|
||||
ListIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
import { useState } from "react";
|
||||
@ -362,6 +363,7 @@ export function AppSidebar() {
|
||||
/>
|
||||
<span>Targeted Practice</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink
|
||||
to="/student/practice/drills"
|
||||
className={({ isActive }) =>
|
||||
@ -396,6 +398,23 @@ 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>
|
||||
|
||||
@ -1,12 +1,4 @@
|
||||
import {
|
||||
BookOpen,
|
||||
Clock,
|
||||
DraftingCompass,
|
||||
Loader2,
|
||||
Target,
|
||||
Trophy,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { DraftingCompass, FileText, Target, Trophy, Zap } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { InfoHeader } from "../../components/InfoHeader";
|
||||
|
||||
@ -26,13 +18,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);
|
||||
@ -70,10 +62,9 @@ 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(3, 1fr); gap: 1rem; }
|
||||
.pr-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; }
|
||||
|
||||
.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; }
|
||||
@ -95,29 +86,6 @@ 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;
|
||||
@ -175,15 +143,15 @@ const STYLES = `
|
||||
/* ── Mode card ── */
|
||||
.pr-mode-card {
|
||||
background: white; border: 2.5px solid #f3f4f6; border-radius: 22px;
|
||||
padding: 1.1rem 1.25rem;
|
||||
padding: 0;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
|
||||
cursor: pointer; display: flex; flex-direction: column; gap: 0.85rem;
|
||||
cursor: pointer; display: flex; flex-direction: column;
|
||||
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(-3px);
|
||||
box-shadow: 0 10px 24px rgba(0,0,0,0.08);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 14px 32px rgba(0,0,0,0.1);
|
||||
}
|
||||
.pr-mode-card:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,0,0,0.06); }
|
||||
|
||||
@ -193,71 +161,455 @@ 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: flex-start; justify-content: space-between;
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
}
|
||||
.pr-mode-icon {
|
||||
width: 44px; height: 44px; border-radius: 14px;
|
||||
width: 36px; height: 36px; border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.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 4px 0 #0e7490aa; }
|
||||
.pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 4px 0 #4d7c0f44; }
|
||||
|
||||
.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-icon.red { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 3px 0 #b91c1c44; }
|
||||
.pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 3px 0 #0e7490aa; }
|
||||
.pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 3px 0 #4d7c0f44; }
|
||||
.pr-mode-icon.amber{ background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 3px 0 #92400e44; }
|
||||
|
||||
.pr-mode-title {
|
||||
font-size: 1rem; font-weight: 900; color: #1e1b4b;
|
||||
font-size: 0.95rem; font-weight: 900; color: #1e1b4b;
|
||||
}
|
||||
.pr-mode-desc {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.78rem; font-weight: 600; color: #9ca3af;
|
||||
font-size: 0.76rem; 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={20} color="white" />,
|
||||
badge: <Loader2 size={22} color="#ef4444" />,
|
||||
icon: <Target size={18} color="white" />,
|
||||
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={20} color="white" />,
|
||||
badge: <Clock size={22} color="#06b6d4" />,
|
||||
icon: <Zap size={18} color="white" />,
|
||||
title: "Drills",
|
||||
desc: "Train speed and accuracy under pressure",
|
||||
route: "/student/practice/drills",
|
||||
arrow: "Drill →",
|
||||
Illo: IlloDrills,
|
||||
},
|
||||
{
|
||||
color: "lime",
|
||||
icon: <Trophy size={20} color="white" />,
|
||||
badge: <BookOpen size={22} color="#84cc16" />,
|
||||
icon: <Trophy size={18} color="white" />,
|
||||
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;
|
||||
|
||||
@ -297,6 +649,7 @@ 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">
|
||||
@ -307,7 +660,12 @@ export const Practice = () => {
|
||||
<p className="pr-hero-sub">
|
||||
Take a full adaptive test and benchmark your SAT readiness.
|
||||
</p>
|
||||
<button className="pr-hero-btn">Take a practice test →</button>
|
||||
<button
|
||||
onClick={() => navigate("/student/practice/practice-sheet")}
|
||||
className="pr-hero-btn"
|
||||
>
|
||||
Take a practice test →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Practice modes ── */}
|
||||
@ -322,20 +680,23 @@ 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>
|
||||
<p className="pr-mode-desc">{card.desc}</p>
|
||||
</div>
|
||||
<p className="pr-mode-desc">{card.desc}</p>
|
||||
<p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
1009
src/pages/student/practice-sheet/page.tsx
Normal file
1009
src/pages/student/practice-sheet/page.tsx
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user