home page

2024-12-28 12:32:45 +03:30
parent 4c224236da
commit 50df161858
18 changed files with 303 additions and 6 deletions
@@ -0,0 +1,98 @@
+import { FC } from 'react'
+import BannerImage from '../../assets/images/banner.png'
+import { useTranslation } from 'react-i18next'
+import { ArrowLeft, Element3, Messages3, NotificationStatus, Teacher } from 'iconsax-react'
+import ItemDashboard from './components/ItemDashboard'
+import TitleLine from '../../components/TitleLine'
+import AccessbilityImage from '../../assets/images/accessbility.jpg'
+import BoxNewAccessbility from './components/BoxNewAccessbility'
+import DanakLearning from './components/DanakLearning'
+
+const Home: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='w-full flex gap-6'>
+            <div className='flex-1'>
+                <div className='relative'>
+                    <img src={BannerImage} className='w-full rounded-3xl' />
+                    <div className='absolute  size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
+                        <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
+                            {t('home.new')}
+                        </button>
+
+                        <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
+                            <div>
+                                سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
+                            </div>
+                            <div className='mt-3 text-border text-xs'>
+                                ۸ دقیقه مطالعه
+                            </div>
+                            <button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
+                                <div>
+                                    {t('home.study')}
+                                </div>
+                                <ArrowLeft size={14} color='white' />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='mt-8 text-sm flex gap-6 items-center'>
+                    <ItemDashboard
+                        title={t('home.myservice')}
+                        icon={<Element3 size={20} color='black' />}
+                        color='#00D16C'
+                        count={4}
+                        description={t('home.active_service')}
+                    />
+
+                    <ItemDashboard
+                        title={t('home.ticket')}
+                        icon={<Messages3 size={20} color='black' />}
+                        color='#FF7B00'
+                        count={4}
+                        description={t('home.unread_messages')}
+                    />
+
+                    <ItemDashboard
+                        title={t('home.announcement')}
+                        icon={<NotificationStatus size={20} color='black' />}
+                        color='#FF0000'
+                        count={4}
+                        description={t('home.unread_announcement')}
+                    />
+
+                    <ItemDashboard
+                        title={t('home.learnings')}
+                        icon={<Teacher size={20} color='black' />}
+                        color='#0047FF'
+                        count={4}
+                        description={t('home.learning')}
+                    />
+
+                </div>
+
+                <div className='w-full mt-8'>
+                    <TitleLine title={t('home.access')} />
+                </div>
+
+                <div className='mt-8 flex gap-6 items-center'>
+                    <div className='flex-1 h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
+                        <img src={AccessbilityImage} className='w-10' />
+                        <div className='text-xs'>
+                            {t('home.add_access')}
+                        </div>
+                    </div>
+                    <BoxNewAccessbility />
+                    <BoxNewAccessbility />
+                    <BoxNewAccessbility />
+                </div>
+            </div>
+            <DanakLearning />
+        </div>
+    )
+}
+
+export default Home