feat(pages): add drills page

src/pages/student/Drills.tsx

@@ -1,26 +1,117 @@
+import {
+  BookOpen,
+  Clock,
+  DraftingCompass,
+  Loader2,
+  Target,
+  Trophy,
+  Zap,
+} from "lucide-react";
 import { useAuthStore } from "../../stores/authStore";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import { Button } from "../../components/ui/button";
 
 export const Drills = () => {
   const user = useAuthStore((state) => state.user);
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="bg-white rounded-lg shadow p-6">
-          <h2 className="text-2xl font-bold text-gray-800 mb-4">Drills</h2>
-          <div className="space-y-2 text-gray-600">
-            <p>Email: {user?.email}</p>
-            <p>Role: {user?.role}</p>
-            <p>Status: {user?.status}</p>
-            <p>
-              Member since:{" "}
-              {user?.joined_at
-                ? new Date(user.joined_at).toLocaleDateString()
-                : "N/A"}
-            </p>
-          </div>
+    <main className="min-h-screen max-w-7xl mx-auto px-4 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>
-      </main>
-    </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-1/2">
+              <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-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">
+          <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>Targeted Practice</CardTitle>
+              <CardDescription>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>Drills</CardTitle>
+              <CardDescription>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>Hard Test Modules</CardTitle>
+              <CardDescription>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>
   );
 };