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">