FutureExams(responsive/down)

src/components/Calendar/index.js

@@ -30,7 +30,7 @@ const SimpleCalendar = () => {
     }
 
     return (
-        <div className=" w-full ">
+        <div className="w-full h-full">
 
             {/* <Calendar
                 value={selectedDay}

src/view/my-services/FutureExams.js

@@ -3,7 +3,7 @@ import img2 from "../../assets/img/usgs-hoS3dzgpHzw-unsplash.jpg";
 import stickynote from "../../assets/img/stickynote.svg";
 import clockIcon from "../../assets/img/vuesax-linear-clock.svg";
 import Title from "./Title";
-
+import './index.css'
 const FutureExams = () => {
   let data = [
     {
@@ -66,7 +66,17 @@ const FutureExams = () => {
   const hoverHandle2 = (index) => {
     let frontBox = document.querySelectorAll(".frontBox");
     let description = document.querySelectorAll(".frontBox-description");
+    if(window.innerWidth>=1490){
     frontBox[index].style.transform = "translateY(60%)";
+    }else if (window.innerWidth >= 1410) {
+      frontBox[index].style.transform = "translateY(57%)";
+    }else if (window.innerWidth >= 1315) {
+      frontBox[index].style.transform = "translateY(70%)";
+    }else if (window.innerWidth >= 1230) {
+      frontBox[index].style.transform = "translateY(67%)";
+    }else{
+      frontBox[index].style.transform = "translateY(63%)";
+    }
     frontBox[index].style.background =
       "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)";
     description[index].style.display = "none";
@@ -79,11 +89,11 @@ const FutureExams = () => {
         {/* ----title-------- */}
         <Title titleText="آزمون‌های پیش‌رو" />
         {/* ----body-------- */}
-        <div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[3.5%] gap-y-4 flex-wrap pb-2">
+        <div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[5%] res1:gap-x-[3.5%] gap-y-4 flex-wrap pb-2">
           {data?.map((item, index) => (
             <div
               key={index}
-              className="w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer"
+              className="w-[47.5%] res1:w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer"
               onMouseEnter={() => hoverHandler(index)}
               onMouseLeave={() => hoverHandle2(index)}
             >
@@ -91,7 +101,7 @@ const FutureExams = () => {
               <img src={item.img} className="w-full" alt="back-img" />
               {/* -----front-data------ */}
               <div
-                className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300"
+                className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%]   transition-all duration-300"
                 style={{
                   background:
                     "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)",
@@ -110,11 +120,11 @@ const FutureExams = () => {
                 <div className="w-full flex flex-row-reverse items-center justify-between py-1">
                   <div className="flex flex-row-reverse items-center">
                     <img src={clockIcon} alt="clockIcon" className="ml-1 h-4" />
-                    <div className="text-xs text-white text-right">
+                    <div className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right">
                       {item.date}
                     </div>
                   </div>
-                  <div className="text-xs text-white text-right">
+                  <div className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right">
                     ساعت {item.time}
                   </div>
                 </div>

src/view/my-services/MyOrders.js

@@ -108,7 +108,7 @@ const MyOrders = () => {
                   {item.products.map((ITEM, INDEX) => (
                     <div
                       key={INDEX}
-                      className="w-10 h-16 rounded bg-[#E0E0E0] overflow-hidden flex items-center justfy-center"
+                      className="w-10 h-16 rounded bg-[#E0E0E0] overflow-hidden flex items-center justfy-center cursor-pointer"
                     ></div>
                   ))}
                 </div>

src/view/my-services/MyServices.js

@@ -1,3 +1,4 @@
+import SimpleCalendar from "../../components/Calendar";
 import Exams from "./Exams";
 import MyCourse from "./MyCourse";
 import MyOrders from "./MyOrders";
@@ -9,14 +10,17 @@ const MyServices=()=>{
   return (
     <div className="MyServices w-[93.5%] h-[100vh] pt-[4%] pb-2 px-4 flex flex-col justify-between">
       <div className="MyServices-row w-full h-[49%] flex flex-row-reverse justify-between">
-        <Exams/>
+        <Exams />
+        <div className="w-[28.5%] h-full">
+          <SimpleCalendar />
+        </div>
       </div>
       <div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between">
         <div className="w-[70%] h-full flex flex-row-reverse justify-between">
-          <MyRegisters/>
-          <MyCourse/>
+          <MyRegisters />
+          <MyCourse />
         </div>
-        <MyOrders/>
+        <MyOrders />
       </div>
     </div>
   );

src/view/my-services/index.css

@@ -0,0 +1,26 @@
+
+
+
+@media only screen and (max-width: 1489px) {
+  .frontBox{
+    transform: translateY(57%);
+  }
+}
+
+@media only screen and (max-width: 1409px) {
+  .frontBox {
+    transform: translateY(70%);
+  }
+}
+
+@media only screen and (max-width: 1314px) {
+  .frontBox {
+    transform: translateY(67%);
+  }
+}
+
+@media only screen and (max-width: 1229px) {
+  .frontBox {
+    transform: translateY(63%);
+  }
+}

tailwind.config.js

@@ -23,41 +23,43 @@ module.exports = {
         color17: "#CB1F1F",
         color18: "#E2E2E2",
         color19: "#959595", //register input label
-        red26: '#521326',
-        red25: '#752525',
-        red52: '#df1452',
-        red5B : '#c82b5b',
-        red46OP: 'rgba(255, 246, 246, 0.8)',
-        grayEC: '#ececec',
-        grayFD : '#fdfdfd',
-        grayE0 : '#e0e0e0',
-        gray81 : '#818181',
-        gray70 : '#707070',
-        gray37: '#373737',
-        grayAB: '#a5a8ab',
-        red82OP: 'rgba(223, 20, 82, 0.08)',
-        pinkF5: '#fff1f5',
-        pinkD6 : '#ffd6d6',
-        black40: '#404040',
-        green17 : '#8daf17',
-        greenE9 : '#dcffe9',
-        green13: '#00ba13',
-        blue5F : '#05335f',
-        blue7E : '#15517e',
-        blueFF : '#f2f9ff',
-        blue65 : '#65a9ff',
-        blueE3 : '#4c7fe3',
-        blueED : '#4690ed',
-        blueDF : '#14b5df',
-        blue52 : '#132c52',
-        blue3A : '#00253a',
-        blueCD : '#1064cd',
-
+        red26: "#521326",
+        red25: "#752525",
+        red52: "#df1452",
+        red5B: "#c82b5b",
+        red46OP: "rgba(255, 246, 246, 0.8)",
+        grayEC: "#ececec",
+        grayFD: "#fdfdfd",
+        grayE0: "#e0e0e0",
+        gray81: "#818181",
+        gray70: "#707070",
+        gray37: "#373737",
+        grayAB: "#a5a8ab",
+        red82OP: "rgba(223, 20, 82, 0.08)",
+        pinkF5: "#fff1f5",
+        pinkD6: "#ffd6d6",
+        black40: "#404040",
+        green17: "#8daf17",
+        greenE9: "#dcffe9",
+        green13: "#00ba13",
+        blue5F: "#05335f",
+        blue7E: "#15517e",
+        blueFF: "#f2f9ff",
+        blue65: "#65a9ff",
+        blueE3: "#4c7fe3",
+        blueED: "#4690ed",
+        blueDF: "#14b5df",
+        blue52: "#132c52",
+        blue3A: "#00253a",
+        blueCD: "#1064cd",
       },
     },
     screens: {
+      res0_5: "1525px",
+      res0_75: "1490px",
       res1: "1410px",
-      res1_2:"1270px",
+      res1_1: "1315px",
+      res1_2: "1270px",
       res2: "1230px",
     },
   },