financial
This commit is contained in:
hamid zarghami
@@ -1,8 +1,6 @@
|
||||
import { Carousel } from '@material-tailwind/react'
|
||||
import { FC, Fragment } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import BannerImage from '../../assets/images/banner2.jpeg'
|
||||
import RobotImage from '../../assets/images/robot.jpeg'
|
||||
import { ArrowLeft } from 'iconsax-react'
|
||||
import TitleLine from '../../components/TitleLine'
|
||||
import { useGetSuggestedServices } from './hooks/useServiceData'
|
||||
@@ -10,6 +8,8 @@ import PageLoading from '../../components/PageLoading'
|
||||
import { ItemServiceType } from './types/ServiecTypes'
|
||||
import ServiceItem from '../../components/ServiceItem'
|
||||
import OtherServicesComponent from './components/OtherServices'
|
||||
import { useGetAds } from '../ads/hooks/useAdsData'
|
||||
import { AdsDisplayLocation, AdsItemType } from '../ads/types/AdsTypes'
|
||||
|
||||
|
||||
const OtherServices: FC = () => {
|
||||
@@ -17,66 +17,52 @@ const OtherServices: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
const getSuggestedServices = useGetSuggestedServices()
|
||||
|
||||
|
||||
|
||||
|
||||
const getAds = useGetAds(AdsDisplayLocation.OTHER_SERVICES_TOP)
|
||||
const getAdsLeft = useGetAds(AdsDisplayLocation.OTHER_SERVICES_LEFT)
|
||||
|
||||
return (
|
||||
<div className='w-full flex gap-6'>
|
||||
<div className='flex-1'>
|
||||
{
|
||||
getSuggestedServices.isPending ?
|
||||
getSuggestedServices.isPending || getAdsLeft.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<Fragment>
|
||||
<Carousel autoplay className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
|
||||
<div className='relative drtl'>
|
||||
<img src={BannerImage} className='w-full max-h-[300px] h-full object-cover rounded-3xl' />
|
||||
<div className='absolute bg-black bg-opacity-20 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>
|
||||
{
|
||||
getAds.data?.data?.ads?.map((item: AdsItemType) => {
|
||||
return (
|
||||
<div key={item.id} className='relative drtl'>
|
||||
<img src={item.imageUrl} className='w-full max-h-[300px] h-full object-cover rounded-3xl' />
|
||||
<div className='absolute bg-black bg-opacity-20 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='relative drtl'>
|
||||
<img src={BannerImage} className='w-full max-h-[300px] object-cover rounded-3xl' />
|
||||
<div className='absolute bg-black bg-opacity-20 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>
|
||||
{item.title}
|
||||
</div>
|
||||
<div className='mt-3 text-border text-xs'>
|
||||
۸ دقیقه مطالعه
|
||||
</div>
|
||||
{
|
||||
<a href={item.link}>
|
||||
<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>
|
||||
</a>
|
||||
}
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<ArrowLeft size={14} color='white' />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Carousel>
|
||||
|
||||
|
||||
@@ -108,18 +94,21 @@ const OtherServices: FC = () => {
|
||||
|
||||
|
||||
</div>
|
||||
<div className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
|
||||
<img
|
||||
src={RobotImage}
|
||||
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
|
||||
/>
|
||||
{
|
||||
getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] &&
|
||||
<div className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
|
||||
<img
|
||||
src={getAdsLeft.data.data.ads[0].imageUrl}
|
||||
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
|
||||
/>
|
||||
|
||||
<div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
|
||||
<div className='max-w-[80%] text-sm leading-6 text-white'>
|
||||
سفارش نرمافزار اختصاصی: سرمایهای برای آینده یا فقط هزینهای برای امروز؟
|
||||
<div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
|
||||
<div className='max-w-[80%] text-sm leading-6 text-white'>
|
||||
{getAdsLeft.data.data.ads[0].title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user