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

1 files changed, 28 insertions, 7 deletions

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>