services

src/pages/home/Home.tsx

@@ -1,11 +1,13 @@
 import { type FC } from 'react'
 import Stats from './components/Stats'
+import Services from './components/Services'
 
 const Home: FC = () => {
     return (
         <div className='flex gap-6'>
             <div className='flex-1'>
                 <Stats />
+                <Services />
             </div>
         </div>
     )

src/pages/home/components/ServiceItem.tsx

@@ -0,0 +1,13 @@
+import { type FC } from 'react'
+
+const ServiceItem: FC = () => {
+    return (
+        <div>
+            <div className='size-20 rounded-full bg-gray-200 border-[3px] border-primary'>
+
+            </div>
+        </div>
+    )
+}
+
+export default ServiceItem

src/pages/home/components/Services.tsx

@@ -0,0 +1,44 @@
+import { t } from '@/locale'
+import { type FC } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import ServiceItem from './ServiceItem'
+
+
+const Services: FC = () => {
+    return (
+        <div className='mt-6 bg-white p-6 rounded-3xl'>
+            <h4 className='text-lg font-light'>
+                {t('home.services')}
+            </h4>
+
+            <div className='mt-6'>
+                <Swiper
+                    spaceBetween={16}
+                    slidesPerView={'auto'}
+                    className='h-full'
+                    breakpoints={{
+                        640: {
+                            spaceBetween: 24,
+                        },
+                    }}
+                >
+                    <SwiperSlide className='!w-auto'>
+                        <ServiceItem />
+                    </SwiperSlide>
+                    <SwiperSlide className='!w-auto'>
+                        <ServiceItem />
+                    </SwiperSlide>
+                    <SwiperSlide className='!w-auto'>
+                        <ServiceItem />
+                    </SwiperSlide>
+                    <SwiperSlide className='!w-auto'>
+                        <ServiceItem />
+                    </SwiperSlide>
+                </Swiper>
+            </div>
+
+        </div>
+    )
+}
+
+export default Services