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

app/component/AnimationTextHead.js

@@ -1,10 +1,10 @@
 function AnimationTextHead({ name, text, children }) {
     return (
         <div className='flex justify-center items-start relative w-fit'>
-            <div className='overflow-hidden mb-1.5'>
+            <div className='overflow-hidden mb-[4px] md:mb-[5px] lg:mb-[6px]'>
                 <p
                     data-aos={name}
-                    className='text-[#3B3B3B] text-nowrap overflow-hidden text-[20px] font-bold'>{text}</p>
+                    className='text-[#3B3B3B] text-nowrap overflow-hidden text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold'>{text}</p>
             </div>
             <div className="absolute bottom-0 right-1/2 translate-x-1/2 w-full flex justify-center">
                 {children}

app/component/comment/ItemUser.js

@@ -55,7 +55,7 @@ function ItemUser({ update, setUpdate, list, setList, data, loading }) {
                         <Skeleton variant="text" className="!w-1/3" />
                     </>
                 ) : (
-                    <p className="text-[#495057] text-[14px] font-normal leading-[30px]">{data.comment}</p>
+                    <p className="text-[#495057] text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">{data.comment}</p>
                 )}
                 <div className="flex items-center justify-start mt-2 gap-[28px]">
                     <div className="flex items-center justify-start gap-1">

app/component/datePicker/ButtonDate.js

@@ -0,0 +1,16 @@
+import { Button as ButtonMUI } from '@mui/material'
+import React from 'react'
+
+function ButtonDate({ handleClick, id, text }) {
+    return (
+        <ButtonMUI
+            onClick={handleClick}
+            aria-describedby={id}
+            className="!border-[#E9ECEF] !text-[#6C757D]"
+        >
+            {text}
+        </ButtonMUI>
+    )
+}
+
+export default ButtonDate

app/component/datePicker/Field.js

@@ -0,0 +1,32 @@
+import { TextField } from "@mui/material"
+
+function Field({ title, handleClick }) {
+    return (
+        <div className="relative">
+            <TextField
+                label={title}
+                className="!w-full !mx-auto !bg-[#FFF]"
+                sx={{
+                    borderRadius: '8px !important',
+                    '& .MuiFormLabel-root': { transform: 'translate(16px, 50%) scale(1) !important' },
+                    '& .MuiInputLabel-shrink': { transform: 'translate(14px, -9px) scale(0.75) !important' },
+                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
+                    '& .MuiInputBase-root': { borderRadius: '8px !important' },
+                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
+                    ".Mui-focused": {
+                        '& .MuiOutlinedInput-notchedOutline': {
+                            border: '1px solid #0FA1B3 !important',
+                            transition: '0.5s all'
+                        }
+                    }
+                }}
+            />
+            <span
+                className="absolute cursor-pointer left-0 top-0 w-full h-full"
+                onClick={handleClick}
+            ></span>
+        </div>
+    )
+}
+
+export default Field

app/component/datePicker/index.js

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Popover } from '@mui/material';
+import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
+import Field from './Field';
+import ButtonDate from './ButtonDate';
+
+function DatePicker({ type, date, updateDate, text, from }) {
+
+    const [anchorEl, setAnchorEl] = useState(null);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => setAnchorEl(null);
+
+    const open = true;
+    const id = open ? 'simple-popover' : undefined;
+
+    return (
+        <div className='min-w-[700px] min-h-[700px]'>
+            {/* {from && from === 'register' ? (
+                <Field
+                    title={text}
+                    handleClick={handleClick}
+                />
+            ) : (
+                <ButtonDate
+                    text={text}
+                    handleClick={handleClick}
+                />
+            )} */}
+            <DatePickerJalali
+                    onChange={(e) => {
+                        if (e._d) {
+                            updateDate(e._d, type)
+                        }
+                        handleClose()
+                    }}
+                />
+        </div>
+    )
+}
+
+export default DatePicker

app/globals.css

@@ -171,7 +171,8 @@ html {
     background: url(../public/assets/images/banner-about.png);
 }
 
