feat(ui): add topic, subject screen

fix(api): fix api endpoint logic for pretest screen

app/(tabs)/categories/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import Header from "@/components/Header";
+import React from "react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+const CategoriesPage = () => {
+  const router = useRouter();
+
+  return (
+    <BackgroundWrapper>
+      <main>
+        <Header displayTabTitle="Categories" />
+        <div className="grid grid-cols-2 gap-4 pt-6 mx-4">
+          <button
+            onClick={() => router.push("/categories/topics")}
+            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+          >
+            <Image
+              src="/images/icons/topic-test.png"
+              alt="Topic Test"
+              width={85}
+              height={85}
+            />
+            <span className="font-medium text-[#113768]">Topic Test</span>
+          </button>
+
+          <button
+            onClick={() => router.push("/categories/mocks")}
+            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+          >
+            <Image
+              src="/images/icons/mock-test.png"
+              alt="Mock Test"
+              width={85}
+              height={85}
+            />
+            <span className="font-medium text-[#113768]">Mock Test</span>
+          </button>
+
+          <button
+            disabled
+            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+          >
+            <Image
+              src="/images/icons/past-paper.png"
+              alt="Past Papers"
+              width={68}
+              height={68}
+              className="opacity-50"
+            />
+            <span className="font-medium text-[#113768]/50">Past Papers</span>
+          </button>
+
+          <button
+            onClick={() => router.push("/categories/subjects")}
+            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+          >
+            <Image
+              src="/images/icons/subject-test.png"
+              alt="Subject Test"
+              width={80}
+              height={80}
+            />
+            <span className="font-medium text-[#113768]">Subject Test</span>
+          </button>
+        </div>
+      </main>
+    </BackgroundWrapper>
+  );
+};
+
+export default CategoriesPage;