UPDATE: Got started with categories page

frontend/public/images/category_banners/category_banners.json

@@ -0,0 +1,5 @@
+{
+    "1": "https://example.com/category/101",
+    "2": "https://example.com/category/102",
+    "3": "https://example.com/category/103"
+  }

frontend/src/components/Auth/RegisterForm.tsx

@@ -182,9 +182,6 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
               <Button type="submit" >Register</Button>
             </form>
           </div>
-          <div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
-                  <GoogleLogin />
-                </div>
         </div>
         
       </div>

frontend/src/pages/CategoriesPage.tsx

@@ -1,8 +1,50 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
+import Navbar from "../components/Layout/Navbar";
+import { useNavigate } from "react-router-dom";
 
 const CategoriesPage: React.FC = () => {
+  const [noCategories, setNoCategories] = useState<number>(0);
+  const [moreCategories, setMoreCategories] = useState<number>(12);
+  const [isLoading, setIsLoading] = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const response = await fetch(`api/categories/popular/${moreCategories}`)
+        if (!response.ok) {
+          throw new Error("Failed to fetch categories");
+        }
+        const data = await response.json();
+        console.log(data);
+      } catch (error) {
+        console.error("Error fetching categories:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchCategories();
+  }, [noCategories]);
+
+  if (isLoading) {
+    return (
+      <div className="h-screen w-screen flex items-center justify-center text-white">
+        Loading...
+      </div>
+    );
+  }
+
+  const handleCategoryClick = (category_name: string) => {
+    navigate(`/category${category_name}`);
+  };
+
   return (
-    <div className="categories-page">
+    <div
+      className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
+      style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
+    >
+      <Navbar />
       <h1>Categories Page</h1>
     </div>
   );