refactor the functionalities section of the artist software page

assets/style/theme.scss

@@ -9,5 +9,33 @@ body {
   --secondary-color: #9edbdd;
   --on-secondary-color: #ffffff;
   --neutral-color-alt: #dbdbdb;
-  --onNeutral-color-alt: #000000;
+  --on-neutral-color-alt: #000000;
+
+  --standard-theme: #ffffff;
+  --on-standard-theme: #000000;
+
+  --alt-theme: #0e2d32;
+  --on-alt-theme: #ffffff;
+}
+
+body {
+  .alt-theme {
+    background-color: var(--alt-theme);
+    color: var(--on-alt-theme) !important;
+
+    .v-btn {
+      border-color: var(--on-alt-theme);
+    }
+  }
+  .alt-theme * {
+    color: var(--on-alt-theme) !important;
+  }
+
+  .alt-theme .inv-theme {
+    background-color: var(--standard-theme);
+    color: var(--on-standard-theme) !important;
+  }
+  .alt-theme .inv-theme * {
+    color: var(--on-standard-theme) !important;
+  }
 }

components/Common/Carousel/Fonctionnalite.vue

@@ -1,259 +1,178 @@
 <template>
-  <div id="Fonctionnalites">
-    <LayoutContainer v-if="!mdAndDown">
-      <div class="container-green">
-        <v-row class="custom-row">
-          <v-col cols="6">
-            <LayoutUISubTitle
-              title-color="#fff"
-              :iconSize="6"
-              :iconClasses="iconClasses"
-              :titleText="'Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution'"
-              :iconColor="iconColor"
-            />
-            <LayoutUITitle
-              title="Des fonctionnalités adaptées à vos besoins"
-              title-color="#fff"
-            />
-          </v-col>
-
-          <v-col cols="12" md="6" lg="6">
-            <div class="d-flex align-center">
-              <div class="carousel-button" @click="previousAction">
-                <i class="fas fa-chevron-left"></i>
-              </div>
-              <div class="carousel-button" @click="nextAction">
-                <i class="fas fa-chevron-right"></i>
-              </div>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="6">
+        <LayoutUISubTitle>
+          Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution
+        </LayoutUISubTitle>
+
+        <LayoutUITitle>
+          Des fonctionnalités adaptées à vos besoins
+        </LayoutUITitle>
+      </v-col>
+
+      <v-col cols="12" md="6" class="d-flex align-center justify-start">
+        <v-btn icon="fas fa-chevron-left" @click="previousAction" />
+        <v-btn icon="fas fa-chevron-right" @click="nextAction" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" md="12">
+        <Carousel
+          ref="carousel"
+          :items-to-show="4"
+          :items-to-scroll="1"
+          :wrap-around="true"
+        >
+          <Slide v-for="(card, index) in cards" :key="index" >
+            <div class="card-container">
+              <v-card class="inv-theme">
+                <v-img
+                  :src="card.logo"
+                  :alt="card.title"
+                  class="mx-auto"
+                />
+
+                <v-card-title>
+                  <h5>
+                    {{ card.title }}
+                  </h5>
+                </v-card-title>
+
+                <v-card-item>
+                  <v-card-text>
+                    <ul>
+                      <li
+                        v-for="item in card.list"
+                        :key="item"
+                      >
+                        <p>{{ item }}</p>
+                      </li>
+                    </ul>
+                  </v-card-text>
+
+                </v-card-item>
+                <div class="footer">
+                    <p
+                      v-for="option in card.options"
+                      :key="option"
+                    >
+                      {{ option }}
+                    </p>
+                  </div>
+              </v-card>
             </div>
-          </v-col>
-        </v-row>
-
-        <v-row class="custom-row">
-          <v-col cols="12" lg="12" md="12">
-            <Carousel
-              ref="functionCarousel"
-              :items-to-show="4"
-              :items-to-scroll="1"
-              class="carousel"
-              :wrap-around="true"
-            >
-              <Slide
-                v-for="(card, index) in cards"
-                :key="index"
-                :class="{
-                  card: true,
-                }"
-              >
-                <div class="card-container">
-                  <v-card>
-                    <v-img
-                      :src="card.logo"
-                      :alt="card.title"
-                      class="mx-auto card-img"
-                    />
-                    <v-card-title>
-                      <h5 class="card-title">{{ card.title }}</h5>
-                    </v-card-title>
-                    <v-card-item>
-                      <v-card-text class="review-description">
-                        <ul>
-                          <li
-                            class="list-detail"
-                            v-for="item in card.list"
-                            :key="item"
-                          >
-                            <p v-html="item"></p>
-                          </li>
-                        </ul>
-                      </v-card-text>
-                 
-                    </v-card-item>
-                    <div class="card-footer">
-                        <p
-                          v-for="option in card.options"
-                          :key="option"
-                        >
-                          {{ option }}
-                        </p>
-                      </div>
-                  </v-card>
-                </div>
-              </Slide>
-            </Carousel>
-          </v-col>
-        </v-row>
-      </div>
-    </LayoutContainer>
-  </div>
+          </Slide>
+        </Carousel>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useDisplay } from "vuetify";
-import { ref, computed } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
-const { smAndDown, mdAndDown } = useDisplay();
+import { PropType } from "@vue/runtime-core";
+import { Functionality } from "~/types/interface";
 
