feat(pages): add targeted practice, drills, hard test modules pages

src/App.tsx

@@ -16,6 +16,9 @@ import { Test } from "./pages/student/practice/Test";
 import { Profile } from "./pages/student/Profile";
 import { Rewards } from "./pages/student/Rewards";
 import { StudentLayout } from "./pages/student/StudentLayout";
+import { TargetedPractice } from "./pages/student/targeted-practice/page";
+import { Drills } from "./pages/student/drills/page";
+import { HardTestModules } from "./pages/student/hard-test-modules/page";
 
 function App() {
   const router = createBrowserRouter([
@@ -54,9 +57,20 @@ function App() {
               path: "practice/:sheetId",
               element: <Pretest />,
             },
+            {
+              path: "practice/targeted-practice",
+              element: <TargetedPractice />,
+            },
+            {
+              path: "practice/drills",
+              element: <Drills />,
+            },
+            {
+              path: "practice/hard-test-modules",
+              element: <HardTestModules />,
+            },
           ],
         },
-
         {
           path: "practice/:sheetId/test",
           element: <Test />,

src/pages/student/Practice.tsx

@@ -17,8 +17,10 @@ import {
   CardTitle,
 } from "../../components/ui/card";
 import { Button } from "../../components/ui/button";
+import { useNavigate } from "react-router-dom";
 
 export const Practice = () => {
+  const navigate = useNavigate();
   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">
@@ -61,7 +63,10 @@ export const Practice = () => {
       <section className="flex flex-col gap-6">
         <h1 className="font-satoshi-black text-2xl">Practice your way</h1>
         <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">
+          <Card
+            onClick={() => navigate("/student/practice/targeted-practice")}
+            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" />
@@ -81,7 +86,10 @@ export const Practice = () => {
               </CardAction>
             </CardHeader>
           </Card>
-          <Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
+          <Card
+            onClick={() => navigate("/student/practice/drills")}
+            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" />
@@ -99,7 +107,10 @@ export const Practice = () => {
               </CardAction>
             </CardHeader>
           </Card>
-          <Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
+          <Card
+            onClick={() => navigate("/student/practice/hard-test-modules")}
+            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" />

src/pages/student/drills/page.tsx

@@ -0,0 +1,7 @@
+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">
+      Drills
+    </main>
+  );
+};

src/pages/student/hard-test-modules/page.tsx

@@ -0,0 +1,7 @@
+export const HardTestModules = () => {
+  return (
+    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
+      HardTestModules
+    </main>
+  );
+};

src/pages/student/targeted-practice/page.tsx

@@ -0,0 +1,7 @@
+export const TargetedPractice = () => {
+  return (
+    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
+      Targeted Practice
+    </main>
+  );
+};