fix bug design

src/langs/fa.json

@@ -364,7 +364,7 @@
   },
   "notif": {
     "natification": "اعلان ها",
-    "all_read": "پاک کردن همه"
+    "all_read": "خواندن همه"
   },
   "profile": {
     "account_user": "حساب کاربری",

src/pages/home/Home.tsx

@@ -37,7 +37,7 @@ const Home: FC = () => {
                     :
                     <div className='w-full flex gap-6'>
                         <div className='flex-1'>
-                            <Carousel autoplay className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
+                            <Carousel autoplay className="rounded-xl h-fit dltr z-[1]" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
                                 {
                                     getAds.data?.data?.ads?.map((item: AdsItemType) => {
                                         return (

src/pages/learning/Detail.tsx

@@ -36,12 +36,12 @@ const LearningDetail: FC = () => {
                                     <source src={getLearningDetail.data?.data?.learning?.videoUrl} />
                                 </video>
 
-                                <div className='mt-7 flex justify-between'>
+                                <div className='mt-7 flex xl:flex-row flex-col gap-4 justify-between'>
-                                    <div className='text-lg'>
+                                    <div className='xl:text-lg'>
                                         {getLearningDetail.data?.data?.learning?.title}
                                     </div>
 
-                                    <div className='flex max-h-5 gap-3 text-description text-xs'>
+                                    <div className='flex xl:flex-row flex-col xl:max-h-5 gap-3 text-description text-xs'>
 
                                         <div className='flex gap-2 items-center'>
                                             <Clock
@@ -53,7 +53,7 @@ const LearningDetail: FC = () => {
                                             </div>
                                         </div>
 
-                                        <div className='flex gap-2 items-center border-r pr-3 border-description'>
+                                        <div className='flex gap-2 items-center xl:border-r xl:pr-3 border-description'>
                                             <Element3
                                                 size={18}
                                                 color={'#888888'}
@@ -63,7 +63,7 @@ const LearningDetail: FC = () => {
                                             </div>
                                         </div>
 
-                                        <div className='flex gap-2 items-center border-r pr-3 border-description'>
+                                        <div className='flex gap-2 items-center xl:border-r xl:pr-3 border-description'>
                                             <Calendar2
                                                 size={18}
                                                 color={'#888888'}

src/pages/notification/Notification.tsx

@@ -20,7 +20,7 @@ const Notifications: FC = () => {
     const navigate = useNavigate()
     const { t } = useTranslation('global');
     const ref = useOutsideClick(() => setShowModal(false));
-    const [activeTab, setActiveTab] = useState<'all' | 'read' | 'unread'>('all');
+    const [activeTab, setActiveTab] = useState<'read' | 'unread'>('unread');
     const [showModal, setShowModal] = useState<boolean>(false);
     const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
     const readAll = useReadAll()
@@ -100,15 +100,6 @@ const Notifications: FC = () => {
 
 
                     <div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
-                        <div
-                            onClick={() => setActiveTab('all')}
-                            className={clx(
-                                'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
-                                activeTab === 'all' ? 'bg-white bg-opacity-70 text-black' : ''
-                            )}
-                        >
-                            همه
-                        </div>
                         <div
                             onClick={() => setActiveTab('unread')}
                             className={clx(

src/pages/transaction/components/Detail.tsx

@@ -21,7 +21,7 @@ const Detail: FC = () => {
                 title_header={`${t('transaction.transaction2')} ۱۲۳۴۵۵`}
             >
                 <div className='my-10'>
-                    <div className='flex gap-8'>
+                    <div className='flex xl:flex-row flex-col gap-8'>
                         <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                             <div className='flex gap-2 text-description'>
                                 <CardPos size={14} color='#8C90A3' />
@@ -48,7 +48,7 @@ const Detail: FC = () => {
                             </div>
                         </div>
                     </div>
-                    <div className='flex gap-8'>
+                    <div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
                         <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                             <div className='flex gap-2 text-description'>
                                 <Wallet1 size={14} color='#8C90A3' />
@@ -73,7 +73,7 @@ const Detail: FC = () => {
                         </div>
                     </div>
 
-                    <div className='flex gap-8'>
+                    <div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
                         <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                             <div className='flex gap-2 text-description'>
                                 <Profile size={14} color='#8C90A3' />
@@ -97,7 +97,7 @@ const Detail: FC = () => {
                             </div>
                         </div>
                     </div>
-                    <div className='flex gap-8'>
+                    <div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
                         <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                             <div className='flex gap-2 text-description'>
                                 <Document size={14} color='#8C90A3' />
@@ -122,7 +122,7 @@ const Detail: FC = () => {
                         </div>
                     </div>
 
-                    <div className='flex gap-8'>
+                    <div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
                         <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                             <div className='flex gap-2 text-description'>
                                 <NoteText size={14} color='#8C90A3' />

src/shared/Footer.tsx

@@ -14,15 +14,15 @@ const Footer: FC = () => {
         <div className='xl:hidden'>
             <div className='h-[60px] '></div>
             <div className='fixed z-10 bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
-                <Link to={Pages.dashboard}>
+                <Link to={Pages.services.mine}>
                     <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.dashboard) ? 'text-black' : ''}`}>
-                        <Home2
+                        <Element4
                             className='size-5'
-                            color={isActive(Pages.dashboard) ? 'black' : '#8C90A3'}
+                            color={isActive(Pages.services.mine) ? 'black' : '#8C90A3'}
-                            variant={isActive(Pages.dashboard) ? 'Bold' : 'Linear'}
+                            variant={isActive(Pages.services.mine) ? 'Bold' : 'Linear'}
                         />
-                        <div className={`text-[10px] ${isActive(Pages.dashboard) ? 'text-black' : ''}`}>
+                        <div className={`text-[10px] ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
-                            {t('footer.home')}
+                            {t('footer.my_services')}
                         </div>
                     </div>
                 </Link>
@@ -38,19 +38,19 @@ const Footer: FC = () => {
                         </div>
                     </div>
                 </Link>
-                <Link to={Pages.services.mine}>
+                <Link to={Pages.dashboard}>
                     <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
                         <div className='bg-white p-1 rounded-full -mt-7'>
                             <div className={`bg-black flex justify-center items-center size-10 rounded-full ${isActive(Pages.services.mine) ? 'bg-black' : ''}`}>
-                                <Element4
+                                <Home2
                                     className='size-5'
-                                    color={isActive(Pages.services.mine) ? 'white' : 'white'}
+                                    color={isActive(Pages.dashboard) ? 'white' : 'white'}
-                                    variant={isActive(Pages.services.mine) ? 'Bold' : 'Linear'}
+                                    variant={isActive(Pages.dashboard) ? 'Bold' : 'Linear'}
                                 />
                             </div>
                         </div>
                         <div className={`text-[10px] ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
-                            {t('footer.my_services')}
+                            {t('footer.home')}
                         </div>
                     </div>
                 </Link>

src/shared/SideBar.tsx

@@ -110,7 +110,7 @@ const SideBar: FC = () => {
                         />
                     </div>
 
-                    <div className='flex-1 items-end mt-14'>
+                    <div className='flex-1 items-end mt-14 pb-8'>
                         <div className='text-xs text-[#8C90A3]'>
                             <SideBarItem
                                 icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}