-const props = defineProps({
-  cards: Array,
-  itemsToScroll: {
-    type: Number,
-    default: 1,
-  },
-  itemsToShow: {
-    type: Number,
-    default: 5,
-  },
-});
+const { mdAndDown } = useDisplay();
 
-const functionCarousel = ref(null);
-
-const itemsToShow = computed(() => {
-  if (width.value >= 1280 && width.value <= 1920) {
-    return 3;
-  } else if (width.value > 1920) {
-    return 6;
+const props = defineProps({
+  cards: {
+    type: Array as PropType<Array<Functionality>>,
+    required: true
   }
-  return props.itemsToShow;
-});
+})
+
+const carousel: Ref<typeof Carousel | null> = ref(null);
 
 const nextAction = () => {
-  functionCarousel.value.next();
+  carousel.value!.next();
 };
 
 const previousAction = () => {
-  functionCarousel.value.prev();
+  carousel.value!.prev();
 };
 </script>
 
-<style scoped>
-.custom-row {
+<style scoped lang="scss">
+.v-row {
   width: 95%;
   margin-left: auto;
   margin-right: auto;
 }
 
-.card-img {
-  width: 5rem;
-  height: 3rem;
-  margin-top: 1rem;
-}
-.list-detail {
-  font-weight: 300;
-  font-size: 0.9rem;
-  line-height: 1.2rem;
-  margin-bottom: 1rem;
-  color: #000000;
-  word-break: none;
-}
-.card-title {
-  white-space: pre-wrap;
-}
-.carousel {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-
-
-.title-container {
-  display: flex;
-  align-items: center;
-}
-.subtitle-avantage {
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 18px;
-  color: white;
-}
-.subtitle {
-  color: white;
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 15px;
-  letter-spacing: 1.8px;
-  text-transform: uppercase;
-}
-
-.icon-title {
-  color: #fac20a;
-  margin-right: 0.5rem;
-}
-.card {
-  font-weight: 300;
-  transition: transform 0.3s;
-}
-
-
-.carousel-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.v-btn {
   width: 60px;
   height: 60px;
   background-color: transparent;
-  border: 2px solid #fff;
+  //color: var(--on-primary-color);
+  color: white;
+  border: 2px solid var(--on-primary-color);
   cursor: pointer;
-  margin-right: 1rem;
-  margin-top: 5rem;
+  border-radius: 0;
+  margin: 6px;
 }
 
-.carousel-button i {
-  color: #fff;
+.carousel {
+  margin-left: 2rem;
+  margin-right: 2rem;
 }
 
-.reviewer-structure {
-  font-weight: 300;
-  font-size: 0.8rem;
+.card-container {
   display: flex;
+  justify-content: center;
   align-items: center;
-  color: #071b1f;
-}
-
-.review-description {
-  text-align: left;
-}
-.card-footer {
-  position: absolute;
-  left: 0;
-  margin-left: .5rem;
-  font-size: .9rem;
+  margin-bottom: 3rem;
+  margin-right: 2rem;
 }
 
-.card {
+.v-card {
   border-radius: 1rem;
   transition: transform 0.3s;
-}
+  font-weight: 300;
+  min-height: 25rem !important;
 
-.v-card {
+  .v-img {
+    width: 5rem;
+    height: 3rem;
+    margin-top: 1rem;
+  }
 
-  min-height: 400px !important;
-  max-height: 400px !important;
-  min-width: 280px !important;
-  max-width: 280px !important;
-  border-radius: 1rem;
-  min-height: 25rem;
+  .v-card-title {
+    white-space: pre-wrap;
+  }
+
+  .v-card-item {
+    text-align: left;
+  }
+
+  li {
+    font-weight: 300;
+    font-size: 0.9rem;
+    line-height: 1.2rem;
+    margin-bottom: 1rem;
+    color: #000000;
+  }
+
+  .footer {
+    position: absolute;
+    left: 0;
+    margin-left: .5rem;
+    font-size: .9rem;
+  }
 }
 
 @media(min-width: 1800px){
   .v-card{
     min-height: 400px !important;
-  max-height: 400px !important;
-  min-width: 400px !important;
-  max-width: 400px !important;
+    max-height: 400px !important;
+    min-width: 400px !important;
+    max-width: 400px !important;
   }
 }
 
-.card-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 3rem;
-  margin-right: 2rem;
-}
 
-.container-green {
-  background-color: #0e2d32;
-}
 </style>

components/Logiciels/Artist/Comparatif.vue

@@ -1,25 +1,22 @@
 <template>
   <AnchoredSection id="comparative">
-    <div>
-      <LayoutContainer>
-        <LayoutUISubTitle
-            :iconSize="6"
-            :iconClasses="iconClasses"
-            :titleText="'Comparatif de nos solutions'"
-            :iconColor="'#fac20a'"
-          />
-          <LayoutUITitle
-            title="Choisissez la version qui vous convient !"
-          />
-          <CommonTableComparatif
-          :standardPrice="'14€'"
-          :premiumPrice="'18€'"
-          :color="'#0e2d32'"
-          :stripeColor="'#fac20a33'"
-          :tableData="tableData"
-        />
-      </LayoutContainer>
-    </div>
+    <LayoutContainer>
+      <LayoutUISubTitle>
+        Comparatif de nos solutions
+      </LayoutUISubTitle>
+
+      <LayoutUITitle>
+        Choisissez la version qui vous convient !
+      </LayoutUITitle>
+
+      <CommonTableComparatif
+        :standardPrice="'14€'"
+        :premiumPrice="'18€'"
+        :color="'#0e2d32'"
+        :stripeColor="'#fac20a33'"
+        :tableData="tableData"
+      />
+    </LayoutContainer>
   </AnchoredSection>
 </template>
 

components/Logiciels/Artist/Fonctionnalites.vue

@@ -2,31 +2,24 @@
   <AnchoredSection id="functionalities">
     <div>
       <LayoutContainer>
-        <div class="container-green">
-            <v-row>
-              <v-col cols="12">
-                <CommonCarouselFonctionnalite
-                  :cards="cards"
-                  :functionCarousel="functionCarousel"
-                  :itemsToShow="itemsToShow"
-                  pricingFromText="à partir de"
-                />
-              </v-col>
-            </v-row>
-        </div>
+        <v-row>
+          <v-col cols="12">
+            <CommonCarouselFonctionnalite
+              :cards="cards"
+            />
+          </v-col>
+        </v-row>
       </LayoutContainer>
     </div>
   </AnchoredSection>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
 import "vue3-carousel/dist/carousel.css";
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { Functionality } from "~/types/interface";
 
-const functionCarousel = ref(null);
-
-const cards = [
+const cards: Array<Functionality> = [
   {
     logo: "/images/logiciels/artist/fonctionnalites/Espaces_dedies.svg",
     title: "ESPACES DÉDIÉS *",
@@ -113,8 +106,3 @@ const cards = [
   },
 ];
 </script>
-<style scoped>
-.container-green {
-  background-color: #0e2d32;
-}
-</style>

pages/opentalent_artist.vue

@@ -18,7 +18,9 @@
 
     <LogicielsArtistAvantages />
 
-    <LogicielsArtistFonctionnalites />
+    <div v-if="mdAndUp" class="alt-theme">
+      <LogicielsArtistFonctionnalites />
+    </div>
 
     <LogicielsArtistComparatif />
 
@@ -39,6 +41,9 @@
 <script setup lang="ts">
 import { StickyMenuActionType } from "~/types/enum/layout";
 import { MenuScroll, StickyMenuAction } from "~/types/interface";
+import { useDisplay } from "vuetify";
+
+const { mdAndUp } = useDisplay()
 
 const menus: Array<MenuScroll> = [
   { anchor: "presentation", label: "Présentation" },

types/interface.d.ts

@@ -64,3 +64,10 @@ interface Benefit {
   image: string;
   isMemberCMF: boolean;
 }
+
+interface Functionality {
+  logo: string,
+  title: string,
+  list: Array<string>,
+  options?: Array<string>,
+}