121 lines
4.3 KiB
TypeScript
121 lines
4.3 KiB
TypeScript
import {
|
|
BookOpen,
|
|
Clock,
|
|
DraftingCompass,
|
|
Loader2,
|
|
Target,
|
|
Trophy,
|
|
Zap,
|
|
} from "lucide-react";
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../../components/ui/card";
|
|
import { Button } from "../../components/ui/button";
|
|
|
|
export const Drills = () => {
|
|
return (
|
|
<main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
|
|
<header className="flex justify-between items-center">
|
|
<div className="w-fit bg-linear-to-br from-purple-500 to-purple-600 p-3 rounded-2xl">
|
|
<BookOpen size={20} color="white" />
|
|
</div>
|
|
<div className="bg-purple-100 rounded-full w-fit py-2 px-4 flex items-center gap-2">
|
|
<div className="h-2 w-2 bg-linear-to-br from-purple-400 to-purple-500 rounded-full"></div>
|
|
<span className="font-satoshi-bold text-md">0</span>
|
|
</div>
|
|
</header>
|
|
<section>
|
|
<Card
|
|
className="relative bg-linear-to-br from-purple-500 to-purple-600 rounded-4xl
|
|
flex-row"
|
|
>
|
|
<div className="space-y-4">
|
|
<CardHeader className="w-[65%]">
|
|
<CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
|
|
See where you stand
|
|
</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent className="w-2/3">
|
|
<p className="font-satoshi text-white">
|
|
Test your knowledge with an adaptive practice test.
|
|
</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="bg-gray-50 drop-shadow-xl p-6 text-md font-satoshi text-black rounded-full">
|
|
Take a practice test
|
|
</Button>
|
|
</CardFooter>
|
|
</div>
|
|
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-7 -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">
|
|
<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>
|
|
</CardAction>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card className="rounded-4xl">
|
|
<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>
|
|
</CardAction>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card className="rounded-4xl">
|
|
<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>
|
|
</section>
|
|
</main>
|
|
);
|
|
};
|