services

package-lock.json

@@ -18,6 +18,7 @@
         "react-infinite-scroll-component": "^6.1.0",
         "react-router-dom": "^7.9.4",
         "react-spinners": "^0.17.0",
+        "swiper": "^12.0.2",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.14",
         "vite-tsconfig-paths": "^5.1.4",
@@ -4285,6 +4286,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/swiper": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.2.tgz",
+      "integrity": "sha512-y8F6fDGXmTVVgwqJj6I00l4FdGuhpFJn0U/9Ucn1MwWOw3NdLV8aH88pZOjyhBgU/6PyBlUx+JuAQ5KMWz906Q==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^7.9.4",
     "react-spinners": "^0.17.0",
+    "swiper": "^12.0.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14",
     "vite-tsconfig-paths": "^5.1.4",

src/App.tsx

@@ -1,5 +1,6 @@
 import { type FC } from 'react'
 import '@/assets/fonts/irancell/style.css'
+import 'swiper/swiper-bundle.css';
 import { BrowserRouter } from 'react-router-dom'
 // import { getToken } from './config/func'
 import MainRouter from './router/MainRouter'

src/locale/fa.ts

@@ -26,5 +26,6 @@ export const fa = {
     factureCount: "پیش فاکتور تایید نشده",
     orderCount: "سفارش های در حال انجام",
     orderDoneCount: "سفارشات انجام شده",
+    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