(andri) banner promo full

2 files changed, 70 insertions, 36 deletions

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index 7d0aad11..e1b31184 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -26,11 +26,12 @@ const swiperBanner: SwiperProps = {
     disableOnInteraction: false,
   },
   loop: true,
-  className: 'h-[400px] w-full',
+  className: 'h-auto w-full',
   slidesPerView: 1,
-  spaceBetween: 10,
-  pagination: true,
+  spaceBetween: 0,
+  pagination: { clickable: true },
 };
+
 const swiperBannerMob = {
   autoplay: {
     delay: 6000,
@@ -38,7 +39,7 @@ const swiperBannerMob = {
   },
   modules: [Pagination, Autoplay],
   loop: true,
-  className: 'border border-gray_r-6 min-h-full',
+  className: 'mobile-swiper w-full', 
   slidesPerView: 1,
 };
 
@@ -60,32 +61,42 @@ const Hero = () => {
 
   return (
     <>
+      <style jsx global>{`
+        @media (max-width: 768px) {
+          .mobile-swiper .swiper-pagination-bullet {
+            width: 6px !important;
+            height: 6px !important;
+            margin: 0 3px !important;
+          }
+          .mobile-swiper .swiper-pagination-bullet-active {
+            width: 6px !important;
+            height: 6px !important;
+            background: red !important;
+          }
+        }
+      `}</style>
       <DesktopView>
-        <div className={style['wrapper']}>
-          <Swiper {...swiperBanner}>
+        <div className={style['desktop-container']}>
+          <Swiper {...swiperBanner} spaceBetween={10}>
             {banners?.map((banner, index) => (
               <SwiperSlide key={index} className='flex flex-row'>
+                
+                {/*  
                 <div className={style['desc-section']}>
                   <div className={style['title']}>
-                    {banner?.headlineBanner
-                      ? banner?.headlineBanner
-                      : 'Pasti Hemat & Untung Selama Belanja di Indoteknik.com!'}
-                  </div>
-                  <div className='h-4' />
-                  <div className={style['subtitle']}>
-                    {banner?.descriptionBanner
-                      ? banner?.descriptionBanner
-                      : 'Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai!'}
+                     ...
                   </div>
-                </div>
-                <div className={style['banner-section']}>
+                </div> 
+                */}
+
+                <div className={style['desktop-image-wrapper']}>
                   <Image
                     src={banner.image}
                     alt={banner.name}
-                    width={666}
-                    height={450}
-                    quality={85}
-                    className='w-full h-full object-fit object-center rounded-2xl'
+                    fill
+                    priority
+                    quality={100}
+                    className={style['banner-image']}
                   />
                 </div>
               </SwiperSlide>
@@ -94,23 +105,26 @@ const Hero = () => {
         </div>
       </DesktopView>
       <MobileView>
-        <Swiper {...swiperBannerMobile}>
-          {banners?.map((banner, index) => (
-            <SwiperSlide key={index}>
-              <Image
-                width={439}
-                height={150}
-                quality={85}
-                src={banner?.image}
-                alt={banner?.name}
-                className='w-full h-full object-cover object-center rounded-2xl'
-              />
-            </SwiperSlide>
-          ))}
-        </Swiper>
+        <div className={style['mobile-container']}>
+          <Swiper {...swiperBannerMobile}>
+            {banners?.map((banner, index) => (
+              <SwiperSlide key={index}>
+                <div className={style['mobile-image-wrapper']}>
+                  <Image
+                    src={banner?.image}
+                    alt={banner?.name}
+                    fill
+                    quality={85}
+                    className={style['banner-image']}
+                  />
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
       </MobileView>
     </>
   );
 };
 
-export default Hero;
+export default Hero;
\ No newline at end of file
diff --git a/src-migrate/modules/promo/styles/hero.module.css b/src-migrate/modules/promo/styles/hero.module.css
index a5ba6ecc..e18d6417 100644
--- a/src-migrate/modules/promo/styles/hero.module.css
+++ b/src-migrate/modules/promo/styles/hero.module.css
@@ -25,3 +25,23 @@
         md:justify-center
         md:pr-10;
 }
+
+.desktop-container {
+    @apply w-full px-4 md:px-0 -mt-[30px]; 
+}
+
+.desktop-image-wrapper {
+    @apply w-full h-[375px] relative rounded-2xl overflow-hidden;
+}
+
+.mobile-container {
+    @apply w-full px-0 -mt-[20px];
+}
+
+.mobile-image-wrapper {
+    @apply w-full aspect-[3.2] relative rounded-2xl overflow-hidden;
+}
+
+.banner-image {
+    @apply object-cover object-center;
+}