feat(pages): add pretest screen

src/pages/student/Practice.tsx

@@ -0,0 +1,120 @@
+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 Practice = () => {
+  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 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>
+            </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>
+            </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>
+      </section>
+    </main>
+  );
+};