onbording popup

1 files changed, 61 insertions, 37 deletions

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 64f3ac10..65d953d2 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,46 +1,64 @@
-import dynamic from 'next/dynamic'
-import MobileView from '@/core/components/views/MobileView'
-import DesktopView from '@/core/components/views/DesktopView'
-import { useRef } from 'react'
-import Seo from '@/core/components/Seo'
-import DelayRender from '@/core/components/elements/DelayRender/DelayRender'
-import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton'
-import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton'
-import PromotinProgram from '@/lib/promotinProgram/components/HomePage'
-import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton'
-import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton'
+import dynamic from 'next/dynamic';
+import MobileView from '@/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
+import { useRef } from 'react';
+import Seo from '@/core/components/Seo';
+import DelayRender from '@/core/components/elements/DelayRender/DelayRender';
+import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton';
+import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton';
+import PromotinProgram from '@/lib/promotinProgram/components/HomePage';
+import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton';
+import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton';
+import PagePopupIformation from '~/modules/popup-information';
 
-const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
+const BasicLayout = dynamic(() =>
+  import('@/core/components/layouts/BasicLayout')
+);
 const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), {
-  loading: () => <HeroBannerSkeleton />
-})
-const HeroBannerSecondary = dynamic(() => import('@/components/ui/HeroBannerSecondary'), {
-  loading: () => <HeroBannerSkeleton />
-})
+  loading: () => <HeroBannerSkeleton />,
+});
+const HeroBannerSecondary = dynamic(
+  () => import('@/components/ui/HeroBannerSecondary'),
+  {
+    loading: () => <HeroBannerSkeleton />,
+  }
+);
 const PopularProduct = dynamic(() => import('@/components/ui/PopularProduct'), {
-  loading: () => <PopularProductSkeleton />
-})
+  loading: () => <PopularProductSkeleton />,
+});
 
-const PreferredBrand = dynamic(() => import('@/lib/home/components/PreferredBrand'), {
-  loading: () => <PreferredBrandSkeleton />
-})
+const PreferredBrand = dynamic(
+  () => import('@/lib/home/components/PreferredBrand'),
+  {
+    loading: () => <PreferredBrandSkeleton />,
+  }
+);
 
-const FlashSale = dynamic(() => import('@/lib/flashSale/components/FlashSale'), {
-  loading: () => <FlashSaleSkeleton />
-})
-const BannerSection = dynamic(() => import('@/lib/home/components/BannerSection'))
-const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeId'))
-const CustomerReviews = dynamic(() => import('@/lib/review/components/CustomerReviews'))
-const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'))
+const FlashSale = dynamic(
+  () => import('@/lib/flashSale/components/FlashSale'),
+  {
+    loading: () => <FlashSaleSkeleton />,
+  }
+);
+const BannerSection = dynamic(() =>
+  import('@/lib/home/components/BannerSection')
+);
+const CategoryHomeId = dynamic(() =>
+  import('@/lib/home/components/CategoryHomeId')
+);
+const CustomerReviews = dynamic(() =>
+  import('@/lib/review/components/CustomerReviews')
+);
+const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'));
 
 export default function Home() {
-  const bannerRef = useRef(null)
-  const wrapperRef = useRef(null)
+  const bannerRef = useRef(null);
+  const wrapperRef = useRef(null);
 
   const handleOnLoad = () => {
     wrapperRef.current.style.height =
-      bannerRef.current?.querySelector(':first-child')?.clientHeight + 'px'
-  }
+      bannerRef.current?.querySelector(':first-child')?.clientHeight + 'px';
+  };
 
   return (
     <BasicLayout>
@@ -51,14 +69,19 @@ export default function Home() {
           {
             name: 'keywords',
             content:
-              'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air'
-          }
+              'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air',
+          },
         ]}
       />
 
       <DesktopView>
+        <PagePopupIformation />
         <div className='container mx-auto'>
-          <div className='flex min-h-[400px] h-[460px]' ref={wrapperRef} onLoad={handleOnLoad}>
+          <div
+            className='flex min-h-[400px] h-[460px]'
+            ref={wrapperRef}
+            onLoad={handleOnLoad}
+          >
             <div className='w-2/12'>
               <HeroBannerSecondary />
             </div>
@@ -85,6 +108,7 @@ export default function Home() {
       </DesktopView>
 
       <MobileView>
+        <PagePopupIformation />
         <DelayRender renderAfter={200}>
           <HeroBanner />
         </DelayRender>
@@ -114,5 +138,5 @@ export default function Home() {
         </div>
       </MobileView>
     </BasicLayout>
-  )
+  );
 }