change home page and style buttons

app/component/ItemDoctor.js

@@ -69,11 +69,11 @@ function ItemDoctor({ doctor, loading }) {
             {/* Arrow */}
             <Link href={`/doctor/${doctor.id}`}>
                 <Button
+                    variant="contained"
                     className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
-                    ${!doctor.free_turn || loading ?
-                            '!bg-[#D7D7D7]' :
-                            '!bg-[#5559CE]'
-                        }`}
+                     ${!doctor.free_turn || loading &&
+                        '!bg-[#D7D7D7]'}
+                    `}
                     disabled={!doctor.free_turn || loading}
                 >
                     <ArrowLeftD />

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -19,7 +19,7 @@ function AboutDcotor({ doctor, loading }) {
                 <MultilineLoading loading={loading} width='full' height={18} line={30}>
                     <p
                         className={`
-                        text-[#616161] text-[14px] font-normal text-justify overflow-hidden relative
+                        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 ?

components/home/FrequentSearches.js

@@ -3,17 +3,17 @@ import { Button } from "@mui/material"
 
 function FrequentSearches() {
     return (
-        <div className="flex mt-3 items-center justify-start lg:justify-center gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px] w-full lg:w-fit">
+        <div className="flex items-center justify-center gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px] w-full lg:w-fit">
             <p className="text-[#3B3B3B] text-[16px] font-normal text-nowrap">جستجوهای پر تکرار:</p>
-            <div className="overflow-auto hidden-scroll">
-                <ul className="flex items-center justify-start gap-[14px]">
+            <div className="overflow-auto hidden-scroll flex justify-start">
+                <ul className="flex items-center justify-start gap-[14px] pl-[14px]">
                     {frequentSearches.map((item, idx) => (
                         <li key={idx}>
                             <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] 
-                                !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7]"
+                                !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7] hover:!bg-[#EFEFEF]"
                             >{item}</Button>
                         </li>
                     ))}

components/home/index.js

@@ -7,9 +7,9 @@ import FrequentSearches from "./FrequentSearches";
 
 function HomePage() {
   return (
-    <div className="bg-banner-home after:z-[2] !bg-bottom !bg-no-repeat !bg-cover">
-      <div className="padding-responsive min-h-screen pt-[120px] flex items-center justify-center flex-col gap-[64px]">
-        <div>
+    <div className="bg-banner-home after:z-[2] !bg-bottom !bg-no-repeat !bg-cover md:!min-h-[115vh]">
+      <div className="padding-responsive min-h-screen pt-[120px] flex items-center justify-start flex-col gap-[50px]">
+        <div className="mt-[60px] sm:mt-[67px] md:mt-[90px] lg:mt-[127px]">
           <p className="text-[#F17732] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold">
             با نوبت724
           </p>

components/home/search/index.js

@@ -9,7 +9,7 @@ function SearchBar() {
             variant="contained"
             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]   
+            !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px] !mt-[50px]
             !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
             "
         >

components/layout/index.js

@@ -43,9 +43,11 @@ function Layout({ children, isTurnsDetails, setIsTurnsDetails, title, name, isOp
                 </section>
             </main>
             {disableFooter ? undefined : (
-                <footer className='bg-[#F5F5F5] pt-[44px] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover'>
-                    <div className='padding-responsive'>
-                        <Footer />
+                <footer className='bg-[#F5F5F5] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover'>
+                    <div className='pt-[44px] bg-[rgba(255,255,255,0.45)]'>
+                        <div className='padding-responsive'>
+                            <Footer />
+                        </div>
                     </div>
                 </footer>
             )}

components/layoutPanel/header/index.js

@@ -4,23 +4,21 @@ import SideButton from "./sideButton";
 import MenuProfile from "./MenuProfile";
 
 function Header({ disableProfile, data, setActive }) {
-    return (
-        <div
-            className='
+  return (
+    <div
+      className="
                 h-[56px] sm:h-[67px] md:h-[79px] lg:h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
                 flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[14px] sm:gap-[28px] md:gap-[42px] lg:gap-[56px]
-            '
-        >
-            <SideButton setActive={setActive} />
-            <Search />
-            <div className="flex items-center justify-end gap-[8px] md:gap-[40px] min-w-fit">
-                <Icons />
-                {!disableProfile && (
-                    <MenuProfile data={data} />
-                )}
-            </div>
-        </div>
-    )
+            "
+    >
+      <SideButton setActive={setActive} />
+      <Search />
+      <div className="flex items-center justify-end gap-[8px] md:gap-[40px] min-w-fit">
+        <Icons />
+        {!disableProfile && <MenuProfile data={data} />}
+      </div>
+    </div>
+  );
 }
 
-export default Header
+export default Header;

components/layoutPanel/sidebar/index.js

@@ -6,31 +6,40 @@ import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
 
 function Sidebar({ active, setActive, open, setOpen }) {
   return (
-    <div className={`
+    <div
+      className={`
         transition-all duration-500 md:flex fixed md:relative z-30 w-[85%]
-        ${active ? ' right-0' : 'right-[-85%]'}
-        ${open ? 'min-w-[243px] md:w-[243px]' : 'min-w-[96px] md:w-[96px]'}
-    `}>
-      <aside className={`
+        ${active ? " right-0" : "right-[-85%]"}
+        ${open ? "min-w-[243px] md:w-[243px]" : "min-w-[96px] md:w-[96px]"}
+    `}
+    >
+      <aside
+        className={`
         relative h-screen overflow-hidden 
         transition-all duration-500 w-[85%]
-        ${active ? ' right-0' : 'right-[-85%]'}
-        ${open ? 'w-[243px]' : 'w-[96px]'}
-      `}>
-        <div className={`
+        ${active ? " right-0" : "right-[-85%]"}
+        ${open ? "w-[243px]" : "w-[96px]"}
+      `}
+      >
+        <div
+          className={`
            z-30 md:top-0 md:right-0 w-[85%]
-        ${active ? ' right-0' : 'right-[-85%]'}
+        ${active ? " right-0" : "right-[-85%]"}
           overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed 
           border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
           transition-all duration-500
-          ${open ? 'md:w-[243px]' : 'md:w-[96px]'}
-        `}>
+          ${open ? "md:w-[243px]" : "md:w-[96px]"}
+        `}
+        >
           <div className="w-full">
             <HeadMd open={open} setOpen={setOpen} />
             <HeadSm setActive={setActive} />
             <Links open={open} />
           </div>
-          <div className={`w-full justify-center overflow-hidden transition-all duration-500 ${open ? '!max-w-full' : '!max-w-0'}`}>
+          <div
+            className={`w-full justify-center overflow-hidden transition-all duration-500 ${open ? "!max-w-full" : "!max-w-0"
+              }`}
+          >
             <Button
               variant="text"
               className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
@@ -42,7 +51,7 @@ function Sidebar({ active, setActive, open, setOpen }) {
         </div>
       </aside>
     </div>
-  )
+  );
 }
 
-export default Sidebar
+export default Sidebar;