Changes to be committed:

	modified:   client/data/Lates-product.tsx
	new file:   client/public/products/product-2.png
	new file:   client/public/products/product-3.jpeg
	modified:   client/src/App.tsx
	modified:   client/src/components/cards/Cards.tsx
	modified:   client/src/components/layouts/Navbar.tsx
	modified:   client/src/data/Core-Product.tsx
	modified:   client/src/pages/home.tsx
	deleted:    client/src/pages/product-details.tsx
	modified:   client/src/pages/products/details.tsx
	modified:   client/src/pages/products/index.tsx

client/data/Lates-product.tsx

@@ -16,6 +16,7 @@ const latesProducts = [
     rating: 5,
     brand: "EVOLIS",
     price: 1750,
+    category: "sdf",
     quantity: 1,
   },
   {
@@ -52,6 +53,7 @@ const latesProducts = [
     rating: 5,
     brand: "EVOLIS",
     price: 1750,
+    category: "sdf",
     quantity: 1,
   },
   {

client/src/App.tsx

@@ -1,3 +1,4 @@
+import "flowbite";
 import type { Component } from "solid-js";
 import { Route, Routes } from "@solidjs/router";
 import Navbar from "./components/layouts/Navbar";
@@ -6,9 +7,8 @@ import About from "./pages/about";
 import Footer from "./components/layouts/Footer";
 import Contact from "./pages/contact";
 import Cart from "./pages/cart";
-import ProductDetail from "./pages/product-details";
-import "flowbite";
-import Products from "./pages/products/details";
+import ProductDetail from "./pages/products/details";
+import Products from "./pages/products";
 
 const App: Component = () => {
   return (
@@ -19,8 +19,8 @@ const App: Component = () => {
         <Route path="/about-us" component={About} />
         <Route path="/contact-us" component={Contact} />
         <Route path="/cart" component={Cart} />
-        <Route path="/products/:id?" component={ProductDetail} />
         <Route path="/products" component={Products} />
+        <Route path="/products/:id?" component={ProductDetail} />
       </Routes>
       <Footer />
     </div>

client/src/components/cards/Cards.tsx

@@ -42,7 +42,7 @@ const Cards: Component<{ product: Product }> = (props) => {
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
-                class="z-50 transition ease-in duration-300 bg-gray-50  hover:text-danger shadow hover:shadow-md text-red-300 rounded-full w-8 h-8 text-center p-1"
+                class="z-40 transition ease-in duration-300 bg-gray-50  hover:text-danger shadow hover:shadow-md text-red-300 rounded-full w-8 h-8 text-center p-1"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

client/src/components/layouts/Navbar.tsx

@@ -133,7 +133,10 @@ const Navbar: Component = () => {
               </svg>
               <span class="font-medium">Favorites</span>
             </div>
-            <div class="flex cursor-pointer items-center gap-x-2 rounded-md py-2 px-4 hover:bg-gray-100">
+            <a
+              href="/cart"
+              class="flex cursor-pointer items-center gap-x-2 rounded-md py-2 px-4 hover:bg-gray-100"
+            >
               <div class="relative">
                 <svg
                   class="w-5 h-5 text-gray-600 dark:text-white"
@@ -149,7 +152,7 @@ const Navbar: Component = () => {
                 </span>
               </div>
               <span class="font-medium">Cart</span>
-            </div>
+            </a>
           </div>
           <div
             class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"

client/src/data/Core-Product.tsx

@@ -79,6 +79,26 @@ const CoreProducts = [
     quantity: 1,
     category: "",
   },
+  {
+    id: "9",
+    name: "FujiFilm Apeos 2560 Mono",
+    image: "/products/product-4.avif",
+    rating: 5,
+    brand: "FUJIFILM",
+    price: 3300,
+    quantity: 1,
+    category: "",
+  },
+  {
+    id: "10",
+    name: "FujiFilm Apeos 2560 Mono",
+    image: "/products/product-4.avif",
+    rating: 5,
+    brand: "FUJIFILM",
+    price: 3300,
+    quantity: 1,
+    category: "",
+  },
 ];
 
 export default CoreProducts;

client/src/pages/home.tsx

@@ -176,7 +176,9 @@ export const LatestProducts: Component<{}> = () => {
           Out new products
         </p>
         <div class="float-right py-3 flex space-x-1 items-center">
-          <h1 class="text-gray-500 text-xs font-bold">Show More</h1>
+          <a href="/products" class="text-gray-500 text-xs font-bold">
+            Show More
+          </a>
           <img class="w-auto h-3.5" src="/images/right-arrow.png" />
         </div>
         <div class="grid md:grid-cols-4 grid-cols-1 gap-4 mt-12">