refactor client carousel and introduce theming

assets/style/.gitignore

@@ -0,0 +1,2 @@
+*.css
+*.map

assets/css/main.css → assets/style/main.scss

@@ -1,11 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;700&display=swap');
 
-h1, h2, h3, h4, h5, h6, p, small, .btn-event, .btn-contact, .formation-btn, td, .button-faq, li, .btn-school, .btn-artist, .btn-manager, .name, .school, .view-button,
-.presentation-title, .subtitle
-.status {
-  font-family: "Barlow";
+h1, h2, h3, h4, h5, h6, p, small, .btn-event, .btn-contact, .formation-btn, td, .button-faq, li, .btn-school,
+.btn-artist, .btn-manager, .name, .school, .view-button, .presentation-title, .subtitle .status {
+  font-family: "Barlow", serif;
   font-style: normal;
 }
+
 .table-row {
   background-color: white;
   text-align: center;

assets/style/theme.scss

@@ -0,0 +1,12 @@
+
+body {
+  --neutral-color: #ffffff;
+  --on-neutral-color: #000000;
+  --primary-color: #0e2d32;
+  --on-primary-color: #ffffff;
+  --on-primary-color-alt: #caf5f4;
+  --secondary-color: #9edbdd;
+  --on-secondary-color: #ffffff;
+  --neutral-color-alt: #dbdbdb;
+  --onNeutral-color-alt: #000000;
+}

components/Common/Carousel/Clients.vue

@@ -0,0 +1,123 @@
+<!-- Carrousel des logos clients -->
+
+<template>
+  <LayoutContainer>
+    <!-- Titre -->
+    <v-row justify="center">
+      <h2 class="text-center">
+        <slot name="title">
+          Plus de <span class="alt-color">5000 structures</span> nous font confiance
+        </slot>
+      </h2>
+    </v-row>
+
+    <v-container>
+      <v-row>
+        <!-- Fléche de gauche -->
+        <v-btn
+          icon="fas fa-chevron-left"
+          @click="goToPrevious"
+        />
+
+        <!-- Carrousel -->
+        <Carousel
+          ref="carousel"
+          class="elevation-4 mb-12"
+          :items-to-show="4"
+          :items-to-scroll="2"
+        >
+          <Slide v-for="(item, index) in items" :key="index">
+            <div>
+              <v-img :src="item.src" alt="Card image cap" />
+            </div>
+          </Slide>
+        </Carousel>
+
+        <!-- Fléche de droite -->
+        <v-btn
+          icon="fas fa-chevron-right"
+          @click="goToNext"
+        />
+      </v-row>
+    </v-container>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+import { Carousel, Slide } from "vue3-carousel";
+import { PropType } from "@vue/runtime-core";
+
+const carousel: Ref<typeof Carousel | null> = ref(null);
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<Array<{ src: string }>>,
+    required: true
+  }
+});
+
+const goToPrevious = () => {
+  carousel.value!.prev();
+};
+
+const goToNext = () => {
+  carousel.value!.next();
+};
+</script>
+
+<!--suppress SassScssResolvedByNameOnly -->
+<style scoped lang="scss">
+.v-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 1300px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+h2 {
+  margin-bottom: 2rem;
+  font-style: normal;
+  text-align: center;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: var(--on-primary-color);
+  width: 50%;
+}
+
+.alt-color {
+  color: var(--on-primary-color-alt);
+}
+
+.v-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 60px;
+  background-color: transparent;
+  color: var(--on-primary-color);
+  border: 2px solid var(--on-primary-color);
+  cursor: pointer;
+  margin-right: 1rem;
+  margin-top: 1rem;
+  border-radius: 0;
+}
+
+.carousel {
+  background-color: white;
+  margin-top: 2rem;
+  border-radius: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  box-shadow: #071b1f;
+}
+
+.v-img {
+  height: 10rem;
+  width: 10rem;
+  margin: 2rem auto;
+}
+</style>

components/Common/Carousel/TrustCompanie.vue

