Create image component

1 files changed, 14 insertions, 7 deletions

diff --git a/src/pages/index.js b/src/pages/index.js
index f064d6ef..511f2ecd 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,18 +1,21 @@
 import { useEffect, useState } from "react";
-import { LazyLoadImage } from "react-lazy-load-image-component";
-import { Swiper, SwiperSlide } from "swiper/react";
 import { Pagination, Autoplay } from "swiper";
-import Header from "../components/Header";
-import apiOdoo from "../helpers/apiOdoo";
-import "react-lazy-load-image-component/src/effects/blur.css";
+import axios from "axios";
+import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/autoplay";
+
+// Helpers
+import apiOdoo from "../helpers/apiOdoo";
+
+// Components
+import Header from "../components/Header";
 import ProductSlider from "../components/product/ProductSlider";
 import Layout from "../components/Layout";
-import axios from "axios";
 import ManufactureCard from "../components/ManufactureCard";
 import Footer from "../components/Footer";
+import Image from "../components/Image";
 
 export async function getServerSideProps() {
   const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
@@ -53,7 +56,11 @@ export default function Home({ heroBanners }) {
           {
             heroBanners?.map((banner, index) => (
               <SwiperSlide key={index}>
-                <LazyLoadImage effect="blur" src={banner.image} alt={banner.name} className="w-full h-auto" />
+                <Image
+                  src={banner.image} 
+                  alt={banner.name} 
+                  className="w-full h-auto"
+                />
               </SwiperSlide>
             ))
           }