346 lines
12 KiB
TypeScript
346 lines
12 KiB
TypeScript
import {
|
|
BookOpen,
|
|
Clock,
|
|
DraftingCompass,
|
|
Loader2,
|
|
Target,
|
|
Trophy,
|
|
Zap,
|
|
} from "lucide-react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { InfoHeader } from "../../components/InfoHeader";
|
|
|
|
const DOTS = [
|
|
{ size: 10, color: "#f97316", top: "8%", left: "5%", delay: "0s" },
|
|
{ size: 7, color: "#a855f7", top: "30%", left: "2%", delay: "1.2s" },
|
|
{ size: 9, color: "#22c55e", top: "62%", left: "4%", delay: "0.6s" },
|
|
{ size: 12, color: "#3b82f6", top: "12%", right: "4%", delay: "1.8s" },
|
|
{ size: 7, color: "#f43f5e", top: "48%", right: "3%", delay: "0.9s" },
|
|
{ size: 9, color: "#eab308", top: "78%", right: "6%", delay: "0.4s" },
|
|
];
|
|
|
|
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');
|
|
|
|
:root { --content-max: 1100px; }
|
|
|
|
.pr-screen {
|
|
min-height: 100vh;
|
|
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);
|
|
}
|
|
}
|
|
|
|
/* ── Blobs ── */
|
|
.pr-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
|
|
.pr-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:prWobble1 14s ease-in-out infinite; }
|
|
.pr-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:prWobble2 16s ease-in-out infinite; }
|
|
.pr-blob-3 { width:210px;height:210px;background:#fbcfe8;top:15%;right:-60px;border-radius:70% 30% 50% 50%/40% 60% 40% 60%;animation:prWobble1 18s ease-in-out infinite reverse; }
|
|
.pr-blob-4 { width:150px;height:150px;background:#bfdbfe;bottom:12%;right:2%;border-radius:50% 50% 30% 70%/60% 40% 60% 40%;animation:prWobble2 12s ease-in-out infinite; }
|
|
|
|
@keyframes prWobble1 {
|
|
0%,100%{border-radius:60% 40% 70% 30%/50% 60% 40% 50%;transform:translate(0,0) rotate(0deg);}
|
|
50%{border-radius:40% 60% 30% 70%/60% 40% 60% 40%;transform:translate(12px,16px) rotate(8deg);}
|
|
}
|
|
@keyframes prWobble2 {
|
|
0%,100%{border-radius:40% 60% 30% 70%/60% 40% 60% 40%;transform:translate(0,0) rotate(0deg);}
|
|
50%{border-radius:60% 40% 70% 30%/40% 60% 40% 60%;transform:translate(-10px,12px) rotate(-6deg);}
|
|
}
|
|
|
|
/* ── Floating dots ── */
|
|
.pr-dot { position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:0.3;animation:prFloat 7s ease-in-out infinite; }
|
|
@keyframes prFloat {
|
|
0%,100%{transform:translateY(0) rotate(0deg);}
|
|
50%{transform:translateY(-12px) rotate(180deg);}
|
|
}
|
|
|
|
/* ── Inner container ── */
|
|
.pr-inner {
|
|
position: relative; z-index: 1;
|
|
max-width: 580px; margin: 0 auto;
|
|
padding: 2rem 1.25rem 4rem;
|
|
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-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; }
|
|
.pr-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 40px); top: 10%; width: 260px; height: 260px; }
|
|
.pr-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 10px); bottom: 6%; width: 180px; height: 180px; }
|
|
|
|
.pr-hero { padding: 2rem; }
|
|
.pr-hero-icon-bg { right: -60px; top: -40px; opacity: 0.12; }
|
|
}
|
|
|
|
/* ── Animations ── */
|
|
@keyframes prPopIn {
|
|
from { opacity:0; transform: scale(0.92) translateY(12px); }
|
|
to { opacity:1; transform: scale(1) translateY(0); }
|
|
}
|
|
.pr-anim { animation: prPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
|
|
.pr-anim-1 { animation-delay: 0.05s; }
|
|
.pr-anim-2 { animation-delay: 0.1s; }
|
|
.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;
|
|
background: linear-gradient(135deg, #7c3aed, #a855f7);
|
|
padding: 1.5rem;
|
|
position: relative; overflow: hidden;
|
|
box-shadow: 0 8px 0 #5b21b644, 0 12px 32px rgba(124,58,237,0.25);
|
|
display: flex; flex-direction: column; gap: 0.75rem;
|
|
}
|
|
.pr-hero-icon-bg {
|
|
position: absolute; right: -40px; top: -30px;
|
|
opacity: 0.15; transform: rotate(-30deg);
|
|
pointer-events: none;
|
|
}
|
|
.pr-hero-eyebrow {
|
|
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.16em;
|
|
text-transform: uppercase; color: #e9d5ff;
|
|
}
|
|
.pr-hero-title {
|
|
font-size: clamp(1.6rem, 5vw, 2rem); font-weight: 900;
|
|
color: white; letter-spacing: -0.02em; line-height: 1.15;
|
|
position: relative; z-index: 1;
|
|
}
|
|
.pr-hero-sub {
|
|
font-family: 'Nunito Sans', sans-serif;
|
|
font-size: 0.85rem; font-weight: 600; color: #ddd6fe;
|
|
position: relative; z-index: 1;
|
|
}
|
|
.pr-hero-btn {
|
|
display: inline-flex; align-items: center; gap: 0.4rem;
|
|
background: white; border: none; border-radius: 100px;
|
|
padding: 0.7rem 1.4rem; cursor: pointer;
|
|
font-family: 'Nunito', sans-serif; font-size: 0.88rem; font-weight: 800;
|
|
color: #7c3aed;
|
|
box-shadow: 0 4px 0 rgba(0,0,0,0.15);
|
|
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
|
width: fit-content; position: relative; z-index: 1;
|
|
}
|
|
.pr-hero-btn:hover { transform:translateY(-2px); box-shadow:0 6px 0 rgba(0,0,0,0.15); }
|
|
.pr-hero-btn:active { transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,0.15); }
|
|
|
|
/* ── Section title ── */
|
|
.pr-section-title {
|
|
font-size: 1.15rem; font-weight: 900; color: #1e1b4b;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* ── Practice mode grid ── */
|
|
.pr-grid {
|
|
display: grid; grid-template-columns: 1fr;
|
|
gap: 0.85rem;
|
|
}
|
|
@media(min-width: 480px){ .pr-grid { grid-template-columns: 1fr 1fr; } }
|
|
|
|
/* ── Mode card ── */
|
|
.pr-mode-card {
|
|
background: white; border: 2.5px solid #f3f4f6; border-radius: 22px;
|
|
padding: 1.1rem 1.25rem;
|
|
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
|
|
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(-3px);
|
|
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); }
|
|
|
|
.pr-mode-card.red { border-color: #fecaca; }
|
|
.pr-mode-card.red:hover { border-color: #fca5a5; }
|
|
.pr-mode-card.cyan { border-color: #a5f3fc; }
|
|
.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-top {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
}
|
|
.pr-mode-icon {
|
|
width: 44px; height: 44px; border-radius: 14px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.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-title {
|
|
font-size: 1rem; font-weight: 900; color: #1e1b4b;
|
|
}
|
|
.pr-mode-desc {
|
|
font-family: 'Nunito Sans', sans-serif;
|
|
font-size: 0.78rem; font-weight: 600; color: #9ca3af;
|
|
}
|
|
.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;
|
|
}
|
|
.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; }
|
|
`;
|
|
|
|
const MODE_CARDS = [
|
|
{
|
|
color: "red",
|
|
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 →",
|
|
},
|
|
{
|
|
color: "cyan",
|
|
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 →",
|
|
},
|
|
{
|
|
color: "lime",
|
|
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 →",
|
|
},
|
|
] as const;
|
|
|
|
export const Practice = () => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="pr-screen">
|
|
<style>{STYLES}</style>
|
|
|
|
{/* Blobs */}
|
|
<div className="pr-blob pr-blob-1" />
|
|
<div className="pr-blob pr-blob-2" />
|
|
<div className="pr-blob pr-blob-3" />
|
|
<div className="pr-blob pr-blob-4" />
|
|
|
|
{/* Dots */}
|
|
{DOTS.map((d, i) => (
|
|
<div
|
|
key={i}
|
|
className="pr-dot"
|
|
style={
|
|
{
|
|
width: d.size,
|
|
height: d.size,
|
|
background: d.color,
|
|
top: d.top,
|
|
left: d.left,
|
|
right: d.right,
|
|
animationDelay: d.delay,
|
|
animationDuration: `${5 + i * 0.5}s`,
|
|
} as React.CSSProperties
|
|
}
|
|
/>
|
|
))}
|
|
|
|
<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">
|
|
<DraftingCompass size={240} color="white" />
|
|
</div>
|
|
<p className="pr-hero-eyebrow">🎯 Full Practice Test</p>
|
|
<h2 className="pr-hero-title">See where you stand</h2>
|
|
<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>
|
|
</div>
|
|
|
|
{/* ── Practice modes ── */}
|
|
<section className="pr-anim pr-anim-2">
|
|
<p className="pr-section-title" style={{ marginBottom: "0.85rem" }}>
|
|
Practice your way
|
|
</p>
|
|
<div className="pr-grid">
|
|
{MODE_CARDS.map((card) => (
|
|
<div
|
|
key={card.route}
|
|
className={`pr-mode-card ${card.color}`}
|
|
onClick={() => navigate(card.route)}
|
|
>
|
|
<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-arrow ${card.color}`}>{card.arrow}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|