From 3f849355048e5c280a35a5747577e5296b90e9fd Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 25 Jan 2024 15:27:27 +0700
Subject: Add all promo page

---
 src-migrate/modules/promo/components/Hero.tsx      | 55 ++++++++++++++++++++++
 src-migrate/modules/promo/components/Voucher.tsx   | 11 +++++
 src-migrate/modules/promo/styles/hero.module.css   | 27 +++++++++++
 .../modules/promo/styles/voucher.module.css        |  3 ++
 4 files changed, 96 insertions(+)
 create mode 100644 src-migrate/modules/promo/components/Hero.tsx
 create mode 100644 src-migrate/modules/promo/components/Voucher.tsx
 create mode 100644 src-migrate/modules/promo/styles/hero.module.css
 create mode 100644 src-migrate/modules/promo/styles/voucher.module.css

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
new file mode 100644
index 00000000..63524509
--- /dev/null
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -0,0 +1,55 @@
+import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
+import style from '../styles/hero.module.css';
+import 'swiper/css'
+import Image from 'next/image';
+import { useQuery } from 'react-query';
+import { getBanner } from '~/services/banner';
+
+const swiperBanner: SwiperProps = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  // modules: [Pagination, Autoplay],
+  loop: true,
+  className: 'h-[400px] w-full',
+  slidesPerView: 1.1,
+  spaceBetween: 10
+}
+
+const Hero = () => {
+  const bannerQuery = useQuery({
+    queryKey: ['banner.all-promo'],
+    queryFn: () => getBanner({ type: 'all-promo' })
+  })
+
+  const banners = bannerQuery.data || []
+
+  return (
+    <div className={style['wrapper']}>
+      <div className={style['desc-section']}>
+        <div className={style['title']}>Pasti Hemat & Untung Selama Belanja di Indoteknik.com!</div>
+        <div className='h-4' />
+        <div className={style['subtitle']}>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']}>
+        <Swiper {...swiperBanner}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/363'
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-full h-full object-cover object-center rounded-2xl'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  )
+}
+
+export default Hero
\ No newline at end of file
diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
new file mode 100644
index 00000000..11742f9a
--- /dev/null
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -0,0 +1,11 @@
+import style from '../styles/voucher.module.css'
+
+const Voucher = () => {
+  return (
+    <>
+      <div className={style['title']}>Pakai Voucher Belanja</div>
+    </>
+  )
+}
+
+export default Voucher
\ No newline at end of file
diff --git a/src-migrate/modules/promo/styles/hero.module.css b/src-migrate/modules/promo/styles/hero.module.css
new file mode 100644
index 00000000..70d725be
--- /dev/null
+++ b/src-migrate/modules/promo/styles/hero.module.css
@@ -0,0 +1,27 @@
+.wrapper {
+    @apply bg-warning-100/50 rounded-xl w-full h-[460px] flex;
+}
+
+.desc-section {
+    @apply w-full md:w-5/12 
+        flex flex-col 
+        md:justify-center 
+        p-6 md:pl-10;
+}
+
+.title {
+    @apply text-title-sm md:text-title-lg 
+        leading-[30px] md:leading-[42px]
+        font-semibold;
+}
+
+.subtitle {
+    @apply text-body-2 leading-7 text-gray-700;
+}
+
+.banner-section {
+    @apply md:w-7/12
+        flex flex-col
+        md:justify-center
+        md:pr-10;
+}
diff --git a/src-migrate/modules/promo/styles/voucher.module.css b/src-migrate/modules/promo/styles/voucher.module.css
new file mode 100644
index 00000000..22a3a0ac
--- /dev/null
+++ b/src-migrate/modules/promo/styles/voucher.module.css
@@ -0,0 +1,3 @@
+.title {
+    @apply text-h-sm md:text-h-lg font-semibold;
+}
-- 
cgit v1.2.3