From be78c3b21a9172c71246dcbf621286a7e02e05e6 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Tue, 3 Feb 2026 13:13:15 +0700
Subject: fix input compare product

---
 .../components/ProductComparisonModal.tsx          | 83 ++++++++++++++--------
 1 file changed, 53 insertions(+), 30 deletions(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
index 260b6713..b5676ac8 100644
--- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
+++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
@@ -523,7 +523,8 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
               <InputGroup size="sm">
                 <AutoCompleteInput
                   variant="outline"
-                  fontSize="xs"
+                  // fontSize="xs"
+                  fontSize={{ base: '16px', md: 'sm' }} // fix font size mobile
                   borderRadius="md"
                   placeholder="Cari Varian..."
                   value={product.inputValue}
@@ -640,6 +641,7 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                 <InputLeftElement pointerEvents="none"><Icon as={Search} color="gray.300" /></InputLeftElement>
                 <Input
                   placeholder="Cari Produk..." borderRadius="md"
+                  fontSize={{ base: '16px', md: 'sm' }} // fix font size mobile
                   value={activeSearchSlot === index ? searchQuery : ''}
                   onFocus={() => { setActiveSearchSlot(index); setSearchQuery(''); }}
                   onChange={(e) => setSearchQuery(e.target.value)}
@@ -780,30 +782,42 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                                     ) : (
                                         <Box 
                                             fontSize="12px" 
-                                            fontWeight="semibold" 
                                             color="gray.800" 
                                             w="100%"
                                             textAlign="center"
                                             sx={{
-                                                '& ul, & ol': { 
-                                                    textAlign: 'center', 
-                                                    paddingLeft: '1.2rem', 
-                                                    listStylePosition: 'outside',
-                                                    margin: 0,
-                                                    width: '100%'
+                                                'ul, ol': { 
+                                                    textAlign: 'left', 
+                                                    listStylePosition: 'outside !important', 
+                                                    paddingLeft: '1.2em !important',
+                                                    marginLeft: '0 !important',
+                                                    marginTop: '0.5em !important',
+                                                    marginBottom: '1em !important'
                                                 },
-                                                '& li': { 
-                                                    textAlign: 'center',
-                                                    marginBottom: '4px',
-                                                    fontWeight: 'normal'
+                                                'ul': { listStyleType: 'disc !important' },
+                                                'ol': { listStyleType: 'decimal !important' },
+                                                
+                                                // 2. ITEM LIST (LI)
+                                                'li': { 
+                                                    textAlign: 'left',
+                                                    marginBottom: '4px !important',
+                                                    paddingLeft: '0.2em !important',
+                                                    lineHeight: '1.5 !important',
+                                                    fontWeight: 'normal !important'
                                                 },
-                                                '& strong': {
-                                                    display: 'block', 
-                                                    marginBottom: '2px' 
+
+                                                'strong, b': { 
+                                                    display: 'block !important', 
+                                                    fontWeight: '700 !important',
+                                                    marginBottom: '0px !important',
+                                                    marginTop: '4px !important',
+                                                    color: '#1a202c',
+                                                    textAlign: 'left'
                                                 },
-                                                '& p': { 
-                                                    textAlign: 'center', 
-                                                    margin: 0 
+
+                                                'p': { 
+                                                    margin: '0 !important',
+                                                    padding: '0 !important'
                                                 }
                                             }}
                                             dangerouslySetInnerHTML={{ __html: renderSpecValue(val) }} 
@@ -992,24 +1006,33 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                             w="100%"
                             sx={{
                               '& ul, & ol': { 
-                                textAlign: 'center', 
-                                paddingLeft: '1.2rem', 
-                                listStylePosition: 'outside',
-                                margin: 0,
-                                width: '100%'
+                                textAlign: 'left', // List Wajib Rata Kiri
+                                listStylePosition: 'outside !important', 
+                                paddingLeft: '1.2em !important',
+                                marginLeft: '0 !important',
+                                marginTop: '0.5em !important',
+                                marginBottom: '1em !important'
                                 },
+                              'ul': { listStyleType: 'disc !important' },
+                              'ol': { listStyleType: 'decimal !important' },
                               '& li': { 
-                                textAlign: 'center',
-                                marginBottom: '4px',
-                                fontWeight: 'normal'
+                                textAlign: 'left',
+                                marginBottom: '4px !important',
+                                paddingLeft: '0.2em !important',
+                                lineHeight: '1.5 !important',
+                                fontWeight: 'normal !important'
                                 },
                               '& strong': {
-                                display: 'block', 
-                                marginBottom: '2px' 
+                                display: 'block !important', 
+                                fontWeight: '700 !important',
+                                marginBottom: '0px !important',
+                                marginTop: '4px !important',
+                                color: '#1a202c',
+                                textAlign: 'left' 
                               },
                               '& p': { 
-                                textAlign: 'center', 
-                                margin: 0 
+                                margin: '0 !important',
+                                padding: '0 !important'
                               }
                             }}
                             dangerouslySetInnerHTML={{ __html: renderSpecValue(val) }} 
-- 
cgit v1.2.3


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 ++++++++++++++----------
 src-migrate/modules/promo/styles/hero.module.css | 20 ++++++
 2 files changed, 70 insertions(+), 36 deletions(-)

(limited to 'src-migrate')

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


From 64147303dbea6ac05e5e085e10760c4fc3a4727c Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Wed, 11 Feb 2026 14:12:00 +0700
Subject: fix layout spec

---
 .../product-detail/components/Information.tsx      |  2 +-
 .../components/ProductComparisonModal.tsx          | 29 ++++++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index ce848267..b0feb61a 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -267,7 +267,7 @@ const Information = ({ product }: Props) => {
             >
               {product?.manufacture.logo ? (
                 <ImageNext
-                  height={50}
+                  height={100}
                   width={100}
                   src={product.manufacture.logo}
                   alt={product.manufacture.name}
diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
index b5676ac8..5dd3f175 100644
--- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
+++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
@@ -523,9 +523,11 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
               <InputGroup size="sm">
                 <AutoCompleteInput
                   variant="outline"
-                  // fontSize="xs"
-                  fontSize={{ base: '16px', md: 'sm' }} // fix font size mobile
-                  borderRadius="md"
+                  fontSize="sm"
+                  _focus={{
+                    fontSize: {base: '16px', md: 'sm'},
+                    borderColor: 'red.500',
+                  }}borderRadius="md"
                   placeholder="Cari Varian..."
                   value={product.inputValue}
                   onChange={(e) => handleInputChange(index, e.target.value)}
@@ -640,8 +642,25 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
               <InputGroup size="sm">
                 <InputLeftElement pointerEvents="none"><Icon as={Search} color="gray.300" /></InputLeftElement>
                 <Input
-                  placeholder="Cari Produk..." borderRadius="md"
-                  fontSize={{ base: '16px', md: 'sm' }} // fix font size mobile
+                  placeholder="Cari Produk..."
+                  borderRadius="md"
+                  fontSize="16px"
+                  sx={{
+                    base: {
+                        transform: "scale(0.875)",       // Kecilkan visual jadi setara 14px (sm)
+                        transformOrigin: "left center",
+                        width: "114.29%",                // Kompensasi lebar
+                        marginBottom: "-2px",
+                        marginRight: "-14.29%"
+                    },
+                    md: {
+                        fontSize: "sm",       // Di Desktop pakai ukuran asli (14px)
+                        transform: "none",
+                        width: "100%",
+                        marginBottom: "0",
+                        marginRight: "0"
+                    }
+                  }}
                   value={activeSearchSlot === index ? searchQuery : ''}
                   onFocus={() => { setActiveSearchSlot(index); setSearchQuery(''); }}
                   onChange={(e) => setSearchQuery(e.target.value)}
-- 
cgit v1.2.3


From e758a2cbf6eee38253d9fd15655eb7e38a63e815 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Wed, 11 Feb 2026 15:16:37 +0700
Subject: fix

---
 src-migrate/modules/promo/styles/hero.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/promo/styles/hero.module.css b/src-migrate/modules/promo/styles/hero.module.css
index e18d6417..ad423d62 100644
--- a/src-migrate/modules/promo/styles/hero.module.css
+++ b/src-migrate/modules/promo/styles/hero.module.css
@@ -27,7 +27,7 @@
 }
 
 .desktop-container {
-    @apply w-full px-4 md:px-0 -mt-[30px]; 
+    @apply w-full px-4 md:px-0 -mt-[15px]; 
 }
 
 .desktop-image-wrapper {
-- 
cgit v1.2.3