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

11 files changed, 438 insertions, 235 deletions

diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx
index 1c559faf..57904498 100644
--- a/src/core/components/elements/Navbar/Navbar.jsx
+++ b/src/core/components/elements/Navbar/Navbar.jsx
@@ -1,197 +1,13 @@
 import dynamic from 'next/dynamic'
-import Image from 'next/image'
-import IndoteknikLogo from '@/images/logo.png'
-import {
-  Bars3Icon,
-  ChevronDownIcon,
-  DocumentCheckIcon,
-  HeartIcon,
-  ShoppingCartIcon
-} from '@heroicons/react/24/outline'
-import Link from '../Link/Link'
-import useSidebar from '@/core/hooks/useSidebar'
-import MobileView from '../../views/MobileView'
-import DesktopView from '../../views/DesktopView'
 
-const Search = dynamic(() => import('./Search'))
+const NavbarDesktop = dynamic(() => import('./NavbarDesktop'))
+const NavbarMobile = dynamic(() => import('./NavbarMobile'))
 
 const Navbar = () => {
-  const { Sidebar, open } = useSidebar()
   return (
     <>
-      <MobileView>
-        <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
-          <div className='flex justify-between items-center mb-2'>
-            <Link href='/'>
-              <Image
-                src={IndoteknikLogo}
-                alt='Indoteknik Logo'
-                width={120}
-                height={40}
-              />
-            </Link>
-            <div className='flex gap-x-3'>
-              <Link href='/my/wishlist'>
-                <HeartIcon className='w-6 text-gray_r-12' />
-              </Link>
-              <Link href='/shop/cart'>
-                <ShoppingCartIcon className='w-6 text-gray_r-12' />
-              </Link>
-              <button
-                type='button'
-                onClick={open}
-              >
-                <Bars3Icon className='w-6 text-gray_r-12' />
-              </button>
-            </div>
-          </div>
-          <Search />
-        </nav>
-        {Sidebar}
-      </MobileView>
-
-      <DesktopView>
-        <div className='py-3 bg-yellow_r-10/60'>
-          <div className='container mx-auto flex justify-between'>
-            <Link
-              href='/'
-              className='!text-gray_r-12'
-            >
-              Tentang Indoteknik.com
-            </Link>
-            <div className='flex gap-x-6'>
-              <Link
-                href='/'
-                className='!text-gray_r-12'
-              >
-                Pembayaran Tempo
-              </Link>
-              <Link
-                href='/'
-                className='!text-gray_r-12'
-              >
-                F.A.Q
-              </Link>
-              <Link
-                href='/'
-                className='!text-gray_r-12'
-              >
-                Fitur Layanan
-              </Link>
-            </div>
-          </div>
-        </div>
-
-        <nav className='py-6 sticky top-0 z-50 bg-white border-b border-gray_r-6'>
-          <div className='container mx-auto flex gap-x-6'>
-            <Link href='/'>
-              <Image
-                src={IndoteknikLogo}
-                alt='Indoteknik Logo'
-                width={180}
-                height={60}
-              />
-            </Link>
-            <Search />
-            <div className='flex gap-x-4'>
-              <Link
-                href='/my/transactions'
-                className='flex items-center gap-x-2 !text-gray_r-12/80'
-              >
-                <DocumentCheckIcon className='w-7' />
-                Pending
-                <br />
-                Quotation
-              </Link>
-              <Link
-                href='/shop/cart'
-                className='flex items-center gap-x-2 !text-gray_r-12/80'
-              >
-                <ShoppingCartIcon className='w-7' />
-                Keranjang
-                <br />
-                Belanja
-              </Link>
-              <Link
-                href='/my/wishlist'
-                className='flex items-center gap-x-2 !text-gray_r-12/80'
-              >
-                <HeartIcon className='w-7' />
-                Wishlist
-              </Link>
-              <a
-                href='https://wa.me/628'
-                className='flex items-center gap-x-1 !text-gray_r-12/80'
-              >
-                <Image
-                  src='/images/socials/Whatsapp-2.png'
-                  alt='Whatsapp'
-                  width={48}
-                  height={48}
-                />
-                <div>
-                  <div className='font-semibold'>Order Via WA</div>
-                  0812 8080 622 (Chat)
-                </div>
-              </a>
-            </div>
-          </div>
-        </nav>
-
-        <div className='container mx-auto mt-6'>
-          <div className='flex bg-gray_r-2'>
-            <div className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-tl-xl flex items-center'>
-              <div>Kategori Produk</div>
-              <button
-                type='button'
-                className='ml-auto pl-3'
-              >
-                <ChevronDownIcon className='w-6' />
-              </button>
-            </div>
-            <div className='w-6/12 flex gap-x-1 px-1 bg-gray_r-1'>
-              <Link
-                href='/'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
-              >
-                Promo Produk
-              </Link>
-              <Link
-                href='/'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
-              >
-                Semua Brand
-              </Link>
-              <Link
-                href='/'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
-              >
-                Ready Stock
-              </Link>
-              <Link
-                href='/'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
-              >
-                Blog Indoteknik
-              </Link>
-            </div>
-            <div className='w-3/12 flex gap-x-1'>
-              <Link
-                href='/login'
-                className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none'
-              >
-                Masuk
-              </Link>
-              <Link
-                href='/register'
-                className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none rounded-tr-xl'
-              >
-                Daftar
-              </Link>
-            </div>
-          </div>
-        </div>
-      </DesktopView>
+      <NavbarMobile />
+      <NavbarDesktop />
     </>
   )
 }
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
new file mode 100644
index 00000000..2f7a6e23
--- /dev/null
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -0,0 +1,170 @@
+import {
+  ChevronDownIcon,
+  HeartIcon,
+  ShoppingCartIcon,
+  DocumentCheckIcon
+} from '@heroicons/react/24/outline'
+import Link from '../Link/Link'
+import Image from 'next/image'
+import DesktopView from '../../views/DesktopView'
+import dynamic from 'next/dynamic'
+import IndoteknikLogo from '@/images/logo.png'
+import Category from '@/lib/category/components/Category'
+import { useState } from 'react'
+
+const Search = dynamic(() => import('./Search'))
+
+const NavbarDesktop = () => {
+  const [isOpenCategory, setIsOpenCategory] = useState(false)
+
+  return (
+    <DesktopView>
+      <div className='py-3 bg-yellow_r-10/60'>
+        <div className='container mx-auto flex justify-between'>
+          <Link
+            href='/'
+            className='!text-gray_r-12'
+          >
+            Tentang Indoteknik.com
+          </Link>
+          <div className='flex gap-x-6'>
+            <Link
+              href='/'
+              className='!text-gray_r-12'
+            >
+              Pembayaran Tempo
+            </Link>
+            <Link
+              href='/'
+              className='!text-gray_r-12'
+            >
+              F.A.Q
+            </Link>
+            <Link
+              href='/'
+              className='!text-gray_r-12'
+            >
+              Fitur Layanan
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <nav className='py-6 sticky top-0 z-50 bg-white border-b border-gray_r-6'>
+        <div className='container mx-auto flex gap-x-6'>
+          <Link href='/'>
+            <Image
+              src={IndoteknikLogo}
+              alt='Indoteknik Logo'
+              width={180}
+              height={60}
+            />
+          </Link>
+          <Search />
+          <div className='flex gap-x-4'>
+            <Link
+              href='/my/transactions'
+              className='flex items-center gap-x-2 !text-gray_r-12/80'
+            >
+              <DocumentCheckIcon className='w-7' />
+              Pending
+              <br />
+              Quotation
+            </Link>
+            <Link
+              href='/shop/cart'
+              className='flex items-center gap-x-2 !text-gray_r-12/80'
+            >
+              <ShoppingCartIcon className='w-7' />
+              Keranjang
+              <br />
+              Belanja
+            </Link>
+            <Link
+              href='/my/wishlist'
+              className='flex items-center gap-x-2 !text-gray_r-12/80'
+            >
+              <HeartIcon className='w-7' />
+              Wishlist
+            </Link>
+            <a
+              href='https://wa.me/628'
+              className='flex items-center gap-x-1 !text-gray_r-12/80'
+            >
+              <Image
+                src='/images/socials/Whatsapp-2.png'
+                alt='Whatsapp'
+                width={48}
+                height={48}
+              />
+              <div>
+                <div className='font-semibold'>Order Via WA</div>
+                0812 8080 622 (Chat)
+              </div>
+            </a>
+          </div>
+        </div>
+      </nav>
+
+      <div className='container mx-auto mt-6'>
+        <div className='flex bg-gray_r-2'>
+          <div className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-tl-xl flex items-center relative'>
+            <div>Kategori Produk</div>
+            <button
+              type='button'
+              className='ml-auto pl-3'
+              onClick={() => setIsOpenCategory((category) => !category)}
+            >
+              <ChevronDownIcon className={`w-6 ${isOpenCategory ? 'rotate-180' : ''}`} />
+            </button>
+            <div className={`category-mega-box-wrapper ${isOpenCategory ? 'show' : ''}`}>
+              <Category />
+            </div>
+          </div>
+          <div className='w-6/12 flex gap-x-1 px-1 bg-gray_r-1'>
+            <Link
+              href='/'
+              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
+            >
+              Promo Produk
+            </Link>
+            <Link
+              href='/'
+              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
+            >
+              Semua Brand
+            </Link>
+            <Link
+              href='/'
+              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
+            >
+              Ready Stock
+            </Link>
+            <Link
+              href='/'
+              className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
+            >
+              Blog Indoteknik
+            </Link>
+          </div>
+          <div className='w-3/12 flex gap-x-1'>
+            <Link
+              href='/login'
+              className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none'
+            >
+              Masuk
+            </Link>
+            <Link
+              href='/register'
+              className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none rounded-tr-xl'
+            >
+              Daftar
+            </Link>
+          </div>
+        </div>
+      </div>
+    </DesktopView>
+  )
+}
+
+export default NavbarDesktop
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
new file mode 100644
index 00000000..3998875b
--- /dev/null
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -0,0 +1,48 @@
+import Image from 'next/image'
+import MobileView from '../../views/MobileView'
+import Link from '../Link/Link'
+import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outline'
+import useSidebar from '@/core/hooks/useSidebar'
+import dynamic from 'next/dynamic'
+import IndoteknikLogo from '@/images/logo.png'
+
+const Search = dynamic(() => import('./Search'))
+
+const NavbarMobile = () => {
+  const { Sidebar, open } = useSidebar()
+
+  return (
+    <MobileView>
+      <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
+        <div className='flex justify-between items-center mb-2'>
+          <Link href='/'>
+            <Image
+              src={IndoteknikLogo}
+              alt='Indoteknik Logo'
+              width={120}
+              height={40}
+            />
+          </Link>
+          <div className='flex gap-x-3'>
+            <Link href='/my/wishlist'>
+              <HeartIcon className='w-6 text-gray_r-12' />
+            </Link>
+            <Link href='/shop/cart'>
+              <ShoppingCartIcon className='w-6 text-gray_r-12' />
+            </Link>
+            <button
+              type='button'
+              onClick={open}
+            >
+              <Bars3Icon className='w-6 text-gray_r-12' />
+            </button>
+          </div>
+        </div>
+        <Search />
+      </nav>
+      {Sidebar}
+    </MobileView>
+  )
+}
+
+export default NavbarMobile
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index 1bcdb5ab..984a9fa6 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -1,18 +1,20 @@
 import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