-.bg-banner-home::after {
+.bg-banner-home::after,
+.bg-banner-stroke::after {
     content: "";
     position: absolute;
     right: 0;
@@ -215,9 +216,7 @@ html {
 .cover-head-blogs p {
     position: absolute;
     bottom: 32px;
-    right: 24px;
     color: #FAFAFA;
-    font-size: 24px;
     font-weight: 700;
 }
 
@@ -299,4 +298,91 @@ html {
         padding-left: 108px;
         padding-right: 108px;
     }
-}
+}
+
+
+
+/* Date Picker Style */
+
+.panel-elevation {
+    box-shadow: none !important;
+    border: none;
+    outline: none;
+}
+
+.icon-keyboard_double_arrow_right,
+.icon-keyboard_double_arrow_left {
+    display: none !important;
+}
+
+.icon-chevron-right::before,
+.icon-chevron-left::before {
+    content: "" !important;
+    background: url(../public/assets/icons/arrow-right.svg);
+    width: 24px;
+    height: 24px;
+}
+
+.icon-chevron-left::before {
+    rotate: 180deg;
+}
+
+.panel-date-holder-item span {
+    /* font-family: Iran Sans !important; */
+    font-size: 18px !important;
+    font-weight: 500 !important;
+}
+
+.panel-date-holder-item span:hover {
+    color: #FF8848 !important;
+}
+
+.year-item-selected,
+.month-item-selected {
+    background: #FF8848 !important;
+    border-radius: 3px !important;
+}
+
+.panel-header-rtl {
+    border-bottom: none !important;
+}
+
+.day-label-bar-inner-rtl {
+    background: #FFF !important;
+}
+
+.day-label-bar-inner-rtl div {
+    color: #6C757D !important;
+}
+
+.panel-jalaali .days-body .not-current {
+    display: none !important;
+}
+
+.panel-jalaali .days-body .day.hovered span {
+    color: #343A40 !important;
+}
+
+.panel-jalaali .days-body .day.weekend-day span {
+    color: #B71232 !important;
+}
+
+.panel-jalaali .today,
+.panel-jalaali .highlight {
+    border-radius: 50% !important;
+}
+
+.panel-jalaali .today {
+    border: 1px solid #FF8848 !important;
+}
+
+.panel-jalaali .highlight {
+    background: #ff975d !important;
+}
+
+.panel-jalaali .panel-footer-wrapper,
+.panel-jalaali .panel-footer-rtl {
+    display: none !important;
+}
+
+/* End Date Picker Style */

app/layout.js

@@ -1,5 +1,6 @@
 import "./globals.css";
 import ThemeRegistry from './component/ThemeRegistry';
+import "jalaali-react-date-picker/lib/styles/index.css";
 
 export const metadata = {
   title: "Create Next App",

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-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">بلاگ {'>'}</p>
-                <p className="text-[#9B9B9B] 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-[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>
+            <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-6 items-center justify-start gap-[35px]">
+            <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-[11px] md:text-[13px] lg: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-[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-[11px] md:text-[13px] lg:text-[14px] font-normal">زمان مطالعه:</p>
-                    <p className="text-[#9B9B9B] text-[16px] font-medium">{data.time}</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'>
+      <ul className='flex w-full lg:w-fit flex-col justify-start items-start'>
-        {data.map(item => (
+        {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='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='cover-head-blogs'>
+            <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='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='flex items-center justify-center 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='cover-head-blogs'>
+                    <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>
+            <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">جدیدترین مقاله ها</p>
-            <ul className="grid grid-cols-3 gap-6">
+            <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
+        <li>
-            className={`
+            <Button
-                !py-2 !px-4 !shadow-none !rounded-[8px]
+                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)}
+                onClick={() => setActiveBtn(idx)}
-            variant="contained"
+                variant="contained"
-            color="secondary"
+                color="secondary"
-        >
+            >
-            {name}
+                {name}
-        </Button>
+            </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 
+            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"
-        !bg-top place-items-center h-screen w-full"
         >
             <div className="flex items-center justify-center gap-[5px] mt-[32px] sm:mt-0">
                 <Image

package.json

@@ -15,7 +15,10 @@
     "@mui/material": "^5.14.17",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "aos": "^2.3.4",
+    "i": "^0.3.7",
+    "jalaali-react-date-picker": "^1.0.18",
     "next": "14.2.3",
+    "npm": "^10.8.2",
     "react": "^18",
     "react-dom": "^18",
     "styled-components": "^6.1.11",

public/assets/icons/arrow-right.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="vuesax/outline/arrow-right">
+<g id="arrow-right">
+<path id="Vector" d="M8.90961 21.17C8.71961 21.17 8.52961 21.1 8.37961 20.95C8.08961 20.66 8.08961 20.18 8.37961 19.89L14.8996 13.37C15.3796 12.89 15.3796 12.11 14.8996 11.63L8.37961 5.10999C8.08961 4.81999 8.08961 4.33999 8.37961 4.04999C8.66961 3.75999 9.14961 3.75999 9.43961 4.04999L15.9596 10.57C16.4696 11.08 16.7596 11.77 16.7596 12.5C16.7596 13.23 16.4796 13.92 15.9596 14.43L9.43961 20.95C9.28961 21.09 9.09961 21.17 8.90961 21.17Z" fill="#292D32"/>
+</g>
+</g>
+</svg>