Empty states

src/components/ProductItem.tsx

@@ -105,7 +105,7 @@ const ProductItem = ({
             btnType={ButtonType.secondary}
             invert
             icon={cartIcon}
-            className="w-full font-semibold"
+            className="w-full font-semibold cursor-pointer"
             onClick={addToCartHandler}
           />
         ) : (

src/components/ui/accordion.tsx

@@ -17,7 +17,7 @@ function AccordionItem({
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
+      className={cn("border-b", className)}
       {...props}
     />
   )

src/components/ui/table.tsx

@@ -31,7 +31,7 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
   return (
     <tbody
       data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
+      className={cn("", className)}
       {...props}
     />
   )
@@ -42,7 +42,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        "bg-muted/50  font-medium",
         className
       )}
       {...props}

src/index.css

@@ -52,6 +52,15 @@ input[type="number"] {
   height: calc(100vw - 50px);
 }
 
+tbody::before {
+  content: "";
+  display: block;
+  height: 16px;
+}
+
+
+
+
 @layer base {
   :root {
     --background: 0 0% 100%;

src/pages/AppRouter.tsx

@@ -2,7 +2,7 @@ import AccountSetupComplete from "@/components/AccountSetup/AccountSetupComplete
 import STMemberSetup from "@/components/AccountSetup/STMemberSetup";
 import SetPassword from "@/components/forms/auth/SetPassword";
 import { Routes } from "@/lib/routes";
-import { createBrowserRouter, redirect } from "react-router-dom";
+import { createBrowserRouter } from "react-router-dom";
 import { lazy } from "react";
 const Layout = lazy(() => import("../layouts/Layout"));
 const Main = lazy(() => import("../layouts/Main"));

src/pages/cart/Cart.tsx

@@ -19,16 +19,17 @@ const Cart = () => {
   }, 0);
 
   return (
-    <section className="px-4 pb-20 pt-[11.375rem] md:pt-[8.25rem]">
-      <Container>
+  <main>
+      {itemsQuantity > 0 ?
+        <section className="px-4 pb-20 pt-[11.375rem] md:pt-[8.25rem]">
+        <Container>
         <Button
           label="Continue Shopping"
           icon={chevronLeftIcon}
           btnType={ButtonType.white}
-          className="mb-8 border border-gray300 font-semibold"
+          className="mb-8 border border-gray300 font-semibold cursor-pointer"
           onClick={() => navigate("/")}
         />
-
         <div className="flex flex-col gap-4 md:items-start 1280:flex-row">
           <div className="rounded-[14px] border border-gray300 bg-white p-6 md:w-full lg:w-[943px]">
             <div className="mb-12 flex flex-col gap-4 md:flex-row md:items-center md:justify-between md:gap-0">
@@ -41,23 +42,41 @@ const Cart = () => {
                   label="Clear Cart"
                   icon={xCloseIcon}
                   btnType={ButtonType.ghost}
-                  className="w-fit font-medium text-error500"
+                  className="w-fit font-medium text-error500 cursor-pointer"
                   onClick={clearCartHandler}
                 />
               )}
             </div>
-
-            {itemsQuantity > 0 ? (
               <CartTable cartItems={cart} />
-            ) : (
-              <p className="text-lg text-gray500">Your cart is empty</p>
-            )}
           </div>
-
           <OrderTotal />
         </div>
-      </Container>
-    </section>
+      </Container> 
+      </section> :
+        <section className="relative min-h-screen flex items-center justify-center px-4 pb-20 pt-[11.375rem] md:pt-[4.25rem]">
+          <Button
+          label="Continue Shopping"
+          icon={chevronLeftIcon}
+          btnType={ButtonType.white}
+          className="mb-8 absolute top-10 left-4 border border-gray300 font-semibold cursor-pointer"
+          onClick={() => navigate("/")}
+          />
+          <article className="w-full flex flex-col items-center justify-center md:w-[346px]">
+            <img src="/cart_empty.webp" alt="cart empty" className="size-[100px]" />
+            <div className="mt-5 text-center space-y-3">
+              <h5 className="font-bold text-xl">Your cart is empty!</h5>
+              <p className="text-[#64748B]">All your products added to cart will appear here</p>
+            </div>
+            <Button
+            label="Shop for items"
+            btnType={ButtonType.primary}
+            className="mb-8 mt-7 border border-gray300 font-semibold cursor-pointer"
+            onClick={() => navigate("/")}
+            />
+          </article>
+        </section>
+      }
+    </main>
   );
 };
 

src/pages/cart/OrderTotal.tsx

@@ -42,7 +42,7 @@ const OrderTotal = () => {
         <Button
           disabled={cart.length === 0}
           label="Check out now"
-          className="font-semibold disabled:opacity-100"
+          className="font-semibold disabled:opacity-100 cursor-pointer"
           onClick={() => navigate("/checkout")}
         />
       </div>