Books Component Made

src/components/Product/index.js

@@ -235,6 +235,41 @@ const ProductDesign = ({
 
     )
   }
+  if(catId == 4){
+    return (
+      <div className={`flex flex-col  text-right rounded-xl justify-start w-full m-4 border border-red82OP`}
+      style={{ width: '375px', direction: 'rtl' }}
+
+    >
+      
+        <img src="https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg" className="rounded-t-xl pb-2"/>
+      
+
+      <div className="border-b border-red82OP pb-2 px-4 text-center">
+        <h1 className="text-blue5F text-lg font-bold">کتاب {productName}</h1>
+        <p className="text-blue7E text-sm my-2">
+          در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد
+        </p>
+      </div>
+
+     
+
+      <div className="flex p-4 justify-between items-center">
+        <h1 className="font-black text-xl text-red52">{productPrice} تومان</h1>
+        <div
+          className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
+                `}
+        >
+          <button onClick={btnOnClick}>افزودن به سبد خرید</button>
+        </div>
+
+      </div>
+
+
+
+    </div>
+    )
+  }
   else{
     return <div></div>
   }

src/view/services/index.js

@@ -384,7 +384,7 @@ const Services = ({
                   classHour: 21,
                   classMinute: 56,
                 });
-                setPopUp(true);
+                if(gameId == 1){setPopUp(true);}
               }}
             >
               {/* {console.log(product)} */}

tailwind.config.js

@@ -31,7 +31,9 @@ module.exports = {
         red82OP: 'rgba(223, 20, 82, 0.08)',
         pinkF5: '#fff1f5',
         black40: '#404040',
-        green17 : '#8daf17'
+        green17 : '#8daf17',
+        blue5F : '#05335f',
+        blue7E : '#15517e'
       },
     },
     screens: {