design and responsive page doctor and account

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

@@ -1,23 +1,19 @@
 import { Button } from '@mui/material'
 import Chart from './chart'
 import Comment from '@/app/component/comment'
+import ModalAnswer from './modal/ModalAnswer'
 
 function Comments({ doctor }) {
     return (
-        <div className='mt-8'>
+        <div className='mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]'>
             <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>
-            </div>
-            <div className='mt-8 flex items-center justify-start'>
+            <p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">نظرات کاربران </p>
+            <div className='mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[32px] flex flex-col md:flex-row gap-y-[20px] items-start md:items-center justify-start'>
                 <p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:</p>
-                <Button
-                    variant='outlined'
-                    className='!py-2.5 !px-9 !mr-4 !rounded'
-                >ثبت نظر</Button>
+                <ModalAnswer doctor={doctor} />
             </div>
             <Chart doctor={doctor} />
             <Comment data={doctor} />