Merged in req_feb26 (pull request #473)

Req feb26

5 files changed, 155 insertions, 75 deletions

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 757cd473..236a03af 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -307,7 +307,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 260b6713..5dd3f175 100644
--- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
+++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
@@ -523,8 +523,11 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
               <InputGroup size="sm">
                 <AutoCompleteInput
                   variant="outline"
-                  fontSize="xs"
-                  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)}
@@ -639,7 +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"
+                  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)}
@@ -780,30 +801,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 +1025,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) }} 
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..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;
+}
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index db4fcbb8..c320c43a 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -13,6 +13,7 @@ import {
   MenuItem,
   MenuList,
   useDisclosure,
+  Badge,
 } from '@chakra-ui/react';
 import { ChevronDownIcon, HeartIcon } from '@heroicons/react/24/outline';
 import dynamic from 'next/dynamic';
@@ -271,7 +272,7 @@ const NavbarDesktop = () => {
                 aria-label='Promo'
                 className={`${
                   router.asPath === '/shop/promo' && 'bg-gray_r-3'
-                }  flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group relative`} // Added relative position
+                }  flex-[1.5] flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group relative`} 
                 target='_blank'
                 rel='noreferrer'
               >
@@ -289,8 +290,11 @@ const NavbarDesktop = () => {
                     />
                   </div>
                 )}
-                <span className='absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10'>
+                <span className='absolute inset-0 flex justify-center items-center gap-2 group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10'>
                   Semua Promo
+                  <Badge colorScheme="red" variant="solid" borderRadius="full" px={2} textTransform="none">
+                    Baru
+                  </Badge>
                 </span>
               </Link>
               {/* {showPopup && router.pathname === '/' && (
@@ -306,7 +310,7 @@ const NavbarDesktop = () => {
                 aria-label='Brand'
                 className={`${
                   router.asPath === '/shop/brands' && 'bg-gray_r-3'
-                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
+                } px-2 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
                 target='_blank'
                 rel='noreferrer'
               >
@@ -320,7 +324,7 @@ const NavbarDesktop = () => {
                 className={`${
                   router.asPath.includes('/shop/search?orderBy=stock') &&
                   'bg-gray_r-3'
-                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
+                } px-2 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
                 target='_blank'
                 rel='noreferrer'
               >
@@ -331,7 +335,7 @@ const NavbarDesktop = () => {
               <Link
                 href='https://blog.indoteknik.com/'
                 aria-label='Blog Indoteknik'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group'
+                className='px-2 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group'
                 target='_blank'
                 rel='noreferrer noopener'
               >
@@ -506,4 +510,4 @@ const SocialMedias = () => (
   </div>
 );
 
-export default NavbarDesktop;
+export default NavbarDesktop;
\ No newline at end of file