1 files changed, 41 insertions, 1 deletions
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index a8964310..2c849bd6 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -3,8 +3,12 @@ import Link from '@/core/components/elements/Link/Link'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { createSlug } from '@/core/utils/slug'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import ImageNext from 'next/image'
+import { useRouter } from 'next/router'
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
+  const router = useRouter()
+  
   const callForPriceWhatsapp = whatsappUrl('product', {
     name: product.name,
     url: createSlug('/shop/product/', product.name, product.id, true)
@@ -12,7 +16,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
   if (variant == 'vertical') {
     return (
-      <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[350px]'>
+      <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[300px] md:h-[350px]'>
         <Link
           href={createSlug('/shop/product/', product?.name, product?.id)}
           className='border-b border-gray_r-4 relative'
@@ -22,6 +26,32 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             alt={product?.name}
             className='w-full object-contain object-center h-36 sm:h-48'
           />
+          {router.pathname != '/' && product?.flashSale?.id > 0 && (
+            <div className='absolute bottom-0 w-full grid'>
+              <div className='absolute bottom-0 w-full h-full'>
+                <ImageNext src='/images/GAMBAR-BG-FLASH-SALE.jpg' className='h-full' width={1000} height={100} />
+              </div>
+              <div className='relative'>
+                <div className='flex gap-x-1 items-center p-2 justify-center'>
+                  <div className='bg-yellow-400 rounded-full p-1 h-6 w-19 flex items-center justify-center '>
+                    <span className='text-sm font-bold text-black'>
+                      {product?.lowestPrice.discountPercentage}%
+                    </span>
+                  </div>
+                  <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
+                    <ImageNext
+                      src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                      width={13}
+                      height={5}
+                    />
+                    <span className='text-white text-[11px] font-semibold'>
+                    {product?.flashSale?.tag != "false" || product?.flashSale?.tag != product?.flashSale?.tag ? product?.flashSale?.tag : 'FLASH SALE'}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
           {product.variantTotal > 1 && (
             <div className='absolute badge-gray bottom-1.5 left-1.5'>
               {product.variantTotal} Varian
@@ -101,6 +131,16 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           </Link>
         </div>
         <div className='w-8/12 p-2'>
+          {product.flashSale.id > 0 && (
+            <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
+              <ImageNext
+                src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                width={15}
+                height={10}
+              />
+              <span className='text-white text-xs font-semibold'>{product?.flashSale?.tag != "false" || product?.flashSale?.tag != product?.flashSale?.tag ? product?.flashSale?.tag : 'FLASH SALE'}</span>
+            </div>
+          )}
           {product?.manufacture?.name ? (
             <Link
               href={createSlug(