1 files changed, 16 insertions, 30 deletions

diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index ae12505d..6b64a444 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -1,5 +1,4 @@
 import { Swiper, SwiperSlide } from 'swiper/react'
-import  { Navigation, Pagination, Autoplay } from 'swiper';
 import { useCallback, useEffect, useState } from 'react'
 import usePreferredBrand from '../hooks/usePreferredBrand'
 import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton'
@@ -39,23 +38,7 @@ const PreferredBrand = () => {
 
   const { preferredBrands } = usePreferredBrand(query)
   const { isMobile, isDesktop } = useDevice()
-  const swiperBanner = {
-    modules:[Navigation, Pagination, Autoplay],
-    autoplay: {
-      delay: 4000,
-      disableOnInteraction: false
-    },
-    loop: true,
-    className: 'h-[70px] md:h-[100px] w-full',
-    slidesPerView: isMobile ? 4 : 8,
-    spaceBetween: isMobile ? 12 : 0,
-    pagination: {
-      dynamicBullets: true,
-      dynamicMainBullets: isMobile ? 6 : 8,
-      clickable: true,
-    }
-  }
-  const preferredBrandsData = manufactures ? manufactures.slice(0, 20) : []
+
   return (
     <div className='px-4 sm:px-0'>
       <div className='flex justify-between items-center mb-4'>
@@ -65,21 +48,24 @@ const PreferredBrand = () => {
             Lihat Semua
           </Link>
         )}
-      </div>
-      <div className='border rounded border-gray_r-6'>
-        {manufactures.isLoading && <PreferredBrandSkeleton />}
-        {!manufactures.isLoading && (
-          <Swiper {...swiperBanner}>
-            {preferredBrandsData.map((manufacture) => (
-              <SwiperSlide key={manufacture.id}>
-                <BrandCard brand={manufacture} />
-              </SwiperSlide>
-            ))}
-          </Swiper>
+        {isMobile && (
+          <Link href='/shop/brands' className='!text-red-500 font-semibold sm:text-h-sm'>
+            Lihat Semua
+          </Link>
         )}
       </div>
+      {manufactures.isLoading && <PreferredBrandSkeleton />}
+      {!manufactures.isLoading && (
+        <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 24} freeMode>
+          {manufactures.map((manufacture) => (
+            <SwiperSlide key={manufacture.id}>
+              <BrandCard brand={manufacture} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
     </div>
   )
 }
 
-export default PreferredBrand
\ No newline at end of file
+export default PreferredBrand