feat(exam): add SAT style testing component

This commit is contained in:
shafin-r
2026-01-28 15:22:19 +06:00
parent 61b7c5220e
commit 355ca0c0c4
17 changed files with 1136 additions and 267 deletions

View File

@ -36,13 +36,13 @@ export const Practice = () => {
flex-row"
>
<div className="space-y-4">
<CardHeader className="w-[65%]">
<CardHeader className="w-[65%] md:w-full">
<CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
See where you stand
</CardTitle>
</CardHeader>
<CardContent className="w-2/3">
<CardContent className="w-2/3 md:w-full">
<p className="font-satoshi text-white">
Test your knowledge with an adaptive practice test.
</p>
@ -53,67 +53,73 @@ export const Practice = () => {
</Button>
</CardFooter>
</div>
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-7 -right-20">
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-10 -right-20">
<DraftingCompass size={300} color="white" />
</div>
</Card>
</section>
<section className="flex flex-col gap-6">
<h1 className="font-satoshi-black text-2xl">Practice your way</h1>
<Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
<CardHeader className="space-y-3">
<div className="w-fit bg-linear-to-br from-red-400 to-red-500 p-3 rounded-2xl">
<Target size={20} color="white" />
</div>
<div className="space-y-2">
<CardTitle className="font-satoshi">Targeted Practice</CardTitle>
<CardDescription className="font-satoshi">
Focus on what matters
</CardDescription>
</div>
<CardAction>
<div className="w-fit bg-red-100 p-2 rounded-full">
<Loader2 size={30} color="#fa6969" />
<div className="md:grid md:grid-cols-2 md:gap-6 space-y-6 md:space-y-0">
<Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
<CardHeader className="space-y-3">
<div className="w-fit bg-linear-to-br from-red-400 to-red-500 p-3 rounded-2xl">
<Target size={20} color="white" />
</div>
</CardAction>
</CardHeader>
</Card>
<Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
<CardHeader className="space-y-3">
<div className="w-fit bg-linear-to-br from-cyan-400 to-cyan-500 p-3 rounded-2xl">
<Zap size={20} color="white" />
</div>
<div className="space-y-2">
<CardTitle className="font-satoshi">Drills</CardTitle>
<CardDescription className="font-satoshi">
Train speed and accuracy
</CardDescription>
</div>
<CardAction>
<div className="w-fit bg-cyan-100 p-3 rounded-full">
<Clock size={26} color="oklch(71.5% 0.143 215.221)" />
<div className="space-y-2">
<CardTitle className="font-satoshi">
Targeted Practice
</CardTitle>
<CardDescription className="font-satoshi">
Focus on what matters
</CardDescription>
</div>
</CardAction>
</CardHeader>
</Card>
<Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
<CardHeader className="space-y-3">
<div className="w-fit bg-linear-to-br from-lime-400 to-lime-500 p-3 rounded-2xl">
<Trophy size={20} color="white" />
</div>
<div className="space-y-2">
<CardTitle className="font-satoshi">Hard Test Modules</CardTitle>
<CardDescription className="font-satoshi">
Focus on what matters
</CardDescription>
</div>
<CardAction>
<div className="w-fit bg-lime-100 p-3 rounded-full">
<BookOpen size={26} color="oklch(76.8% 0.233 130.85)" />
<CardAction>
<div className="w-fit bg-red-100 p-2 rounded-full">
<Loader2 size={30} color="#fa6969" />
</div>
</CardAction>
</CardHeader>
</Card>
<Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
<CardHeader className="space-y-3">
<div className="w-fit bg-linear-to-br from-cyan-400 to-cyan-500 p-3 rounded-2xl">
<Zap size={20} color="white" />
</div>
</CardAction>
</CardHeader>
</Card>
<div className="space-y-2">
<CardTitle className="font-satoshi">Drills</CardTitle>
<CardDescription className="font-satoshi">
Train speed and accuracy
</CardDescription>
</div>
<CardAction>
<div className="w-fit bg-cyan-100 p-3 rounded-full">
<Clock size={26} color="oklch(71.5% 0.143 215.221)" />
</div>
</CardAction>
</CardHeader>
</Card>
<Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
<CardHeader className="space-y-3">
<div className="w-fit bg-linear-to-br from-lime-400 to-lime-500 p-3 rounded-2xl">
<Trophy size={20} color="white" />
</div>
<div className="space-y-2">
<CardTitle className="font-satoshi">
Hard Test Modules
</CardTitle>
<CardDescription className="font-satoshi">
Focus on what matters
</CardDescription>
</div>
<CardAction>
<div className="w-fit bg-lime-100 p-3 rounded-full">
<BookOpen size={26} color="oklch(76.8% 0.233 130.85)" />
</div>
</CardAction>
</CardHeader>
</Card>
</div>
</section>
</main>
);