fix&feat: homepage responsive + swiper effect

src/App.vue

@@ -2,7 +2,7 @@
   <ion-app class="main">
     <PagesHeader />
     <ion-content>
-      <ion-router-outlet class="main" id="main-content" />
+      <ion-router-outlet id="main-content" />
     </ion-content>
   </ion-app>
 </template>
@@ -16,7 +16,5 @@ import PagesHeader from "@/components/PagesHeader.vue";
 <style>
 .main {
   background-color: var(--ion-color-light);
-  height: 100%;
-  min-height: 0;
 }
 </style>

src/components/IllusionSwiper.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { Pagination } from "swiper/modules";
+import { ref } from "vue";
+import { Pagination, EffectCoverflow } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 
 import AudioGuide from "@/components/AudioGuide.vue";
-import { ref } from "vue";
+
+import "swiper/css";
+import "swiper/css/effect-coverflow";
 
 const props = defineProps<{
   data: any;
@@ -22,13 +25,21 @@ defineEmits(["onSlideIndexChange"]);
       bulletClass: 'pagination-bullet',
       bulletActiveClass: 'pagination-bullet-active',
     }"
-    :modules="[Pagination]"
+    :modules="[Pagination, EffectCoverflow]"
     :space-between="250"
     :auto-height="false"
     @slide-change-transition-end="
       (e) => $emit('onSlideIndexChange', e.activeIndex)
     "
     class="swiper-horizontal"
+    effect="coverflow"
+    :coverflowEffect="{
+      rotate: 50,
+      stretch: 0,
+      depth: 100,
+      modifier: 1,
+      slideShadows: false,
+    }"
   >
     <swiper-slide v-for="element in props.data" :key="element.titre">
       <section>

src/views/HomePage.vue

@@ -22,10 +22,15 @@ import { IonButton, IonPage } from "@ionic/vue";
 
 <style scoped>
 .main {
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   padding: 32px;
 
-  background-image: linear-gradient(-45deg, #7e33ac 0, #282828 60%);
+  background-image: linear-gradient(
+    -45deg,
+    #7e33ac 0,
+    var(--ion-color-light) 60%
+  );
 }
 
 .top-content {

src/views/RoomsPage.vue

@@ -6,9 +6,6 @@ import { CapacitorHttp } from "@capacitor/core";
 
 import IllusionSwiper from "@/components/IllusionSwiper.vue";
 
-import "swiper/css";
-import "swiper/css/pagination";
-
 const data = ref();
 const currentRoomIndex = ref(0);