2 files changed, 99 insertions, 0 deletions
diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
new file mode 100644
index 00000000..1b5bf165
--- /dev/null
+++ b/src/components/ui/HeroBanner.jsx
@@ -0,0 +1,64 @@
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Pagination, Autoplay } from 'swiper'
+import 'swiper/css'
+import 'swiper/css/pagination'
+import 'swiper/css/autoplay'
+import { useMemo } from 'react'
+import Link from '@/core/components/elements/Link/Link'
+import Image from '@/core/components/elements/Image/Image'
+import { useQuery } from 'react-query'
+import { BannerApi } from '@/api/BannerApi'
+import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
+
+const swiperBanner = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  modules: [Pagination, Autoplay],
+  loop: true,
+  className: 'border border-gray_r-6',
+  slidesPerView: 1
+}
+
+const HeroBanner = () => {
+  const heroBanner = useQuery('heroBanner', BannerApi({ type: 'index-a-1' }))
+
+  const swiperBannerMobile = {
+    ...swiperBanner,
+    pagination: { dynamicBullets: true, clickable: true }
+  }
+
+  const swiperBannerDesktop = {
+    ...swiperBanner,
+    pagination: { dynamicBullets: false, clickable: true }
+  }
+
+  const BannerComponent = useMemo(() => {
+    return heroBanner.data?.map((banner, index) => (
+      <SwiperSlide key={index}>
+        <Link href={banner.url} className='w-full h-auto'>
+          <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+        </Link>
+      </SwiperSlide>
+    ))
+  }, [heroBanner.data])
+
+  if (heroBanner.isLoading) return <HeroBannerSkeleton />
+
+  return (
+    <>
+      <MobileView>
+        <Swiper {...swiperBannerMobile}>{BannerComponent}</Swiper>
+      </MobileView>
+
+      <DesktopView>
+        <Swiper {...swiperBannerDesktop}>{BannerComponent}</Swiper>
+      </DesktopView>
+    </>
+  )
+}
+
+export default HeroBanner
diff --git a/src/components/ui/HeroBannerSecondary.jsx b/src/components/ui/HeroBannerSecondary.jsx
new file mode 100644
index 00000000..a3227002
--- /dev/null
+++ b/src/components/ui/HeroBannerSecondary.jsx
@@ -0,0 +1,35 @@
+import Link from '@/core/components/elements/Link/Link'
+import { getRandomInt } from '@/utils/getRandomInt'
+import Image from 'next/image'
+import { useMemo } from 'react'
+import { useQuery } from 'react-query'
+import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
+import { BannerApi } from '@/api/BannerApi'
+
+const HeroBannerSecondary = () => {
+  const heroBannerSecondary = useQuery('heroBannerSecondary', BannerApi({ type: 'index-a-2' }))
+
+  const randomIndex = useMemo(() => {
+    if (!heroBannerSecondary.data) return null
+    const length = heroBannerSecondary.data?.length
+    return getRandomInt(length)
+  }, [heroBannerSecondary.data])
+
+  if (heroBannerSecondary.isLoading) return <HeroBannerSkeleton />
+
+  return (
+    heroBannerSecondary.data && (
+      <Link href={heroBannerSecondary.data[randomIndex].url} className='h-full'>
+        <Image
+          src={heroBannerSecondary.data[randomIndex].image}
+          width={512}
+          height={1024}
+          alt={heroBannerSecondary.data[randomIndex].name}
+          className='object-cover object-center h-full'
+        />
+      </Link>
+    )
+  )
+}
+
+export default HeroBannerSecondary