update 11 files

node_modules/.cache/babel-loader/170b03b3a8c14390b548c8249e9ec111.json

@@ -0,0 +1 @@
+{"ast":null,"code":"var _jsxFileName = \"/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/ReligiousTimes/index.js\";\nimport React from \"react\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst ReligiousTimes = _ref => {\n  let {\n    hours\n  } = _ref;\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"w-fit flex flex-row items-center bg-[#f5f5f5] bg-surface shadow p-2.5 rounded\",\n    children: hours.map((hour, index) => /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"flex flex-row items-center\",\n      children: [/*#__PURE__*/_jsxDEV(\"span\", {\n        className: \"text-xs text-primary font-bold\",\n        children: hour.partOfDay\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 8,\n        columnNumber: 11\n      }, this), /*#__PURE__*/_jsxDEV(\"span\", {\n        className: \"text-xs text-secondary font-bold mr-1\",\n        children: hour.time\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 11,\n        columnNumber: 11\n      }, this), Number(index) !== hours.length - 1 && /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"h-[20px] w-0.5 bg-surfaceBorder mx-2\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 15,\n        columnNumber: 13\n      }, this)]\n    }, index, true, {\n      fileName: _jsxFileName,\n      lineNumber: 7,\n      columnNumber: 9\n    }, this))\n  }, void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 5,\n    columnNumber: 5\n  }, this);\n};\n\n_c = ReligiousTimes;\nexport default ReligiousTimes;\nReligiousTimes.defaultProps = {\n  hours: [{\n    partOfDay: \"صبح\",\n    time: \"5:03\"\n  }, {\n    partOfDay: \"طلوع\",\n    time: \"6:27\"\n  }, {\n    partOfDay: \"ظهر\",\n    time: \"12:15\"\n  }, {\n    partOfDay: \"غروب\",\n    time: \"18:05\"\n  }, {\n    partOfDay: \"مغرب\",\n    time: \"18:23\"\n  }, {\n    partOfDay: \"نیمه شب\",\n    time: \"18:23\"\n  }]\n};\n\nvar _c;\n\n$RefreshReg$(_c, \"ReligiousTimes\");","map":{"version":3,"names":["React","ReligiousTimes","hours","map","hour","index","partOfDay","time","Number","length","defaultProps"],"sources":["/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/ReligiousTimes/index.js"],"sourcesContent":["import React from \"react\";\n\nconst ReligiousTimes = ({ hours }) => {\n  return (\n    <div className=\"w-fit flex flex-row items-center bg-[#f5f5f5] bg-surface shadow p-2.5 rounded\">\n      {hours.map((hour, index) => (\n        <div className=\"flex flex-row items-center\" key={index}>\n          <span className=\"text-xs text-primary font-bold\">\n            {hour.partOfDay}\n          </span>\n          <span className=\"text-xs text-secondary font-bold mr-1\">\n            {hour.time}\n          </span>\n          {Number(index) !== hours.length - 1 && (\n            <div className=\"h-[20px] w-0.5 bg-surfaceBorder mx-2\"></div>\n          )}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default ReligiousTimes;\n\nReligiousTimes.defaultProps = {\n  hours: [\n    {\n      partOfDay: \"صبح\",\n      time: \"5:03\",\n    },\n    {\n      partOfDay: \"طلوع\",\n      time: \"6:27\",\n    },\n    {\n      partOfDay: \"ظهر\",\n      time: \"12:15\",\n    },\n    {\n      partOfDay: \"غروب\",\n      time: \"18:05\",\n    },\n    {\n      partOfDay: \"مغرب\",\n      time: \"18:23\",\n    },\n    {\n      partOfDay: \"نیمه شب\",\n      time: \"18:23\",\n    },\n  ],\n};\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAEA,MAAMC,cAAc,GAAG,QAAe;EAAA,IAAd;IAAEC;EAAF,CAAc;EACpC,oBACE;IAAK,SAAS,EAAC,+EAAf;IAAA,UACGA,KAAK,CAACC,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,kBACT;MAAK,SAAS,EAAC,4BAAf;MAAA,wBACE;QAAM,SAAS,EAAC,gCAAhB;QAAA,UACGD,IAAI,CAACE;MADR;QAAA;QAAA;QAAA;MAAA,QADF,eAIE;QAAM,SAAS,EAAC,uCAAhB;QAAA,UACGF,IAAI,CAACG;MADR;QAAA;QAAA;QAAA;MAAA,QAJF,EAOGC,MAAM,CAACH,KAAD,CAAN,KAAkBH,KAAK,CAACO,MAAN,GAAe,CAAjC,iBACC;QAAK,SAAS,EAAC;MAAf;QAAA;QAAA;QAAA;MAAA,QARJ;IAAA,GAAiDJ,KAAjD;MAAA;MAAA;MAAA;IAAA,QADD;EADH;IAAA;IAAA;IAAA;EAAA,QADF;AAiBD,CAlBD;;KAAMJ,c;AAoBN,eAAeA,cAAf;AAEAA,cAAc,CAACS,YAAf,GAA8B;EAC5BR,KAAK,EAAE,CACL;IACEI,SAAS,EAAE,KADb;IAEEC,IAAI,EAAE;EAFR,CADK,EAKL;IACED,SAAS,EAAE,MADb;IAEEC,IAAI,EAAE;EAFR,CALK,EASL;IACED,SAAS,EAAE,KADb;IAEEC,IAAI,EAAE;EAFR,CATK,EAaL;IACED,SAAS,EAAE,MADb;IAEEC,IAAI,EAAE;EAFR,CAbK,EAiBL;IACED,SAAS,EAAE,MADb;IAEEC,IAAI,EAAE;EAFR,CAjBK,EAqBL;IACED,SAAS,EAAE,SADb;IAEEC,IAAI,EAAE;EAFR,CArBK;AADqB,CAA9B"},"metadata":{},"sourceType":"module"}

node_modules/.cache/babel-loader/4c2279279aa3cafa91a8af9cda0f9b1c.json

@@ -0,0 +1 @@
+{"ast":null,"code":"var _jsxFileName = \"/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/UserProfileInfo/index.js\";\nimport React from \"react\";\nimport ProfileInfo from \"./ProfileInfo\";\nimport DateTime from \"./DateTime\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst UserProfileInfo = () => {\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"h-[54px] flex flex-row items-center w-fit bg-[#f5f5f5] md:bg-transparent \",\n    children: [/*#__PURE__*/_jsxDEV(DateTime, {}, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 8,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"w-0.5 h-full mx-4 bg-[#9DACD344] rounded\"\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 9,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(ProfileInfo, {}, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 10,\n      columnNumber: 7\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 7,\n    columnNumber: 5\n  }, this);\n};\n\n_c = UserProfileInfo;\nexport default UserProfileInfo;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserProfileInfo\");","map":{"version":3,"names":["React","ProfileInfo","DateTime","UserProfileInfo"],"sources":["/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/UserProfileInfo/index.js"],"sourcesContent":["import React from \"react\";\nimport ProfileInfo from \"./ProfileInfo\";\nimport DateTime from \"./DateTime\";\n\nconst UserProfileInfo = () => {\n  return (\n    <div className=\"h-[54px] flex flex-row items-center w-fit bg-[#f5f5f5] md:bg-transparent \">\n      <DateTime />\n      <div className=\"w-0.5 h-full mx-4 bg-[#9DACD344] rounded\"></div>\n      <ProfileInfo />\n    </div>\n  );\n};\n\nexport default UserProfileInfo;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,QAAP,MAAqB,YAArB;;;AAEA,MAAMC,eAAe,GAAG,MAAM;EAC5B,oBACE;IAAK,SAAS,EAAC,2EAAf;IAAA,wBACE,QAAC,QAAD;MAAA;MAAA;MAAA;IAAA,QADF,eAEE;MAAK,SAAS,EAAC;IAAf;MAAA;MAAA;MAAA;IAAA,QAFF,eAGE,QAAC,WAAD;MAAA;MAAA;MAAA;IAAA,QAHF;EAAA;IAAA;IAAA;IAAA;EAAA,QADF;AAOD,CARD;;KAAMA,e;AAUN,eAAeA,eAAf"},"metadata":{},"sourceType":"module"}

node_modules/.cache/babel-loader/aeec5b67693ec275b63b608a96b1564c.json

@@ -0,0 +1 @@
+{"ast":null,"code":"var _jsxFileName = \"/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/ReligiousTimes/index.js\";\nimport React from \"react\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst ReligiousTimes = _ref => {\n  let {\n    hours\n  } = _ref;\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"w-fit flex flex-row items-center bg-[#f5f5f5] md:bg-surface shadow p-2.5 rounded\",\n    children: hours.map((hour, index) => /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"flex flex-row items-center\",\n      children: [/*#__PURE__*/_jsxDEV(\"span\", {\n        className: \"text-xs text-primary font-bold\",\n        children: hour.partOfDay\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 8,\n        columnNumber: 11\n      }, this), /*#__PURE__*/_jsxDEV(\"span\", {\n        className: \"text-xs text-secondary font-bold mr-1\",\n        children: hour.time\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 11,\n        columnNumber: 11\n      }, this), Number(index) !== hours.length - 1 && /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"h-[20px] w-0.5 bg-surfaceBorder mx-2\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 15,\n        columnNumber: 13\n      }, this)]\n    }, index, true, {\n      fileName: _jsxFileName,\n      lineNumber: 7,\n      columnNumber: 9\n    }, this))\n  }, void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 5,\n    columnNumber: 5\n  }, this);\n};\n\n_c = ReligiousTimes;\nexport default ReligiousTimes;\nReligiousTimes.defaultProps = {\n  hours: [{\n    partOfDay: \"صبح\",\n    time: \"5:03\"\n  }, {\n    partOfDay: \"طلوع\",\n    time: \"6:27\"\n  }, {\n    partOfDay: \"ظهر\",\n    time: \"12:15\"\n  }, {\n    partOfDay: \"غروب\",\n    time: \"18:05\"\n  }, {\n    partOfDay: \"مغرب\",\n    time: \"18:23\"\n  }, {\n    partOfDay: \"نیمه شب\",\n    time: \"18:23\"\n  }]\n};\n\nvar _c;\n\n$RefreshReg$(_c, \"ReligiousTimes\");","map":{"version":3,"names":["React","ReligiousTimes","hours","map","hour","index","partOfDay","time","Number","length","defaultProps"],"sources":["/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/ReligiousTimes/index.js"],"sourcesContent":["import React from \"react\";\n\nconst ReligiousTimes = ({ hours }) => {\n  return (\n    <div className=\"w-fit flex flex-row items-center bg-[#f5f5f5] md:bg-surface shadow p-2.5 rounded\">\n      {hours.map((hour, index) => (\n        <div className=\"flex flex-row items-center\" key={index}>\n          <span className=\"text-xs text-primary font-bold\">\n            {hour.partOfDay}\n          </span>\n          <span className=\"text-xs text-secondary font-bold mr-1\">\n            {hour.time}\n          </span>\n          {Number(index) !== hours.length - 1 && (\n            <div className=\"h-[20px] w-0.5 bg-surfaceBorder mx-2\"></div>\n          )}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default ReligiousTimes;\n\nReligiousTimes.defaultProps = {\n  hours: [\n    {\n      partOfDay: \"صبح\",\n      time: \"5:03\",\n    },\n    {\n      partOfDay: \"طلوع\",\n      time: \"6:27\",\n    },\n    {\n      partOfDay: \"ظهر\",\n      time: \"12:15\",\n    },\n    {\n      partOfDay: \"غروب\",\n      time: \"18:05\",\n    },\n    {\n      partOfDay: \"مغرب\",\n      time: \"18:23\",\n    },\n    {\n      partOfDay: \"نیمه شب\",\n      time: \"18:23\",\n    },\n  ],\n};\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAEA,MAAMC,cAAc,GAAG,QAAe;EAAA,IAAd;IAAEC;EAAF,CAAc;EACpC,oBACE;IAAK,SAAS,EAAC,kFAAf;IAAA,UACGA,KAAK,CAACC,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,kBACT;MAAK,SAAS,EAAC,4BAAf;MAAA,wBACE;QAAM,SAAS,EAAC,gCAAhB;QAAA,UACGD,IAAI,CAACE;MADR;QAAA;QAAA;QAAA;MAAA,QADF,eAIE;QAAM,SAAS,EAAC,uCAAhB;QAAA,UACGF,IAAI,CAACG;MADR;QAAA;QAAA;QAAA;MAAA,QAJF,EAOGC,MAAM,CAACH,KAAD,CAAN,KAAkBH,KAAK,CAACO,MAAN,GAAe,CAAjC,iBACC;QAAK,SAAS,EAAC;MAAf;QAAA;QAAA;QAAA;MAAA,QARJ;IAAA,GAAiDJ,KAAjD;MAAA;MAAA;MAAA;IAAA,QADD;EADH;IAAA;IAAA;IAAA;EAAA,QADF;AAiBD,CAlBD;;KAAMJ,c;AAoBN,eAAeA,cAAf;AAEAA,cAAc,CAACS,YAAf,GAA8B;EAC5BR,KAAK,EAAE,CACL;IACEI,SAAS,EAAE,KADb;IAEEC,IAAI,EAAE;EAFR,CADK,EAKL;IACED,SAAS,EAAE,MADb;IAEEC,IAAI,EAAE;EAFR,CALK,EASL;IACED,SAAS,EAAE,KADb;IAEEC,IAAI,EAAE;EAFR,CATK,EAaL;IACED,SAAS,EAAE,MADb;IAEEC,IAAI,EAAE;EAFR,CAbK,EAiBL;IACED,SAAS,EAAE,MADb;IAEEC,IAAI,EAAE;EAFR,CAjBK,EAqBL;IACED,SAAS,EAAE,SADb;IAEEC,IAAI,EAAE;EAFR,CArBK;AADqB,CAA9B"},"metadata":{},"sourceType":"module"}

node_modules/.cache/babel-loader/df73207fb8d8ad03f1758d260f71f63a.json

@@ -0,0 +1 @@
+{"ast":null,"code":"var _jsxFileName = \"/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/UserProfileInfo/index.js\";\nimport React from \"react\";\nimport ProfileInfo from \"./ProfileInfo\";\nimport DateTime from \"./DateTime\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst UserProfileInfo = () => {\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"h-[54px] flex flex-row items-center w-fit bg-[#f5f5f5] md:bg-transparent p-4 md:p-0\",\n    children: [/*#__PURE__*/_jsxDEV(DateTime, {}, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 8,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"w-0.5 h-full mx-4 bg-[#9DACD344] rounded\"\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 9,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(ProfileInfo, {}, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 10,\n      columnNumber: 7\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 7,\n    columnNumber: 5\n  }, this);\n};\n\n_c = UserProfileInfo;\nexport default UserProfileInfo;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserProfileInfo\");","map":{"version":3,"names":["React","ProfileInfo","DateTime","UserProfileInfo"],"sources":["/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/UserProfileInfo/index.js"],"sourcesContent":["import React from \"react\";\nimport ProfileInfo from \"./ProfileInfo\";\nimport DateTime from \"./DateTime\";\n\nconst UserProfileInfo = () => {\n  return (\n    <div className=\"h-[54px] flex flex-row items-center w-fit bg-[#f5f5f5] md:bg-transparent p-4 md:p-0\">\n      <DateTime />\n      <div className=\"w-0.5 h-full mx-4 bg-[#9DACD344] rounded\"></div>\n      <ProfileInfo />\n    </div>\n  );\n};\n\nexport default UserProfileInfo;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,QAAP,MAAqB,YAArB;;;AAEA,MAAMC,eAAe,GAAG,MAAM;EAC5B,oBACE;IAAK,SAAS,EAAC,qFAAf;IAAA,wBACE,QAAC,QAAD;MAAA;MAAA;MAAA;IAAA,QADF,eAEE;MAAK,SAAS,EAAC;IAAf;MAAA;MAAA;MAAA;IAAA,QAFF,eAGE,QAAC,WAAD;MAAA;MAAA;MAAA;IAAA,QAHF;EAAA;IAAA;IAAA;IAAA;EAAA,QADF;AAOD,CARD;;KAAMA,e;AAUN,eAAeA,eAAf"},"metadata":{},"sourceType":"module"}

node_modules/.cache/babel-loader/f2b277d9c6715010ef27c8f7712becbb.json

@@ -0,0 +1 @@
+{"ast":null,"code":"var _jsxFileName = \"/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/UserProfileInfo/index.js\";\nimport React from \"react\";\nimport ProfileInfo from \"./ProfileInfo\";\nimport DateTime from \"./DateTime\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst UserProfileInfo = () => {\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"h-[54px] flex flex-row items-center w-fit bg-[#f5f5f5]\",\n    children: [/*#__PURE__*/_jsxDEV(DateTime, {}, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 8,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"w-0.5 h-full mx-4 bg-[#9DACD344] rounded\"\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 9,\n      columnNumber: 7\n    }, this), /*#__PURE__*/_jsxDEV(ProfileInfo, {}, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 10,\n      columnNumber: 7\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 7,\n    columnNumber: 5\n  }, this);\n};\n\n_c = UserProfileInfo;\nexport default UserProfileInfo;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserProfileInfo\");","map":{"version":3,"names":["React","ProfileInfo","DateTime","UserProfileInfo"],"sources":["/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/UserProfileInfo/index.js"],"sourcesContent":["import React from \"react\";\nimport ProfileInfo from \"./ProfileInfo\";\nimport DateTime from \"./DateTime\";\n\nconst UserProfileInfo = () => {\n  return (\n    <div className=\"h-[54px] flex flex-row items-center w-fit bg-[#f5f5f5]\">\n      <DateTime />\n      <div className=\"w-0.5 h-full mx-4 bg-[#9DACD344] rounded\"></div>\n      <ProfileInfo />\n    </div>\n  );\n};\n\nexport default UserProfileInfo;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,QAAP,MAAqB,YAArB;;;AAEA,MAAMC,eAAe,GAAG,MAAM;EAC5B,oBACE;IAAK,SAAS,EAAC,wDAAf;IAAA,wBACE,QAAC,QAAD;MAAA;MAAA;MAAA;IAAA,QADF,eAEE;MAAK,SAAS,EAAC;IAAf;MAAA;MAAA;MAAA;IAAA,QAFF,eAGE,QAAC,WAAD;MAAA;MAAA;MAAA;IAAA,QAHF;EAAA;IAAA;IAAA;IAAA;EAAA,QADF;AAOD,CARD;;KAAMA,e;AAUN,eAAeA,eAAf"},"metadata":{},"sourceType":"module"}

src/components/BoxNextToEachOther/index.js

@@ -4,25 +4,25 @@ const BoxNextToEachOther = ({ cards, selected }) => {
   const [active, setActive] = useState([]);
 
   return (
-    <div className="w-fit flex flex-row items-center gap-x-2">
+    <div className="w-fit flex flex-wrap justify-center items-center gap-x-4 gap-y-4 md:gap-y-0">
       {cards.map((card, index) => (
         <div
           key={index}
-          className={`relative max-w-[224px] max-h-[210px] w-44 h-44 flex flex-col items-center justify-center text-2xl border border-secondary rounded-md cursor-pointer
+          className={`relative max-w-[224px] max-h-[210px] w-44 h-44 flex flex-col items-center justify-center  border border-secondary rounded-md cursor-pointer
            ${active.includes(card) ? "bg-secondary" : "bg-surface"}
 
           `}
           onClick={() =>
             setActive(
               active.includes(card)
-                ? active.filter((item) => item != card)
+                ? active.filter((item) => item !== card)
                 : [...active, card]
             )
           }
         >
           {console.log(setActive)}
           <h2
-            className={`font-bold 
+            className={`font-bold text-lg md:text-2xl
             ${active.includes(card) ? "text-primaryText" : "text-primary"}
             `}
           >

src/components/DistributedData/index.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const DistributedData = ({ items1 }) => {
   return (
-    <div className="w-[404px] flex flex-col items-center gap-y-4 mx-auto bg-surface border border-surfaceBorder shadow-sm rounded p-3">
+    <div className="w-[404px] flex flex-col items-center gap-y-4 mx-auto bg-[#f5f5f5] md:bg-surface border border-surfaceBorder shadow-sm rounded p-3">
       {items1.map((row, index) => (
         <div
           className={`flex flex-row items-center justify-around w-full border-surfaceBorder pb-3 ${

src/components/Homepage/index.js

@@ -13,29 +13,33 @@ const Homepage = ({ title, subTitle }) => {
   return (
     <section className="relative h-screen p-1 flex flex-col items-center justify-center">
       <div className="flex flex-col items-center justify-center">
-        {/* title / subtitle */}
-        <h1 className="text-primary text-6xl font-bold">{title}</h1>
-        <p className="text-primary text-3xl mt-10">{subTitle}</p>
-        <hr className="my-7" />
-        {/* BoxNextToEachOther */}
-        <BoxNextToEachOther />
-        <Button
-          text="رفتن به مرحله بعد"
-          className="w-full  py-4 bg-secondaryLight text-lg text-secondaryText rounded mt-10"
-        />
-        {/* form input اینجارو از کامنت در بیارید */}
-        {/* <FormInput /> */}
         {/* ? absolute items */}
         <img
           src="images/flower.svg"
-          className="flex absolute left-1/2 top-0 transform -translate-x-1/2 -translate-y-1/2"
+          className="flex md:absolute md:left-1/2 md:top-0 md:transform md:-translate-x-1/2 md:-translate-y-1/2"
           alt="flower"
         />
-        <div className="flex flex-col items-center justify-center gap-y-7 absolute left-5 top-10">
+        {/* title / subtitle */}
+        <h1 className="text-primary text-3xl md:text-6xl font-bold mt-7">
+          {title}
+        </h1>
+        <p className="text-primary text-lg md:text-3xl mt-4 md:mt-10">
+          {subTitle}
+        </p>
+        <hr className="my-7" />
+        {/* form input اینجارو از کامنت در بیارید */}
+        {/* <FormInput /> */}
+        <div className="flex flex-col items-center justify-center gap-y-7 md:absolute md:left-5 md:top-10 mb-10 md:md-0">
           <UserProfileInfo />
           <ReligiousTimes />
           <DistributedData />
         </div>
+        {/* BoxNextToEachOther */}
+        <BoxNextToEachOther />
+        <Button
+          text="رفتن به مرحله بعد"
+          className="w-[44%] md:w-full  py-4 bg-secondaryLight text-base md:text-lg text-secondaryText rounded mt-10 mb-10 md:mb-0"
+        />
       </div>
       {/* <Login /> */}
     </section>

src/components/ReligiousTimes/index.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const ReligiousTimes = ({ hours }) => {
   return (
-    <div className="w-fit flex flex-row items-center bg-surface shadow p-2.5 rounded">
+    <div className="w-fit flex flex-row items-center bg-[#f5f5f5] md:bg-surface shadow p-2.5 rounded">
       {hours.map((hour, index) => (
         <div className="flex flex-row items-center" key={index}>
           <span className="text-xs text-primary font-bold">