@@ -1,142 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row justify="center">
-      <h2 class="title text-center" :style="{ color: titleColor }">
-        Plus de&nbsp;
-        <span :style="{ color: structureCountColor }">{{ structureCount }}</span
-        >&nbsp; {{ trustMessage }}
-      </h2>
-    </v-row>
-
-    <v-row justify="center"> </v-row>
-
-    <v-container>
-      <v-row>
-        <div
-          class="carousel-button"
-          @click="goPrevious"
-          :style="{
-            'border-color': carouselBorderColor,
-            color: carouselButtonColor,
-          }"
-        >
-          <i class="fas fa-chevron-left" :style="{ color: iconColor }" />
-        </div>
-        <Carousel
-          ref="carousel"
-          class="carrousel elevation-4 mb-12"
-          :items-to-show="4"
-          :items-to-scroll="2"
-        >
-          <Slide v-for="(item, index) in items" :key="index">
-            <div class="card">
-              <v-img class="card-img" :src="item.src" alt="Card image cap" />
-            </div>
-          </Slide>
-        </Carousel>
-        <div
-          class="carousel-button"
-          @click="goNext"
-          :style="{
-            'border-color': carouselBorderColor,
-            color: carouselButtonColor,
-          }"
-        >
-          <i class="fas fa-chevron-right" :style="{ color: iconColor }" />
-        </div>
-
-        
-      </v-row>
-    </v-container>
-  </LayoutContainer>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
-const carousel = ref(null);
-
-const props = defineProps({
-  titleColor: String,
-  carouselButtonColor: String,
-  carouselBorderColor: String,
-  items: Array,
-  iconColor: String,
-  trustMessage: {
-    type: String,
-    default: "nous font confiance",
-  },
-  structureCount: {
-    type: String,
-    default: "5000 structures",
-  },
-  structureCountColor: {
-    type: String,
-    default: "#c3e5e7",
-  },
-});
-
-const goPrevious = () => {
-  carousel.value.prev();
-};
-
-const goNext = () => {
-  carousel.value.next();
-};
-</script>
-
-<style scoped>
-.v-row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-width: 1300px;
-  margin-right: auto;
-  margin-left: auto;
-}
-.carousel-button i {
-  color: black;
-}
-
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 60px;
-  height: 60px;
-  background-color: transparent;
-  border: 2px solid black;
-  cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 1rem;
-}
-.card-img {
-  height: 10rem;
-  width: 10rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-.carousel {
-  background-color: white;
-  margin-top: 2rem;
-  border-radius: 20px;
-  margin-left: auto;
-  margin-right: auto;
-  box-shadow: #071b1f;
-}
-
-.title {
-  margin-bottom: 2rem;
-  font-style: normal;
-  text-align: center;
-  color: black;
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  text-align: center;
-  color: #0e2d32;
-  width: 50%;
-}
-</style>

components/Home/Reviews.vue

@@ -1,53 +1,61 @@
 <template>
   <LayoutContainer>
-    <div :class="!smAndDown ? 'container-color' : 'container-color-md'">
+    <div class="container-1">
       <div class="d-flex justify-center align-center flex-column">
-        <v-icon size="6" class="fa-solid fa-circle icon-title" />
-        <h6 class="small-title">Avis Clients</h6>
+        <v-icon
+          icon="fa-solid fa-circle"
+          size="6"
+        />
+        <h6>
+          Avis Clients
+        </h6>
       </div>
 
-      <h1 class="title-review" :class="smAndDown ? 'mb-12 ' : ''">
+      <h3>
         C'est vous qui le dites
-      </h1>
+      </h3>
     </div>
 
-    <div v-if="!smAndDown" class="container-green">
+    <!-- Ecrans larges -->
+    <div v-if="mdAndUp" class="container-2">
+
+      <!-- Partie 1 : Avis clients -->
       <v-row justify="center">
         <div class="col-review">
           <v-col cols="6">
-            <v-card class="review-card left mx-auto">
+            <v-card class="left mx-auto">
               <v-card-title>
-                <span class="review-name">Patrice CATHELIN</span>
+                Patrice CATHELIN
               </v-card-title>
 
               <v-card-text>
-                <p class="description-review">
+                <p>
                   C'est un logiciel très bien conçu et efficace avec une équipe
                   ouverte, dynamique et à l'écoute. L’assistance est très
                   réactive, j'ai toujours eu une réponse rapide à mes besoins,
                   ce qui est fort appréciable.
                 </p>
               </v-card-text>
-              <div class="card-footer">
-                <small class="status"
-                  >Directeur administratif & pédagogique</small
-                >
 
-                <small class="structure"
-                  >Conservatoire de Musique & de Danse de Sens (78)</small
-                >
+              <div class="card-footer">
+                <small class="status">
+                  Directeur administratif & pédagogique
+                </small>
+                <small class="structure">
+                  Conservatoire de Musique & de Danse de Sens (78)
+                </small>
               </div>
             </v-card>
           </v-col>
 
           <v-col cols="6">
-            <v-card class="review-card right mx-auto">
+            <v-card class="right mx-auto">
               <v-card-title>
-                <span class="review-name">Karine GIRAUD </span>
+                Karine GIRAUD
               </v-card-title>
 
               <v-card-text>
-                <p class="description-review">
+                <p>
                   Étant présente depuis presque le début, je suis fière d'avoir
                   vu grandir ce logiciel et d'avoir évoluée avec lui. De plus,
                   je me suis sentie écoutée lors de mes propositions
@@ -58,11 +66,13 @@
               </v-card-text>
 
               <div class="card-footer">
-                <small class="status">Secrétaire administrative</small>
+                <small class="status">
+                  Secrétaire administrative
+                </small>
 
                 <small class="structure">
-                  Association Musicale Sainte Cécile de Lagord (17)</small
-                >
+                  Association Musicale Sainte Cécile de Lagord (17)
+                </small>
               </div>
             </v-card>
           </v-col>
@@ -72,13 +82,13 @@
       <v-row justify="center">
         <div class="col-review">
           <v-col cols="6">
-            <v-card class="review-card left mx-auto">
+            <v-card class="left mx-auto">
               <v-card-title>
-                <span class="review-name">Laurent BEL</span>
+                Laurent BEL
               </v-card-title>
 
               <v-card-text>
-                <p class="description-review">
+                <p>
                   Logiciel très complet qui permet de faire beaucoup de choses.
                   J’apprécie particulièrement la réactivité, la bienveillance et
                   le fait que l’équipe soit à l'écoute pour faire évoluer
@@ -87,26 +97,27 @@
                   face à un problème rencontré..
                 </p>
               </v-card-text>
+
               <div class="card-footer">
-                <small class="status"
-                  >Directeur administratif & pédagogique
+                <small class="status">
+                  Directeur administratif & pédagogique
                 </small>
 
                 <small class="structure">
-                  École de Musique EPIC Musique en 4 Rivières (74)</small
-                >
+                  École de Musique EPIC Musique en 4 Rivières (74)
+                </small>
               </div>
             </v-card>
           </v-col>
 
           <v-col cols="6">
-            <v-card class="review-card right mx-auto">
+            <v-card class="right mx-auto">
               <v-card-title>
-                <span class="review-name">Philippe BORY</span>
+                Philippe BORY
               </v-card-title>
 
               <v-card-text>
-                <p class="description-review">
+                <p>
                   Opentalent est une entreprise avec de vraies valeurs humaines,
                   à l'écoute de chaque structure et qui ne cesse de s'améliorer
                   pour toujours coller aux besoins de ses clients. Plus qu'une
@@ -114,30 +125,32 @@
                   au quotidien.
                 </p>
               </v-card-text>
+
               <div class="card-footer">
-                <small class="status">Personnel administratif</small>
+                <small class="status">
+                  Personnel administratif
+                </small>
 
                 <small class="structure">
-                  École d'Arts de Saint-Michel-sur-Orge (91)</small
-                >
+                  École d'Arts de Saint-Michel-sur-Orge (91)
+                </small>
               </div>
             </v-card>
           </v-col>
         </div>
       </v-row>
 
+      <!-- Partie 1 : Carrousel logos clients -->
       <div class="content-review">
-        <CommonCarouselTrustCompanie
+        <CommonCarouselClients
           :items="items"
-          :title-color="'#fff'"
-          :carousel-border-color="'#fff'"
-          :carousel-button-color="'#fff'"
-          :icon-color="'#fff'"
+          color="#fff"
         />
       </div>
     </div>
 
-    <div v-if="smAndDown">
+    <!-- Petits écrans -->
+    <div v-else>
       <v-row>
         <v-col cols="12">
           <Carousel :itemsToShow="1" :wrapAround="true" ref="reviewCaroussel">
@@ -191,13 +204,14 @@
   </LayoutContainer>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
 
-const { smAndDown } = useDisplay();
+const { smAndDown, mdAndUp } = useDisplay();
+
 const reviewCaroussel = ref(null);
 
 const state = ref({
@@ -263,6 +277,113 @@ const items = ref([
 </script>
 
 <style scoped>
+
+.container-1 {
+  background-color: #f8f8f8;
+  height: 22rem;
+
+  .v-icon {
+    margin-top: 1rem;
+    color: #64afb7;
+  }
+
+  h6 {
+    font-size: 1rem;
+    line-height: 1rem;
+    margin-top: 1rem;
+    text-align: center;
+    letter-spacing: 2.16px;
+    text-transform: uppercase;
+    margin-bottom: 0.5rem;
+  }
+
+  h3 {
+    font-size: 2rem;
+    line-height: 42px;
+    text-align: center;
+    color: #071b1f;
+  }
+
+  @media (max-width: 600px) {
+    margin-bottom: 24px;
+  }
+}
+
+.container-2 {
+  background-color: #0e2d32;
+  height: 60rem;
+
+  .col-review {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .v-card {
+      padding-top: 1rem;
+      width: 21rem;
+      min-height: 21rem;
+      max-height: 21rem;
+      margin-bottom: 0.9rem;
+
+      .v-card-title {
+        margin-left: 1rem;
+        font-weight: 500;
+        font-family: "Barlow", serif;
+        font-style: normal;
+        font-size: 1.4rem;
+        color: #9edbdd;
+      }
+
+      .v-card-text p {
+        text-align: justify !important;
+        height: 10rem;
+        font-size: 1rem;
+        color: #071b1f;
+        margin: 0 1rem 1rem 1rem;
+        line-height: 20px;
+      }
+
+      .card-footer {
+        display: flex;
+        flex-direction: column;
+        margin-top: 1rem;
+
+        small {
+          position: absolute;
+          display: flex;
+          align-items: center;
+          bottom: 0;
+          right: 0;
+          font-weight: 600;
+          width: 90%;
+          color: #071b1f;
+        }
+
+        .status {
+          margin-top: 1rem;
+          font-size: 0.7rem;
+          line-height: 15px;
+          letter-spacing: 0.18em;
+          text-transform: uppercase;
+          margin-bottom: 2rem;
+        }
+
+        .structure {
+          font-size: 0.8rem;
+          margin-bottom: 1rem;
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+
+
+
 .custom-controls div {
   width: 0.6rem;
   height: 0.6rem;
@@ -297,16 +418,6 @@ const items = ref([
 .content-review {
   margin-top: -7rem;
 }
-.card-footer {
-  display: flex;
-  flex-direction: column;
-  margin-top: 1rem;
-}
-.col-review {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 
 .left {
   bottom: 12rem;
@@ -318,94 +429,6 @@ const items = ref([
   bottom: 7rem;
 }
 
-.icon-title {
-  margin-top: 1rem;
-  color: #64afb7;
-}
 
-.container-green {
-  background-color: #0e2d32;
-  height: 60rem;
-}
 
-.status {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  margin-top: 1rem;
-  font-weight: 600;
-  font-size: 0.7rem;
-  line-height: 15px;
-  width: 90%;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  margin-bottom: 2rem;
-  color: #071b1f;
-}
-
-.structure {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  font-weight: 600;
-  font-size: 0.8rem;
-  width: 90%;
-  display: flex;
-  align-items: center;
-  color: #071b1f;
-  margin-bottom: 1rem;
-}
-.description-review {
-  text-align: justify !important;
-  height: 10rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: #071b1f;
-  margin-left: 1rem;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  line-height: 20px;
-}
-
-.container-color {
-  background: #f8f8f8;
-  height: 22rem;
-}
-
-.container-color-md {
-}
-.review-card {
-  padding-top: 1rem;
-  width: 21rem;
-  min-height: 21rem;
-  max-height: 21rem;
-  margin-bottom: 0.9rem;
-}
-.review-name {
-  margin-left: 1rem;
-  font-weight: 500;
-  font-family: "Barlow";
-  font-style: normal;
-  font-size: 1.4rem;
-  color: #9edbdd;
-}
-
-.small-title {
-  font-size: 1rem;
-  line-height: 1rem;
-  margin-top: 1rem;
-  text-align: center;
-  letter-spacing: 2.16px;
-  text-transform: uppercase;
-  margin-bottom: 0.5rem;
-}
-
-.title-review {
-  font-size: 2rem;
-  line-height: 42px;
-  text-align: center;
-  color: #071b1f;
-}
 </style>

components/Logiciels/Artist/Formations.vue

@@ -85,18 +85,18 @@
       <v-row />
 
       <v-row />
-      <CommonCarouselTrustCompanie
-        :items="items"
-        :trustMessage="'nous ont déjà adoptées'"
-        :structureCount="'3400 structures'"
-        :structureCountColor="'#fac20a'"
-      />
+
+      <CommonCarouselClients :items="items" >
+        <template v-slot:title>
+          Plus de <span class="alt-color">3400 structures</span> nous ont déjà adoptées
+        </template>
+      </CommonCarouselClients>
     </LayoutContainer>
   </div>
 </template>
 
-<script setup>
-const items = ref([
+<script setup lang="ts">
+const items: Ref<Array<{ src: string }>> = ref([
   { src: "/images/reviews/artist/review1.jpeg" },
   { src: "/images/reviews/artist/review2.jpg" },
   { src: "/images/reviews/artist/review3.jpeg" },
@@ -106,11 +106,15 @@ const items = ref([
 ]);
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .v-container {
   padding: 0 !important;
 }
 
+.alt-color {
+  color: var(--on-primary-color-alt);
+}
+
 @media (min-width: 1000px) {
   .custom-row {
     margin-right: auto;

components/Logiciels/School/Formations.vue

@@ -87,7 +87,8 @@
         </v-row>
       </v-container>
       <v-row />
-      <CommonCarouselTrustCompanie :items="items" />
+
+      <CommonCarouselClients :items="items" />
     </LayoutContainer>
 </template>
 

nuxt.config.ts

@@ -37,7 +37,10 @@ export default defineNuxtConfig({
       apiBaseUrl: "",
     },
   },
-  css: ["~/assets/css/main.css"],
+  css: [
+    "~/assets/style/main.scss",
+    "~/assets/style/theme.scss",
+  ],
   hooks: {
     "builder:watch": console.log,
   },

package.json

@@ -45,7 +45,7 @@
     "ohmyfetch": "^0.4.21",
     "pinia": "^2.0.33",
     "pinia-orm": "^1.5.1",
-    "sass": "^1.59.3",
+    "sass": "^1.70.0",
     "scss": "^0.2.4",
     "three": "^0.157.0",
     "typeface-barlow": "^1.1.13",

pages/opentalent_artist.vue

@@ -1,29 +1,31 @@
 <template>
-  <LayoutNavigation />
-  <LogicielsArtistBanner />
-  <CommonMenuScroll :menus="menus" class="mb-6" />
+  <div class="theme-artist">
+    <LayoutNavigation />
+    <LogicielsArtistBanner />
+    <CommonMenuScroll :menus="menus" class="mb-6" />
 
-  <CommonStickyMenu :actions="stickyMenuActions" />
+    <CommonStickyMenu :actions="stickyMenuActions" />
 
-  <LogicielsArtistPresentation />
+    <LogicielsArtistPresentation />
 
-  <LogicielsArtistAvantages />
+    <LogicielsArtistAvantages />
 
-  <LogicielsArtistFonctionnalites />
+    <LogicielsArtistFonctionnalites />
 
-  <LogicielsArtistComparatif />
+    <LogicielsArtistComparatif />
 
-  <LogicielsArtistAbonnement />
+    <LogicielsArtistAbonnement />
 
-  <LogicielsArtistFormations />
+    <LogicielsArtistFormations />
 
-  <LogicielsArtistReviews />
+    <LogicielsArtistReviews />
 
-  <LayoutFAQ />
+    <LayoutFAQ />
 
-  <LayoutFooterPrefooter />
+    <LayoutFooterPrefooter />
 
-  <LayoutFooter />
+    <LayoutFooter />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -59,5 +61,10 @@ const stickyMenuActions: Array<StickyMenuAction> = [
 ];
 </script>
 
-<style scoped>
+<style lang="scss">
+.theme-artist {
+  --primary-color: #ffffff;
+  --on-primary-color: #0e2d32;
+  --on-primary-color-alt: #fac20a;
+}
 </style>

pages/opentalent_school.vue

@@ -1,31 +1,33 @@
 <template>
-  <LayoutNavigation />
+  <div class="theme-school">
+    <LayoutNavigation />
 
-  <LogicielsSchoolBanner />
+    <LogicielsSchoolBanner />
 
-  <CommonMenuScroll :menus="menus" class="mb-6" />
+    <CommonMenuScroll :menus="menus" class="mb-6" />
 
-  <CommonStickyMenu :actions="stickyMenuActions" />
+    <CommonStickyMenu :actions="stickyMenuActions" />
 
-  <LogicielsSchoolPresentation />
+    <LogicielsSchoolPresentation />
 
-  <LogicielsSchoolAvantages />
+    <LogicielsSchoolAvantages />
 
-  <LogicielsSchoolFonctionnalites />
+    <LogicielsSchoolFonctionnalites />
 
-  <LogicielsSchoolComparatif />
+    <LogicielsSchoolComparatif />
 
-  <LogicielsSchoolProjet />
+    <LogicielsSchoolProjet />
 
-  <LogicielsSchoolFormations />
+    <LogicielsSchoolFormations />
 
-  <LogicielsSchoolReviews />
+    <LogicielsSchoolReviews />
 
-  <LayoutFAQ  />
+    <LayoutFAQ  />
 
-  <LayoutFooterSolutionsFooter />
+    <LayoutFooterSolutionsFooter />
 
-  <LayoutFooter />
+    <LayoutFooter />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -76,5 +78,10 @@ const stickyMenuActions: Array<StickyMenuAction> = [
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.theme-school {
+  --primary-color: #ffffff;
+  --on-primary-color: #0e2d32;
+  --on-primary-color-alt: #c3e5e7;
+}
 </style>

yarn.lock

@@ -3423,10 +3423,10 @@
     picocolors "^1.0.0"
     pretty-format "^27.5.1"
 
-"@vue-leaflet/vue-leaflet@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.9.0.tgz#f30bd18fedc6d9ef7bf4c6cc02f6fa7009658f6b"
-  integrity sha512-B5sxleSIFP0RK+7418BQirZ7oXa0t2dZrwfGI/0ABgaFLCWmHWP26w4soqrF5MlpThvhieAIUVIVuTdgXUenmA==
+"@vue-leaflet/vue-leaflet@^0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz#17330515629d500ac113009a49f8cf98d140e8cc"
+  integrity sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==
   dependencies:
     vue "^3.2.25"
 
@@ -7484,7 +7484,7 @@ leaflet.markercluster@^1.5.3:
   resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
   integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
 
-leaflet@^1.9.4:
+leaflet@^1.9.3:
   version "1.9.4"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
   integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
@@ -9568,10 +9568,10 @@ sass-loader@^13.2.1:
     klona "^2.0.6"
     neo-async "^2.6.2"
 
-sass@^1.59.3:
-  version "1.59.3"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.59.3.tgz#a1ddf855d75c70c26b4555df4403e1bbf8e4403f"
-  integrity sha512-QCq98N3hX1jfTCoUAsF3eyGuXLsY7BCnCEg9qAact94Yc21npG2/mVOqoDvE0fCbWDqiM4WlcJQla0gWG2YlxQ==
+sass@^1.70.0:
+  version "1.70.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.70.0.tgz#761197419d97b5358cb25f9dd38c176a8a270a75"
+  integrity sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"