Home Page Part2 Done

src/components/Product/index.js

@@ -41,14 +41,16 @@ const ProductDesign = ({
   productImg,
   writeGHEIMAT,
   numberOfRegards,
-  productHolderHoverBorder
+  productHolderHoverBorder,
+  hoverMode
 }) => {
   const [isHovering, setIsHovering] = useState(false);
   return (
     <div className="flex flex-wrap sm:flex-nowrap justify-around w-48 m-3">
-      <div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4">
+      <div className="w-full flex flex-wrap items-center justify-around my-5 mx-5 px-4" onMouseEnter={() => setIsHovering(true)}
+                  onMouseLeave={() => setIsHovering(false)}>
         <div
-          className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${productHolderBorderColor} hover:${productHolderHoverBorder}`}
+          className={`w-full sm:w-60 md:w-72 mx-5 rounded-lg transition-all p-2 my-3 ${productHolderBorder} ${hoverMode == 'blue' ? 'hover:bg-blue-100' : null} ${productHolderBorderColor} hover:${productHolderHoverBorder}`}
         >
           {/* product image */}
           <div className="w-full relative">
@@ -79,8 +81,7 @@ const ProductDesign = ({
                   src={productImg}
                   alt=""
                   className="h-full rounded-lg cursor-pointer py-5"
-                  onMouseEnter={() => setIsHovering(true)}
-                  onMouseLeave={() => setIsHovering(false)}
+                  
                 />
               )}
               {horizontalImg && (
@@ -120,13 +121,7 @@ const ProductDesign = ({
                 <ReactTooltip place="top" type="dark" effect="float" />
               </div>
             )} */}
-            <div
-              className={`bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 ${
-                isHovering ? "" : "hidden"
-              }`}
-            >
-              {/* <button>افزودن به سبد خرید</button> */}
-            </div>
+
           </div>
           {/* product content */}
           <div className="px-2">
@@ -166,9 +161,8 @@ const ProductDesign = ({
               >
                 <div className="mt-2">
                   <div
-                    className={`${
-                      priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
-                    }`}
+                    className={`${priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
+                      }`}
                   >
                     {writeGHEIMAT && <span className="text-xs text-borderColor ml-2">قیمت</span>}
                     {/* price with line on it */}
@@ -185,15 +179,30 @@ const ProductDesign = ({
                 {/* add to cart */}
                 {addToCartHolder && (
                   <button
-                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${
-                      priceDirection.indexOf("col") !== -1 ? "w-full" : ""
-                    }`}
+                    className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${priceDirection.indexOf("col") !== -1 ? "w-full" : ""
+                      }`}
                   >
                     اضافه کردن به سبد خرید
                   </button>
+
                 )}
+
+
               </div>
+
             )}
+
+
+            
+        {hoverMode == 'blue' ?<div className="w-full flex justify-center mt-4">
+              <div
+                className={`bg-blueC0 text-white rounded p-4 text-xs justify-center ${isHovering ? "" : "hidden"
+                  }`}
+              >
+                <button>افزودن به سبد خرید</button>
+              </div>
+            </div> : null}
+
             {/* {productTags && (
               <div className="mt-2 flex flex-wrap">
                 {
@@ -208,6 +217,7 @@ const ProductDesign = ({
                 ></div>
               </div>
             )}
+
           </div>
         </div>
       </div>

src/components/SalesContainer/index.js

@@ -46,9 +46,7 @@ const SalesContainer = ({
             </div>
 
 </div>    
-        <ScrollContainer className="flex  overflow-x-scroll border-2 border-solid border-gray-300 border-t-0 py-4 px-10" style={{
-            // marginTop: '-5px'
-        }}>
+        <ScrollContainer className="flex  overflow-x-scroll border-2 border-solid border-gray-300 border-t-0 py-4 px-10">
           {
           list?.map((product, index) => (
             <Link to={"/products/" + product?.id}>

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

@@ -0,0 +1,85 @@
+
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
+import { book} from '../../../../redux/actions'
+import { Link } from "react-router-dom";
+import Product from '../../../../components/Product';
+import Button from "../../../../components/Button";
+import ScrollContainer from "react-indiana-drag-scroll";
+
+const Part2 = (
+  {  books,
+    getBooks,
+    grades}
+) => {
+    console.log({books})
+    const [filter, setFilter] = useState({
+        search: "",
+        grade: "",
+        productsType: "کتاب",
+      });
+      useEffect(() => {
+        getBooks();
+      }, []);
+    return (
+        <div className="w-full mt-6">
+            <div className="w-full flex justify-between items-center">
+                <div className="flex items-center text-4xl font-black text-blue52">
+                <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div>
+                    <h1>
+                    کتاب های جدید
+                    </h1>
+                </div>
+                <div>
+                    <Link to='/products'>
+                        <Button
+                            title="مشاهده لیست محصولات"
+                            backgroundColor="bg-blue-100"
+                            border={{
+                                color: "#196EC055",
+                                width: "0px",
+                              }}
+                            width="100%"
+                            selectable={true}
+                            
+                            color= "text-blueC0"
+                            onClick={() => null}
+                            radius={false}
+                            twPaddings="py-4 px-12"
+                        />
+                    </Link>
+                </div>
+            </div>
+            <ScrollContainer className="flex  overflow-x-scroll py-4 px-10">
+            {
+          books?.slice(15,24).map((product, index) => (
+            <Link to={"/products/" + product?.id}>
+              <Product
+                key={`prod_New${index}`}
+                productsType={filter.productsType}
+                product={product}
+                index={Number(index)}
+                productName={`کتاب ${product?.name}`}
+                productCat={`پایه ${grades[product?.gradeId]}`}
+                productPrice={100000}
+                productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
+                numberOfRegards={160}
+                productTitleColor='text-blue5F'
+                productCatTextColor='text-blueC0'
+                productHolderBorder=''
+                productHolderHoverBorder='shadow-md'
+                hoverMode='blue'
+                
+              />
+            </Link>
+            ))}
+            </ScrollContainer>
+        </div>
+    )
+}
+
+const mapStateToProps = (state) => ({
+    books: state.book.list,
+    isDark: state.publicApi.isDark,
+});
+export default connect(mapStateToProps, { getBooks: book.list })(Part2);

src/views/Home/Desktop/index.js

@@ -7,6 +7,7 @@ import Banners from "../../../components/Banners";
 import SalesContainer from "../../../components/SalesContainer";
 
 import { book, publicApi } from "../../../redux/actions";
+import Part2 from "./Part2";
 
 const DesktopHome = (
 {
@@ -22,6 +23,7 @@ return (
     <div className="flex flex-col items-center w-4/5 justify-center my-10">
         <Banners/>
         <SalesContainer books={books} grades={grades}/>
+        <Part2  grades={grades}/>
         
     </div>