change mobile and desktop view

1 files changed, 21 insertions, 6 deletions

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 19d3e59c..2c63e772 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -2,6 +2,9 @@ import dynamic from 'next/dynamic'
 import Seo from '@/core/components/Seo'
 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'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 
@@ -25,12 +28,24 @@ export default function Home() {
   return (
     <BasicLayout>
       <Seo title='Beranda - Indoteknik' />
-      <HeroBanner />
-      <div className='flex flex-col gap-y-6 my-6'>
-        <PreferredBrand />
-        <PopularProduct />
-        <CategoryHomeId />
-      </div>
+      <DesktopView>
+        <div className="container mx-auto">
+          <div className='flex'>
+            <div className='w-3/12'>
+              <Category />
+            </div>
+          </div>
+        </div>
+      </DesktopView>
+
+      <MobileView>
+        <HeroBanner />
+        <div className='flex flex-col gap-y-6 my-6'>
+          <PreferredBrand />
+          <PopularProduct />
+          <CategoryHomeId />
+        </div>
+      </MobileView>
     </BasicLayout>
   )
 }