Add empty AST cache file for version 0.8.44 with non-object root data

app/clinics/loading.js

@@ -6,8 +6,7 @@ export default function Loading() {
   return (
     <div className="padding-responsive pt-[20px]">
       <ul
-        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px]
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
-            gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
       >
         {Array.from({ length: 6 }).map((_, idx) => (
           <ItemClinic key={idx} data={{}} loading setFilteredClinics={() => {}} />

app/component/CustomTable.js

@@ -23,10 +23,7 @@ function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
             {tableHead.map((item, idx) => (
               <TableCell
                 key={idx}
-                className={`
+                className={` !text-[#616161] dark:!border-none dark:!text-[#D7D8ED] !text-[14px] !font-normal !py-[10px] !px-[18px] ${centerTable.includes(idx) ? "!text-center" : "!text-start"} `}
-                  !text-[#616161] dark:!border-none dark:!text-[#D7D8ED] !text-[14px] !font-normal !py-[10px] !px-[18px]
-                  ${centerTable.includes(idx) ? "!text-center" : "!text-start"}
-                `}
               >
                 {item}
               </TableCell>

app/component/ItemDoctor.js

@@ -82,11 +82,7 @@ function ItemDoctor({ doctor, loading, setDoctors, priority = false }) {
       </div>
       <CustomLoading loading={loading} width={150} height={20}>
         <p
-          className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
+          className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px] ${Number(doctor?.active) ? "bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]" : "bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]" }`}
-                    ${Number(doctor?.active)
-              ? "bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]"
-              : "bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]"
-            }`}
         >
           {Number(doctor?.active) && doctor?.free_turn
             ? `اولین نوبت آزاد: ${doctor.free_turn}`

app/component/Pageguide.js

@@ -4,21 +4,12 @@ function Pageguide({ list }) {
       {list.map((item, idx) => (
         <li key={idx} className="flex items-center justify-start gap-1">
           <h2
-            className={`text-[16px] font-normal
+            className={`text-[16px] font-normal ${ list.length > idx + 1 ? "text-[#9B9B9B]" : "text-[#525252]" } `}
-                            ${
-                              list.length > idx + 1
-                                ? "text-[#9B9B9B]"
-                                : "text-[#525252]"
-                            }
-                            `}
           >
             {item}
           </h2>
           <span
-            className={`
+            className={` text-[#9B9B9B] text-[16px] font-normal ${list.length > idx + 1 ? "flex" : "hidden"} `}
-                            text-[#9B9B9B] text-[16px] font-normal
-                            ${list.length > idx + 1 ? "flex" : "hidden"}
-                            `}
           >
             {">"}
           </span>

app/component/PopoverDate.js

@@ -20,8 +20,7 @@ function PopoverDate({ text, updateDate, type }) {
     <div>
       <Button
         onClick={handleClick}
-        className="!border-[#EFEFEF] dark:!border-[#343645] !bg-[#FFF] dark:!bg-[#222433] !py-[4.5px] !text-[#7E7E7E] 
+        className="!border-[#EFEFEF] dark:!border-[#343645] !bg-[#FFF] dark:!bg-[#222433] !py-[4.5px] !text-[#7E7E7E] dark:!text-[#A1A1A1]  !text-[16px] !font-normal !w-[115px]"
-        dark:!text-[#A1A1A1]  !text-[16px] !font-normal !w-[115px]"
       >
         {text}
       </Button>

app/component/Tabs.js

@@ -35,10 +35,7 @@ function Tabs({ value, handleChange, listTab, inactives, isSm, style }) {
                 marginLeft: !isSm ? "9px !important" : undefined,
               },
             }}
-            className={`
+            className={` text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold ${isSm ? "!w-1/2 !m-0" : "!mr-[38px]"} `}
-              text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold
-              ${isSm ? "!w-1/2 !m-0" : "!mr-[38px]"}
-            `}
           />
         ))}
       </TabsMUI>

app/component/TimePickerField.js

@@ -82,9 +82,7 @@ function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
           }}
         />
         <p
-          className={`absolute cursor-pointer rounded-[8px] dark:bg-[#222433] dark:!text-[#A1A1A1] h-[calc(100%_-_6px)] flex items-center right-[4px] py-[8px] px-[8px] 
+          className={`absolute cursor-pointer rounded-[8px] dark:bg-[#222433] dark:!text-[#A1A1A1] h-[calc(100%_-_6px)] flex items-center right-[4px] py-[8px] px-[8px] w-[calc(100%_-_8px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2 ${disable && "!text-[rgba(126,126,126,0.5)]"}`}
-                w-[calc(100%_-_8px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
-                ${disable && "!text-[rgba(126,126,126,0.5)]"}`}
           onClick={openTimePicker}
         >
           {value}

app/component/TimePickerInput.js

@@ -47,8 +47,7 @@ function TimePickerInput({ changeData, handleDisableHours, name, data }) {
           }}
         />
         <p
-          className="absolute dark:bg-[#1F1D2B] md:dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
+          className="absolute dark:bg-[#1F1D2B] md:dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2"
-            w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2"
         >
           {data[name]}
         </p>

app/component/comment/SendAnswer.js

@@ -51,8 +51,7 @@ function SendAnswer({ doctor, parentUuid, onSent }) {
         disabled={loading}
         onClick={sendReq}
         variant="contained"
-        className="!p-2 !h-10 !text-[12px] !font-medium sm:!py-[10px] md:!px-[12px] !rounded-[8px]
+        className="!p-2 !h-10 !text-[12px] !font-medium sm:!py-[10px] md:!px-[12px] !rounded-[8px] !shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]"
-        !shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]"
       >
         ارسال پاسخ
       </Button>

app/component/date/dateTime/hours/List.js

@@ -15,17 +15,10 @@ function List({ appo, hour, setHour, value }) {
             <Button
               onClick={() => setHour(item)}
               disabled={!isSelectable(item)}
-              className={`
+              className={` !w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px] ${checkHour(item) ? "!bg-[#F79463] " : ""} `}
-                          !w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
-                          ${checkHour(item) ? "!bg-[#F79463] " : ""}
-                      `}
             >
               <p
-                className={`
+                className={` text-[16px] font-semibold text-[#525252] ${isSelectable(item) ? "text-[#525252]" : "text-[#D7D7D7]"} ${checkHour(item) ? "!text-[#FAFAFA] " : ""} `}
-                          text-[16px] font-semibold text-[#525252]
-                          ${isSelectable(item) ? "text-[#525252]" : "text-[#D7D7D7]"}
-                          ${checkHour(item) ? "!text-[#FAFAFA] " : ""}
-                      `}
               >
                 {item.start_time}
               </p>

app/component/fields/EditField.js

@@ -66,8 +66,7 @@ function EditField({
         disabled={noDisable ? false : !data?.isEdit}
         error={!!error}
         helperText={error || ""}
-        className={`!w-full res-field-account dark:!bg-transparent ${isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"}
+        className={`!w-full res-field-account dark:!bg-transparent ${isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"} }`}
-          }`}
         onChange={handleChange}
         sx={{
           "& .MuiFormLabel-root": {
@@ -98,8 +97,7 @@ function EditField({
         }}
       />
       <Button
-        className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
+        className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1 ${multiline ? "!top-[24px]" : "!top-1/2"}`}
-                    ${multiline ? "!top-[24px]" : "!top-1/2"}`}
       // onClick={() => {
       // changeData(!data.isEdit, "isEdit", name);
       // }}

app/component/head/index.js

@@ -2,11 +2,7 @@ function HeadPageList({ children, title, detail }) {
   return (
     <div className="bg-head-menu !bg-no-repeat !bg-cover !bg-center">
       <div
-        className="
+        className=" padding-responsive flex flex-col items-center gap-[25px] pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)] pb-[62px] sm:pb-[69px] md:pb-[76px] lg:pb-[85px] "
-          padding-responsive flex flex-col items-center gap-[25px]
-          pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
-          pb-[62px] sm:pb-[69px] md:pb-[76px] lg:pb-[85px]
-        "
       >
         <h1 className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] text-center font-bold">
           {title}

app/component/modalSearchCity/ButtonFilter.js

@@ -18,8 +18,7 @@ function ButtonFilter({ selected, setOpen }) {
           <Location />
         </div>
         <p
-          className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
+          className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
-                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
         >
           {(selected.city?.name !== "نوبت 724" ? selected.city?.name : false) ||
             "شهر"}

app/component/openLocation/Content.js

@@ -41,11 +41,7 @@ function Content({ data, onClose }) {
           >
             <a href={item.url} target="_blank" rel="noopener noreferrer">
               <Image
-                className="
+                className=" w-[32px] h-[32px] lg:w-[40px] lg:h-[40px] min-w-[32px] min-h-[32px] lg:min-w-[40px] lg:min-h-[40px] max-w-[32px] max-h-[32px] lg:max-w-[40px] lg:max-h-[40px] "
-                  w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]
-                  min-w-[32px] min-h-[32px] lg:min-w-[40px] lg:min-h-[40px]
-                  max-w-[32px] max-h-[32px] lg:max-w-[40px] lg:max-h-[40px]
-                "
                 src={item.src}
                 alt="icon app"
                 height={40}

app/component/selectors/MultipleSelect.js

@@ -55,13 +55,7 @@ export default function MultipleSelect({ value, updateData, name, list }) {
             key={item.id || item.uuid}
             value={item.id}
             selected={value.includes(item.id)}
-            className={`!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1]
+            className={`!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] ${ value.includes(item.id) ? "dark:!bg-[#35343D] !bg-[#F1F1F1]" : "dark:!bg-[#1F1D2B] !bg-[#FFF]" } hover:dark:!bg-[#35343D] hover:!bg-[#F5F5F5]`}
-    ${
-      value.includes(item.id)
-        ? "dark:!bg-[#35343D] !bg-[#F1F1F1]"
-        : "dark:!bg-[#1F1D2B] !bg-[#FFF]"
-    } 
-    hover:dark:!bg-[#35343D] hover:!bg-[#F5F5F5]`}
           >
             {item.name || item.label}
           </MenuItem>

app/component/uploadFile/ModalUpload.js

@@ -8,9 +8,7 @@ function ModalUpload({ open, handleClose, data, uploadImg }) {
     <Modal open={open} onClose={handleClose} className="!hidden md:!flex">
       <Box
         sx={styleDefault}
-        className="!pt-[12px] md:!pt-[14px] lg:!py-[16px]
+        className="!pt-[12px] md:!pt-[14px] lg:!py-[16px] dark:!bg-[#222433] dark:!shadow-none !px-[12px] sm:!px-[16px] md:!px-[20px] lg:!px-[24px] !pb-[12px] sm:!pb-[16px] lg:!pb-[20px] dark:!border-transparent"
-            dark:!bg-[#222433] dark:!shadow-none !px-[12px] sm:!px-[16px] md:!px-[20px] lg:!px-[24px]
-            !pb-[12px] sm:!pb-[16px] lg:!pb-[20px] dark:!border-transparent"
       >
         <div className="flex items-center justify-between">
           <p className="text-[#3B3B3B] dark:text-[#DBDBDB] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">

app/payment/[uuid]/page.js

@@ -150,9 +150,7 @@ export default function PaymentDetailsPage() {
                         <div className="flex justify-between items-center py-3 border-b border-gray-100">
                             <span className="text-[#616161] font-medium">وضعیت:</span>
                             <span
-                                className={`px-4 py-2 rounded-full font-bold ${getStatusColor(
+                                className={`px-4 py-2 rounded-full font-bold ${getStatusColor( payment.status )}`}
-                                    payment.status
-                                )}`}
                             >
                                 {getStatusLabel(payment.status)}
                             </span>

components/aboutUs/Services.js

@@ -3,12 +3,12 @@ import UnderlineLG from "../icons/UnderlineLG";
 import TickOrangeA from "../icons/TickOrangeA";
 
 const ourServices = [
-  "جستجوی سریع پزشک",
+  { text: "جستجوی سریع پزشک" },
-  "جستجوی کلینیک و مراکز درمانی",
+  { text: "جستجوی کلینیک و مراکز درمانی" },
-  "نوبت‌گیری راحت و آسان",
+  { text: "نوبت‌گیری راحت و آسان" },
-  "داشبورد تخصصی بیمار",
+  { text: "داشبورد تخصصی بیمار", link: "https://clinic-pro.ir/" },
-  "داشبورد تخصصی پزشک",
+  { text: "داشبورد تخصصی پزشک", link: "https://clinic-pro.ir/" },
-  "پشتیبانی و یادآوری نوبت",
+  { text: "پشتیبانی و یادآوری نوبت" },
 ];
 
 function Services() {
@@ -20,13 +20,23 @@ function Services() {
         </AnimationTextHead>
       </div>
       <ul
-        className="mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px] 
+        className="mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px] gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px] lg:grid lg:grid-cols-3"
-                gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px] lg:grid lg:grid-cols-3"
       >
         {ourServices.map((item, idx) => (
           <li key={idx} className="flex items-start justify-start gap-[8px]">
             <TickOrangeA />
-            <p className="text-[#525252] text-[16px] font-medium">{item}</p>
+            {item.link ? (
+              <a
+                href={item.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#525252] text-[16px] font-medium hover:text-[#F17732] transition-colors"
+              >
+                {item.text}
+              </a>
+            ) : (
+              <p className="text-[#525252] text-[16px] font-medium">{item.text}</p>
+            )}
           </li>
         ))}
       </ul>

components/aboutUs/index.js

@@ -9,18 +9,11 @@ async function AboutUsPage() {
 
   return (
     <div
-      className="
+      className=" pt-[24px] sm:pt-[56px] md:pt-[88px] lg:pt-[120px] mt-[56px] px-0 md:px-[80px] lg:px-[108px] "
-                pt-[24px] sm:pt-[56px] md:pt-[88px] lg:pt-[120px] mt-[56px]
-                px-0 md:px-[80px] lg:px-[108px]
-            "
     >
       <Head siteName={siteName} slogan={slogan} />
       <div
-        className="
+        className=" text-[#525252] text-[16px] font-normal mt-[32px] leading-[28px] md:leading-[32px] lg:leading-[40px] px-[16px] sm:px-[52px] md:px-[15%] text-justify md:text-center flex flex-col gap-[16px] "
-                    text-[#525252] text-[16px] font-normal mt-[32px] leading-[28px] md:leading-[32px] lg:leading-[40px]
-                    px-[16px] sm:px-[52px] md:px-[15%] text-justify md:text-center
-                    flex flex-col gap-[16px]
-                "
       >
         <p>
           {siteName} یک سامانه‌ی آنلاین نوبت‌دهی پزشکی است که با هدف ساده‌تر کردن

components/appointment/Content.js

@@ -4,8 +4,7 @@ import Location from "./location";
 function Content({ doctor, step, setStep, children, isFirst, disableSide, selectedSlot, selectedDate }) {
   return (
     <div
-      className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
+      className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]"
-            items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]"
     >
       {isFirst ? (
         <Location disableSide={disableSide} doctor={doctor} />

components/appointment/date/index.js

@@ -9,8 +9,7 @@ function Date({ doctor, setStep, disabledDates, setSelectedSlot, setSelectedDate
   return (
     <div className="w-full lg:w-[61%]">
       <div
-        className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] 
+        className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] bg-transparent lg:bg-[#FFF]"
-            bg-transparent lg:bg-[#FFF]"
       >
         <Time
           setDate={setDate}

components/appointment/detail/Form.js

@@ -21,8 +21,7 @@ function Form({ changeData, insurance, supplementaryInsurance, data, isForAnothe
 
   return (
     <div
-      className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start 
+      className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"
-        justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"
     >
       <Content title="شماره موبایل">
         {isForAnother ? (

components/appointment/detail/SubmitData.js

@@ -186,10 +186,7 @@ function SubmitData({ setStep, data, prevData, setErrors, doctor, isForAnother,
     <ButtonFixed>
       <Button
         disabled={loading}
-        className={`
+        className={` !flex !w-full md:!w-fit !mt-0 md:!mt-[32px] !gap-[4px] md:!mr-auto !px-[12px] !py-[8px] md:!py-[9px] !min-w-[150px] `}
-            !flex !w-full md:!w-fit !mt-0 md:!mt-[32px]
-            !gap-[4px] md:!mr-auto !px-[12px] !py-[8px] md:!py-[9px] !min-w-[150px]
-        `}
         variant="contained"
         onClick={handleSubmit}
       >

components/appointment/detail/index.js

@@ -79,9 +79,7 @@ function Detail({
     // ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}
     <div className="w-full lg:w-[59%]">
       <div
-        className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
+        className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px] `}
-            rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
-            `}
       >
         {/* دکمه برگشت */}
         <div

components/appointment/failedPay/index.js

@@ -8,8 +8,7 @@ function FailedPay({ setStep, fadeElement }) {
   return (
     <div className="w-full lg:w-[59%]">
       <div
-        className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] 
+        className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
-                rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
       >
         <div className="mt-[7px]">
           <div className="flex flex-col justify-center items-center gap-[14px]">

components/appointment/information/Detail.js

@@ -93,15 +93,12 @@ function Detail({ doctor, step, setStep, selectedSlot, selectedDate }) {
         </li>
       </ul>
       <span
-        className="mt-[10px] sm:mt-[16px] md:mt-[22px] lg:mt-[28px] 
+        className="mt-[10px] sm:mt-[16px] md:mt-[22px] lg:mt-[28px] mb-[8px] sm:mb-[13px] md:mb-[19px] lg:mb-[24px] w-full h-px bg-[#D7D7D7] block"
-                mb-[8px] sm:mb-[13px] md:mb-[19px] lg:mb-[24px] 
-                w-full h-px bg-[#D7D7D7] block"
       ></span>
       <ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
         {/* <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
           <div
-            className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
+            className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px] w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
-                        w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
           >
             <TickCircleOrange />
           </div>
@@ -112,8 +109,7 @@ function Detail({ doctor, step, setStep, selectedSlot, selectedDate }) {
         </li> */}
         <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
           <div
-            className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
+            className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px] w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
-              w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
           >
             <TickCircleOrange />
           </div>

components/appointment/information/Head.js

@@ -8,20 +8,12 @@ function Head({ doctor }) {
 
   return (
     <div
-      className="
+      className=" flex items-center justify-start gap-[8px] sm:gap-[11px] md:gap-[14px] lg:gap-[16px] mt-[8px] sm:mt-[13px] md:mt-[19px] lg:mt-[24px] mb-[12px] sm:mb-[19px] md:mb-[25px] lg:lg:mb-[32px] "
-            flex items-center justify-start 
-            gap-[8px] sm:gap-[11px] md:gap-[14px] lg:gap-[16px] 
-            mt-[8px] sm:mt-[13px] md:mt-[19px] lg:mt-[24px]
-            mb-[12px] sm:mb-[19px] md:mb-[25px] lg:lg:mb-[32px]
-        "
     >
       <DoctorAvatar
         doctor={doctor}
         size={95}
-        className="
+        className=" w-[40px] sm:w-[58px] md:w-[77px] lg:w-[95px] h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px] "
-                    w-[40px] sm:w-[58px] md:w-[77px] lg:w-[95px]
-                    h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px]
-                "
       />
       <div className="flex flex-col items-start justify-center gap-[8px] sm:gap-[12px] md:gap-[16px] lg:gap-[20px]">
         <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">

components/appointment/information/index.js

@@ -6,18 +6,10 @@ import Head from "./Head";
 function Information({ doctor, step, setStep, typePay, isPay, disableSide, selectedSlot, selectedDate }) {
   return (
     <div
-      className={`w-full lg:w-[41%] relative ${disableSide ? "hidden lg:flex" : ""
+      className={`w-full lg:w-[41%] relative ${disableSide ? "hidden lg:flex" : "" }`}
-        }`}
     >
       <div
-        className={`p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px] sticky right-0 w-full opacity-page rounded-[8px] border 
+        className={`p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px] sticky right-0 w-full opacity-page rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF] top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)] ${typePay === "success" || typePay === "failed" ? "hidden md:block" : "block" } `}
-                    border-solid border-[#EFEFEF] bg-[#FFF] 
-                    top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]
-                    ${typePay === "success" || typePay === "failed"
-            ? "hidden md:block"
-            : "block"
-          }
-                `}
       >
         <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
           جزئیات نوبت

components/appointment/location/Head.js

@@ -11,10 +11,7 @@ function Head({ doctor }) {
       <DoctorAvatar
         doctor={doctor}
         size={56}
-        className="
+        className=" w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px] h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px] "
-                    w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
-                    h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
-                "
       />
       <div className="flex flex-col items-start justify-start gap-[8px]">
         <h2 className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">

components/appointment/location/index.js

@@ -5,8 +5,7 @@ function Location({ doctor }) {
   return (
     <div className="h-fit lg:h-screen w-full lg:w-[39%]">
       <div
-        className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
+        className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]"
-                top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]"
       >
         <Head doctor={doctor} />
         <span className="block bg-[#EFEFEF] lg:bg-transparent w-full h-px lg:my-[6px] mt-[16px]"></span>

components/appointment/paying/ButtonFixed.js

@@ -3,9 +3,7 @@ import React from "react";
 function ButtonFixed({ children }) {
   return (
     <div
-      className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t 
+      className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t md:border-t-transparent border-[#D7D7D7] z-10 !w-full sm:!w-full !p-[16px] sm:!px-[52px] md:!ml-0 md:!p-0 md:!w-full"
-        md:border-t-transparent border-[#D7D7D7] z-10
-        !w-full sm:!w-full !p-[16px] sm:!px-[52px] md:!ml-0 md:!p-0 md:!w-full"
     >
       {children}
     </div>

components/appointment/paying/index.js

@@ -118,18 +118,14 @@ function Paying({ setStep, appointmentId, expiresAt, doctor, data, isForAnother,
                 مهلت پرداخت و نگه‌داری نوبت
               </span>
               <span
-                className={`text-[14px] md:text-[16px] font-bold tabular-nums ${
+                className={`text-[14px] md:text-[16px] font-bold tabular-nums ${ timeLeft < 60 ? "text-[#E0383B]" : "text-[#5559CE]" }`}
-                  timeLeft < 60 ? "text-[#E0383B]" : "text-[#5559CE]"
-                }`}
               >
                 {formatTime(timeLeft)}
               </span>
             </div>
             <div className="w-full h-[6px] rounded-full bg-[#EFEFEF] overflow-hidden">
               <div
-                className={`h-full rounded-full transition-all duration-1000 ease-linear ${
+                className={`h-full rounded-full transition-all duration-1000 ease-linear ${ timeLeft < 60 ? "bg-[#E0383B]" : "bg-[#5559CE]" }`}
-                  timeLeft < 60 ? "bg-[#E0383B]" : "bg-[#5559CE]"
-                }`}
                 style={{ width: `${progress}%` }}
               />
             </div>

components/appointment/successPay/index.js

@@ -7,8 +7,7 @@ function SuccessPay({ setStep }) {
   return (
     <div className="w-full lg:w-[59%]">
       <div
-        className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] 
+        className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
-                rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
       >
         <div className="pt-[8px] pb-[4px] grid place-items-center">
           <div className="flex flex-col justify-center items-center gap-[14px]">
@@ -18,9 +17,7 @@ function SuccessPay({ setStep }) {
             </p>
           </div>
           <p
-            className="text-[#3B3B3B] text-[16px] font-normal text-center
+            className="text-[#3B3B3B] text-[16px] font-normal text-center mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px] mb-[24px] md:mb-[16px]"
-                mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px]
-                mb-[24px] md:mb-[16px]"
           >
             نوبت شما تأیید شد و پیامک تأیید برای بیمار ارسال می‌شود. برای نمایش نوبت‌ها به قسمت نوبت‌های من بروید.{" "}
           </p>

components/blog/detail/commentUser/AddComment.js

@@ -9,8 +9,7 @@ function AddComment() {
       </p>
       <Button
         variant="outlined"
-        className="!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] 
+        className="!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] !px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]"
-                !px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]"
       >
         ثبت نظر
       </Button>

components/blog/relatedContent/Item.js

@@ -15,11 +15,7 @@ function Item({ data, idx, loading }) {
       <CustomLoading width={80} height={72} loading={loading}>
         <Link href={`/blog/${data.uuid}`}>
           <img
-            className="
+            className=" w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px] h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px] rounded-[8px] overflow-hidden object-cover "
-                        w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px]
-                        h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px]
-                        rounded-[8px] overflow-hidden object-cover
-                    "
             src={cover}
             alt={data.title || "article"}
           />

components/blogs/title/ItemTitle.js

@@ -4,14 +4,7 @@ function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
   return (
     <li>
       <Button
-        className={`
+        className={` !py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px ${ activeBtn === idx ? "!bg-[#F17732] !text-[#FAFAFA]" : "!bg-[#F5F5F5] !text-[#3B3B3B]" } `}
-                !py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px
-                ${
-                  activeBtn === idx
-                    ? "!bg-[#F17732] !text-[#FAFAFA]"
-                    : "!bg-[#F5F5F5] !text-[#3B3B3B]"
-                }
-            `}
         onClick={() => setActiveBtn(idx)}
         variant="contained"
         color="secondary"

components/clinic/components/about/ListBime.js

@@ -56,8 +56,7 @@ function ListBime({ data }) {
 
       <ul
         ref={list}
-        className={`flex mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px] ${showArrows ? "overflow-x-auto hidden-scroll" : "overflow-visible"
+        className={`flex mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px] ${showArrows ? "overflow-x-auto hidden-scroll" : "overflow-visible" }`}
-          }`}
       >
         {data?.list_bime?.map((item, idx) => (
           <CustomLoading key={idx} width={itemWidth} height={110}>

components/clinic/components/about/Services.js

@@ -4,10 +4,7 @@ import TickCircleOrange from "@/components/icons/TickCircleOrange";
 function Services({ data }) {
   return (
     <ul
-      className="
+      className=" mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4 gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
-    mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
-    gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] 
-    gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
     >
       {data?.services?.map((item, idx) => (
         <li

components/clinic/components/about/Specialties.js

@@ -4,10 +4,7 @@ import TickCircleOrange from "@/components/icons/TickCircleOrange";
 function Specialties({ data }) {
   return (
     <ul
-      className="
+      className=" mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4 gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
-        mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
-        gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] 
-        gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
     >
       {data &&
         data.specialties &&

components/clinic/components/about/TextDetail.js

@@ -10,17 +10,7 @@ function TextDetail({ data }) {
     <div className="flex flex-col items-center justify-center">
       <MultilineLoading line={10} width="full" height={18}>
         <p
-          className={`
+          className={` text-[#525252] text-[16px] font-normal leading-[32px] overflow-hidden relative after:right-0 after:bottom-0 after:h-[80px] after:shadow-xl after:w-full transition-all duration-500 w-full ${ data?.caption?.length > 180 && isMore ? "after:bg-transparent max-h-screen after:absolute" : data?.caption?.length > 180 && "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px] after:absolute" } `}
-                text-[#525252] text-[16px] font-normal leading-[32px] overflow-hidden relative
-                after:right-0 after:bottom-0 after:h-[80px]
-                after:shadow-xl after:w-full transition-all duration-500 w-full
-                ${
-                  data?.caption?.length > 180 && isMore
-                    ? "after:bg-transparent max-h-screen after:absolute"
-                    : data?.caption?.length > 180 &&
-                      "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px] after:absolute"
-                }
-            `}
           dangerouslySetInnerHTML={{ __html: sanitizeHtml(data?.caption) }}
         ></p>
       </MultilineLoading>

components/clinic/components/about/images/Images.js

@@ -9,15 +9,11 @@ function Images({ data }) {
 
   return (
     <div
-      className="
+      className=" flex flex-col md:flex-row items-center mb-[8px] justify-center w-full gap-[12px] md:gap-[18px] lg:gap-[24px] overflow-hidden "
-            flex flex-col md:flex-row items-center mb-[8px] justify-center w-full
-            gap-[12px] md:gap-[18px] lg:gap-[24px] overflow-hidden
-        "
     >
       <div className="w-full">
         <div
-          className={`grid grid-cols-1 grid-rows-1 gap-[12px] md:gap-[18px] lg:gap-[24px] h-[290px] max-h-[290px]
+          className={`grid grid-cols-1 grid-rows-1 gap-[12px] md:gap-[18px] lg:gap-[24px] h-[290px] max-h-[290px] ${images_clinic.length === 1 ? "md:grid-cols-1 h-[350px] max-h-[350px]" : "md:grid-cols-2"}`}
-          ${images_clinic.length === 1 ? "md:grid-cols-1 h-[350px] max-h-[350px]" : "md:grid-cols-2"}`}
         >
           <CustomLoading width={600} height={400}>
             <Image

components/clinic/components/about/images/List.js

@@ -11,14 +11,7 @@ function List({ data }) {
 
   return (
     <div
-      className={`hidden w-full md:grid gap-[16px] lg:gap-[24px]
+      className={`hidden w-full md:grid gap-[16px] lg:gap-[24px] ${rest.length === 0 ? "md:!hidden" : rest.length === 1 ? "grid-cols-1 grid-rows-1" : "grid-cols-2 auto-rows-fr" } `}
-        ${rest.length === 0
-          ? "md:!hidden"
-          : rest.length === 1
-            ? "grid-cols-1 grid-rows-1"
-            : "grid-cols-2 auto-rows-fr"
-        }
-      `}
     >
       {rest.map((img, idx) => (
         <div key={idx} className="h-full w-full">

components/clinic/components/contact/index.js

@@ -14,11 +14,7 @@ function Contact({ data }) {
 
   return (
     <div
-      className="
+      className=" opacity-page border border-[#EFEFEF] rounded-[16px] py-[12px] sm:py-[18px] md:py-[25px] lg:py-[32px] px-[12px] sm:px-[30px] md:px-[47px] lg:px-[64px] "
-        opacity-page border border-[#EFEFEF] rounded-[16px]
-        py-[12px] sm:py-[18px] md:py-[25px] lg:py-[32px] 
-        px-[12px] sm:px-[30px] md:px-[47px] lg:px-[64px]
-      "
     >
       <div className="flex items-end justify-between">
         <Detail data={data} />

components/clinic/components/doctors/head/modal/FilterModal.js

@@ -37,8 +37,7 @@ function FilterModal({
       <Modal open={open} onClose={handleClose} className="w-full">
         <div
           style={styleDefault}
-          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
-                    !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
         >
           <div>
             <DeleteAllButton

components/clinic/components/doctors/head/search/SendReq.js

@@ -31,8 +31,7 @@ function SendReq({ filter, setFilter, setDataInURL, sendReq }) {
     <Button
       disabled={loading}
       onClick={filterData}
-      className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
+      className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px] !gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
-        !gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
     >
       <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
         {!loading && <SearchD />}

components/clinic/components/doctors/head/search/index.js

@@ -10,9 +10,7 @@ function SearchBar({ slug,filter, sendReq, setFilter, updateData, setDataInURL,s
   return (
     <ButtonGroup
       variant="contained"
-      className="!bg-[#FFF] !w-full lg:!w-[60%] lg:!max-w-[734px] !rounded-lg !overflow-hidden 
+      className="!bg-[#FFF] !w-full lg:!w-[60%] lg:!max-w-[734px] !rounded-lg !overflow-hidden flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
-        flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
-        !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
     >
       <FilterModal
         slug={slug}

components/clinic/components/doctors/head/sortlist/SelectSort.js

@@ -44,11 +44,7 @@ function SelectSort({ filter, updateData }) {
       }}
       IconComponent={() => (
         <div
-          className="mx-3 
+          className="mx-3 min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[20px] md:min-h-[22px] lg:min-h-[24px] max-w-[20px] md:max-w-[22px] lg:max-w-[24px] max-h-[20px] md:max-h-[22px] lg:max-h-[24px] w-[20px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px] "
-        min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[20px] md:min-h-[22px] lg:min-h-[24px]
-        max-w-[20px] md:max-w-[22px] lg:max-w-[24px] max-h-[20px] md:max-h-[22px] lg:max-h-[24px]
-        w-[20px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]
-        "
         >
           <ArrowBottomD />
         </div>

components/clinics/head/FilterButton.js

@@ -22,15 +22,7 @@ function FilterButton({ limit, selected, filterData }) {
     <Button
       onClick={sendReq}
       disabled={loading}
-      className="
+      className=" !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] !max-w-[38px] sm:!max-w-[44px] md:!max-w-[50px] lg:!max-w-[56px] !max-h-[38px] sm:!max-h-[44px] md:!max-h-[50px] lg:!max-h-[56px] "
-        !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center
-        !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
-        !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
-        !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
-        !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
-        !max-w-[38px] sm:!max-w-[44px] md:!max-w-[50px] lg:!max-w-[56px] 
-        !max-h-[38px] sm:!max-h-[44px] md:!max-h-[50px] lg:!max-h-[56px] 
-      "
     >
       <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px] grid place-items-center">
         {!loading && <SearchD />}

components/clinics/head/SearchBar.js

@@ -54,10 +54,7 @@ function SearchBar({
   return (
     <ButtonGroup
       variant="contained"
-      className="
+      className=" !bg-[#FFF] !w-full sm:!w-2/3 !mt-[30px] !rounded-lg !overflow-hidden flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] !h-fit !pl-1"
-            !bg-[#FFF] !w-full sm:!w-2/3 !mt-[30px] !rounded-lg !overflow-hidden flex items-center 
-            !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
-            !h-fit !pl-1"
     >
       <ModalSearchCity
         open={open}

components/clinics/head/filter/ButtonFilter.js

@@ -18,8 +18,7 @@ function ButtonFilter({ selected, setOpen }) {
           <Location />
         </div>
         <p
-          className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
+          className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
-                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
         >
           {(selected.city?.name !== "نوبت 724" ? selected.city?.name : false) ||
             "شهر"}

components/clinics/head/modal/index.js

@@ -40,10 +40,7 @@ function ModalSearchCity() {
     <>
       {/* Button Modal */}
       <Button
-        className="
+        className=" !border-none !min-w-fit lg:!min-w-[122px] !bg-[#F8F8FF] !rounded-l-none !py-[15px] !px-[6px] md:!py-[17px] md:!px-[5px] lg:!py-[20px] lg:!px-[8px] "
-                    !border-none !min-w-fit lg:!min-w-[122px] !bg-[#F8F8FF] !rounded-l-none
-                    !py-[15px] !px-[6px] md:!py-[17px] md:!px-[5px] lg:!py-[20px] lg:!px-[8px]
-                "
         onClick={handleOpen}
         variant="contained"
         color="secondary"

components/clinics/list/index.js

@@ -47,8 +47,7 @@ function List({
       <Pageguide list={listPage} />
       {clinics && clinics.length ? (
         <ul
-          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] 
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
-            gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
         >
           {clinics.map((item) => (
             <ItemClinic

components/common/InlineJalaliMonth.js

@@ -99,12 +99,7 @@ function InlineJalaliMonth({
               key={index}
               disabled={disabled}
               onClick={() => onSelectDay(dayDate)}
-              className={`
+              className={` mx-auto flex items-center justify-center w-[34px] h-[34px] rounded-full text-[14px] md:text-[16px] font-normal transition-colors ${selected ? "!bg-[#F17732] !text-[#FFF]" : ""} ${disabled ? "text-[#D7D7D7] cursor-not-allowed" : isFriday ? "text-[#E0383B]" : "text-[#525252] hover:bg-[#F5F5F5]"} `}
-                mx-auto flex items-center justify-center w-[34px] h-[34px] rounded-full
-                text-[14px] md:text-[16px] font-normal transition-colors
-                ${selected ? "!bg-[#F17732] !text-[#FFF]" : ""}
-                ${disabled ? "text-[#D7D7D7] cursor-not-allowed" : isFriday ? "text-[#E0383B]" : "text-[#525252] hover:bg-[#F5F5F5]"}
-              `}
             >
               {day}
             </button>

components/contactUs/Connect.js

@@ -6,8 +6,7 @@ import Field from "@/app/component/fields/Field";
 function Connect() {
   return (
     <div
-      className="lg:min-w-[calc(50%_+_70px)] w-full lg:translate-x-[140px] bg-[#FFF] lg:p-[32px]
+      className="lg:min-w-[calc(50%_+_70px)] w-full lg:translate-x-[140px] bg-[#FFF] lg:p-[32px] shadow-[0px_0px_28.6px_0px_rgba(147,_147,_147,_0.25)] mt-[16px] lg:mt-0 p-[16px] sm:p-[21px] md:p-[27px]"
-                shadow-[0px_0px_28.6px_0px_rgba(147,_147,_147,_0.25)] mt-[16px] lg:mt-0 p-[16px] sm:p-[21px] md:p-[27px]"
     >
       <div>
         <div className="flex flex-col justify-center items-center gap-[10px]">

components/contactUs/call/Call.js

@@ -3,14 +3,11 @@ import Links from "./Links";
 function Call({ matchedCity, isDefault }) {
   return (
     <div
-      className={`lg:min-w-[calc(50%_+_70px)] bg-banner-about !bg-center !bg-no-repeat !bg-cover h-fit pt-[16px] sm:pt-[29px] md:pt-[42px] lg:pt-[55px] 
+      className={`lg:min-w-[calc(50%_+_70px)] bg-banner-about !bg-center !bg-no-repeat !bg-cover h-fit pt-[16px] sm:pt-[29px] md:pt-[42px] lg:pt-[55px] bg-contact rounded-[8px] pb-[30px] sm:pb-[42px] md:pb-[55px] overflow-hidden lg:pb-[171px] px-[16px] sm:px-[27px] md:px-[39px] lg:px-[48px] ${isDefault ? "lg:pl-[18%]" : "w-full"}`}
-        bg-contact rounded-[8px] pb-[30px] sm:pb-[42px] md:pb-[55px] 
-        overflow-hidden lg:pb-[171px] px-[16px] sm:px-[27px] md:px-[39px] lg:px-[48px]
-        ${isDefault ? "lg:pl-[18%]" : "w-full"}`}
     >
       <h1 className="text-[#FAFAFA] text-[20px] font-bold">تماس با ما</h1>
       <h2 className="text-[#FAFAFA] leading-[26px] text-[14px] md:text-[16px] font-normal mt-6">
-        {matchedCity?.footerDescription || "برای ارتباط با ما از راه های زیر استفاده کنید"}
+        {matchedCity?.footer_description || "برای ارتباط با ما از راه های زیر استفاده کنید"}
       </h2>
       <Links matchedCity={matchedCity} />
     </div>

components/contactUs/call/Links.js

@@ -6,25 +6,31 @@ import WhatsappC from "../../icons/WhatsappC";
 import ContentContact from "../ContentContact";
 
 function Links({ matchedCity }) {
+  const phone = matchedCity?.contact_phone || "+98 2191550875";
+  const whatsapp = matchedCity?.social_media?.whatsapp || "09390039833";
+  const email = matchedCity?.email || "info@clinic-pro.ir";
+  // wa.me needs international format: 09xx… → 989xx…
+  const waDigits = whatsapp.replace(/\D/g, "").replace(/^0/, "98");
+
   return (
     <ul className="flex flex-col mt-[68px] justify-start items-start gap-[32px]">
       <ContentContact
-        url="tel:900300400"
+        url={`tel:${phone.replace(/\s/g, "")}`}
         label="تلفن تماس: "
-        text={matchedCity?.contactPhone || "900300400"}
+        text={phone}
       >
         <CallC />
       </ContentContact>
       <ContentContact
-        url="https://wa.me/09124568794"
+        url={`https://wa.me/${waDigits}`}
-        text={matchedCity?.socialMedia?.whatsapp || "09124568794"}
+        text={whatsapp}
         label="واتساپ: "
       >
         <WhatsappC />
       </ContentContact>
       <ContentContact
-        url="mailto:batome@gmail.com"
+        url={`mailto:${email}`}
-        text={matchedCity?.email || "info@nobat724.com"}
+        text={email}
         label="ایمیل: "
       >
         <EmailC />

components/contactUs/index.js

@@ -3,13 +3,12 @@ import Call from "./call/Call";
 import Connect from "./Connect";
 
 async function ContactUsPage() {
-  const { matchedCity } = await getStateInfo();
+  const { matchedCity, isRoot } = await getStateInfo();
-  const isDefault = matchedCity?.id === "63";
 
   return (
     <div className="w-full pt-[24px] sm:pt-[56px] md:pt-[88px] lg:pt-[120px] mt-[56px] padding-responsive flex flex-col lg:flex-row items-center justify-between h-fit">
-      <Call matchedCity={matchedCity} isDefault={isDefault} />
+      <Call matchedCity={matchedCity} isDefault={isRoot} />
-      {matchedCity?.id === "63" && <Connect />}
+      {isRoot && <Connect />}
     </div>
   );
 }

components/dashboard/userAccount/NotfoundDashboard.js

@@ -7,17 +7,12 @@ function NotfoundDashboard() {
     <div className="flex flex-col-reverse items-center justify-between gap-[50px]">
       <div className="flex w-full md:w-fit flex-col justify-center items-center">
         <div
-          className="flex mt-[72px] md:hidden
+          className="flex mt-[72px] md:hidden w-[136px] sm:w-[163px] md:w-[190px] lg:w-[218px] h-[51px] sm:h-[61px] md:h-[71px] lg:h-[82px]"
-                w-[136px] sm:w-[163px] md:w-[190px] lg:w-[218px]
-                h-[51px] sm:h-[61px] md:h-[71px] lg:h-[82px]"
         >
           <NumberNotFound />
         </div>
         <Image
-          className=" mt-[24px]
+          className=" mt-[24px] w-[200px] sm:w-[212px] md:w-[223px] lg:w-[235px] h-[200px] sm:h-[212px] md:h-[223px] lg:h-[235px] "
-                        w-[200px] sm:w-[212px] md:w-[223px] lg:w-[235px]
-                        h-[200px] sm:h-[212px] md:h-[223px] lg:h-[235px]
-                    "
           src="/assets/images/notfound-cover.png"
           alt="notfound-cover"
           height={405}

components/dashboard/userAccount/components/UpdateBtn.js

@@ -7,10 +7,7 @@ function UpdateBtn({ updateData, loading }) {
       variant="outlined"
       onClick={updateData}
       disabled={loading}
-      className={`
+      className={` !border-[#5559CE] !border-[2px] !relative !py-[6px] md:!py-2 lg:!py-[9px] !px-[8px] sm:!px-[15px] md:!px-[21px] lg:!px-[28px] !mr-0 md:!mr-4 `}
-          !border-[#5559CE] !border-[2px] !relative
-        !py-[6px] md:!py-2 lg:!py-[9px] !px-[8px] sm:!px-[15px] md:!px-[21px] lg:!px-[28px] !mr-0 md:!mr-4
-      `}
     >
       {loading && (
         <CircularProgress
@@ -19,8 +16,7 @@ function UpdateBtn({ updateData, loading }) {
         />
       )}
       <div
-        className={`!flex !items-center !justify-center !gap-2 !text-[14px] !font-medium
+        className={`!flex !items-center !justify-center !gap-2 !text-[14px] !font-medium ${loading ? "opacity-0" : "opacity-100"}`}
-        ${loading ? "opacity-0" : "opacity-100"}`}
       >
         <UpdateList />
         آپدیت کردن

components/dashboard/userAccount/detailUser/allergies/modal/index.js

@@ -38,8 +38,7 @@ function ModalAddAlergie({ open, setOpen, loading, changeData, updateData }) {
       <Modal open={open} onClose={handleClose} className="w-full">
         <div
           style={styleDefault}
-          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
-                    !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
         >
           <div>
             <div className="flex justify-between w-full">

components/dashboard/userAccount/detailUser/familyHistory/modal/index.js

@@ -32,8 +32,7 @@ function ModalAddHistory({ open, setOpen, changeData, loading, updateData }) {
       <Modal open={open} onClose={handleClose} className="w-full">
         <div
           style={styleDefault}
-          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
-                    !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
         >
           <div>
             <div className="flex justify-between w-full">

components/dashboard/userAccount/detailUser/information/ButtonSendData.js

@@ -86,10 +86,7 @@ function ButtonSendData({
       variant="contained"
       onClick={sendReq}
       disabled={loading || isDisabled()}
-      className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
+      className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px] !rounded-[4px] !text-[14px] md:!text-[16px] !font-medium !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px] `}
-                 !rounded-[4px] !text-[14px] md:!text-[16px] !font-medium
-                !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]
-              `}
     >
       {loading ? (
         <CircularProgress size={20} sx={{ color: "#fff" }} />

components/dashboard/userAccount/detailUser/information/component/Field.js

@@ -32,9 +32,7 @@ function Field({
         disabled={disable}
         type={type || "text"}
         placeholder={placeholder || ""}
-        className={`!w-full res-field-account  dark:!bg-transparent ${
+        className={`!w-full res-field-account  dark:!bg-transparent ${ isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]" }`}
-          isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
-        }`}
         onChange={(e) => {
           changeData(e.target.value, name);
         }}
@@ -66,8 +64,7 @@ function Field({
         }}
       />
       <Button
-        className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
+        className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1 ${multiline ? "!top-[24px]" : "!top-1/2"}`}
-                    ${multiline ? "!top-[24px]" : "!top-1/2"}`}
       >
         {icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
       </Button>

components/dashboard/userAccount/detailUser/information/form/Content.js

@@ -7,8 +7,7 @@ function Content({ isConfirmed, children, title, error, req }) {
         </p>
         {isConfirmed && (
           <p
-            className="py-[4px] md:py-[2px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] 
+            className="py-[4px] md:py-[2px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal h-[26px] grid place-items-center"
-                        text-[10px] md:text-[12px] font-normal h-[26px] grid place-items-center"
           >
             تایید شده
           </p>

components/dashboard/userAccount/detailUser/medications/modal/index.js

@@ -40,8 +40,7 @@ function ModalAddMedications({
       <Modal open={open} onClose={handleClose} className="w-full">
         <div
           style={styleDefault}
-          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
-                    !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
         >
           <div>
             <div className="flex justify-between w-full">

components/dashboard/userAccount/detailUser/relatives/modal/index.js

@@ -37,8 +37,7 @@ function ModalAddRelatives({ open, setOpen, changeData, loading, updateData }) {
       <Modal open={open} onClose={handleClose} className="w-full">
         <div
           style={styleDefault}
-          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
-                    !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
         >
           <div>
             <div className="flex justify-between w-full">

components/dashboard/userAccount/detailUser/surgeries/modal/index.js

@@ -34,8 +34,7 @@ function ModalAddSurgeries({ open, setOpen, updateData, loading, changeData }) {
       <Modal open={open} onClose={handleClose} className="w-full">
         <div
           style={styleDefault}
-          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
-                    !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
         >
           <div>
             <div className="flex justify-between w-full">

components/dashboard/userAccount/sidebars/turns/isTurnsDetails/modal/index.js

@@ -12,10 +12,7 @@ function ModalDeleteComment({ loading }) {
     <div>
       {/* Button Modal */}
       <Button
-        className={`
+        className={` ${!loading && "!border-[#828DE0]"} !rounded-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] `}
-                    ${!loading && "!border-[#828DE0]"} 
-                    !rounded-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]
-                `}
         disabled={loading}
         onClick={handleOpen}
         variant="outlined"

components/doctor/appointmentList/index.js

@@ -14,8 +14,7 @@ function AppointmentList({ doctor, loading, doctorSlug }) {
         )}
       </ul>
       <div
-        className="fixed lg:hidden bg-[#FFF] border-t border-transparent border-t-[#D7D7D7] 
+        className="fixed lg:hidden bg-[#FFF] border-t border-transparent border-t-[#D7D7D7] border-solid bottom-0 right-0 w-full p-4 flex items-center justify-between"
-            border-solid bottom-0 right-0 w-full p-4 flex items-center justify-between"
       >
         <p className="text-[#05BA58] text-[11px] font-normal">
           {doctor?.active === false || !doctor?.free_turn

components/doctor/detailDoctor/Link.js

@@ -20,13 +20,7 @@ function Link() {
             <a href={`#${item.link}`} className="mx-auto">
               <Button
                 onClick={() => setActiveId(idx)}
-                className={`!text-[16px] md:!text-[18px] lg:!text-[20px] !text-center !font-bold !p-1
+                className={`!text-[16px] md:!text-[18px] lg:!text-[20px] !text-center !font-bold !p-1 ${ activeId === idx ? "!text-[#F17732]" : "!text-[#525252]" } `}
-                                ${
-                                  activeId === idx
-                                    ? "!text-[#F17732]"
-                                    : "!text-[#525252]"
-                                }
-                            `}
                 variant="text"
               >
                 {item.name}
@@ -34,8 +28,7 @@ function Link() {
             </a>
             {listLink.length > idx + 1 && (
               <span
-                className="block border-transparent border-l border-dotted border-l-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]
+                className="block border-transparent border-l border-dotted border-l-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px] absolute left-0 lg:relative"
-                                absolute left-0 lg:relative"
               ></span>
             )}
           </li>

components/doctor/detailDoctor/List.js

@@ -178,20 +178,14 @@ function List({ hiddenRef, data, qrReady }) {
             className="flex flex-col justify-center items-center w-fit gap-[2px]"
           >
             <Button
-              className="
+              className=" !p-[0px] !bg-[#EAECFA] !rounded-full !min-w-0 grid place-items-center !w-[24px] sm:!w-[28px] md:!w-[32px] lg:!w-[36px] !h-[24px] sm:!h-[28px] md:!h-[32px] lg:!h-[36px] "
-                    !p-[0px] !bg-[#EAECFA] !rounded-full !min-w-0 grid place-items-center
-                    !w-[24px] sm:!w-[28px] md:!w-[32px] lg:!w-[36px]
-                    !h-[24px] sm:!h-[28px] md:!h-[32px] lg:!h-[36px]
-                  "
               onClick={item.onClick}
               aria-label={item.name}
               variant="text"
               disabled={item.disabled}
             >
               <div
-                className="grid place-items-center w-full-icon
+                className="grid place-items-center w-full-icon !w-[16px] md:!w-[17px] lg:!w-[18px] !h-[16px] md:!h-[17px] lg:!h-[18px]"
-                                        !w-[16px] md:!w-[17px] lg:!w-[18px]
-                                        !h-[16px] md:!h-[17px] lg:!h-[18px]"
               >
                 {item.icon}
               </div>

components/doctor/detailDoctor/Share.js

@@ -53,9 +53,7 @@ function Share({ data }) {
       <Modal open={open} onClose={handleClose}>
         <Box
           sx={styleDefault}
-          className="!pt-[12px] md:!pt-[14px] lg:!py-[16px] !overflow-hidden
+          className="!pt-[12px] md:!pt-[14px] lg:!py-[16px] !overflow-hidden !px-[12px] sm:!px-[16px] md:!px-[20px] lg:!px-[24px] !pb-[12px] sm:!pb-[16px] lg:!pb-[20px] !rounded-[8px]"
-            !px-[12px] sm:!px-[16px] md:!px-[20px] lg:!px-[24px]
-            !pb-[12px] sm:!pb-[16px] lg:!pb-[20px] !rounded-[8px]"
         >
           <div className="flex items-center justify-between w-full">
             <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
@@ -79,11 +77,7 @@ function Share({ data }) {
                 key={v.key}
                 type="button"
                 onClick={() => changeVariant(v.key)}
-                className={`flex items-center gap-[6px] rounded-full border px-3 py-1.5 text-[11px] md:text-[12px] transition-colors ${
+                className={`flex items-center gap-[6px] rounded-full border px-3 py-1.5 text-[11px] md:text-[12px] transition-colors ${ variant === v.key ? "border-[#5559CE] text-[#5559CE] bg-[#EAECFA]" : "border-[#EFEFEF] text-[#525252] bg-white" }`}
-                  variant === v.key
-                    ? "border-[#5559CE] text-[#5559CE] bg-[#EAECFA]"
-                    : "border-[#EFEFEF] text-[#525252] bg-white"
-                }`}
               >
                 <span
                   className="w-[14px] h-[14px] rounded-full border border-[#E0E0E0]"

components/doctor/detailDoctor/Title.js

@@ -26,10 +26,7 @@ function Title({ doctor }) {
         <DoctorAvatar
           doctor={doctor}
           size={164}
-          className="
+          className=" w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px] h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px] "
-            w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
-            h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
-          "
         />
       </CircularLoading>
       <div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -17,16 +17,7 @@ function AboutDcotor({ doctor }) {
       <div className="flex flex-col items-center justify-center">
         <MultilineLoading width="full" height={18} line={30}>
           <p
-            className={`
+            className={` text-[#616161] text-[14px] font-normal overflow-hidden relative md:max-h-fit after:absolute after:right-0 after:bottom-0 leading-[28px] sm:leading-[30px] md:leading-[32px] lg:leading-[33px] after:h-[80px] after:shadow-xl after:w-full transition-all duration-500 md:after:!bg-[linear-gradient(transparent,transparent)] ${ isMore ? "after:bg-transparent max-h-screen" : "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]" } `}
-                        text-[#616161] text-[14px] font-normal overflow-hidden relative
-                        md:max-h-fit after:absolute after:right-0 after:bottom-0 leading-[28px] sm:leading-[30px] md:leading-[32px] lg:leading-[33px] after:h-[80px]
-                        after:shadow-xl after:w-full transition-all duration-500 md:after:!bg-[linear-gradient(transparent,transparent)]
-                        ${
-                          isMore
-                            ? "after:bg-transparent max-h-screen"
-                            : "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
-                        }
-                    `}
           >
             {doctor?.detail}
           </p>

components/doctor/detailDoctor/cards/comments/chart/index.js

@@ -12,10 +12,7 @@ function Chart({ comments, rateAggregate }) {
   const averages = rateAggregate?.averages ?? [];
   return (
     <div
-      className="
+      className=" rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF] pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px] "
-            rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF]
-            pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px]
-        "
     >
       <TextLoading width={130} height={20}>
         <div className="flex items-center justify-start gap-2.5">

components/doctor/detailDoctor/cards/comments/modal/BtnNewComment.js

@@ -6,8 +6,7 @@ function BtnNewComment({ handleOpen }) {
     <Button
       variant="outlined"
       onClick={handleOpen}
-      className="!py-[6px] md:!py-2 lg:!py-[9px] !px-[16px] sm:!px-[23px] md:!px-[29px] 
+      className="!py-[6px] md:!py-2 lg:!py-[9px] !px-[16px] sm:!px-[23px] md:!px-[29px] lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full md:!w-fit"
-                lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full md:!w-fit"
     >
       ثبت نظر
     </Button>

components/doctor/detailDoctor/cards/locations/Item.js

@@ -27,19 +27,13 @@ function Item({ data }) {
       >
         <p className="text-[#616161] text-[16px] font-medium">{data.name}</p>
         <div
-          className={`
+          className={` transition-all duration-500 ${isOpen ? "rotate-180" : "rotate-0"} `}
-                        transition-all duration-500
-                        ${isOpen ? "rotate-180" : "rotate-0"}
-                    `}
         >
           <ArrowBottomGrayD />
         </div>
       </Button>
       <div
-        className={`
+        className={` overflow-hidden transition-all duration-500 ${isOpen ? "max-h-[800px] " : "max-h-0"} `}
-                    overflow-hidden transition-all duration-500
-                    ${isOpen ? "max-h-[800px] " : "max-h-0"}
-                `}
       >
         <div className="gap-3 md:gap-4 flex flex-col items-start mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px]">
           <p className="text-[#525252] text-[16px] font-normal">
@@ -85,8 +79,7 @@ function Item({ data }) {
               handleClose={handleClose}
             >
               <Button
-                className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !py-2 !px-3
+                className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !py-2 !px-3 !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)] !gap-[8px] !text-[#FAFAFA] !text-[14px] !font-medium"
-                              !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)] !gap-[8px] !text-[#FAFAFA] !text-[14px] !font-medium"
                 onClick={handleOpen}
               >
                 <RoutingWhiteC />

components/doctors/modal/FilterModal.js

@@ -31,8 +31,7 @@ function FilterModal({
       <Modal open={open} onClose={handleClose} className="w-full">
         <div
           style={styleDefault}
-          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+          className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
-                    !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
         >
           <div>
             <DeleteAllButton

components/doctors/search/SendReq.js

@@ -41,8 +41,7 @@ function SendReq({ filter, setFilter, setDataInURL, sendReq }) {
       disabled={loading}
       onClick={filterData}
       aria-label="جستجوی پزشک"
-      className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
+      className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px] !gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
-        !gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
     >
       <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
         {!loading && <SearchD />}

components/doctors/search/index.js

@@ -9,9 +9,7 @@ function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
   return (
     <ButtonGroup
       variant="contained"
-      className="!bg-[#FFF] !w-full lg:!w-[60%] lg:!max-w-[734px] !rounded-lg !overflow-hidden 
+      className="!bg-[#FFF] !w-full lg:!w-[60%] lg:!max-w-[734px] !rounded-lg !overflow-hidden flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
-        flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
-        !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
     >
       <FilterModal
         filter={filter}

components/doctors/sortlist/SelectSort.js

@@ -47,11 +47,7 @@ function SelectSort({ filter, updateData }) {
       }}
       IconComponent={() => (
         <div
-          className="mx-3 
+          className="mx-3 min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[20px] md:min-h-[22px] lg:min-h-[24px] max-w-[20px] md:max-w-[22px] lg:max-w-[24px] max-h-[20px] md:max-h-[22px] lg:max-h-[24px] w-[20px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px] "
-        min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[20px] md:min-h-[22px] lg:min-h-[24px]
-        max-w-[20px] md:max-w-[22px] lg:max-w-[24px] max-h-[20px] md:max-h-[22px] lg:max-h-[24px]
-        w-[20px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]
-        "
         >
           <ArrowBottomD />
         </div>

components/home/FrequentSearches.js

@@ -25,8 +25,7 @@ function FrequentSearches() {
                 <Button
                   variant="contained"
                   color="secondary"
-                  className="!py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px]
+                  className="!py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px] !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7] hover:!bg-[#EFEFEF]"
-                !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7] hover:!bg-[#EFEFEF]"
                 >
                   {item.name}
                 </Button>

components/home/TextHeader.js

@@ -11,8 +11,7 @@ async function TextHeader() {
         با {matchedCity?.site_name}
       </h1>
       <h2
-        className="text-[#525252] text-center mt-2.5 text-[16px] sm:text-[25px] md:text-[31px] lg:text-[36px]
+        className="text-[#525252] text-center mt-2.5 text-[16px] sm:text-[25px] md:text-[31px] lg:text-[36px] font-bold flex items-center gap-0.5 sm:gap-1 md:gap-2"
-            font-bold flex items-center gap-0.5 sm:gap-1 md:gap-2"
       >
         <div className="max-w-[18px] sm:max-w-[22px]">
           <BText />

components/home/search/RedirectLink.js

@@ -55,12 +55,7 @@ function RedirectLink({ data }) {
       </Button>
       <Button
         onClick={handleRedirect}
-        className="!flex lg:!hidden !rounded-[4px] 
+        className="!flex lg:!hidden !rounded-[4px] !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !min-w-[40px] sm:!min-w-[42px] md:!min-w-[45px] lg:!min-w-[48px] !min-h-[40px] sm:!min-h-[42px] md:!min-h-[45px] lg:!min-h-[48px] !gap-2.5 !p-2.5"
-                !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]
-                !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] 
-                !min-w-[40px] sm:!min-w-[42px] md:!min-w-[45px] lg:!min-w-[48px]
-                !min-h-[40px] sm:!min-h-[42px] md:!min-h-[45px] lg:!min-h-[48px] 
-                !gap-2.5 !p-2.5"
       >
         <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
           <SearchD />

components/home/search/index.js

@@ -8,11 +8,7 @@ async function SearchBar() {
   return (
     <ButtonGroup
       variant="contained"
-      className="
+      className=" !py-[4px] sm:!py-[7px] md:!py-[10px] lg:!py-[12px] !gap-3 !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px] !mt-[22px] sm:!mt-[34px] md:!mt-[46px] lg:!mt-[60px] !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit "
-        !py-[4px] sm:!py-[7px] md:!py-[10px] lg:!py-[12px] !gap-3
-        !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px] !mt-[22px] sm:!mt-[34px] md:!mt-[46px] lg:!mt-[60px]
-        !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
-      "
     >
       <Fields city={matchedCity} state={matchedState} />
     </ButtonGroup>

components/home/search/modal/ButtonFilter.js

@@ -18,8 +18,7 @@ function ButtonFilter({ selected, setOpen }) {
           <Location />
         </div>
         <p
-          className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
+          className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
-                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
         >
           {(selected.city !== "نوبت 724" ? selected.city : false) || "شهر"}
         </p>

components/icons/ArrowDownP.js

@@ -2,8 +2,7 @@ function ArrowDownP({ data }) {
   return (
     <div className="pl-[6px] cursor-pointer">
       <svg
-        className={`transition-all duration-500 ${data.className.includes("iconOpen") ? "rotate-180" : "rotate-0"
+        className={`transition-all duration-500 ${data.className.includes("iconOpen") ? "rotate-180" : "rotate-0" } dark:[&>path]:stroke-[#A1A1A1]`}
-          } dark:[&>path]:stroke-[#A1A1A1]`}
         xmlns="http://www.w3.org/2000/svg"
         width="20"
         height="20"

components/layout/footer/index.js

@@ -37,7 +37,8 @@ function buildSocialUrl(name, value) {
     case "telegram":
       return `https://t.me/${handle}`;
     case "whatsapp":
-      return `https://wa.me/${handle.replace(/\D/g, "")}`;
+      // wa.me needs international format: 09xx… → 989xx…
+      return `https://wa.me/${handle.replace(/\D/g, "").replace(/^0/, "98")}`;
     default:
       return value;
   }
@@ -76,8 +77,7 @@ function Footer({ matchedCity }) {
             onClick={(e) => !item.link && e.preventDefault}
           >
             <div
-              className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all 
+              className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-[#EFEFEF] bg-[#F7F7F7] hover:bg-none hover:border-[#FDBD9F]"
-            transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-[#EFEFEF] bg-[#F7F7F7] hover:bg-none hover:border-[#FDBD9F]"
             >
               {item.icon}
               <p className="text-[#2F2F2F] text-center text-[12px] sm:text-[14px] md:text-[16px] font-medium">
@@ -89,15 +89,14 @@ function Footer({ matchedCity }) {
       </div>
       <span className="h-px bg-[#D7D7D7] mb-[40px] mt-[48px] w-full block"></span>
       <div
-        className="pb-[16px] sm:pb-[18px] md:pb-[19px] lg:pb-[21px] 
+        className="pb-[16px] sm:pb-[18px] md:pb-[19px] lg:pb-[21px] flex flex-col gap-[16px] lg:gap-0 lg:flex-row items-start justify-between"
-                flex flex-col gap-[16px] lg:gap-0 lg:flex-row items-start justify-between"
       >
         {/* Right */}
         <div className="w-full lg:w-fit flex gap-[12px] lg:gap-[30px] flex-col items-start">
           {/* Icon */}
           <Logo matchedCity={matchedCity} />
           <p className="w-full lg:w-fit lg:max-w-[260px] text-[#616161] text-[14px] font-normal">
-            {matchedCity?.footerDescription}
+            {matchedCity?.footer_description}
           </p>
           <div className="hidden lg:flex">
             <LogoNamad />
@@ -131,7 +130,7 @@ function Footer({ matchedCity }) {
           </p>
           <ul className="flex items-center gap-[8px] sm:gap-[11px] md:gap-[13px] lg:gap-[15px]">
             {socialMedias.map((item, idx) => {
-              const url = buildSocialUrl(item.name, matchedCity?.socialMedia?.[item.name]);
+              const url = buildSocialUrl(item.name, matchedCity?.social_media?.[item.name]);
               return (
                 <li
                   key={idx}

components/layout/footer/menu/HeadMenu.js

@@ -9,10 +9,7 @@ function HeadMenu({ title, name, isOpen, changeMenu }) {
     >
       <p className="text-[#262866] text-[14px] font-medium">{title.name}</p>
       <div
-        className={`
+        className={` transition-all duration-500 ${isOpen ? "rotate-180" : "rotate-0"} `}
-                transition-all duration-500
-                ${isOpen ? "rotate-180" : "rotate-0"}
-            `}
       >
         <ArrowDownF />
       </div>

components/layout/footer/menu/ListMenu.js

@@ -4,23 +4,12 @@ import React from "react";
 function ListMenu({ list, isOpen }) {
   return (
     <ul
-      className={`
+      className={` mt-3 lg:mt-0 w-full lg:w-fit lg:!max-h-fit flex flex-col overflow-hidden transition-all duration-500 gap-3 ${isOpen ? "max-h-[150px]" : "max-h-0"} `}
-      mt-3 lg:mt-0 w-full lg:w-fit lg:!max-h-fit flex flex-col overflow-hidden transition-all duration-500 gap-3
-      ${isOpen ? "max-h-[150px]" : "max-h-0"}
-    `}
     >
       {list.map((item, idx) => (
         <li
           key={idx}
-          className={`
+          className={` relative cursor-pointer after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0 ${ idx === 0 ? "hidden lg:flex text-[#3B3B3B] after:hover:w-full after:!duration-500 after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5" : "text-[#616161] border-transparent font-normal" } text-[16px] w-fit `}
-            relative cursor-pointer after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
-            ${
-              idx === 0
-                ? "hidden lg:flex text-[#3B3B3B] after:hover:w-full after:!duration-500 after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5"
-                : "text-[#616161] border-transparent font-normal"
-            } 
-            text-[16px] w-fit
-            `}
         >
           {item.link ? <Link href={item.link}>{item.name}</Link> : item.name}
         </li>

components/layout/header/Content.js

@@ -23,11 +23,7 @@ function Content({ matchedCity, name, logged }) {
 
   return (
     <div
-      className={`
+      className={` px-[8px] sm:px-[16px] md:px-[24px] lg:px-[32px] py-[4px] sm:py-[8px] md:py-[12px] lg:py-[16px] flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap ${isActive ? "!pr-0" : "!px-4"} `}
-          px-[8px] sm:px-[16px] md:px-[24px] lg:px-[32px] py-[4px] sm:py-[8px] md:py-[12px] lg:py-[16px] 
-          flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
-          ${isActive ? "!pr-0" : "!px-4"}
-        `}
     >
       <div>
         <BgGray isActive={isActive} setIsActive={setIsActive} />

components/layout/header/list/Row.js

@@ -8,10 +8,7 @@ function Row({ name }) {
         <li key={nav.id}>
           <Link
             href={nav.link}
-            className={`
+            className={` ${nav.link === name ? "!text-[#526CAC]" : "text-[#525252]"} text-[16px] font-medium `}
-              ${nav.link === name ? "!text-[#526CAC]" : "text-[#525252]"}
-              text-[16px] font-medium
-            `}
           >
             {nav.name}
           </Link>

components/layout/header/list/col/BgGray.js

@@ -2,15 +2,7 @@ function BgGray({ isActive, setIsActive }) {
   return (
     <div
       onClick={() => setIsActive(false)}
-      className={`
+      className={` ${ isActive ? "bg-[#232323] opacity-40 flex" : "bg-transparent opacity-40 hidden" } absolute lg:hidden z-[5] cursor-pointer transition-all duration-500 left-0 w-screen h-[calc(100vh_+_40px)] -top-[12px] sm:-top-[21px] md:-top-[30px] lg:-top-[40px] `}
-                ${
-                  isActive
-                    ? "bg-[#232323] opacity-40 flex"
-                    : "bg-transparent opacity-40 hidden"
-                }
-                absolute lg:hidden z-[5] cursor-pointer transition-all duration-500 left-0 w-screen h-[calc(100vh_+_40px)]
-                -top-[12px] sm:-top-[21px] md:-top-[30px] lg:-top-[40px]
-                `}
     ></div>
   );
 }

components/layout/header/list/col/ButtonMenu.js

@@ -8,27 +8,13 @@ function ButtonMenu({ isActive, setIsActive }) {
       className="!py-[6px] !px-[2px] !flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
     >
       <span
-        className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
+        className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] ${ isActive ? "-rotate-45 w-1/2 translate-x-[60%] translate-y-[8px]" : "rotate-0 w-full" } `}
-                    ${
-                      isActive
-                        ? "-rotate-45 w-1/2 translate-x-[60%] translate-y-[8px]"
-                        : "rotate-0 w-full"
-                    }
-                `}
       ></span>
       <span
-        className={`w-full min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
+        className={`w-full min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] ${isActive && "rotate-180"} `}
-                    ${isActive && "rotate-180"}
-                `}
       ></span>
       <span
-        className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
+        className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] ${ isActive ? "rotate-45 w-1/2 translate-x-[60%] translate-y-[-8px]" : "rotate-0 w-full" } `}
-                    ${
-                      isActive
-                        ? "rotate-45 w-1/2 translate-x-[60%] translate-y-[-8px]"
-                        : "rotate-0 w-full"
-                    }
-                `}
       ></span>
     </Button>
   );

components/layout/header/list/col/index.js

@@ -7,29 +7,14 @@ function Col({ isActive, name }) {
   return (
     <div className="flex lg:hidden">
       <div
-        className={`
+        className={` fixed pb-[31px] pt-[64px] pl-[24px]  padding-responsive top-0 w-[85%] z-10 h-screen bg-[#FAFAFA] transition-all duration-500 ${isActive ? "right-0" : "-right-[85%]"} `}
-            fixed pb-[31px] pt-[64px] pl-[24px]  padding-responsive top-0 
-            w-[85%] z-10 h-screen bg-[#FAFAFA] transition-all duration-500
-            ${isActive ? "right-0" : "-right-[85%]"}
-            `}
       >
         <ul className="flex flex-col items-start justify-center gap-[30px] mt-[38px]">
           {listNav.map((nav) => (
             <li key={nav.id} className="w-full">
               <Link href={nav.link} className="w-full">
                 <Button
-                  className={`
+                  className={` !h-10 ${ isActiveURL( nav.link.replace("/", ""), name, ) ? "!text-[#526CAC] !bg-[rgba(199,_206,_244,_0.30)]" : "!text-[#525252]" } !text-[16px] !w-full !flex !justify-start !font-medium !py-2.5 !px-4 `}
-                                    !h-10
-                                    ${
-                                      isActiveURL(
-                                        nav.link.replace("/", ""),
-                                        name,
-                                      )
-                                        ? "!text-[#526CAC] !bg-[rgba(199,_206,_244,_0.30)]"
-                                        : "!text-[#525252]"
-                                    }
-                                    !text-[16px] !w-full !flex !justify-start !font-medium !py-2.5 !px-4
-                                `}
                 >
                   {nav.name}
                 </Button>

components/layout/index.js

@@ -20,8 +20,7 @@ function Layout({
   return (
     <div>
       <main
-        className={`w-full min-h-screen 
+        className={`w-full min-h-screen ${disableFooter && " md:pb-[80px]"}`}
-                ${disableFooter && " md:pb-[80px]"}`}
       >
         <header className="w-full sticky bg-[#FFF] !z-[70] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] mt-[12px] sm:mt-[21px] md:mt-[30px] lg:mt-[40px] top-0 right-1/2">
           <div className="w-full padding-responsive">
@@ -29,13 +28,7 @@ function Layout({
           </div>
         </header>
         <section
-          className={`
+          className={` opacity-page -mt-[calc(48px_+_12px)] sm:-mt-[calc(56px_+_21px)] md:-mt-[calc(64px_+_30px)] lg:-mt-[calc(80px_+_40px)] ${ isSidebar && "padding-responsive min-h-screen flex items-stretch justify-center gap-[12px] lg:gap-[24px] pt-[76px] sm:pt-[109px] mt:pt-[142px] lg:pt-[176px]" } `}
-                    opacity-page -mt-[calc(48px_+_12px)] sm:-mt-[calc(56px_+_21px)] md:-mt-[calc(64px_+_30px)] lg:-mt-[calc(80px_+_40px)]
-                    ${
-                      isSidebar &&
-                      "padding-responsive min-h-screen flex items-stretch justify-center gap-[12px] lg:gap-[24px] pt-[76px] sm:pt-[109px] mt:pt-[142px] lg:pt-[176px]"
-                    }
-                `}
         >
           {isSidebar && (
             <Sidebar

components/layout/sidebar/List.js

@@ -48,26 +48,13 @@ function List({
       {listMenu.map((item, idx) => (
         <li className="w-full" key={idx}>
           <Button
-            className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
+            className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px] transition-all duration-300 before:transition-all before:duration-300 !relative before:!absolute before:!right-0 !flex !justify-between !items-center before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px] ${value === idx ? "before:md:!bg-[#5559CE]" : "before:!bg-transparent" }`}
-                            transition-all duration-300 before:transition-all before:duration-300
-                            !relative before:!absolute before:!right-0 !flex !justify-between !items-center
-                            before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
-                            ${value === idx
-                ? "before:md:!bg-[#5559CE]"
-                : "before:!bg-transparent"
-              }`}
             onClick={() => handleMenuClick(item, idx)}
           >
             <div className="!flex !w-full !items-center !justify-start !gap-[8px] md:px-[24px]">
               <div className="w-[24px] h-[24px]">{item.icon}</div>
               <h2
-                className={`
+                className={` text-[16px] transition-all duration-500 ${value === idx ? "text-[#5559CE] font-bold" : "text-[#7E7E7E] font-normal" } `}
-                                text-[16px] transition-all duration-500
-                                ${value === idx
-                    ? "text-[#5559CE] font-bold"
-                    : "text-[#7E7E7E] font-normal"
-                  }
-                            `}
               >
                 {item.name}
               </h2>

components/layout/sidebar/index.js

@@ -14,23 +14,13 @@ function Sidebar({
   return (
     // ${open ? 'md:w-[39%]' : 'min-w-[80px]'}
     <div
-      className={`
+      className={` md:block fixed md:relative flex-1 z-[7] w-full sm:bg-[#FAFAFA] sm:px-[24px] md:w-[32%] lg:w-[28%] bg-[#FAFAFA] padding-responsive transition-all duration-700 h-screen md:h-auto pt-[36px] md:pt-0 z-5 top-[48px] sm:top-[52px] md:top-0 md:px-0 ${isOpenSide ? "right-0" : "md:flex -right-full md:right-0"} `}
-             md:block fixed md:relative flex-1 z-[7] w-full sm:bg-[#FAFAFA] sm:px-[24px] md:w-[32%] lg:w-[28%] 
-             bg-[#FAFAFA] padding-responsive transition-all duration-700
-             h-screen md:h-auto pt-[36px] md:pt-0
-             z-5 top-[48px] sm:top-[52px] md:top-0 md:px-0
-            ${isOpenSide ? "right-0" : "md:flex -right-full md:right-0"}
-        `}
     >
       <aside
-        className="relative md:sticky top-0 h-fit 
+        className="relative md:sticky top-0 h-fit md:top-[110px] lg:top-[calc(40px_+_58px_+_78px)] w-full"
-                md:top-[110px] lg:top-[calc(40px_+_58px_+_78px)] w-full"
       >
         <div
-          className="
+          className=" pt-0 md:pt-[10px] pb-[26px] bg-[#FAFAFA] sm:bg-[#FAFAFA] md:bg-[#FFF] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] "
-                    pt-0 md:pt-[10px] pb-[26px] bg-[#FAFAFA] sm:bg-[#FAFAFA] md:bg-[#FFF] shadow-none 
-                    md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] 
-                "
         >
           <Head user={user} />
           <Cards user={user} />

components/notFound/index.js

@@ -8,17 +8,12 @@ function NotFoundPage() {
     <div className="py-[105px] padding-responsive sm:py-[135px] md:py-[165px] lg:py-[201px] min-h-screen flex flex-col md:flex-row items-center justify-between gap-[50px]">
       <div className="flex w-full md:w-fit flex-col justify-center items-center">
         <div
-          className="w-[136px] sm:w-[163px] md:w-[190px] lg:w-[218px]
+          className="w-[136px] sm:w-[163px] md:w-[190px] lg:w-[218px] h-[51px] sm:h-[61px] md:h-[71px] lg:h-[82px]"
-                h-[51px] sm:h-[61px] md:h-[71px] lg:h-[82px]"
         >
           <NumberNotFound />
         </div>
         <Image
-          className=" 
+          className=" flex md:hidden mt-[20px] w-[200px] sm:w-[270px] md:w-[340px] lg:w-[411px] h-[200px] sm:h-[270px] md:h-[340px] lg:h-[405px] "
-                        flex md:hidden mt-[20px]
-                        w-[200px] sm:w-[270px] md:w-[340px] lg:w-[411px]
-                        h-[200px] sm:h-[270px] md:h-[340px] lg:h-[405px]
-                    "
           src="/assets/images/notfound-cover.png"
           alt="notfound-cover"
           height={405}
@@ -38,11 +33,7 @@ function NotFoundPage() {
         </Button>
       </div>
       <Image
-        className=" 
+        className=" hidden md:flex w-[200px] sm:w-[270px] md:w-[340px] lg:w-[411px] h-[200px] sm:h-[270px] md:h-[340px] lg:h-[405px] "
-                    hidden md:flex
-                    w-[200px] sm:w-[270px] md:w-[340px] lg:w-[411px]
-                    h-[200px] sm:h-[270px] md:h-[340px] lg:h-[405px]
-                "
         src="/assets/images/notfound-cover.png"
         alt="notfound-cover"
         height={405}

components/register/LogInPage.js

@@ -59,11 +59,7 @@ function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep })
           updateState={handleChange}
         />
         <p
-          className={`
+          className={` text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out transform ${error.valid ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"} `}
-          text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out
-            transform
-            ${error.valid ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"}
-        `}
         >
           {error.text}
         </p>