dynamic routing start for products

frontend/src/app/products/[productId]/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function ProductDetails(){
+    return(
+        <div>
+            <h1 className="text-center">Product Details</h1>
+        </div>
+    )
+}

frontend/src/app/products/page.tsx

@@ -1,13 +1,71 @@
-import React from 'react'
+"use client";
-import MenuCard from '@/components/ui/MenuCard/MenuCard'
+import React, {useState} from "react";
+import MenuCard from "@/components/ui/MenuCard/MenuCard";
+import { useParams } from "next/navigation";
 import Product from "@/../public/batch1/files_list.json";
+import Image from "next/image";
 
 const Products = () => {
-  return (
+  const catID = useParams();
-    <div>
+  const [maxPrice, setMaxPrice] = useState(100);
-        <MenuCard Menu={Product}/>
+  const [sort, setSort] = useState("asc");
-    </div>
-  )
-}
 
-export default Products
+  return (
+    <div className="products">
+      <div className="left">
+        <div className="filterItem">
+          <h2>Product Categories</h2>
+          <div className="inputItem">
+            <input type="checkbox" id="1" value={1} />
+            <label htmlFor="1">Men</label>
+          </div>
+          <div className="inputItem">
+            <input type="checkbox" id="2" value={2} />
+            <label htmlFor="2">Women</label>
+          </div>
+          <div className="inputItem">
+            <input type="checkbox" id="3" value={3} />
+            <label htmlFor="3">Boys</label>
+          </div>
+          <div className="inputItem">
+            <input type="checkbox" id="4" value={4} />
+            <label htmlFor="4">Girls</label>
+          </div>
+        </div>
+        <div className="filterItem">
+          <h2>Filter by Price</h2>
+          <div className="inputItem">
+            <span>0</span>
+            <input type="range" min={0} max={100} onChange={(e) => setMaxPrice(parseInt(e.target.value))} />
+            <span>{maxPrice}</span>
+          </div>
+        </div>
+        <div className="filterItem">
+          <h2>Sort by</h2>
+          <div className="inputItem">
+            <span>0</span>
+            <input type="radio" id="asc" value="asc" name="price" onChange={(e) => setSort("asc")} />
+            <label htmlFor="asc">Price (Lowest first)</label>
+          </div>
+          <div className="inputItem">
+            <span>0</span>
+            <input type="radio" id="desc" value="desc" name="price" onChange={(e) => setSort("desc")}/>
+            <label htmlFor="desc">Price (Highest first)</label>
+          </div>
+        </div>
+      </div>
+      <div className="right">
+        <Image
+          src="/white_logo.png"
+          width={64}
+          height={64}
+          className="rounded-full md:hidden"
+          alt="Profile picture"
+        />
+      </div>
+      <MenuCard Menu={Product} />
+    </div>
+  );
+};
+
+export default Products;

frontend/src/components/Navbar/Navbar.tsx

@@ -76,7 +76,7 @@ export default function Nav() {
           <a href="/about">About</a>
           <a className="flex relative items-center justify-center" href="/cart">
             <FiShoppingCart className="text-lg lg:text-xl" />
-            <span className="absolute text-white text-xs w-5 h-5 rounded-[50%] bg-slate-400 -top-2.5 -right-2.5 flex items-center justify-center">
+            <span className="absolute text-white text-xs w-5 h-5 rounded-[50%] bg-orange-600 -top-2.5 -right-2.5 flex items-center justify-center">
               0
             </span>
           </a>

frontend/src/components/ProductPage/ProductPage.css

@@ -0,0 +1,5 @@
+.product {
+    padding: 20px 50px;
+    display: flex;
+    gap: 50px;
+}

frontend/src/components/ProductPage/ProductPage.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import "./ProductPage.css";
+
+const ProductPage = () => {
+  const [selectedImage, setSelectedImage] = useState(0);
+  const images = [
+    "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,womens,101010:01c5ca27c6,front,square_product,600x600.jpg",
+    "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,flatlay,101010:01c5ca27c6,front,wide_portrait,750x1000-bg,f8f8f8.jpg",
+  ];
+
+  return (
+    <div className="product">
+      <div className="left">
+        <div className="images">
+          <Image
+            src={images[0]}
+            width={64}
+            height={64}
+            className="rounded-full md:hidden"
+            alt="Profile picture"
+            onClick={e=>(setSelectedImage(0))}
+          />
+          <Image
+            src={images[1]}
+            width={64}
+            height={64}
+            className="rounded-full md:hidden"
+            onClick={e => setSelectedImage(1)}
+            alt="Profile picture"
+          />
+        </div>
+        <div className="mainImage">
+            <Image
+            src={images[selectedImage]}
+            width={64}
+            height={64}
+            className="rounded-full md:hidden"
+            alt="Profile picture"
+            />
+        </div>
+      </div>
+      <div className="right">
+
+      </div>
+    </div>
+  );
+};
+
+export default ProductPage;

frontend/src/components/ui/MenuCard/MenuCard.tsx

@@ -58,7 +58,7 @@ const MenuCard = ({ Menu }: any) => {
                       <span className="text-orange-600">Out of Stock</span>
                     )}
                     {/* Check if item is a favorite */}
-                    {menu_item.favorite === "yes" ? (
+                    {/* {menu_item.favorite === "yes" ? (
                       <Image
                         src="/star.svg"
                         alt="jefe's star"
@@ -73,7 +73,7 @@ const MenuCard = ({ Menu }: any) => {
                       />
                     ) : (
                       <div className="hidden"></div>
-                    )}
+                    )} */}
                   </div>
                 </div>
                 {/* description text */}

frontend/src/components/ui/button.tsx

@@ -1,9 +1,9 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@/lib/utils"
 
+
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {