<iman> update mobile view

2 files changed, 250 insertions, 116 deletions

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index ad1d0046..2701250d 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -8,7 +8,10 @@ import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
 import { getBanner } from '~/services/banner';
 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';
 
 const swiperBanner: SwiperProps = {
   modules:[Navigation, Pagination, Autoplay],
@@ -20,8 +23,18 @@ const swiperBanner: SwiperProps = {
   className: 'h-[400px] w-full',
   slidesPerView: 1,
   spaceBetween: 10,
-  navigation:true,
+  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 bannerQuery = useQuery({
@@ -35,33 +48,60 @@ const Hero = () => {
     if (banners.length > 1) {
       swiperBanner.slidesPerView = 1.1;
       swiperBanner.loop = true;
+      swiperBannerMobile.loop = true;
     }
   }, [banners]);
 
+  const swiperBannerMobile = {
+    ...swiperBannerMob,
+    pagination: { dynamicBullets: false, clickable: true },
+  };
+
   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>
+    <>
+      <DesktopView>
+        <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={banner.image}
-                alt={banner.name}
-                width={666}
-                height={450}
-                className='w-full h-full object-cover object-center rounded-2xl'
-              />
-            </SwiperSlide>
-          ))}
-        </Swiper>
-      </div>
-    </div>
+          <div className={style['banner-section']}>
+            <Swiper {...swiperBanner}>
+              {banners.map((banner, index) => (
+                <SwiperSlide key={index}>
+                  <Image
+                    src={banner.image}
+                    alt={banner.name}
+                    width={666}
+                    height={450}
+                    quality={100}
+                    className='w-full h-full object-fit object-center rounded-2xl' />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </div>
+        </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>
+    </>
   )
 }
 
diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx
index 8df99099..7770d372 100644
--- a/src-migrate/modules/promo/components/PromotinProgram.jsx
+++ b/src-migrate/modules/promo/components/PromotinProgram.jsx
@@ -1,118 +1,212 @@
 import React from 'react';
 import Image from 'next/image';
-import { InfoIcon } from "lucide-react"
+import { InfoIcon } from "lucide-react";
+import MobileView from '../../../../src/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
+import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
+import 'swiper/css';
 
 const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
   return (
     <>
       <div className="text-h-sm md:text-h-lg font-semibold py-4">Serba Serbi Promo</div>
       <div className='px-4 sm:px-0'>
-        <div className='grid md:grid-cols-3 grid-cols-2 justify-between h-[90px] gap-3 items-center'>
-        {/* <div className='w-full h-full '>
-            <div
-              onClick={() => onSelectPromo('Diskon')}
-              className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Diskon' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-            >
-              <div>
-                <Image
-                  width={24}
-                  height={24}
-                  quality={100}
-                  src='/images/icon_promo/diskon.svg'
-                  alt=''
-                  className='h-12 w-12 rounded'
-                />
+        <DesktopView>
+          <div className='grid md:grid-cols-3 grid-cols-2 justify-between h-[90px] gap-3 items-center'>
+          {/* <div className='w-full h-full '>
+              <div
+                onClick={() => onSelectPromo('Diskon')}
+                className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Diskon' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+              >
+                <div>
+                  <Image
+                    width={24}
+                    height={24}
+                    quality={100}
+                    src='/images/icon_promo/diskon.svg'
+                    alt=''
+                    className='h-12 w-12 rounded'
+                  />
+                </div>
+                <div>
+                  <div className='flex w-full flex-row items-center justify-start'>
+                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-900'}`}>Spesial Diskon</h1>
+                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                  </div>
+                  <p className={`text-xs md:text-sm ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-500'}`}>
+                  Harga lebih murah dan pasti makin hemat belinya..
+                  </p>
+                </div>
               </div>
-              <div>
-                <div className='flex w-full flex-row items-center justify-start'>
-                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-900'}`}>Spesial Diskon</h1>
-                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+            </div> */}
+            <div className='w-full h-full  '>
+              <div
+                onClick={() => onSelectPromo('Bundling')}
+                className={`border h-full p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+              >
+                <div>
+                  <Image
+                    width={24}
+                    height={24}
+                    quality={100}
+                    src='/images/icon_promo/silat.svg'
+                    alt=''
+                    className='h-12 w-12 rounded'
+                  />
+                </div>
+                <div>
+                  <div className='flex w-full flex-row items-center justify-start'>
+                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1>
+                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                  </div>
+                  <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}>
+                    Pilihan bundling barang kombinasi Silat.
+                  </p>
                 </div>
-                <p className={`text-xs md:text-sm ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-500'}`}>
-                Harga lebih murah dan pasti makin hemat belinya..
-                </p>
               </div>
             </div>
-          </div> */}
-        <div className='w-full h-full  '>
-            <div
-              onClick={() => onSelectPromo('Bundling')}
-              className={`border h-full p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-            >
-              <div>
-                <Image
-                  width={24}
-                  height={24}
-                  quality={100}
-                  src='/images/icon_promo/silat.svg'
-                  alt=''
-                  className='h-12 w-12 rounded'
-                />
-              </div>
-              <div>
-                <div className='flex w-full flex-row items-center justify-start'>
-                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1>
-                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+            <div className='w-full h-full '>
+              <div
+                onClick={() => onSelectPromo('Loading')}
+                className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+              >
+                <div>
+                  <Image
+                    width={24}
+                    height={24}
+                    quality={100}
+                    src='/images/icon_promo/barong.svg'
+                    alt=''
+                    className='h-12 w-12 rounded'
+                  />
+                </div>
+                <div>
+                  <div className='flex w-full flex-row items-center justify-start'>
+                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1>
+                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                  </div>
+                  <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}>
+                    Beli banyak barang/partai barang borong.
+                  </p>
                 </div>
-                <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}>
-                  Pilihan bundling barang kombinasi Silat.
-                </p>
               </div>
             </div>
-          </div>
-          <div className='w-full h-full '>
-            <div
-              onClick={() => onSelectPromo('Loading')}
-              className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-            >
-              <div>
-                <Image
-                  width={24}
-                  height={24}
-                  quality={100}
-                  src='/images/icon_promo/barong.svg'
-                  alt=''
-                  className='h-12 w-12 rounded'
-                />
-              </div>
-              <div>
-                <div className='flex w-full flex-row items-center justify-start'>
-                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1>
-                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+            <div className='w-full h-full '>
+              <div
+                onClick={() => onSelectPromo('Merchandise')}
+                className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+              >
+                <div>
+                  <Image
+                    width={24}
+                    height={24}
+                    quality={100}
+                    src='/images/icon_promo/angklung.svg'
+                    alt=''
+                    className='h-12 w-12 rounded'
+                  />
+                </div>
+                <div >
+                  <div className='flex w-full flex-row items-center justify-start '>
+                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1>
+                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                  </div>
+                  <p className={`  m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}>
+                    Gratis barang promosi/merchandise menang langsung.
+                  </p>
                 </div>
-                <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}>
-                  Beli banyak barang/partai barang borong.
-                </p>
               </div>
             </div>
           </div>
-          <div className='w-full h-full '>
-            <div
-              onClick={() => onSelectPromo('Merchandise')}
-              className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-            >
-              <div>
-                <Image
-                  width={24}
-                  height={24}
-                  quality={100}
-                  src='/images/icon_promo/angklung.svg'
-                  alt=''
-                  className='h-12 w-12 rounded'
-                />
+        </DesktopView>
+        <MobileView>
+          <Swiper slidesPerView={1.75} spaceBetween={10}>
+            <SwiperSlide>
+              <div className='w-full h-full  '>
+                <div
+                  onClick={() => onSelectPromo('Bundling')}
+                  className={`border h-full p-1 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+                >
+                  <div>
+                    <Image
+                      width={24}
+                      height={24}
+                      quality={100}
+                      src='/images/icon_promo/silat.svg'
+                      alt=''
+                      className='h-12 w-12 rounded'
+                    />
+                  </div>
+                  <div >
+                    <div className='flex w-full flex-row items-center  justify-start'>
+                      <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1>
+                      <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                    </div>
+                    <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}>
+                      Pilihan bundling barang kombinasi Silat.
+                    </p>
+                  </div>
+                </div>
               </div>
-              <div >
-                <div className='flex w-full flex-row items-center justify-start '>
-                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1>
-                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+            </SwiperSlide>
+            <SwiperSlide>
+              <div className='w-full h-full '>
+                <div
+                  onClick={() => onSelectPromo('Loading')}
+                  className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+                >
+                  <div>
+                    <Image
+                      width={24}
+                      height={24}
+                      quality={100}
+                      src='/images/icon_promo/barong.svg'
+                      alt=''
+                      className='h-12 w-12 rounded'
+                    />
+                  </div>
+                  <div>
+                    <div className='flex w-full flex-row items-center justify-start'>
+                      <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1>
+                      <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                    </div>
+                    <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}>
+                      Beli banyak barang/partai barang borong.
+                    </p>
+                  </div>
                 </div>
-                <p className={`  m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}>
-                  Gratis barang promosi/merchandise menang langsung.
-                </p>
               </div>
-            </div>
-          </div>
-        </div>
+            </SwiperSlide>
+            <SwiperSlide>
+              <div className='w-full h-full '>
+                <div
+                  onClick={() => onSelectPromo('Merchandise')}
+                  className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+                >
+                  <div>
+                    <Image
+                      width={24}
+                      height={24}
+                      quality={100}
+                      src='/images/icon_promo/angklung.svg'
+                      alt=''
+                      className='h-12 w-12 rounded'
+                    />
+                  </div>
+                  <div >
+                    <div className='flex w-full flex-row items-center justify-start '>
+                      <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1>
+                      <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                    </div>
+                    <p className={`  m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}>
+                      Gratis barang promosi/merchandise menang langsung.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </SwiperSlide>
+          </Swiper>
+        </MobileView>
       </div>
     </>
   );