update

src/components/layout/home/SliderHome/index.tsx

@@ -0,0 +1,65 @@
+'use client';
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation, Pagination } from 'swiper/modules';
+import Image from 'next/image';
+import Link from 'next/link';
+import { bannerData } from './bannerData';
+
+const SliderHome: React.FC = () => {
+  // data banner slider
+  const dataSlider = bannerData[0].homepage;
+
+  return (
+    <>
+      <div className="box-banner-homepage relative">
+        <Swiper
+          modules={[Autoplay, Navigation, Pagination]}
+          spaceBetween={12}
+          slidesPerView={1}
+          loop={true}
+        >
+          {dataSlider?.banner_slider_homepage_main?.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Link href={banner.desUrl} className="item-banner boder-radius-10">
+                <Image
+                  src={banner.fileUrl}
+                  width={1909}
+                  height={57}
+                  alt={banner.title}
+                  priority={true}
+                  className="boder-radius-10"
+                />
+              </Link>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+      <div className="box-banner-under-slider">
+        <Swiper
+          modules={[Autoplay, Navigation, Pagination]}
+          spaceBetween={12}
+          slidesPerView={2}
+          loop={true}
+          navigation={true}
+        >
+          {dataSlider?.banner_under_slider_trangchu?.map((banner, index) => (
+            <SwiperSlide key={index} className="item">
+              <Link href={banner.desUrl} className="item-banner boder-radius-10">
+                <Image
+                  src={banner.fileUrl}
+                  width={banner.width}
+                  height={banner.height}
+                  alt={banner.title}
+                  className="lazy boder-radius-10"
+                />
+              </Link>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </>
+  );
+};
+
+export default SliderHome;