1 files changed, 105 insertions, 0 deletions
diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
new file mode 100644
index 00000000..c5f0afad
--- /dev/null
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -0,0 +1,105 @@
+import 'swiper/css';
+
+import Image from 'next/image';
+import { useEffect, useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
+import style from '../styles/hero.module.css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import  { Navigation, Pagination, Autoplay } from 'swiper';
+import MobileView from '../../../../src/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
+import {bannerApi} from '../../../../src/api/bannerApi'
+
+interface IPromotionProgram {
+  headlineBanner: string;
+  descriptionBanner: string;
+  image: string ;
+  name: string;
+}
+
+const swiperBanner: SwiperProps = {
+  modules:[Navigation, Pagination, Autoplay],
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  loop: true,
+  className: 'h-[400px] w-full',
+  slidesPerView: 1,
+  spaceBetween: 10,
+  pagination:true,
+}
+const swiperBannerMob = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false,
+  },
+  modules: [Pagination, Autoplay],
+  loop: true,
+  className: 'border border-gray_r-6 min-h-full',
+  slidesPerView: 1,
+};
+
+const Hero = () => {
+  const heroBanner = useQuery('allPromo', bannerApi({ type: 'banner-semua-promo' }));
+
+  const banners: IPromotionProgram[] = useMemo(
+    () => heroBanner?.data || [],
+    [heroBanner.data]
+  );
+
+  const swiperBannerMobile = {
+    ...swiperBannerMob,
+    pagination: { dynamicBullets: false, clickable: true },
+  };
+  
+  return (
+    <>
+      <DesktopView>
+        <div className={style['wrapper']}>
+            <Swiper {...swiperBanner}>
+              {banners.map((banner, index) => (
+                <SwiperSlide key={index} className='flex flex-row'>
+                  <div className={style['desc-section']}>
+                    <div className={style['title']}>{banner.headlineBanner? banner.headlineBanner : "Pasti Hemat & Untung Selama Belanja di Indoteknik.com!"}</div>
+                    <div className='h-4' />
+                    <div className={style['subtitle']}>{banner.descriptionBanner? banner.descriptionBanner : "Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai!"}</div>
+                  </div>
+                  <div className={style['banner-section']}>
+                    <Image
+                      src={banner.image}
+                      alt={banner.name}
+                      width={666}
+                      height={450}
+                      quality={90}
+                      className='w-full h-full object-fit object-center rounded-2xl' />
+                  </div>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+        </div>
+      </DesktopView>
+      <MobileView>
+          <Swiper {...swiperBannerMobile}>
+            {banners?.map((banner, index) => (
+              <SwiperSlide key={index}>
+                    <Image
+                      width={439}
+                      height={150}
+                      quality={100}
+                      src={banner.image}
+                      alt={banner.name}
+                      className='w-full h-full object-cover object-center rounded-2xl'
+                    />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+          
+      </MobileView>
+    </>
+  )
+}
+
+export default Hero
+\ No newline at end of file