check responsive & page dashboard user account & turns & transactions & comments

components/dashboard/userAccount/Head.js

@@ -0,0 +1,51 @@
+import CalendarAdD from '@/components/icons/CalendarAdD'
+import CardTickD from '@/components/icons/CardTickD'
+import { Button } from '@mui/material'
+import Image from 'next/image'
+import React from 'react'
+
+function Head({ user }) {
+    return (
+        <div className='flex w-full items-stretch justify-center gap-[24px]'>
+            <div className='bg-head-dashboard rounded-[8px] relative w-full !bg-no-repeat !bg-cover py-[20px] px-[24px] !bg-center flex items-center'>
+                <div className='flex flex-col justify-start items-start gap-[8px]'>
+                    <p className='text-[3B3B3B] text-[16px] font-bold'>{user.name} <span className='text-[#3B3B3B] text-[16px] font-normal'>عزیز!</span></p>
+                    <p className='text-[#616161] text-[12px] font-normal'>در این قسمت میتوانید اطلاعات حساب خود و نوبت های گرفته شده<br /> را مدیریت کنید. </p>
+                    <Button
+                        variant='contained'
+                        className='!bg-[#5559CE] !rounded-[4px] !py-[4px] !px-[8px] !text-[#EFEFEF] !text-[12px] !font-medium !leading-[22px]'
+                    >مشاهده اطلاعات</Button>
+                </div>
+                <Image
+                    className='absolute bottom-0 left-[72px] h-[calc(100%_+_16px)]'
+                    src='/assets/images/male-doctor-head-dashboard.png'
+                    alt='doctor'
+                    height={175}
+                    width={171}
+                />
+            </div>
+            <div className='flex flex-col items-start justify-start gap-[12px]'>
+                <div className='py-[10px] flex items-center justify-start gap-[12px] pl-[20px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
+                    <div className='bg-[#5559CE] rounded-full p-[8px]'>
+                        <CardTickD />
+                    </div>
+                    <div className='flex flex-col gap-[8px] items-start justify-start'>
+                        <p className='text-[#3B3B3B] text-nowrap text-[16px] font-medium'>{user.total_transactions} <span className='text-[12px]'>تومان</span></p>
+                        <p className='text-[#616161] text-nowrap text-[14px] font-normal'>مجموع تراکنش ها</p>
+                    </div>
+                </div>
+                <div className='py-[10px] flex items-center justify-start gap-[12px] pl-[20px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
+                    <div className='bg-[#FFC051] rounded-full p-[8px]'>
+                        <CalendarAdD />
+                    </div>
+                    <div className='flex flex-col gap-[8px] items-start justify-start'>
+                        <p className='text-[#3B3B3B] text-nowrap text-[16px] font-medium'>{user.number_of_turns}</p>
+                        <p className='text-[#616161] text-nowrap text-[14px] font-normal'>تعداد نوبت های شما</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Head