category, brand, product popular, product category in desktop home page

2 files changed, 86 insertions, 13 deletions

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 6b88a3bd..0c11137d 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -3,9 +3,9 @@ import Link from '@/core/components/elements/Link/Link'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { createSlug } from '@/core/utils/slug'
 
-const ProductCard = ({ product, simpleTitle }) => {
-  return (
-    <>
+const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
+  if (variant == 'vertical') {
+    return (
       <div className='rounded shadow-sm border border-gray_r-4 h-full bg-white'>
         <Link
           href={createSlug('/shop/product/', product?.name, product?.id)}
@@ -14,7 +14,7 @@ const ProductCard = ({ product, simpleTitle }) => {
           <Image
             src={product?.image}
             alt={product?.name}
-            className='w-full object-contain object-center h-36'
+            className='w-full object-contain object-center h-36 sm:h-48'
           />
           {product.variantTotal > 1 && (
             <div className='absolute badge-gray bottom-1.5 left-1.5'>
@@ -22,7 +22,7 @@ const ProductCard = ({ product, simpleTitle }) => {
             </div>
           )}
         </Link>
-        <div className='p-2 pb-3 text-caption-2 leading-5'>
+        <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
           {product?.manufacture?.name ? (
             <Link
               href={createSlug(
@@ -30,7 +30,7 @@ const ProductCard = ({ product, simpleTitle }) => {
                 product?.manufacture?.name,
                 product?.manufacture.id
               )}
-              className='mb-1'
+              className='mb-1 font-normal'
             >
               {product.manufacture.name}
             </Link>
@@ -39,7 +39,7 @@ const ProductCard = ({ product, simpleTitle }) => {
           )}
           <Link
             href={createSlug('/shop/product/', product?.name, product?.id)}
-            className={`font-medium mb-2 !text-gray_r-12 ${
+            className={`font-normal mb-2 !text-gray_r-12 ${
               simpleTitle ? 'line-clamp-2' : 'line-clamp-3'
             }`}
           >
@@ -47,7 +47,7 @@ const ProductCard = ({ product, simpleTitle }) => {
           </Link>
           {product?.lowestPrice?.discountPercentage > 0 && (
             <div className='flex gap-x-1 mb-1 items-center'>
-              <div className='text-gray_r-11 line-through text-[11px]'>
+              <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                 {currencyFormat(product?.lowestPrice?.price)}
               </div>
               <div className='badge-solid-red'>{product?.lowestPrice?.discountPercentage}%</div>
@@ -69,8 +69,79 @@ const ProductCard = ({ product, simpleTitle }) => {
           )}
         </div>
       </div>
-    </>
-  )
+    )
+  }
+
+  if (variant == 'horizontal') {
+    return (
+      <div className='flex bg-white'>
+        <div className='w-4/12'>
+          <Link
+            href={createSlug('/shop/product/', product?.name, product?.id)}
+            className='relative'
+          >
+            <Image
+              src={product?.image}
+              alt={product?.name}
+              className='w-full object-contain object-center h-36'
+            />
+            {product.variantTotal > 1 && (
+              <div className='absolute badge-gray bottom-1.5 left-1.5'>
+                {product.variantTotal} Varian
+              </div>
+            )}
+          </Link>
+        </div>
+        <div className='w-8/12 p-2'>
+          {product?.manufacture?.name ? (
+            <Link
+              href={createSlug(
+                '/shop/brands/',
+                product?.manufacture?.name,
+                product?.manufacture.id
+              )}
+              className='mb-1 font-normal'
+            >
+              {product.manufacture.name}
+            </Link>
+          ) : (
+            <div>-</div>
+          )}
+          <Link
+            href={createSlug('/shop/product/', product?.name, product?.id)}
+            className={`font-normal mb-2 !text-gray_r-12 ${
+              simpleTitle ? 'line-clamp-2' : 'line-clamp-3'
+            }`}
+          >
+            {product?.name}
+          </Link>
+
+          {product?.lowestPrice?.discountPercentage > 0 && (
+            <div className='flex gap-x-1 mb-1 items-center'>
+              <div className='badge-solid-red'>{product?.lowestPrice?.discountPercentage}%</div>
+              <div className='text-gray_r-11 line-through text-caption-2'>
+                {currencyFormat(product?.lowestPrice?.price)}
+              </div>
+            </div>
+          )}
+
+          <div className='text-red_r-11 font-semibold mb-2'>
+            {product?.lowestPrice?.priceDiscount > 0 ? (
+              currencyFormat(product?.lowestPrice?.priceDiscount)
+            ) : (
+              <a href='https://wa.me/'>Call for price</a>
+            )}
+          </div>
+          {product?.stockTotal > 0 && (
+            <div className='flex gap-x-1'>
+              <div className='badge-solid-red'>Ready Stock</div>
+              <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
 }
 
 export default ProductCard
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 060d4638..ed7db486 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -5,12 +5,14 @@ import 'swiper/css'
 import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
 import { useRef } from 'react'
+import useDevice from '@/core/hooks/useDevice'
 
 const bannerClassName =
-  'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
+  'absolute rounded-r top-0 left-0 h-full w-auto md:w-[20%] idt-transition border border-gray_r-6'
 
 const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
   const bannerRef = useRef('')
+  const { isMobile } = useDevice()
 
   const changeBannerOpacity = (swiper) => {
     if (!bannerMode) return
@@ -32,8 +34,8 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
       )}
       <Swiper
         freeMode={{ enabled: true, sticky: false }}
-        slidesPerView={2.2}
-        spaceBetween={8}
+        slidesPerView={isMobile ? 2.2 : 5.6}
+        spaceBetween={isMobile ? 8 : 16}
         onSliderMove={changeBannerOpacity}
         onSlideChangeTransitionEnd={changeBannerOpacity}
         onSlideChangeTransitionStart={changeBannerOpacity}