+import useDevice from '@/core/hooks/useDevice'
 import { createSlug } from '@/core/utils/slug'
 
 const BrandCard = ({ brand }) => {
+  const { isMobile } = useDevice()
   return (
     <Link
       href={createSlug('/shop/brands/', brand.name, brand.id)}
-      className='py-1 px-2 rounded border border-gray_r-6 h-12 flex justify-center items-center'
+      className={`py-1 px-2 rounded border border-gray_r-6 flex justify-center items-center ${isMobile ? 'h-16' : 'h-24'}`}
     >
       {brand.logo && (
         <Image
           src={brand.logo}
           alt={brand.name}
-          className='h-full object-contain object-center'
+          className='h-full w-full object-contain object-center'
         />
       )}
       {!brand.logo && (
diff --git a/src/lib/home/components/CategoryHome.jsx b/src/lib/home/components/CategoryHome.jsx
index ac43e2bc..05f0ca28 100644
--- a/src/lib/home/components/CategoryHome.jsx
+++ b/src/lib/home/components/CategoryHome.jsx
@@ -6,7 +6,7 @@ const CategoryHome = ({ id }) => {
   const { categoryHome } = useCategoryHome({ id })
 
   return (
-    <div className='p-4 relative bg-yellow_r-2'>
+    <div className='p-4 sm:py-8 relative bg-yellow_r-2 border border-yellow_r-5'>
       {categoryHome.data ? (
         <ProductSlider
           products={{
diff --git a/src/lib/home/components/PopularProduct.jsx b/src/lib/home/components/PopularProduct.jsx
index d23275f7..78dc5d49 100644
--- a/src/lib/home/components/PopularProduct.jsx
+++ b/src/lib/home/components/PopularProduct.jsx
@@ -1,23 +1,50 @@
-import { Swiper, SwiperSlide } from 'swiper/react'
 import usePopularProduct from '../hooks/usePopularProduct'
-import ProductCard from '@/lib/product/components/ProductCard'
 import PopularProductSkeleton from './Skeleton/PopularProductSkeleton'
 import ProductSlider from '@/lib/product/components/ProductSlider'
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
+import ProductCard from '@/lib/product/components/ProductCard'
 
 const PopularProduct = () => {
   const { popularProducts } = usePopularProduct()
 
   return (
-    <div className='px-4'>
-      <div className='font-medium mb-4'>Produk Populer</div>
-      {popularProducts.isLoading && <PopularProductSkeleton />}
-      {!popularProducts.isLoading && (
-        <ProductSlider
-          products={popularProducts.data}
-          simpleTitle
-        />
-      )}
-    </div>
+    <>
+      <MobileView>
+        <div className='px-4'>
+          <div className='font-medium mb-4'>Produk Banyak Dilihat</div>
+          {popularProducts.isLoading && <PopularProductSkeleton />}
+          {!popularProducts.isLoading && (
+            <ProductSlider
+              products={popularProducts.data}
+              simpleTitle
+            />
+          )}
+        </div>
+      </MobileView>
+
+      <DesktopView>
+        <div className='border border-gray_r-6 h-full overflow-auto'>
+          <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
+            Produk Banyak Dilihat
+          </div>
+          <div className='h-full divide-y divide-gray_r-6'>
+            {popularProducts.data &&
+              popularProducts.data.products.map((product) => (
+                <div
+                  className='py-2'
+                  key={product.id}
+                >
+                  <ProductCard
+                    product={product}
+                    variant='horizontal'
+                  />
+                </div>
+              ))}
+          </div>
+        </div>
+      </DesktopView>
+    </>
   )
 }
 
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index 3df3cdb7..7edd0730 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -2,18 +2,31 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 import usePreferredBrand from '../hooks/usePreferredBrand'
 import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton'
 import BrandCard from '@/lib/brand/components/BrandCard'
+import useDevice from '@/core/hooks/useDevice'
+import Link from '@/core/components/elements/Link/Link'
 
 const PreferredBrand = () => {
   const { preferredBrands } = usePreferredBrand()
+  const { isMobile, isDesktop } = useDevice()
 
   return (
-    <div className='px-4'>
-      <div className='font-medium mb-4'>Brand Pilihan</div>
+    <div className='px-4 sm:px-0'>
+      <div className='flex justify-between items-center mb-4'>
+        <div className='font-medium sm:text-h-lg'>Brand Pilihan</div>
+        {isDesktop && (
+          <Link
+            href='/'
+            className='btn-yellow !text-gray_r-12'
+          >
+            Lihat Semua
+          </Link>
+        )}
+      </div>
       {preferredBrands.isLoading && <PreferredBrandSkeleton />}
       {!preferredBrands.isLoading && (
         <Swiper
-          slidesPerView={3.5}
-          spaceBetween={12}
+          slidesPerView={isMobile ? 3.5 : 7.5}
+          spaceBetween={isMobile ? 12 : 24}
           freeMode
         >
           {preferredBrands.data?.manufactures.map((brand) => (
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}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 70231f7e..c6737037 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -4,7 +4,7 @@ import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton'
 import PopularProductSkeleton from '@/lib/home/components/Skeleton/PopularProductSkeleton'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
-import Category from '@/lib/category/components/Category'
+import { useRef } from 'react'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 
@@ -25,18 +25,39 @@ const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeI
 })
 
 export default function Home() {
+  const bannerRef = useRef(null)
+  const wrapperRef = useRef(null)
+
+  const handleOnLoad = () => {
+    wrapperRef.current.style.height =
+      bannerRef.current.querySelector(':first-child').clientHeight + 'px'
+  }
+
   return (
     <BasicLayout>
       <Seo title='Beranda - Indoteknik' />
       <DesktopView>
-        <div className="container mx-auto">
-          <div className='flex'>
-            <div className='w-3/12'>
-              <Category />
-            </div>
-            <div className='w-6/12 px-1'>
+        <div className='container mx-auto'>
+          <div
+            className='flex h-[360px]'
+            ref={wrapperRef}
+            onLoad={handleOnLoad}
+          >
+            <div className='w-3/12'></div>
+            <div
+              className='w-6/12 px-1'
+              ref={bannerRef}
+            >
               <HeroBanner />
             </div>
+            <div className='w-3/12'>
+              <PopularProduct />
+            </div>
+          </div>
+
+          <div className='my-16 flex flex-col gap-y-10'>
+            <PreferredBrand />
+            <CategoryHomeId />
           </div>
         </div>
       </DesktopView>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 12589e7d..b482aa30 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -134,6 +134,7 @@ button {
     .btn-yellow {
         @apply bg-yellow_r-9
             border-yellow_r-9
+            hover:bg-yellow_r-10
             disabled:text-gray_r-10
             disabled:bg-yellow_r-7
             disabled:border-yellow_r-7;
@@ -381,8 +382,34 @@ button {
     @apply !border-yellow_r-9;
 }
 
+.category-mega-box-wrapper {
+    @apply absolute
+        opacity-0
+        left-0
+        top-[125%]
+        flex
+        w-full
+        z-10
+        transition-all
+        ease-in
+        duration-200
+        pointer-events-none;
+}
+
+.category-mega-box-wrapper.show {
+    @apply top-[100%]
+        opacity-100
+        pointer-events-auto;
+}
+
 .category-mega-box {
-    @apply relative py-2 border border-gray_r-6 h-full;
+    @apply relative
+        py-2
+        border
+        border-t-0
+        border-gray_r-6
+        h-full
+        w-full;
 }
 
 .category-mega-box > div {
@@ -394,29 +421,34 @@ button {
 }
 
 .category-mega-box > div:hover .category-mega-box__child-wrapper {
-    @apply block;
+    @apply opacity-100
+        top-0
+        pointer-events-auto;
 }
 
 .category-mega-box .category-mega-box__parent {
     @apply py-2.5
         px-4
-        idt-transition
         text-gray_r-12/80
-        font-normal
+        font-normal;
 }
 
 .category-mega-box__child-wrapper {
     @apply absolute 
         left-[100%] 
-        top-0 
-        w-[50vw] 
+        top-12
+        w-[40vw] 
         bg-gray_r-1/90
         backdrop-blur-md
         border 
         border-gray_r-6 
         p-6 
-        hidden 
-        h-full
+        opacity-0
+        h-full 
+        transition-all
+        ease-in
+        duration-200
+        pointer-events-none
         z-50;
 }
 
@@ -437,3 +469,4 @@ button {
         duration-100 
         font-normal;
 }
+