1 files changed, 17 insertions, 5 deletions
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index 461383a1..a3c09a9b 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -1,16 +1,25 @@
 import Link from '@/core/components/elements/Link/Link'
 import Image from 'next/image'
 import { bannerApi } from '@/api/bannerApi';
-
+import useDevice from '@/core/hooks/useDevice'
 const { useQuery } = require('react-query')
-
 const BannerSection = () => {
   const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' }));
+  const { isMobile, isDesktop } = useDevice()
 
   return (
-    promotionProgram.data &&
+    <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>
+        )}
+      </div>
+      {promotionProgram.data &&
     promotionProgram.data?.length > 0 && (
-      <div className='grid grid-cols-3 sm:grid-cols-3 gap-4  rounded rounded-md'>
+      <div className='bg-red-300 grid grid-cols-3 sm:grid-cols-3 gap-4   rounded-md'>
         {promotionProgram.data?.map((banner) => (
           <Link key={banner.id} href={banner.url}>
             <Image
@@ -24,7 +33,10 @@ const BannerSection = () => {
           </Link>
         ))}
       </div>
-    )
+      
+    )}
+    </div>
+    
   )
 }