feat(banner): add banner feature

spa/src/components/Banner.vue

@@ -0,0 +1,60 @@
+<template>
+  <div v-if="slides.length > 0" class="app-banner px-4">
+    <Swiper
+        class="select-none"
+        :slides-per-view="1"
+        :space-between="50"
+        pagination
+        :pagination="{ clickable: true }"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+    >
+      <SwiperSlide v-for="slide in slides" :key="slide.id">
+        <img :src="slide.image" :alt="slide.title">
+      </SwiperSlide>
+    </Swiper>
+  </div>
+</template>
+
+<script setup>
+import {Swiper, SwiperSlide} from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import {onMounted, ref} from "vue";
+import {fetchBanner} from "@/utils/ftch.js";
+
+const slides = ref([]);
+
+const onSwiper = (swiper) => {
+  console.log(swiper);
+};
+const onSlideChange = () => {
+  console.log('slide change');
+};
+
+onMounted(async () => {
+  const response = await fetchBanner();
+  slides.value = response.data;
+})
+</script>
+
+<style>
+.app-banner {
+  overflow: hidden;
+}
+
+.app-banner .swiper-horizontal > .swiper-pagination-bullets {
+  position: relative;
+  bottom: 0;
+}
+
+.app-banner .swiper-horizontal .swiper-slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.app-banner .swiper-horizontal .swiper-slide > img {
+  border-radius: var(--radius-box);
+}
+</style>

spa/src/utils/ftch.js

@@ -92,4 +92,8 @@ export async function setVoucher(voucher) {
     });
 }
 
+export async function fetchBanner() {
+    return await ftch('banner');
+}
+
 export default ftch;

spa/src/views/Home.vue

@@ -2,6 +2,7 @@
   <div ref="goodsRef" class="pb-20">
     <CategoriesInline/>
 
+    <Banner/>
 
     <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom) + 80px);">
       <div class="flex justify-center">
@@ -35,6 +36,7 @@ import IconFunnel from "@/components/Icons/IconFunnel.vue";
 import {useRouter} from "vue-router";
 import ftch from "@/utils/ftch.js";
 import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
+import Banner from "@/components/Banner.vue";
 
 defineOptions({
   name: 'Home'