service

2025-01-11 12:46:02 +03:30
parent f983ef12a2
commit 24fbeece97
19 changed files with 503 additions and 16 deletions
@@ -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