service
This commit is contained in:
hamid zarghami
@@ -0,0 +1,214 @@
|
||||
import { FC } from 'react'
|
||||
import RobotImage from '../../assets/images/robot.jpeg'
|
||||
import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import Rate from 'rc-rate'
|
||||
import ServiceImages from './components/ServiceImages'
|
||||
import Input from '../../components/Input'
|
||||
import Textarea from '../../components/Textarea'
|
||||
import AvatarImage from '../../assets/images/Avatar.png'
|
||||
import ServiceHeader from './components/ServiceHeader'
|
||||
|
||||
const DetailService: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
return (
|
||||
<div className='w-full flex gap-6 mt-4'>
|
||||
|
||||
<div className='flex-1'>
|
||||
|
||||
<ServiceHeader />
|
||||
<div className='mt-8 flex justify-between items-center gap-8'>
|
||||
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||||
<div className='text-description text-xs'>
|
||||
{t('service.company_develop')}
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
{t('service.company_danak')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||||
<div className='text-description text-xs'>
|
||||
{t('service.user_count')}
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
+۵۰۰
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||||
<div className='text-description text-xs'>
|
||||
{t('service.year_make')}
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
۱۴۰۰
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||||
<div className='text-description text-xs'>
|
||||
{t('service.lang_app')}
|
||||
</div>
|
||||
<div className='mt-3 text-sm'>
|
||||
{t('service.persian')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
|
||||
<div className='text-description text-xs'>
|
||||
{t('service.score')}
|
||||
</div>
|
||||
<div className='mt-3 dltr flex gap-1 text-sm'>
|
||||
<Rate
|
||||
count={5}
|
||||
style={{ fontSize: 15 }}
|
||||
value={4}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ServiceImages />
|
||||
|
||||
<div className='mt-8 bg-white p-6 rounded-3xl'>
|
||||
<div>
|
||||
{t('service.compelete_description')}
|
||||
</div>
|
||||
<p className='text-[11px] mt-4 leading-6'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex gap-8 items-start'>
|
||||
<div className='bg-white p-6 rounded-3xl w-[360px]'>
|
||||
<div>
|
||||
{t('service.submit_comment')}
|
||||
</div>
|
||||
<div className='text-xs mt-4'>
|
||||
{t('service.hint_comment')}
|
||||
</div>
|
||||
|
||||
<div className='mt-6 text-description text-sm'>
|
||||
<div>
|
||||
{t('service.score')}
|
||||
</div>
|
||||
<div className='mt-2 dltr flex justify-end'>
|
||||
<Rate
|
||||
count={5}
|
||||
style={{ fontSize: 22 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('service.fullName')}
|
||||
placeholder={t('service.enter_your_name')}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('service.title')}
|
||||
placeholder={t('service.enter_title_comment')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Textarea
|
||||
label={t('service.your_comment')}
|
||||
placeholder={t('service.write_your_comment')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Button
|
||||
label={t('service.submit_comment')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 bg-white p-6 rounded-3xl'>
|
||||
<div className='text-sm'>
|
||||
{t('service.users_comments')}
|
||||
</div>
|
||||
|
||||
<div className='mt-5 border border-border rounded-3xl p-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<img src={AvatarImage} className='size-6 rounded-full object-cover' />
|
||||
<div className='text-description text-xs'>
|
||||
فروغ براتی
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 flex justify-between'>
|
||||
<div className='text-sm max-w-[70%] truncate'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
|
||||
</div>
|
||||
<div className='text-xs text-description'>
|
||||
۳ روز پیش
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-2'>
|
||||
<Rate
|
||||
disabled
|
||||
value={5}
|
||||
count={5}
|
||||
style={{ fontSize: 14 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 text-[11px] leading-6'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-5 border border-border rounded-3xl p-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<img src={AvatarImage} className='size-6 rounded-full object-cover' />
|
||||
<div className='text-description text-xs'>
|
||||
فروغ براتی
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 flex justify-between'>
|
||||
<div className='text-sm max-w-[70%] truncate'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
|
||||
</div>
|
||||
<div className='text-xs text-description'>
|
||||
۳ روز پیش
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-2'>
|
||||
<Rate
|
||||
disabled
|
||||
value={5}
|
||||
count={5}
|
||||
style={{ fontSize: 14 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 text-[11px] leading-6'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را ...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
|
||||
<img
|
||||
src={RobotImage}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DetailService
|
||||
@@ -6,6 +6,8 @@ import Select from '../../components/Select'
|
||||
import ServiceSection from '../../components/ServiceSection'
|
||||
import StatusCircle from '../../components/StatusCircle'
|
||||
import BannerImage from '../../assets/images/banner.png'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const MyServices: FC = () => {
|
||||
|
||||
@@ -40,16 +42,18 @@ const MyServices: FC = () => {
|
||||
</div>
|
||||
|
||||
<div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
|
||||
<ServiceSection
|
||||
/>
|
||||
<div className='mt-6 flex gap-1 items-center'>
|
||||
<StatusCircle
|
||||
color='#00BA4B'
|
||||
<Link to={Pages.services.detail + '1'}>
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
|
||||
<ServiceSection
|
||||
/>
|
||||
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
|
||||
<div className='mt-6 flex gap-1 items-center'>
|
||||
<StatusCircle
|
||||
color='#00BA4B'
|
||||
/>
|
||||
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
|
||||
<ServiceSection
|
||||
/>
|
||||
|
||||
@@ -149,13 +149,13 @@ const OtherServices: FC = () => {
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[30%] xl:p-6 p-4'></div>
|
||||
</div>
|
||||
|
||||
<div className='w-full mt-8'>
|
||||
<div className='w-full xl:-mt-7 mt-8'>
|
||||
<TitleLine title={t('service.other_services')} />
|
||||
</div>
|
||||
|
||||
<div className='flex w-full gap-6 items-center'>
|
||||
<div className='flex w-full flex-wrap xl:gap-6 gap-4 items-center mt-8'>
|
||||
<div className='flex-1 min-w-full bg-white rounded-3xl py-4 px-6'>
|
||||
<div className='flex-1 min-w-full xl:min-w-0 bg-white rounded-3xl py-4 px-6'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<ServiceSection
|
||||
/>
|
||||
@@ -170,7 +170,7 @@ const OtherServices: FC = () => {
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='flex-1 min-w-full bg-white rounded-3xl py-4 px-6'>
|
||||
<div className='flex-1 min-w-full xl:min-w-0 bg-white rounded-3xl py-4 px-6'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<ServiceSection
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import { FC, useState } from 'react'
|
||||
import RadioGroup from '../../../components/RadioGroup'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ShareIcon from '../../../assets/images/share.svg'
|
||||
import Button from '../../../components/Button'
|
||||
import { ArrowLeft } from 'iconsax-react'
|
||||
|
||||
const ServiceHeader: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [planSelected, setPlanSelected] = useState<'year' | '3month' | 'month'>('year')
|
||||
|
||||
return (
|
||||
<div className='w-full p-6 bg-white rounded-3xl flex justify-between'>
|
||||
<div className='flex gap-8'>
|
||||
<div className='size-[70px] bg-blue-400 rounded-xl'></div>
|
||||
<div>
|
||||
<div>
|
||||
دی منو
|
||||
</div>
|
||||
<div className='text-xs mt-3 text-[#4E505A]'>
|
||||
منوی رستوران
|
||||
</div>
|
||||
<p className='text-description mt-1 text-[11px]'>
|
||||
دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
|
||||
</p>
|
||||
<div className='flex gap-5 mt-5'>
|
||||
<RadioGroup
|
||||
items={[
|
||||
{
|
||||
label: t('service.year'),
|
||||
value: 'year'
|
||||
},
|
||||
{
|
||||
label: t('service.month3'),
|
||||
value: '3month'
|
||||
},
|
||||
{
|
||||
label: t('service.month'),
|
||||
value: 'month'
|
||||
}
|
||||
]}
|
||||
onChange={setPlanSelected}
|
||||
selected={planSelected}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col justify-between items-end'>
|
||||
<div className='size-9 bg-description rounded-xl flex justify-center items-center'>
|
||||
<img src={ShareIcon} className='w-4' />
|
||||
</div>
|
||||
<div className='flex gap-4 items-center'>
|
||||
<div className='text-xs whitespace-nowrap'>2,000,000 تومان {t('service.year')}</div>
|
||||
<Button
|
||||
className='bg-description text-xs h-8 bg-opacity-20 text-black px-4'
|
||||
>
|
||||
<div className='flex gap-1 items-center'>
|
||||
<div>
|
||||
{t('service.buy')}
|
||||
</div>
|
||||
<ArrowLeft className='size-4' color='black' />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ServiceHeader
|
||||
@@ -0,0 +1,44 @@
|
||||
import { FC } from 'react'
|
||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import AppImage from '../../../assets/images/appimage.png'
|
||||
|
||||
const SWIPER_SLIDE_STYLE = {
|
||||
overflow: 'visible !important',
|
||||
// width: 220,
|
||||
}
|
||||
|
||||
const ServiceImages: FC = () => {
|
||||
return (
|
||||
<div className='w-full mt-8'>
|
||||
<Swiper
|
||||
className='w-full'
|
||||
spaceBetween={20} // فاصله پیشفرض بین اسلایدها
|
||||
slidesPerView='auto'
|
||||
>
|
||||
|
||||
<SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
|
||||
<div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
|
||||
<img src={AppImage} className='w-full' />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
|
||||
<div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
|
||||
<img src={AppImage} className='w-full' />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
|
||||
<div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
|
||||
<img src={AppImage} className='w-full' />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className='max-w-[38%]' style={SWIPER_SLIDE_STYLE}>
|
||||
<div className='bg-white bg-opacity-50 w-full p-2 rounded-2xl'>
|
||||
<img src={AppImage} className='w-full' />
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ServiceImages
|
||||
Reference in New Issue
Block a user