home page
This commit is contained in:
hamid zarghami
@@ -1,7 +1,7 @@
|
||||
import { FC } from 'react'
|
||||
import LogoImage from '../../assets/images/logo.svg'
|
||||
import LogoSmallImage from '../../assets/images/logo-small.svg'
|
||||
import { useAuthStore } from '../store/AuthStore'
|
||||
import { useAuthStore } from './store/AuthStore'
|
||||
import LoginStep1 from './components/LoginStep1'
|
||||
import LoginStep2 from './components/LoginStep2'
|
||||
import LoginStep3 from './components/LoginStep3'
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
|
||||
import { LoginType } from '../types/AuthTypes'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { useAuthStore } from '../../store/AuthStore'
|
||||
import { useAuthStore } from '../store/AuthStore'
|
||||
import Error from '../../../components/Error'
|
||||
import Button from '../../../components/Button'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
|
||||
import { LoginType } from '../types/AuthTypes'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { useAuthStore } from '../../store/AuthStore'
|
||||
import { useAuthStore } from '../store/AuthStore'
|
||||
import Button from '../../../components/Button'
|
||||
import OTPInput from 'react-otp-input'
|
||||
import { useCountDown } from '../../../hooks/useCountDown'
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
|
||||
import { LoginPasswordType } from '../types/AuthTypes'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { useAuthStore } from '../../store/AuthStore'
|
||||
import { useAuthStore } from '../store/AuthStore'
|
||||
import Error from '../../../components/Error'
|
||||
import Button from '../../../components/Button'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
@@ -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
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Add } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
|
||||
const BoxNewAccessbility: FC = () => {
|
||||
return (
|
||||
<div
|
||||
className="flex-1 flex justify-center items-center h-[160px]"
|
||||
style={{
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: -1,
|
||||
borderRadius: '22px',
|
||||
}}
|
||||
>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="none"
|
||||
// rx="22"
|
||||
ry="22"
|
||||
stroke="#8C90A3"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="6,14"
|
||||
// strokeDashoffset="25"
|
||||
/>
|
||||
</svg>
|
||||
<div style={{ zIndex: 1 }}>
|
||||
<Add size={38} color="#8C90A3" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BoxNewAccessbility
|
||||
@@ -0,0 +1,69 @@
|
||||
import { FC } from 'react'
|
||||
import { SIDEBAR_SIZE_LEFT } from '../../../config/Const'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ArrowLeft } from 'iconsax-react'
|
||||
import CoverImage from '../../../assets/images/banner.png'
|
||||
|
||||
const DanakLearning: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
return (
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-xs hidden xl:block h-fit px-5 py-7 rounded-3xl'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('home.danak_learning')}
|
||||
</div>
|
||||
<div className='flex gap-2 items-center text-[10px]'>
|
||||
<div>{t('home.see_all')}</div>
|
||||
<ArrowLeft size={12} color='black' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-7'>
|
||||
<div className='flex gap-3 mt-6'>
|
||||
<div>
|
||||
<img src={CoverImage} alt='danak-learning-1' className='w-36 h-24 object-cover rounded-2xl' />
|
||||
</div>
|
||||
|
||||
<div className='text-xs'>
|
||||
<div className='leading-5'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی
|
||||
</div>
|
||||
<div className='text-[10px] text-description'>
|
||||
<div className='flex gap-1 mt-2'>
|
||||
<div>دیزاین ,</div>
|
||||
<div>۲۴ دقیقه</div>
|
||||
</div>
|
||||
<div className=' mt-2'>
|
||||
آذر ماه 1403
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-3 mt-6'>
|
||||
<div>
|
||||
<img src={CoverImage} alt='danak-learning-1' className='w-36 h-24 object-cover rounded-2xl' />
|
||||
</div>
|
||||
|
||||
<div className='text-xs'>
|
||||
<div className='leading-5'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی
|
||||
</div>
|
||||
<div className='text-[10px] text-description'>
|
||||
<div className='flex gap-1 mt-2'>
|
||||
<div>دیزاین ,</div>
|
||||
<div>۲۴ دقیقه</div>
|
||||
</div>
|
||||
<div className=' mt-2'>
|
||||
آذر ماه 1403
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DanakLearning
|
||||
@@ -0,0 +1,35 @@
|
||||
import { FC, ReactNode } from 'react'
|
||||
|
||||
type Props = {
|
||||
title: string
|
||||
icon: ReactNode,
|
||||
color: string,
|
||||
count: number,
|
||||
description: string
|
||||
}
|
||||
|
||||
const ItemDashboard: FC<Props> = (props: Props) => {
|
||||
|
||||
return (
|
||||
<div className='p-6 flex-1 h-[178px] bg-white rounded-3xl'>
|
||||
<div className='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
|
||||
{props.icon}
|
||||
</div>
|
||||
<div className='mt-5'>
|
||||
{props.title}
|
||||
</div>
|
||||
|
||||
<div className='mt-5 text-xs text-description flex gap-1.5 items-center'>
|
||||
<div style={{ background: props.color }} className='size-1.5 rounded-full'></div>
|
||||
<div className='flex gap-0.5'>
|
||||
<div>{props.count}</div>
|
||||
<div className='whitespace-nowrap'>
|
||||
{props.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ItemDashboard
|
||||
Reference in New Issue
Block a user