respnsive pages

components/doctor/detailDoctor/Link.js

@@ -17,21 +17,23 @@ function Link() {
             {listLink.map((item, idx) => (
                 <li
                     key={idx}
+                    className="flex"
                 >
                     <a href={`#${item.link}`}>
                         <Button
                             onClick={() => setActiveId(idx)}
-                            className={`
-                        !text-[20px] !font-bold !mx-[56px] !py-px
-                        ${idx !== 0 && idx !== listLink.length - 1 ?
-                                    'relative before:absolute before:right-[-56px] before:top-0 before:h-full before:w-px before:bg-[#BABABA] after:absolute after:left-[-56px] after:top-0 after:h-full after:w-px after:bg-[#BABABA]'
-                                    : ''}
-                        ${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
-                        `}
+                            className={`!text-[20px] !font-bold !p-1
+                                ${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
+                            `}
                             variant="text">
                             {item.name}
                         </Button>
                     </a>
+                    {listLink.length > idx + 1 && (
+                        <span
+                            className="block bg-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]"
+                        ></span>
+                    )}
                 </li>
             ))}
         </ul>

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -8,7 +8,7 @@ function AboutDcotor({ doctor }) {
             <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>
-                <ul className="flex items-center justify-start gap-4">
+                <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">
                             <span className="w-2 h-2 bg-[#F17732] rounded-full"></span>

components/doctor/detailDoctor/index.js

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