change style menu home & responsive head and footer home & list doctors

app/component/Logo.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 function Logo({ isAbsolute }) {
     return (
-        <Link href='/' className={isAbsolute ? 'absolute right-[32px] top-0 z-10' : ''}>
+        <Link href='/' className={isAbsolute ? 'absolute right-[32px] top-0' : ''}>
             <div className="flex items-center justify-start gap-[5px]">
                 <Image
                     className='w-[20px] h-[20px] sm:w-[23px] sm:h-[23px] md:w-[26px] md:h-[26px] lg:w-[30px] lg:h-[30px]'

components/doctors/listDoctors/index.js

@@ -5,7 +5,7 @@ import Pagination from '@/app/component/Pagination';
 function ListDoctors() {
     return (
         <div>
-            <ul className="grid grid-cols-3 mt-[64px] gap-[24px]">
+            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[64px] gap-[24px]">
                 {doctors.map(doctor => (
                     <ItemDoctor
                         key={doctor.id}

components/home/FrequentSearches.js

@@ -3,7 +3,7 @@ import { Button } from "@mui/material"
 
 function FrequentSearches() {
     return (
-        <div className="flex mt-3 items-center justify-start lg:justify-center gap-4 w-full lg:w-fit">
+        <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">
             <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]">
@@ -12,7 +12,7 @@ function FrequentSearches() {
                             <Button
                                 variant="contained"
                                 color="secondary"
-                                className="!py-2 !px-4 !rounded-[4px] !shadow-none !text-[14px] !font-normal !border !border-solid !border-[#D7D7D7]"
+                                className="!py-2 !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]"
                             >{item}</Button>
                         </li>
                     ))}

components/home/index.js

@@ -10,8 +10,13 @@ function HomePage() {
         <div className="bg-banner-home !bg-center !bg-no-repeat !bg-cover">
             <div className="padding-responsive min-h-screen pt-[120px] flex items-center justify-center flex-col gap-[64px]">
                 <div>
-                    <p className="text-[#D15B56] text-center font-kalame text-[32px] font-bold">نوبت ۷۲۴</p>
+                    <p
-                    <p className="text-[#525252] text-center mt-2.5 font-kalame text-[36px] font-bold flex items-center gap-3">
+                        className="text-[#D15B56] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold"
+                    >نوبت ۷۲۴</p>
+                    <p
+                        className="text-[#525252] text-center mt-2.5 font-kalame text-[20px] sm:text-[25px] md:text-[31px] lg:text-[36px] 
+                        font-bold flex items-center gap-3"
+                    >
                         <BText />
                         میتونی آنلاین نوبت بگیری!
                         <AText />

components/home/search/index.js

@@ -36,13 +36,16 @@ function SearchBar() {
                 dir='rtl'
                 className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
             />
-            <Button className="!hidden lg:!flex !rounded-[4px] !gap-2.5 !min-w-[114px]">
+            <Button className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]">
                 <div className="min-w-[20px] min-h-[20px]">
                     <Search />
                 </div>
                 <p>جستجو</p>
             </Button>
-            <Button className="!flex lg:!hidden !rounded-[4px] !gap-2.5 !p-2.5 !w-[40px] !h-[40px]">
+            <Button
+                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] !gap-2.5 !p-2.5"
+            >
                 <SearchD />
             </Button>
         </ButtonGroup>

components/home/search/modal/index.js

@@ -31,16 +31,18 @@ function ModalSearchCity() {
         <>
             {/* Button Modal */}
             <Button
-                className="!border-none hover:!bg-transparent !min-w-[155px] !py-0 lg:!py-[9px]"
+                className="!border-none hover:!bg-transparent !py-[11.5px] !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] min-w-fit !rounded-3"
                 onClick={handleOpen}
                 variant="contained"
                 color="secondary"
             >
-                <div className="min-w-[20px] min-h-[20px]">
+                <div className="min-w-[20px] min-h-[20px] hidden md:flex">
                     <Location />
                 </div>
-                <p className="text-[#616161] text-[16px] font-medium mx-1">انتخاب شهر</p>
+                <p className="text-[#616161] text-[16px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1">انتخاب شهر</p>
-                <ArrowBottomH />
+                <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
+                    <ArrowBottomH />
+                </div>
             </Button>
             {/* Content Modal */}
             <Modal

components/layout/footer/LogoNamad.js

@@ -0,0 +1,26 @@
+import Image from "next/image"
+
+const Namads = [
+    '/assets/images/footer-etehadie.png',
+    '/assets/images/footer-r.png',
+    '/assets/images/footer-namad.png'
+]
+
+function LogoNamad() {
+    return (
+        <ul className="flex items-center gap-3">
+            {Namads.map(src => (
+                <li>
+                    <Image
+                        alt="logo"
+                        width={48}
+                        height={48}
+                        src={src}
+                    />
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default LogoNamad

components/layout/footer/index.js

@@ -1,15 +1,16 @@
 import { footerL, footerR } from "@/constans";
-import Image from "next/image";
-import Linkedin from "../icons/Linkedin";
-import Telegram from "../icons/Telegram";
-import Whatsapp from "../icons/Whatsapp";
-import Instagram from "../icons/Instagram";
-import Link from "next/link";
-import LocationF from "../icons/LocationF";
-import CalendarAddF from "../icons/CalendarAddF";
-import StethoscopeF from "../icons/StethoscopeF";
 import Logo from "@/app/component/Logo";
-import { Button } from "@mui/material";
+import Link from "next/link";
+
+// Icons
+import Linkedin from "../../icons/Linkedin";
+import Telegram from "../../icons/Telegram";
+import Whatsapp from "../../icons/Whatsapp";
+import Instagram from "../../icons/Instagram";
+import LocationF from "../../icons/LocationF";
+import CalendarAddF from "../../icons/CalendarAddF";
+import StethoscopeF from "../../icons/StethoscopeF";
+import LogoNamad from "./LogoNamad";
 
 const socialMedias = [
     <Linkedin />,
@@ -24,63 +25,51 @@ const head = [
     { icon: <StethoscopeF />, text: 'دشبورد اختصاصی برای پزشکان' }
 ]
 
-const Namads = [
-    '/assets/images/footer-etehadie.png',
-    '/assets/images/footer-r.png',
-    '/assets/images/footer-namad.png'
-]
-
 function Footer() {
     return (
-        <div>
+        <div className="pb-[11px]">
-            <div className="flex items-center justify-center gap-[100px]">
+            <div className="flex items-center justify-evenly gap-[12px]">
                 {head.map((item, idx) => (
                     <div
                         key={idx}
-                        className="flex items-center cursor-pointer justify-start gap-1 p-[6px] hover:bg-[#F7F7F7] 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-transparent 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-[16px] font-medium">{item.text}</p>
+                        <p className="text-[#2F2F2F] text-center text-[16px] font-medium">{item.text}</p>
                     </div>
                 ))}
             </div>
             <span className="h-px bg-[#D7D7D7] mb-[40px] mt-[48px] w-full block"></span>
-            <div className="pb-[60px] flex items-start justify-between">
+            <div
+                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"
+            >
                 {/* Right */}
-                <div className="flex gap-[30px] flex-col items-start">
+                <div className="w-full lg:w-fit flex gap-[12px] lg:gap-[30px] flex-col items-start">
                     {/* Icon */}
                     <Logo />
                     <p
-                        className="text-[#616161] text-[14px] font-normal"
+                        className="w-full lg:w-fit text-[#616161] text-[14px] font-normal"
-                    >724 یک وبسایت نوبت دهی آنلاین می باشد که<br /> بستری آسان برای پزشکان و بیماران فراهم کرده<br /> است.     </p>
+                    >724 یک وبسایت نوبت دهی آنلاین می باشد که<br className="hidden lg:flex" /> بستری آسان برای پزشکان و بیماران فراهم کرده<br className="hidden lg:flex" /> است.     </p>
-                    <ul className="flex items-center gap-3">
+                    <div className="hidden lg:flex">
-                        {Namads.map(src => (
+                        <LogoNamad />
-                            <li>
+                    </div>
-                                <Image
-                                    alt="logo"
-                                    width={48}
-                                    height={48}
-                                    src={src}
-                                />
-                            </li>
-                        ))}
-                    </ul>
                 </div>
 
                 {/* Center */}
-                <ul className="flex flex-col gap-3">
+                <ul className="w-full lg:w-fit flex flex-col gap-3">
                     {footerR.map((item, idx) => (
                         <li
                             key={idx}
                             className={`
-                            relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
+                            relative w-full after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
                             ${idx === 0 ? 'text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'} 
                             text-[16px] w-fit`}
                         >{item}</li>
                     ))}
                 </ul>
-                <ul className="flex flex-col gap-3">
+                <ul className="w-full lg:w-fit flex flex-col gap-3">
                     {footerL.map((item, idx) => (
                         <li
                             key={idx}
@@ -93,11 +82,11 @@ function Footer() {
                 </ul>
 
                 {/* Left */}
-                <div className="flex flex-col justify-center gap-[50px]">
+                <div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[50px]">
                     <p className="text-[#3B3B3B] w-fit text-[16px] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5 relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0">
                         همراه با ما باشید:
                     </p>
-                    <ul className="flex items-center gap-[15px]">
+                    <ul className="flex items-center gap-[8px] sm:gap-[11px] md:gap-[13px] lg:gap-[15px]">
                         {socialMedias.map((item, idx) => (
                             <li
                                 key={idx}
@@ -113,7 +102,11 @@ function Footer() {
                         ))}
                     </ul>
                 </div>
+                <div className="flex lg:hidden justify-center w-full mt-2">
+                    <LogoNamad />
+                </div>
             </div>
+            <p className="text-center text-[#7E7E7E] text-[12px] font-normal">کلیه حقوق وبسایت برای این شرکت می باشد.</p>
         </div>
     )
 }

components/layout/header/index.js

@@ -18,19 +18,23 @@ function Header({ name }) {
         <div
             className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
         >
-            <div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
+            <div className={`
+                h-20 px-4 py-8 flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
+                ${isActive ? '!pr-0' : '!p-4'}
+            `}>
                 <div className="">
                     <BgGray
                         isActive={isActive}
                         setIsActive={setIsActive}
                     />
                     <Col
+                        name={name}
                         isActive={isActive}
                         setIsActive={setIsActive}
                     />
                     <div className="relative flex flex-row-reverse gap-2">
                         <Logo />
-                        <div className="flex lg:hidden">
+                        <div className="flex lg:hidden z-20">
                             <ButtonMenu
                                 isActive={isActive}
                                 setIsActive={setIsActive}
@@ -39,7 +43,7 @@ function Header({ name }) {
                         </div>
                     </div>
                 </div>
-                <Row />
+                <Row name={name} />
                 <Link href='/signin'>
                     <Button
                         className="!hidden lg:!flex"
@@ -49,7 +53,7 @@ function Header({ name }) {
                         ورود | ثبت نام
                     </Button>
                     <Button
-                        className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 ${isActive ? '!bg-[#9D9D9D]' : '!bg-[#EFEFEF]'}`}
+                        className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
                         variant="text"
                         color="primary"
                     >

components/layout/header/list/Row.js

@@ -2,7 +2,7 @@ import { listNav } from "@/constans";
 import { isActiveURL } from "@/helper";
 import Link from "next/link";
 
-function Row() {
+function Row({ name }) {
     return (
         <ul className="hidden lg:flex items-center justify-center gap-[40px]">
             {listNav.map(nav => (

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

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

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

@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
 import Link from "next/link";
 import { isActiveURL } from "@/helper";
 
-function Col({ isActive, setIsActive }) {
+function Col({ isActive, setIsActive, name }) {
     return (
         <div className="flex lg:hidden">
             {/* <Button variant="text" className="!p-0.5">
@@ -12,10 +12,10 @@ function Col({ isActive, setIsActive }) {
 
             <div className={`
             fixed pb-[31px] pt-[64px] pl-[24px]  padding-responsive top-[-12px] sm:top-[-21px] 
-            md:top-[-30px] lg:top-[-40px] w-[85%] h-screen bg-[#FAFAFA] transition-all duration-500
+            md:top-[-30px] lg:top-[-40px] 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-[78px] mr-[16px]">
+                <ul className="flex flex-col items-start justify-center gap-[30px] mt-[78px]">
                     {listNav.map(nav => (
                         <li
                             key={nav.id}

components/layout/index.js

@@ -1,5 +1,5 @@
-import Footer from './Footer';
+import Footer from './footer';
-import Header from './header/Header';
+import Header from './header';
 
 function Layout({ children, title, name }) {
     return (