4 files changed, 99 insertions, 0 deletions
diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 6568621c..6dbf771e 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -16,6 +16,7 @@ const CategoryPilihan = ({ id, categories }) => {
     const { categoryPilihan } = useCategoryPilihan();
     const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' }));
       return (
+        categoryPilihan.length > 0 && (
           <section>
             {isDesktop && (
                 <div>
@@ -114,6 +115,8 @@ const CategoryPilihan = ({ id, categories }) => {
                 </div>
             )}
             </section>
+
+        )
   )
 }
 
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index ae12505d..fdefb526 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -65,6 +65,11 @@ const PreferredBrand = () => {
             Lihat Semua
           </Link>
         )}
+        {isMobile && (
+          <Link href='/shop/brands' className='!text-red-500 font-semibold sm:text-h-sm'>
+            Lihat Semua
+          </Link>
+        )}
       </div>
       <div className='border rounded border-gray_r-6'>
         {manufactures.isLoading && <PreferredBrandSkeleton />}
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
new file mode 100644
index 00000000..c2f76069
--- /dev/null
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -0,0 +1,75 @@
+import Link from '@/core/components/elements/Link/Link'
+import Image from 'next/image'
+import { bannerApi } from '@/api/bannerApi';
+import useDevice from '@/core/hooks/useDevice'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import  BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton';
+const { useQuery } = require('react-query')
+const BannerSection = () => {
+  const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' }));
+  const { isMobile, isDesktop } = useDevice()
+
+  if (promotionProgram.isLoading) {
+    return <BannerPromoSkeleton />;
+  }
+
+  return (
+    <div className='px-4 sm:px-0'>
+      <div className='flex justify-between items-center mb-4 '>
+        <div className='font-semibold sm:text-h-lg'>Promo Tersedia</div>
+        {isDesktop && (
+          <Link href='/shop/promo' className='!text-red-500 font-semibold'>
+          Lihat Semua
+        </Link>
+        )}
+        {isMobile && (
+          <Link href='/shop/promo' className='!text-red-500 font-semibold sm:text-h-sm'>
+          Lihat Semua
+        </Link>
+        )}
+      </div>
+      {isDesktop && (promotionProgram.data &&
+    promotionProgram.data?.length > 0 && (
+      <div className='grid grid-cols-3 sm:grid-cols-3 gap-4   rounded-md'>
+        {promotionProgram.data?.map((banner) => (
+          <Link key={banner.id} href={banner.url}>
+            <Image
+              width={439}
+              height={150}
+              quality={100}
+              src={banner.image}
+              alt={banner.name}
+              className='h-auto  w-full rounded hover:scale-105 transition duration-500 ease-in-out'
+            />
+          </Link>
+        ))}
+      </div>
+      
+    ))}
+
+{isMobile && (
+     
+     <Swiper slidesPerView={1.1} spaceBetween={8} freeMode>
+     {promotionProgram.data?.map((banner) => (
+       <SwiperSlide key={banner.id}>
+         <Link key={banner.id} href={banner.url}>
+            <Image
+              width={439}
+              height={150}
+              quality={100}
+              src={banner.image}
+              alt={banner.name}
+              className='h-auto  w-full rounded '
+            />
+          </Link>
+       </SwiperSlide>
+     ))}
+   </Swiper>
+  
+  )}  
+    </div>
+    
+  )
+}
+
+export default BannerSection
diff --git a/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx b/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx
new file mode 100644
index 00000000..c5f39f19
--- /dev/null
+++ b/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx
@@ -0,0 +1,16 @@
+import useDevice from '@/core/hooks/useDevice'
+import Skeleton from 'react-loading-skeleton'
+
+const BannerPromoSkeleton = () => {
+  const { isDesktop } = useDevice()
+
+  return (
+    <div className='grid grid-cols-1 md:grid-cols-3 gap-x-3'>
+      {Array.from({ length: isDesktop ? 3 : 1.2 }, (_, index) => (
+        <Skeleton count={1} height={isDesktop ? 60 : 36} key={index} />
+      ))}
+    </div>
+  )
+}
+
+export default BannerPromoSkeleton