From 4f5208d1da03f8925807c28cebf3188e7ec29570 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Wed, 15 Oct 2025 15:24:47 +0700
Subject: <MIqdad> cr renca

---
 src/lib/product/components/ProductCard.jsx | 74 ++++++++++++++----------------
 1 file changed, 35 insertions(+), 39 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 48eeb506..0ec2a1e6 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -12,7 +12,7 @@ import whatsappUrl from '@/core/utils/whatsappUrl';
 import useUtmSource from '~/hooks/useUtmSource';
 import useDevice from '@/core/hooks/useDevice';
 import { BadgePercent, Tag } from 'lucide-react';
-import { TicketIcon } from '@heroicons/react/24/outline';
+import { TicketIcon } from '@heroicons/react/24/solid';
 import DesktopView from '@/core/components/views/DesktopView';
 import MobileView from '@/core/components/views/MobileView';
 
@@ -275,30 +275,37 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
         </DesktopView>
 
         <MobileView>
-          <div className='rounded shadow-sm border border-gray_r-4 bg-white'>
+          <div className='rounded bg-white'>
             <Link
               href={URL.product}
               className='border-b border-gray_r-4 relative'
               aria-label='Produk'
             >
               <div className='relative'>
-                <Image
-                  src={image}
-                  alt={product?.name}
-                  className='gambarA w-full object-contain object-center h-36 sm:h-48'
-                />
+                <div
+                  className='relative w-full overflow-hidden'
+                  style={{ aspectRatio: '1 / 1' }}
+                >
+                  <Image
+                    src={image}
+                    alt={product?.name}
+                    fill
+                    sizes='(max-width:640px) 100vw, 50vw'
+                    className='object-contain object-center bg-white'
+                  />
+                </div>
 
                 {/* PICK UP NOW badge (kanan-atas gambar) */}
                 {product?.isInBu && (
                   <Link
                     href='/panduan-pick-up-service'
                     aria-label='Pick Up Now'
-                    className='absolute top-2 right-2 z-10'
+                    className='absolute top-0 right-1 z-10'
                   >
                     <Image
                       src='/images/PICKUP-NOW.png'
                       alt='Pick Up Now'
-                      width={96}
+                      width={83}
                       height={24}
                       className='drop-shadow-sm'
                       loading='eager'
@@ -336,15 +343,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
               {/* BADGE DISKON KIRI-ATAS (tetap seperti punyamu) */}
               {(product?.lowestPrice?.discountPercentage ?? 0) > 0 && (
-                <div className='absolute top-2 left-0 z-30'>
-                  <div
-                    className='
-              bg-red-600 text-white
-              px-2 py-1
-              rounded-r-lg shadow-sm
-              text-xs font-bold leading-none
-            '
-                  >
+                <div className='absolute left-0 top-5 sm:top-5 z-30 translate-y-5 sm:translate-y-5'>
+                  <div className='bg-red-600 text-white px-2 py-1 rounded-r-lg shadow-sm text-xs font-bold leading-none'>
                     {Math.floor(product.lowestPrice.discountPercentage)}%
                   </div>
                 </div>
@@ -362,7 +362,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     />
                   </div>
                   <div className='relative'>
-                    {/* Old (dibiarkan komentar persis punyamu) */}
+                    {/* Old */}
                     {/* <div className='flex gap-x-1 items-center p-2 justify-center'>
               <div className='bg-yellow-400 rounded-lg p-1 h-6 w-19 flex items-center justify-center '>
                 <span className='text-sm font-bold text-black'>
@@ -399,7 +399,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 {product?.manufacture?.name ? (
                   <Link
                     href={URL.manufacture}
-                    className='mb-1 mt-1 truncate'
+                    className='mt-1 truncate'
                     aria-label={product.manufacture.name}
                   >
                     {product.manufacture.name}
@@ -407,14 +407,12 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 ) : (
                   <div>-</div>
                 )}
-
-                {/* (Dihapus yang versi header agar tidak dobel, sesuai instruksi sebelumnya) */}
               </div>
 
               <Link
                 href={URL.product}
                 aria-label={product?.name}
-                className={`mb-2 !text-gray_r-12 leading-6 block line-clamp-3 h-[64px]`}
+                className={`!text-gray_r-12 leading-6 block line-clamp-3 mb-1`}
                 title={product?.name}
               >
                 {product?.name}
@@ -448,11 +446,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 </div>
               ) : (
                 // === BLOK ELSE PUNYA KAMU, TIDAK DIUBAH ===
-                <div className='text-danger-500 font-semibold mb-2 min-h-[40px]'>
+                <div className='text-danger-500 font-semibold mb-2'>
                   {product?.lowestPrice.price > 0 ? (
                     <>
                       {currencyFormat(product?.lowestPrice.priceDiscount)}
-                      <div className='text-gray_r-9 text-[10px] font-normal mt-2'>
+                      <div className='text-gray_r-9 text-[10px] font-normal'>
                         Include PPN:{' '}
                         {currencyFormat(
                           product.lowestPrice.price *
@@ -474,25 +472,23 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
               )}
 
               {discount > 0 && (product?.flashSale?.id ?? 0) < 1 && (
-                <div className='mb-1'>
-                  <div className='inline-flex items-center gap-2 text-green-600'>
-                    {/* Label polos (bukan dalam kotak) */}
-                    <span className='text-sm font-semibold'>Pakai Voucher</span>
+                <div className='inline-flex items-center gap-2 text-green-600 mb-1'>
+                  {/* Label polos (bukan dalam kotak) */}
+                  <span className='text-sm font-semibold'>Voucher</span>
 
-                    {/* Chip: ikon + nominal */}
-                    <span
-                      className='
+                  {/* Chip: ikon + nominal */}
+                  <span
+                    className='
                 inline-flex items-center gap-1.5
                 rounded bg-green-50 px-2.5 py-0.5
-                ring-1 ring-inset ring-green-300
+                ring-green-300
               '
-                    >
-                      <Tag className='h-3.5 w-3.5' />
-                      <span className='text-sm font-extrabold tabular-nums'>
-                        {currencyFormat(discount)}
-                      </span>
+                  >
+                    <TicketIcon className='h-3.5 w-3.5' />
+                    <span className='text-sm font-extrabold tabular-nums'>
+                      {currencyFormat(discount)}
                     </span>
-                  </div>
+                  </span>
                 </div>
               )}
 
-- 
cgit v1.2.3