fix responsive all pages & change style page list blog and blog item & add date picker

components/aboutUs/Services.js

@@ -19,7 +19,10 @@ function Services() {
                     <UnderlineLG />
                 </AnimationTextHead>
             </div>
-            <ul 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]'>
+            <ul
+                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'
+            >
                 {ourServices.map((item, idx) => (
                     <li
                         key={idx}

components/blog/detail/Caption.js

@@ -12,7 +12,7 @@ function Caption({ data }) {
                 width={808}
             />
             <div
-                className="my-6 text-[#525252] text-[16px] font-normal leading-[32px]"
+                className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[32px]"
                 dangerouslySetInnerHTML={{ __html: data.caption }}
             />
             <Image
@@ -23,7 +23,7 @@ function Caption({ data }) {
                 width={808}
             />
             <div
-                className="my-6"
+                className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[32px]"
                 dangerouslySetInnerHTML={{ __html: data.caption }}
             />
         </>

components/blog/detail/SocialMedia.js

@@ -10,7 +10,7 @@ const socials = [
 
 function SocialMedia() {
     return (
-        <ul className="flex mt-[8px] pb-[32px] relative items-center justify-end gap-4">
+        <ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
             {socials.map((item, idx) => (
                 <li
                     key={idx}

components/blog/detail/commentUser/AddComment.js

@@ -3,11 +3,11 @@ import React from 'react'
 
 function AddComment() {
     return (
-        <div className='flex items-center justify-start gap-[16px] my-[24px]'>
+        <div className='flex flex-col md:flex-row gap-y-[12px] items-start md:items-center justify-start gap-[16px] my-[12px] mb-[16] sm:!my-[16px] md:!my-[20px] lg:!my-[24px]'>
             <p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را به اشتراک بگذارید:</p>
             <Button
                 variant='outlined'
-                className='!border !border-[#5559CE] !rounded-[4px] !px-[38px] !py-[9px]'
+                className='!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] !px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]'
             >
                 ثبت نظر
             </Button>

components/blog/detail/commentUser/index.js

@@ -6,7 +6,7 @@ import AddComment from './AddComment'
 
 function CommentUser({ data }) {
     return (
-        <div className='mt-[24px]'>
+        <div className='mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
             <AnimationTextHead name='zoom-in-up' text='نظرات'>
                 <Underline />
             </AnimationTextHead>

components/blog/detail/index.js

@@ -4,7 +4,7 @@ import CommentUser from "./commentUser";
 
 function Detail({ data }) {
     return (
-        <div className="w-[68%]">
+        <div className="w-full lg:w-[68%]">
             <Caption data={data} />
             <SocialMedia />
             <CommentUser data={data} />

components/blog/head/index.js

@@ -2,19 +2,19 @@ function Head({ data }) {
     return (
         <div>
             <div className="flex items-center justify-start gap-1">
-                <p className="text-[#9B9B9B] text-[16px] font-normal">بلاگ {'>'}</p>
-                <p className="text-[#9B9B9B] text-[16px] font-normal">پوست و مو {'>'}</p>
-                <p className="text-[#525252] text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
+                <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">بلاگ {'>'}</p>
+                <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">پوست و مو {'>'}</p>
+                <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
             </div>
-            <p className="text-[#3B3B3B] mt-[40px] text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
-            <div className="flex mt-6 items-center justify-start gap-[35px]">
+            <p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
+            <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
                 <div className="flex items-center justify-start gap-1">
-                    <p className="text-[#9B9B9B] text-[14px] font-normal">تاریخ انتشار:</p>
-                    <p className="text-[#9B9B9B] text-[16px] font-medium">{data.date_of_release}</p>
+                    <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">تاریخ انتشار:</p>
+                    <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.date_of_release}</p>
                 </div>
                 <div className="flex items-center justify-start gap-1">
-                    <p className="text-[#9B9B9B] text-[14px] font-normal">زمان مطالعه:</p>
-                    <p className="text-[#9B9B9B] text-[16px] font-medium">{data.time}</p>
+                    <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">زمان مطالعه:</p>
+                    <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.time}</p>
                 </div>
             </div>
         </div>

components/blog/index.js

@@ -4,9 +4,9 @@ import RelatedContent from "./relatedContent";
 
 function BlogPage({ article, articles }) {
     return (
-        <div className="padding-responsive pt-[176px]">
+        <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
             <Head data={article} />
-            <div className="flex items-start justify-center gap-[24px] mt-[24px]">
+            <div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
                 <Detail data={article} />
                 <RelatedContent data={articles} />
             </div>

components/blog/relatedContent/Item.js

@@ -1,29 +1,35 @@
 import Image from "next/image";
 import Link from "next/link";
 
-function Item({ data }) {
+function Item({ data, idx }) {
     return (
-        <li className="flex relative items-center justify-start gap-[8px] py-[20px]">
+        <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
             <Link href={`/blog/${data.id}`}>
                 <Image
-                    className="w-[97px] h-[88px] rounded-[8px] overflow-hidden object-cover"
+                    className="
+                        min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px] 
+                        min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px] 
+                        rounded-[8px] overflow-hidden object-cover
+                    "
                     src={data.src}
                     alt="article"
                     height={88}
                     width={97}
                 />
             </Link>
-            <div className="flex flex-col gap-[24px] items-start justify-between">
+            <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
                 <Link href={`/blog/${data.id}`}>
                     <p
-                        className="text-[#3B3B3B] text-[16px] text-nowrap font-bold"
+                        className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
                     >{data.title}</p>
                 </Link>
                 <p
                     className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
                 >تاریخ انتشار: {data.date_of_release}</p>
             </div>
-            <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
+            {data.id > idx + 1 && (
+                <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
+            )}
         </li>
     )
 }

components/blog/relatedContent/index.js

@@ -5,13 +5,14 @@ import Item from './Item'
 
 function RelatedContent({ data }) {
   return (
-    <div className='p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
+    <div className='p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
       <AnimationTextHead name='fade-up' text='مطالب مرتبط'>
         <UnderlineLG />
       </AnimationTextHead>
-      <ul className='flex w-fit flex-col justify-start items-start'>
-        {data.map(item => (
+      <ul className='flex w-full lg:w-fit flex-col justify-start items-start'>
+        {data.map((item, idx) => (
           <Item
+            idx={idx}
             data={item}
             key={item.id}
           />

components/blogs/Head.js

@@ -3,45 +3,45 @@ import React from 'react'
 
 function Head() {
     return (
-        <div className='flex mt-[40px] items-center justify-center gap-[24px]'>
-            <div className='cover-head-blogs'>
+        <div className='flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
+            <div className='w-full lg:w-1/2 cover-head-blogs'>
                 <Image
                     src='/assets/images/head-blogs-1.png'
                     width={600}
                     height={424}
                     alt='head blog'
                 />
-                <p>روش های خانگی محافظت از پوست در تابستان</p>
+                <p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>روش های خانگی محافظت از پوست در تابستان</p>
             </div>
-            <div className='flex flex-col items-center justify-center gap-[24px]'>
-                <div className='flex items-center justify-center gap-[24px]'>
-                    <div className='cover-head-blogs'>
+            <div className='w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
+                <div className='w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
+                    <div className='w-full cover-head-blogs'>
                         <Image
                             src='/assets/images/head-blogs-2.png'
                             width={600}
                             height={424}
                             alt='head blog'
                         />
-                        <p className='!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
+                        <p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
                     </div>
-                    <div className='cover-head-blogs'>
+                    <div className='w-full cover-head-blogs'>
                         <Image
                             src='/assets/images/head-blogs-3.png'
                             width={600}
                             height={424}
                             alt='head blog'
                         />
-                        <p className='!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
+                        <p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
                     </div>
                 </div>
-                <div className='cover-head-blogs'>
+                <div className='w-full cover-head-blogs'>
                     <Image
                         src='/assets/images/head-blogs-4.png'
                         width={600}
                         height={424}
                         alt='head blog'
                     />
-                    <p>تغذیه مناسب برای کاهش فشار خون</p>
+                    <p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>تغذیه مناسب برای کاهش فشار خون</p>
                 </div>
             </div>
         </div>

components/blogs/index.js

@@ -4,7 +4,7 @@ import LatestArticles from "./latestArticles";
 
 function BlogsPage() {
     return (
-        <div className="padding-responsive pt-[168px]">
+        <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
             <Title />
             <Head />
             <LatestArticles />

components/blogs/latestArticles/Article.js

@@ -6,15 +6,16 @@ function Article({ data }) {
         <li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'>
             <Link href={`/blog/${data.id}`}>
                 <Image
-                    src={data.src}
+                    className='w-full'
                     alt="article-img"
+                    src={data.src}
                     height={217}
                     width={392}
                 />
             </Link>
-            <div className='p-[16px]'>
+            <div className='p-[12px] md:p-[14px] lg:p-[16px]'>
                 <Link href={`/blog/${data.id}`}>
-                    <p className='text-[#3B3B3B] mb-[16px] text-[16px] font-bold'>{data.title}</p>
+                    <p className='text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold'>{data.title}</p>
                 </Link>
                 <div className='flex items-center justify-start gap-[35px]'>
                     <p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>

components/blogs/latestArticles/index.js

@@ -5,8 +5,8 @@ import Pagination from '@/app/component/Pagination';
 function LatestArticles() {
     return (
         <div>
-            <p className="text-[#3B3B3B] text-[20px] font-bold my-[24px]">جدیدترین مقاله ها</p>
-            <ul className="grid grid-cols-3 gap-6">
+            <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">جدیدترین مقاله ها</p>
+            <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
                 {articles.map(item => (
                     <Article
                         data={item}

components/blogs/title/ItemTitle.js

@@ -3,17 +3,19 @@ import { Button } from "@mui/material"
 function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
 
     return (
-        <Button
-            className={`
-                !py-2 !px-4 !shadow-none !rounded-[8px]
+        <li>
+            <Button
+                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]'}
             `}
-            onClick={() => setActiveBtn(idx)}
-            variant="contained"
-            color="secondary"
-        >
-            {name}
-        </Button>
+                onClick={() => setActiveBtn(idx)}
+                variant="contained"
+                color="secondary"
+            >
+                {name}
+            </Button>
+        </li>
     )
 }
 

components/blogs/title/index.js

@@ -9,7 +9,7 @@ function Title() {
     const [activeBtn, setActiveBtn] = useState(0);
 
     return (
-        <div className="flex items-center justify-start gap-4">
+        <ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
             {listTitle.map((name, idx) => (
                 <ItemTitle
                     setActiveBtn={setActiveBtn}
@@ -19,7 +19,7 @@ function Title() {
                     key={idx}
                 />
             ))}
-        </div>
+        </ul>
     )
 }
 

components/clinic/components/about/index.js

@@ -17,7 +17,7 @@ function About({ data }) {
                 <div className="flex flex-col items-center justify-center">
                     <p
                         className={`
-                        text-[#525252] text-[16px] font-normal leading-[32px] overflow-hidden relative
+                        text-[#525252] text-[16px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[32px] overflow-hidden relative
                         md:max-h-fit after:absolute after:right-0 after:bottom-0 after:h-[80px]
                         after:shadow-xl after:w-full transition-all duration-500
                         ${isMore ?

components/clinic/index.js

@@ -9,7 +9,7 @@ import Doctors from './components/doctors';
 
 function ClinicPage({ data, doctors }) {
 
-  const [value, setValue] = useState(1);
+  const [value, setValue] = useState(0);
   const handleChange = (event, newValue) => setValue(newValue);
 
   const Components = [
@@ -19,12 +19,12 @@ function ClinicPage({ data, doctors }) {
   ];
 
   return (
-    <div className="pt-[136px] mt-[40px] padding-responsive">
+    <div className="pt-[40px] sm:pt-[70px] md:pt-[100px] lg:pt-[136px] mt-[40px] padding-responsive">
       <Tabs
         value={value}
         handleChange={handleChange}
       />
-      <div className='mt-[32px]'>
+      <div className='mt-[24px] sm:mt-[27px] md:mt-[30px] lg:mt-[32px]'>
         {Components[value]}
       </div>
     </div>

components/clinics/head/modal/index.js

@@ -66,7 +66,10 @@ function ModalSearchCity() {
                 open={open}
                 onClose={handleClose}
             >
-                <Box sx={styleDefault}>
+                <Box
+                    sx={styleDefault}
+                    className="!w-full !h-full md:!w-fit md:!h-fit"
+                >
                     <div
                         className="flex justify-between w-full"
                     >
@@ -98,9 +101,10 @@ function ModalSearchCity() {
                         </div>
                         <div className="w-full flex justify-end">
                             <Button
-                                variant="contained"
                                 color="primary"
+                                variant="contained"
                                 className="flex !px-3 items-center justify-center gap-1 mr-auto"
+                                onClick={handleClose}
                             >
                                 تایید و ادامه
                                 <ArrowLeftM />

components/doctor/appointmentList/index.js

@@ -1,14 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+
 import turns from '@/data/turns.json';
-import ItemAppointment from './ItemAppointment';
+import ModalDatePicker from './modal';
 import { Button } from '@mui/material';
+import ItemAppointment from './ItemAppointment';
 import ArrowLeftD from '@/components/icons/ArrowLeftD';
 
 function AppointmentList({ doctor }) {
 
     const itemActive = turns[0];
 
+    const [open, setOpen] = useState(true);
+
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
     return (
         <>
+            <ModalDatePicker
+                open={open}
+                handleClose={handleClose}
+            />
             <ul className="hidden lg:flex w-[38%] flex-col justify-start items-center gap-8">
                 {turns.map(item => (
                     <ItemAppointment

components/doctor/appointmentList/modal/index.js

@@ -0,0 +1,18 @@
+import { Box, Modal } from "@mui/material"
+import { styleDefault } from "@/mui"
+import DatePicker from "@/app/component/datePicker"
+
+function ModalDatePicker({ open, handleClose }) {
+    return (
+        <Modal
+            open={open}
+            onClose={handleClose}
+        >
+            <Box sx={styleDefault}>
+                <DatePicker />
+            </Box>
+        </Modal>
+    )
+}
+
+export default ModalDatePicker

components/doctors/index.js

@@ -18,7 +18,7 @@ function DoctorsPage() {
 
     return (
         <div className="pt-[120px] padding-responsive">
-            <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-[90px]">
+            <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
                 <div className="flex items-center justify-start gap-2 w-full">
                     <LocationD />
                     <p className="text-[#525252] text-[16px] font-semibold">خوزستان / اهواز</p>

components/doctors/modal/Content.js

@@ -1,6 +1,6 @@
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import RadioContent from "./RadioContent";
-import { Button, Switch } from "@mui/material";
+import { Switch } from "@mui/material";
 
 const specialties = ['چشم پزشکی1', 'چشم پزشکی2', 'چشم پزشکی3', 'چشم پزشکی4', 'چشم پزشکی5'];
 const group1 = ['خانم', 'آقا', 'هر دو'];
@@ -15,7 +15,7 @@ function Content({ data, setData }) {
     };
 
     return (
-        <div className="mt-[50px] px-[38px] mb-[32px]">
+        <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
             <AutoCompleteSelect
                 updateData={(event) => changeData(event.target.innerText, 'expertise')}
                 list={specialties}

components/doctors/modal/FilterModal.js

@@ -26,7 +26,7 @@ function FilterModal({ data, setData, children }) {
             >
                 <div
                     style={styleDefault}
-                    className="!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+                    className="!px-[16px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !overflow-hidden !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"
                 >
                     <div>

components/register/index.js

@@ -5,8 +5,7 @@ const about = ['سوالات متداول', 'تماس با ما', 'درباره
 function RegisterPage({ children }) {
     return (
         <div
-            className="flex padding-responsive items-center justify-start sm:justify-center flex-col !bg-contain !bg-no-repeat 
-        !bg-top place-items-center h-screen w-full"
+            className="flex padding-responsive items-center justify-start sm:justify-center flex-col place-items-center h-screen w-full bg-banner-stroke !bg-bottom !bg-no-repeat !bg-cover"
         >
             <div className="flex items-center justify-center gap-[5px] mt-[32px] sm:mt-0">
                 <Image