Add page transition

1 files changed, 29 insertions, 26 deletions

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>
     </>
   )
 }