From ae893cfc556eb7c2f31eefdc495e306891a829e0 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Wed, 11 Feb 2026 14:02:31 +0700
Subject: (andri) banner promo full

---
 src-migrate/modules/promo/components/Hero.tsx | 86 ++++++++++++++++-----------
 1 file changed, 50 insertions(+), 36 deletions(-)

(limited to 'src-migrate/modules/promo/components')

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
-- 
cgit v1.2.3


From d6ccc6bc33c13d792aa99e57eb6b137eac142e43 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Wed, 11 Feb 2026 18:01:02 +0700
Subject: (andri) fix slider banner promo

---
 src-migrate/modules/promo/components/Hero.tsx | 35 +++++++++++++++------------
 1 file changed, 20 insertions(+), 15 deletions(-)

(limited to 'src-migrate/modules/promo/components')

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index e1b31184..1004932b 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -39,7 +39,7 @@ const swiperBannerMob = {
   },
   modules: [Pagination, Autoplay],
   loop: true,
-  className: 'mobile-swiper w-full', 
+  className: 'mobile-swiper w-full',
   slidesPerView: 1,
 };
 
@@ -54,10 +54,24 @@ 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 (
     <>
@@ -77,18 +91,9 @@ const Hero = () => {
       `}</style>
       <DesktopView>
         <div className={style['desktop-container']}>
-          <Swiper {...swiperBanner} spaceBetween={10}>
+          <Swiper {...swiperSettingsDesktop} spaceBetween={10}>
             {banners?.map((banner, index) => (
               <SwiperSlide key={index} className='flex flex-row'>
-                
-                {/*  
-                <div className={style['desc-section']}>
-                  <div className={style['title']}>
-                     ...
-                  </div>
-                </div> 
-                */}
-
                 <div className={style['desktop-image-wrapper']}>
                   <Image
                     src={banner.image}
@@ -106,7 +111,7 @@ const Hero = () => {
       </DesktopView>
       <MobileView>
         <div className={style['mobile-container']}>
-          <Swiper {...swiperBannerMobile}>
+          <Swiper {...swiperSettingsMobile}>
             {banners?.map((banner, index) => (
               <SwiperSlide key={index}>
                 <div className={style['mobile-image-wrapper']}>
-- 
cgit v1.2.3