responsive page doctor item & page booking

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -1,13 +1,40 @@
+'use client';
+
+import { useState } from "react";
+import { Button } from "@mui/material"
+
 function AboutDcotor({ doctor }) {
+
+    const [isMore, setIsMore] = useState(false);
+
     return (
         <div>
             <a
                 id="about-doctor"
                 className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
             ></a>
-            <p className="text-[#616161] text-[14px] font-normal text-justify">{doctor.detail}</p>
-            <div className="mt-2 mb-8">
-                <p className="text-[#525252] text-[16px] font-bold">تخصص ها</p>
+            <div className="flex flex-col items-center justify-center">
+                <p
+                    className={`
+                        text-[#616161] text-[14px] font-normal text-justify 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 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>
+                <Button
+                    className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
+                    onClick={() => setIsMore(!isMore)}
+                    variant="text"
+                >
+                    {isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
+                </Button>
+            </div>
+            <div className="mt-2 mb-6 md:mb-7 lg:mb-8">
+                <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">تخصص ها</p>
                 <ul className="flex flex-wrap gap-y-1 items-center justify-start gap-4">
                     {doctor.specialties.map((item, idx) => (
                         <li className="flex items-center justify-start gap-1">

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

@@ -39,16 +39,19 @@ function Item({ data }) {
                         'max-h-0'}
                 `}
             >
-                <div className="gap-4 flex flex-col items-start mt-[24px]">
+                <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">آدرس: {data.address}</p>
                     <p className="text-[#525252] text-[16px] font-normal">تلفن: {data.phone}</p>
                     <p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {data.working_days}</p>
                 </div>
                 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99748.77423686371!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e1!3m2!1sen!2snl!4v1724802057795!5m2!1sen!2snl"
-                    className='w-full h-[470px] rounded-lg mt-4'
+                    className='
+                        w-full rounded-lg mt-4
+                        h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px]
+                    '
+                    referrerPolicy="no-referrer-when-downgrade"
                     allowFullScreen=""
                     loading="lazy"
-                    referrerPolicy="no-referrer-when-downgrade"
                 ></iframe>
             </div>
         </>

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

@@ -4,7 +4,7 @@ function Locations({ doctor }) {
     return (
         <div>
             <p
-                className="text-[#525252] text-[20px] font-bold"
+                className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold"
             >موقعیت مکانی </p>
             <ul className="flex w-full mt-[24px] flex-col justify-center items-start">
                 {doctor.locations.map((item, idx) => (
@@ -14,7 +14,7 @@ function Locations({ doctor }) {
                             data={item}
                         />
                         {doctor.locations.length > idx + 1 && (
-                            <span className="w-full h-px bg-[#EFEFEF] block my-[16px]"></span>
+                            <span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
                         )}
                     </li>
                 ))}