Merge branch 'new-release' of https://bitbucket.org/altafixco/next-indoteknik into cr_renca_keyword

2 files changed, 81 insertions, 42 deletions

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index 7d0aad11..1004932b 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,
 };
 
@@ -53,39 +54,54 @@ const Hero = () => {
     [heroBanner.data]
   );
 
-  const swiperBannerMobile = {
+  const isSingleSlide = banners.length <= 1;
+
+  const swiperSettingsDesktop = useMemo(() => ({
+    ...swiperBanner,
+    loop: !isSingleSlide,
+    allowTouchMove: !isSingleSlide,
+    autoplay: isSingleSlide ? false : swiperBanner.autoplay,
+    pagination: isSingleSlide ? false : swiperBanner.pagination,
+  }), [isSingleSlide]);
+
+
+  const swiperSettingsMobile = useMemo(() => ({
     ...swiperBannerMob,
-    pagination: { dynamicBullets: false, clickable: true },
-  };
+    loop: !isSingleSlide,
+    allowTouchMove: !isSingleSlide,
+    autoplay: isSingleSlide ? false : swiperBannerMob.autoplay,
+    pagination: isSingleSlide ? false : { dynamicBullets: false, clickable: true },
+  }), [isSingleSlide]);
 
   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 {...swiperSettingsDesktop} 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 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 +110,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 {...swiperSettingsMobile}>
+            {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..ad423d62 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-[15px]; 
+}
+
+.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;
+}