check on web res and fix all bugs

src/Components/Home/CategoriesSlider.tsx

@@ -1,5 +1,5 @@
 // import Swiper core and required modules
-import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";
+import { Navigation, A11y } from "swiper/modules";
 
 import { Swiper, SwiperSlide } from "swiper/react";
 
@@ -31,7 +31,7 @@ const CategoriesSlider = () => {
         navigation
         breakpoints={{
           320: {
-            slidesPerView: 2,
+            slidesPerView: 1,
           },
           480: {
             slidesPerView: 2,
@@ -40,13 +40,12 @@ const CategoriesSlider = () => {
             slidesPerView: 3,
           },
           768: {
-            slidesPerView: 4,
+            slidesPerView: 3,
           },
           1024: {
-            slidesPerView: 5,
+            slidesPerView: 4,
           },
         }}
-
       >
         {categories?.map((item: Category, index: number) => {
           return (

src/Components/Home/HeroSection.tsx

@@ -1,8 +1,13 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router-dom";
 
 const HeroSection = () => {
   const [t] = useTranslation();
+  const Navigate = useNavigate();
+  const handleNavigate = () =>{
+    Navigate('/categories');
+  }
   return (
     <div className="HeroSection">
       <div>
@@ -10,7 +15,7 @@ const HeroSection = () => {
 
         <div>
           {/* <h3>  $229.50 </h3> */}
-          <button className="button">{t("Buy Now")}</button>
+          <button className="button" onClick={handleNavigate}>{t("Buy Now")}</button>
         </div>
       </div>
       <span>

src/Components/Home/ProductSwiper.tsx

@@ -18,7 +18,6 @@ const ProductSwiper = ({data,isLoading}:any) => {
   const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr");
   const swiperRef = useRef<any>(null);
 
-
   const BaseProducts = (data?.products as Product[]) || ([] as []);
 
   return (

src/Components/Ui/HeaderLink.tsx

@@ -9,12 +9,12 @@ const HeaderLink = ({text,isMulti,extraText,extraLink}:THeaderLink) => {
 
   return (
     <div className='header_link'>
-        <Link to={"/"}>{t("Home")}</Link>
+        <Link to={"/"} className='first_link'>{t("Home")}</Link>
         <FaChevronRight/>
         {
             isMulti ?
             <>
-                <Link to={`/${extraLink}`}>{ t(extraText || "")}</Link>
+                <Link to={`/${extraLink}`} className='first_link'>{ t(extraText || "")}</Link>
                 <FaChevronRight/>
             </>
             : ""

src/Styles/Auth/Auth.scss

@@ -5,14 +5,13 @@
       border-radius: var(--border-radius);
       width: fit-content;
       white-space: nowrap;
-      background: var(--secondary);
-      color: var(--text);
+      background: var(--primary);
+      color: var(--white);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 15px;
-      padding-inline: 1vw;
-      padding-block: 20px;
+      padding-inline: 10px;
       font-size: 1vw;
       &:hover{
           background: var(--DarkPrimary) !important;

src/Styles/Layout/Layout.scss

@@ -21,6 +21,13 @@
   font-size: 20px;
   letter-spacing: .7px;
   cursor: pointer;
+  .first_link{
+    transition: ease-in-out .1s;
+    &:hover{
+      color: var(--primary);
+      border-bottom: 2px solid var(--primary);
+    }
+  }
   .page_title_link{
       color: var(--primary);
       border-bottom: 2px solid var(--primary);
@@ -42,15 +49,9 @@
   }
 }
 
-@media screen and (max-width:600px) {
-    .header_link{
-        font-size: 12px;
-    }
-}
-
- a:hover{
+a:hover{
   color: var(--primary);
-}
+  }
   
 .Translate{
   border-color: transparent;
@@ -67,3 +68,18 @@
 .pointer{
   cursor: pointer;
 }
+
+@media screen and (max-width:600px) {
+    .header_link{
+        font-size: 12px;
+    }
+}
+@media screen and (max-width:450px) {
+  .Translate{
+    font-size: 14px !important;
+    margin-bottom: -5px !important;
+  }
+  .MenuButton{
+    font-size: 10px !important;
+  }
+}

src/Styles/Layout/NavBar.scss

@@ -29,7 +29,6 @@
       .navbar_link{
           color: var(--text);
           opacity: .5;
-        //   font-weight: bold;
           
           cursor: pointer;
           &:hover{
@@ -42,7 +41,7 @@
       .active{
 
           opacity: 1;
-          border-bottom: .1vw solid var(--primary);
+        //   border-bottom: .1vw solid var(--primary);
           color: var(--primary);
       }
   }
@@ -80,14 +79,13 @@
 
 @media screen and (max-width: 1000px) {
   .navbar{
-     >img{
+     img{
         width: 50px;
      }
       .navbar_links{
           display: none;
       }
       article{
-        //   display: none;
         gap: 10px;
       }
      .menu{
@@ -99,15 +97,14 @@
      }
   
   }
-  .menu_navbar_links{
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      
-          .menu_navbar_link{
-              cursor: pointer;
-          }
-  }
+    .menu_navbar_links{
+        display: flex;
+        flex-direction: column;
+        gap: 10px; 
+        .menu_navbar_link{
+            cursor: pointer;
+        }
+    }
 }
 
 @media screen and (max-width:450px) {
@@ -115,13 +112,14 @@
         article{
             gap: 2px !important;
             svg{
-                font-size: 10px !important;
-            }
-                .icon_navbar{
-                    font-size: 10px !important;
-                }
+                font-size: 16px !important;
             }
+            .icon_navbar{
+                width: 6px;
+                font-size: 14px !important;
             }
+        }
+    }
 }
 
 .ant-drawer .ant-drawer-header-title {

src/Styles/Page/Cart.scss

@@ -10,8 +10,6 @@
 
   .ant-drawer-body{
       height: 100% !important;
-      >div{
-      }
   }
   
   .Cart_Icon{
@@ -19,16 +17,9 @@
       height: 50px;
       border-radius: 50%;
       @include Flex;
-      svg{
-      }
   }
   .Badge_Button{
       margin-inline: 10px;
-    //   svg{
-    //       height: 30px;
-    //       color: var(--white);
-    //       font-size: 20px !important;
-    //   }
   }
   
   }
@@ -73,7 +64,7 @@
         font-weight: 500;
         text-transform:capitalize ;
         &:hover{
-            background: var(--DarkPrimary);
+            background: var(--DarkPrimary) !important;
         }
   }    
 }
@@ -92,40 +83,20 @@
                 }
             }
         }
-        
-      }
+    }
 }
 @media screen and (max-width:650px) {
   .cart_first_section{
       span{
           font-size: 13px;
       }
-      
   }
   .ViewCart_Button{
       p{
           font-size: 12px;
       }
-      .cart_checkout_button_container{
           .cart_checkout_button{
               font-size: 15px;
-              padding: 20px 10px;
           }
-      }    
   }
 }
-
-.EmptyCard{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin-top: 5%;
-    gap: 20px;
-    img{
-        width: 40%;
-    }
-    p{
-        font-size: max(1.5vw,15px);
-    }
-}

src/Styles/Page/Home.scss

@@ -72,7 +72,8 @@
       align-items: center;
 
       img {
-        width: 150px;
+        min-width: 140px;
+        max-width: 140px;
         height: 150px;
       }
     }
@@ -374,7 +375,8 @@
         align-items: center;
 
         img {
-          width: 100px;
+          min-width: 100px;
+          max-width: 100px;
           height: 100px;
 
         }

src/Styles/components/Card.scss

@@ -14,7 +14,6 @@
   .Card_Img {
     width: 40%;
     img {
-      transform: translateX(-6px);
       width: 40%;
     }
   }
@@ -80,10 +79,9 @@
       border-radius: 7px;
     }
     .Card_Img {
-      width: 30%;
+      width: 20%;
       img {
-        width: 100%;
-        // transform: translateX(-6px);
+        width: 80%;
       }
     }
     .Card_Info {

src/Styles/components/ProductCard.scss

@@ -11,7 +11,7 @@
   position: relative;
   height: fit-content;
   @include Shadow;
-
+  margin-inline: auto;
   h4 {
     font-size: 16px;
     margin-bottom: 0px;