feat(targeted): add targeted practice functionality

feat(analytics); add analytics page

src/pages/student/Analytics.tsx

@@ -0,0 +1,71 @@
+import { List, SquarePen, DecimalsArrowRight, MapPin } from "lucide-react";
+import { Progress } from "../../components/ui/progress";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+} from "../../components/ui/card";
+import { Field, FieldLabel } from "../../components/ui/field";
+import { CircularProgress } from "../../components/CircularProgress";
+
+export const Analytics = () => {
+  return (
+    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
+      <h1 className="font-satoshi-bold text-3xl text-center tracking-tight">
+        Analytics
+      </h1>
+      <section className="flex w-full gap-3 justify-between">
+        <Card className="w-1/3 relative bg-linear-to-br from-purple-600 to-purple-700 rounded-4xl">
+          <div className="space-y-4">
+            <CardContent className="md:w-full space-y-4 flex flex-col items-center justify-center h-50">
+              <MapPin size={60} color="white" />
+              <h1 className="text-4xl font-satoshi-bold text-white flex">
+                <span>145</span> <span className="text-xl">th</span>
+              </h1>
+            </CardContent>
+          </div>
+          <div className="overflow-hidden opacity-0 -rotate-45 absolute -top-2 -right-30 ">
+            <DecimalsArrowRight size={380} color="white" />
+          </div>
+        </Card>
+        <Card
+          className="w-2/3 relative bg-linear-to-br from-gray-100 to-gray-300 rounded-4xl
+        flex-row"
+        >
+          <div className="space-y-4">
+            <CardHeader className="md:w-full">
+              <CardTitle className="font-satoshi-bold tracking-tight text-3xl ">
+                Details
+              </CardTitle>
+            </CardHeader>
+
+            <CardContent className="md:w-full space-y-4"></CardContent>
+            <CardFooter className="flex justify-between"></CardFooter>
+          </div>
+          <div className="overflow-hidden opacity-30 -rotate-45 absolute -top-2 -right-30 ">
+            <DecimalsArrowRight size={380} color="white" />
+          </div>
+        </Card>
+      </section>
+      <section>
+        <Card>
+          <CardContent>
+            <Field className="w-full max-w-sm">
+              <FieldLabel htmlFor="progress-upload">
+                <span className="font-satoshi text-xl">Score</span>
+                <span className="ml-auto font-satoshi">
+                  <span className="text-5xl">854</span>
+                  <span className="text-lg">/1600</span>
+                </span>
+              </FieldLabel>
+              <Progress value={55} id="progress-upload" max={100} />
+            </Field>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  );
+};