Home Page Grid + Product Page fixed

src/components/Product/index.js

@@ -49,14 +49,15 @@ const ProductDesign = ({
 }) => {
   const [isHovering, setIsHovering] = useState(false);
   return (
-    <div className={`flex flex-wrap sm:flex-nowrap justify-around ${big ? 'm-1' : 'w-48 m-2'} `}
+    <div className={`flex flex-wrap sm:flex-nowrap justify-around ${big ? 'm' : 'w-48 m-2'} `}
     style={big ? {width: '300px'} : {}}
     
     >
-      <div className="w-full flex flex-wrap items-center justify-around my-5 px-4" onMouseEnter={() => setIsHovering(true)}
-                  onMouseLeave={() => setIsHovering(false)}>
+      <div className="w-full flex flex-wrap items-center justify-around my-5 px-4" >
         <div
           className={`w-full sm:w-60 md:w-72 ${big ? '' : 'mx-5'} rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${hoverMode == 'blue' ? 'hover:bg-grayF4' : null} ${productHolderBorderColor} hover:${productHolderHoverBorder}`}
+          onMouseEnter={() => setIsHovering(true)}
+          onMouseLeave={() => setIsHovering(false)}
         >
           {/* product image */}
           <div className="w-full relative">

src/components/SalesContainer/index.js

@@ -29,8 +29,8 @@ const SalesContainer = ({
                 <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div>
                     <h1 className="text-3xl leading-normal">
                         
-                        <h3 className=" bg-blue-700 text-white"> دوشنبه </h3>
-                        <h3 className="mr-4 bg-yellow-300 pl-6"> کتاااابی </h3>
+                        <h3 className=" bg-blueC0 text-white text-center"> دوشنبه </h3>
+                        <h3 className="mr-4 w-24 text-center" style={{background: '#EFFF00'}}> کتاااابی </h3>
                         
                         </h1>
                         
@@ -46,7 +46,7 @@ const SalesContainer = ({
             </div>
 
 </div>    
-        <ScrollContainer className="flex  overflow-x-scroll  border-t-0 py-4 px-10" >
+        <ScrollContainer className="flex  overflow-x-scroll  border-t-0 py-4 pl-10" >
           {
           list?.map((product, index) => (
             <Link to={"/products/" + product?.id}>

src/views/Home/Desktop/Part2/index.js

@@ -52,7 +52,7 @@ const Part2 = (
                     </Link>
                 </div>
             </div>
-            <ScrollContainer className="flex  overflow-x-scroll py-4 px-10">
+            <ScrollContainer className="flex  overflow-x-scroll py-4 pl-10">
             {
           books?.slice(15,24).map((product, index) => (
             <Link to={"/products/" + product?.id}>