Books Component Changed For Mobile

src/components/Product/index.js

@@ -248,27 +248,28 @@ 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' }}
+      <div className={`flex flex-col  text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
+      style={{ width: !isMobile && '375px', direction: 'rtl' }}
 
     >
       
-        <img src="https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg" className="rounded-t-xl pb-2"/>
+        <img src="https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg" className="rounded-t-xl"/>
       
 
-      <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">
+      <div className={`border-b border-red82OP py-2 px-4 ${isMobile ? 'bg-blueFF text-right' : 'text-center '}`}>
+        <h1 className={`text-${isMobile ? 'blueE3' : 'blue-5F'} text-lg font-bold`}>کتاب {productName}</h1>
+        <p className="text-blue7E text-sm mb-2">
           در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد
         </p>
       </div>
 
      
 
-      <div className="flex p-4 justify-between items-center">
-        <h1 className="font-black text-xl text-red52">{productPrice} تومان</h1>
+      <div className="flex  justify-between px-4 items-center">
+        <h1 className={`font-black text-xl py-4 text-red52 ${isMobile && 'w-1/2 border-l border-red82OP text-center'}`}>{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
+          className={`bg-${isMobile ? 'blueFF border-blueDF rounded-lg py-3' : 'pinkF5 border-red52 py-2'}  text-red26 w-32 border-2  px-1  text-xs flex justify-center hover:bg-red52 hover:text-white
                 `}
         >
           <button onClick={btnOnClick}>افزودن به سبد خرید</button>

src/view/services/index.js

@@ -624,7 +624,7 @@ if (!isMobile){
                   ]
                 });
                 setPopUp(true);
-                console.log(gameId)
+                // console.log(gameId)
               }}
             >
               {/* {console.log(product)} */}

tailwind.config.js

@@ -35,7 +35,8 @@ module.exports = {
         blue5F : '#05335f',
         blue7E : '#15517e',
         blueFF : '#f2f9ff',
-        blueE3 : '#4c7fe3'
+        blueE3 : '#4c7fe3',
+        blueDF : '#14b5df'
       },
     },
     screens: {