fix category

src/app/home/components/Categories.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import CategoryItem from './CategoryItem'
 import { useGetCategories } from '@/share/hooks/useShareData'
 import { Category } from '@/share/types/SharedTypes'
-import { Swiper, SwiperSlide } from 'swiper/react'
 
 const Categories = () => {
 
@@ -11,24 +10,14 @@ const Categories = () => {
     const parentCategories = data?.results?.data?.filter(cat => !cat.parent) || []
 
     return (
-        <div className='w-full flex justify-center'>
-            <Swiper
-                spaceBetween={16}
-                slidesPerView={'auto'}
-                centeredSlides={true}
-                className='h-full'
-                breakpoints={{
-                    640: {
-                        spaceBetween: 24,
-                    },
-                }}
-            >
+        <div className='w-full overflow-x-auto overflow-y-hidden'>
+            <div className='flex justify-center gap-4 sm:gap-6 md:gap-6 w-full min-w-max px-4 sm:px-8 md:px-20'>
                 {parentCategories?.map((item: Category) => (
-                    <SwiperSlide key={item._id} className='!w-auto'>
+                    <div key={item._id} className='flex-shrink-0'>
                         <CategoryItem image={item.imageUrl} title={item.title_fa} categoryUrl={item.title_en} />
-                    </SwiperSlide>
+                    </div>
                 ))}
-            </Swiper>
+            </div>
         </div>
     )
 }

src/app/page.tsx

@@ -18,17 +18,17 @@ export const dynamic = 'force-dynamic'
 const HomePage: NextPage = () => {
 
   return (
-    <div>
+    <div className='w-full'>
       <Carousel />
       <div className='mt-12 sm:mt-16 md:mt-24 px-4 sm:px-8 md:px-20'>
         <HotOffer />
-        <div className='mt-12 sm:mt-16 md:mt-24'>
+      </div>
+      <div className='mt-12 sm:mt-16 md:mt-24 w-full'>
         <Categories />
       </div>
-        <div className='mt-12 sm:mt-16 md:mt-24'>
+      <div className='mt-12 sm:mt-16 md:mt-24 px-4 sm:px-8 md:px-20'>
         <Banners3 />
       </div>
-      </div>
 
       <div className='mt-12 sm:mt-16 md:mt-24 bg-[#FAF8F6] p-4 sm:p-8 md:p-20'>
         <NewestProducts />