From 40bab7be1e0025c7c089e1eac17451ef155a989a Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Sat, 19 Nov 2022 13:55:00 +0700
Subject: Add page transition

---
 src/pages/index.js | 55 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 29 insertions(+), 26 deletions(-)

(limited to 'src/pages/index.js')

diff --git a/src/pages/index.js b/src/pages/index.js
index 7fa538d1..a0363a62 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -9,6 +9,7 @@ import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/autoplay";
 import ProductSlider from "../components/product/ProductSlider";
+import Layout from "../components/Layout";
 
 export default function Home() {
   const [heroBanners, setHeroBanners] = useState(null);
@@ -44,38 +45,40 @@ export default function Home() {
 
   return (
     <>
-      <Header title="Home - Indoteknik" />
-      <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[Pagination, Autoplay]}>
-        {
-          heroBanners?.map((banner, index) => (
-            <SwiperSlide key={index}>
-              <LazyLoadImage effect="blur" src={banner.image} alt={banner.name} className="w-full h-auto" />
-            </SwiperSlide>
-          ))
-        }
-      </Swiper>
-      <div className="mt-6 px-4">
-        <h2 className="text-gray-900 font-bold mb-3">Brand Pilihan</h2>
-        <Swiper slidesPerView={4} freeMode={true} spaceBetween={16}>
+      <Header title='Home - Indoteknik' />
+      <Layout key='/home'>
+        <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[Pagination, Autoplay]}>
           {
-            manufactures?.manufactures?.map((manufacture, index) => (
+            heroBanners?.map((banner, index) => (
               <SwiperSlide key={index}>
-                <div className="border border-gray-300 p-1 rounded h-full">
-                  <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name} className="w-full h-full object-contain object-center" />
-                </div>
+                <LazyLoadImage effect="blur" src={banner.image} alt={banner.name} className="w-full h-auto" />
               </SwiperSlide>
             ))
           }
         </Swiper>
-      </div>
-      <div className="mt-6 px-4 mb-6">
-        <h2 className="text-gray-900 font-bold mb-3">Produk Ready Stock</h2>
-        <ProductSlider products={readyStockProducts} />
-      </div>
-      <div className="mt-6 px-4 mb-6">
-        <h2 className="text-gray-900 font-bold mb-3">Produk Populer</h2>
-        <ProductSlider products={popularProducts} />
-      </div>
+        <div className="mt-6 px-4">
+          <h2 className="text-gray-900 font-bold mb-3">Brand Pilihan</h2>
+          <Swiper slidesPerView={4} freeMode={true} spaceBetween={16}>
+            {
+              manufactures?.manufactures?.map((manufacture, index) => (
+                <SwiperSlide key={index}>
+                  <div className="border border-gray-300 p-1 rounded h-full">
+                    <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name} className="w-full h-full object-contain object-center" />
+                  </div>
+                </SwiperSlide>
+              ))
+            }
+          </Swiper>
+        </div>
+        <div className="mt-6 px-4 mb-6">
+          <h2 className="text-gray-900 font-bold mb-3">Produk Ready Stock</h2>
+          <ProductSlider products={readyStockProducts} />
+        </div>
+        <div className="mt-6 px-4 mb-6">
+          <h2 className="text-gray-900 font-bold mb-3">Produk Populer</h2>
+          <ProductSlider products={popularProducts} />
+        </div>
+      </Layout>
     </>
   )
 }
-- 
cgit v1.2.3