diff options
Diffstat (limited to 'src-migrate')
4 files changed, 145 insertions, 69 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; +} |