change responsive page doctors & change modal and responsive & responsive page doctor item

components/doctor/detailDoctor/Link.js

@@ -17,12 +17,10 @@ function Link() {
             {listLink.map((item, idx) => (
                 <li
                     key={idx}
-                    className={`
-
-                    `}
                 >
                     <a href={`#${item.link}`}>
                         <Button
+                            onClick={() => setActiveId(idx)}
                             className={`
                         !text-[20px] !font-bold !mx-[56px] !py-px
                         ${idx !== 0 && idx !== listLink.length - 1 ?

components/doctor/detailDoctor/Share.js

@@ -5,11 +5,11 @@ function Share() {
     return (
         <div className="w-full text-left">
             <Button
-                className="!gap-1 !p-2 !rounded-lg !text-[#525252] !text-[14px]"
-                variant="text"
+                className="!gap-1 !border-none lg:!border-[#EFEFEF] !p-2 !rounded-lg !text-[#525252] !text-[14px]"
+                variant="outlined"
             >
                 <ShareDI />
-                اشتراک گذاری
+                <p className="hidden lg:flex">اشتراک گذاری</p>
             </Button>
         </div>
     )

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -1,6 +1,10 @@
 function AboutDcotor({ doctor }) {
     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="my-2">
                 <p className="text-[#525252] text-[16px] font-bold">تخصص ها</p>

components/doctor/detailDoctor/cards/LocationDoctor.js

@@ -1,7 +1,11 @@
 function LocationDoctor({ doctor }) {
     return (
         <div>
-            <div className="my-8">
+            <a
+                id="location"
+                className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
+            ></a>
+            <div className="mb-[16px] mt-[32px]">
                 <p className="text-[#525252] text-[20px] font-bold">موقعیت مکانی </p>
             </div>
             <div className="gap-4 flex flex-col items-start">

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

@@ -5,8 +5,12 @@ import Comment from '@/app/component/comment'
 function Comments({ doctor }) {
     return (
         <div className='mt-4'>
+            <a
+                id="comments"
+                className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
+            ></a>
             <div>
-                <p className="text-[#525252] text-[20px] font-bold">موقعیت مکانی </p>
+                <p className="text-[#525252] text-[20px] font-bold">نظرات کاربران </p>
             </div>
             <div className='mt-8 flex items-center justify-start'>
                 <p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:</p>

components/doctor/detailDoctor/index.js

@@ -8,7 +8,9 @@ import LocationDoctor from "./cards/LocationDoctor"
 function DetailDoctor({ doctor }) {
     return (
         <div className="w-[57%]">
-            <Share />
+            <div className="hidden lg:flex">
+                <Share />
+            </div>
             <Title doctor={doctor} />
             <Link />
             <AboutDcotor doctor={doctor} />

components/doctor/index.js

@@ -1,12 +1,18 @@
 import AppointmentList from "./appointmentList"
 import DetailDoctor from "./detailDoctor"
+import Share from "./detailDoctor/Share";
 
 function DoctorPage({ doctor }) {
     return (
         <div className="pt-[120px] mt-[56px] padding-responsive">
-            <div className="flex items-center justify-start text-[16px] font-normal">
-                <p className="text-[#9B9B9B]">متخصص {doctor.expertise} {' >'}</p>
-                <p className="text-[#525252] mr-1">{doctor.name}</p>
+            <div className="flex items-center justify-between">
+                <div className="flex items-center justify-start text-[16px] font-normal">
+                    <p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
+                    <p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
+                </div>
+                <div className="flex lg:hidden">
+                    <Share />
+                </div>
             </div>
             <div className="flex items-start justify-center gap-6 mt-[30px]">
                 <DetailDoctor doctor={doctor} />