Services Page Grid Done

src/components/exam/Carousel/index.js

@@ -286,7 +286,7 @@ const MyExamList = ({isMobile}) => {
     <div className="my-exam-list">
       
       <div className="my-exam-list-content rounded-lg">
-          <h1 className='text-right w-full text-red52 pt-4 px-6'>لیست آزمون های من</h1>
+          <h1 className='text-right w-full font-bold text-red52 pt-4 px-6'>لیست آزمون های من</h1>
         <div className="melc-header">
           {data.map((item, i) => (
             <div

src/view/services/index.js

@@ -105,11 +105,11 @@ const Services = ({
   const chooseGame = (id) => {
     setGameId(id);
   };
-if (!isMobile){
+  if (!isMobile) {
     return (
       <div
         className="flex items-start justify-between"
-      style={{ width: "93.5%", direction: "rtl" }}
+        style={{ width: "93.5%", direction: "rtl", height: '100vh' }}
       >
         {popup ? (
           <ServicePopUp
@@ -119,10 +119,10 @@ if (!isMobile){
         ) : null}
         <div
           className="w-3/4  flex flex-col  justify-center "
-        style={{ marginTop: "5.5%" }}
+          style={{  paddingTop:'5.5%', height: '100vh' }}
         >
           <div
-          className="relative h-48 w-full border-b border-red82OP my-4 px-10"
+            className="h-48  w-full border-b border-red82OP my-4 px-10"
             style={{ direction: "ltr" }}
           >
             {/* {
@@ -224,8 +224,7 @@ if (!isMobile){
               <div
                 className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
                       hover:border-red52 hover:text-red52 hover:bg-pinkF5 
-                    ${
+                    ${filterCheck[0]
-                      filterCheck[0]
                     ? "border-red52 text-red52 bg-pinkF5"
                     : "border-gray200 text-gray-400"
                   }`}
@@ -264,8 +263,7 @@ if (!isMobile){
               <div
                 className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
                       hover:border-red52 hover:text-red52 hover:bg-pinkF5 
-                    ${
+                    ${filterCheck[0]
-                      filterCheck[0]
                     ? "border-red52 text-red52 bg-pinkF5"
                     : "border-gray200 text-gray-400"
                   }`}
@@ -314,9 +312,8 @@ if (!isMobile){
           </div>}
 
           <div
-          className={`flex ${
+            className={`flex 
-            gameId == 2 && "flex-col"
+              }  items-center w-full justify-center overflow-x-hidden overflow-scroll flex-wrap h-full `}
-          }  items-center w-full justify-center flex-wrap `}
           >
             {books?.map((product, index) => (
               <div
@@ -335,7 +332,7 @@ if (!isMobile){
                     classHour: 21,
                     classMinute: 56,
                     image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg',
-                  examCont : [
+                    examCont: [
                       {
                         title: 'بخش اول آزمون ' + product.name,
                         date: '۱۴۰۰/۱۲/۱۳',
@@ -359,7 +356,7 @@ if (!isMobile){
                       },
                     ]
                   });
-                if(gameId !== 2){
+                  if (gameId !== 2) {
                     setPopUp(true)
                   }
                   console.log(gameId)
@@ -382,7 +379,7 @@ if (!isMobile){
                   teacher={product.vodTeacher}
                   catId={gameId}
                   onClick={() => null}
-                btnOnClick={() =>{
+                  btnOnClick={() => {
                     pushToCart({
                       productId: product?.id,
 
@@ -423,14 +420,15 @@ if (!isMobile){
             }
           </div>
         </div>
-      {!isMobile && <div className="w-1/4 fixed left-0" style={{ height: "100vh" }}>
+        {!isMobile && <div className="w-1/4 left-0" style={{ height: "100vh" }}>
           <ShoppingCart />
-      </div> }
+        </div>}
       </div>
-  );}
+    );
+  }
   // Mobile Version
-  else{
+  else {
-    return(
+    return (
       <div className="flex flex-col items-center mt-16 mb-40 rtl">
 
         <Games
@@ -501,8 +499,7 @@ if (!isMobile){
             <div
               className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
                            hover:border-red52 hover:text-red52 hover:bg-pinkF5 
-                          ${
+                          ${filterCheck[0]
-                            filterCheck[0]
                   ? "border-red52 text-red52 bg-pinkF5"
                   : "border-gray200 text-gray-400"
                 }`}
@@ -541,8 +538,7 @@ if (!isMobile){
             <div
               className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
                            hover:border-red52 hover:text-red52 hover:bg-pinkF5 
-                          ${
+                          ${filterCheck[1]
-                            filterCheck[1]
                   ? "border-red52 text-red52 bg-pinkF5"
                   : "border-gray200 text-gray-400"
                 }`}
@@ -602,7 +598,7 @@ if (!isMobile){
                   classHour: 21,
                   classMinute: 56,
                   image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg',
-                  examCont : [
+                  examCont: [
                     {
                       title: 'بخش اول آزمون ' + product.name,
                       date: '۱۴۰۰/۱۲/۱۳',
@@ -679,13 +675,13 @@ if (!isMobile){
                 />
               </div>
               <button className="cursor-pointer text-blue52 border border-blueDF w-full rounded-lg font-bold text-sm px-6 h-14"
-                 style={{background: 'rgba(211, 246, 255, 0.44)'}}>
+                style={{ background: 'rgba(211, 246, 255, 0.44)' }}>
                 افزودن به سبد خرید
               </button>
 
             </div>
           }
-</div>
+        </div>
       </div>
     )
   }