refact HomeCarousel component

components/Home/Caroussel.vue

@@ -1,114 +1,115 @@
+<!--
+Carrousel de la page d'accueil
+-->
 <template>
-  <LayoutContainer :class="mdAndDown ? 'mt-12' : ''">
-    <LayoutUITitlePage
-      title="LOGICIELS CULTURELS"
-      subtitle="UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE"
-    />
-    <v-carousel
-      v-if="!mdAndDown"
-      ref="carousel"
-      v-model="activeIndex"
-      :show-arrows="false"
-      :hide-delimiter-background="true"
-      :show-delimiters="false"
-      :touch="true"
-      :wrap-around="true"
-      :interval="5000"
+  <v-carousel
+    ref="carousel"
+    v-model="activeIndex"
+    :show-arrows="false"
+    :hide-delimiter-background="true"
+    :show-delimiters="false"
+    :touch="true"
+    :wrap-around="true"
+    :interval="5000"
+  >
+    <v-carousel-item
+      v-for="(item, index) in carouselItems"
+      :key="index"
     >
-      <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
-        <v-row>
-          <v-col cols="12" md="12" lg="6" sm="12">
-            <v-img class="logo" :src="item.logo" />
-
-            <p
-              v-html="item.description"
-              class="description"
-              style="text-align: justify"
-            ></p>
-
-            <v-row class="align-start">
-              <nuxt-link :to="item.link">
-                <v-btn :class="item.buttonClass">
-                  En savoir plus
-                  <i
-                    class="fas fa-arrow-right"
-                    style="color: black; margin-left: 8px"
-                  ></i>
-                </v-btn>
-              </nuxt-link>
-            </v-row>
-          </v-col>
-
-          <v-col cols="12" md="12" lg="6" sm="12">
-            <v-row class="justify-end">
-              <div
-                class="background-rectangle"
-                :style="{ backgroundColor: item.color }"
-              />
-              <v-card class="card" elevation="5">
-                <v-img
-                  class="profile-image"
-                  :src="item.avatar"
-                  alt="Profile Image"
-                  contain
-                  rounded
-                />
-                <v-card-text>
-                  <v-card-title class="name">
-                    {{ item.name }}
-
-                    <p class="school">
-                      {{ item.school }}
-                    </p>
-                  </v-card-title>
-                  <p class="status">
-                    {{ item.status }}
-                  </p>
-                </v-card-text>
-              </v-card>
-
+      <v-row>
+        <!-- Partie description (logo, description, bouton 'en savoir plus') -->
+        <v-col cols="12" lg="6" class="col presentation">
+          <v-img
+            :src="item.logo"
+            class="logo"
+          />
+
+          <p class="description">
+            {{ item.description }}
+          </p>
+
+          <v-row class="align-start pl-4">
+            <v-btn
+              :to="item.link"
+              append-icon="fas fa-arrow-right"
+              :class="['learn-more-btn', item.buttonClass]"
+            >
+              En savoir plus
+            </v-btn>
+          </v-row>
+        </v-col>
+
+        <!-- Partie Illustration -->
+        <v-col cols="12" lg="6" class="col illustration">
+          <v-row>
+            <div
+              class="background-rectangle"
+              :style="{ backgroundColor: item.color }"
+            />
+
+            <v-card class="card" elevation="5">
               <v-img
-                :src="item.image"
-                :class="smAndDown ? 'image-sm' : 'image'"
+                class="profile-image"
+                :src="item.avatar"
+                alt="Profile Image"
+                contain
+                rounded
               />
-            </v-row>
-          </v-col>
-        </v-row>
-      </v-carousel-item>
-
-      <div class="custom-controls">
-        <div
-          v-for="(item, index) in carouselItems"
-          :key="index"
-          :class="{ 'active-control': index === activeIndex }"
-          @click="changeSlide(index)"
-        />
-      </div>
-    </v-carousel>
-
-  </LayoutContainer>
+              <v-card-text>
+                <v-card-title class="name">
+                  {{ item.name }}
+
+                  <p class="school">
+                    {{ item.school }}
+                  </p>
+                </v-card-title>
+
+                <p class="status">
+                  {{ item.status }}
+                </p>
+              </v-card-text>
+            </v-card>
+
+            <v-img
+              :src="item.image"
+              :class="smAndDown ? 'image-sm' : 'image'"
+            />
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-carousel-item>
+
+    <div class="custom-controls">
+      <!--suppress JSUnusedLocalSymbols -->
+      <div
+        v-for="(_, index) in carouselItems"
+        :key="index"
+        :class="{ 'active-control': index === activeIndex }"
+        @click="setActiveIndex(index)"
+      />
+    </div>
+  </v-carousel>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
+
 import { useDisplay } from "vuetify";
-const { mdAndDown } = useDisplay();
+import { CarouselItem } from "~/types/interface";
+const { smAndDown, mdAndDown } = useDisplay();
 
-let activeIndex = ref(0);
+// Index de la slide active
+let activeIndex: Ref<number> = ref(0);
 
-const changeSlide = (index) => {
+const setActiveIndex = (index: number) => {
   activeIndex.value = index;
 };
 
-const carouselItems = ref([
+const carouselItems: Ref<Array<CarouselItem>> = ref([
   {
     logo: "/images/logo/logiciels/School-noir.png",
-    description_mobile:
-      "Pour les petits comme pour les GRANDS <br> établissements d’enseignement artistique <br> tels que les écoles de musique, de danse, <br> de théâtre, d'art, de cirque et conservatoire.",
     description:
       "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.<br> Il permet la gestion au quotidien et en temps réel de votre établissement, de gérer vos élèves et vos professeurs, vos emplois du temps, le suivi pédagogique, vos salles, la facturation et les encaissements…",
     buttonClass: "btn-school",
-    buttonClassMobile: "btn-school-mobile",
     image:
       "/images/Home_logiciel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.png",
     color: "rgba(32, 147, 190, 0.4)",
@@ -149,125 +150,13 @@ const carouselItems = ref([
 ]);
 </script>
 
-<style scoped>
-.btn-school-mobile {
-  background: rgba(32, 147, 190, 0.4);
-  border-radius: 0.5rem;
-  margin-left: 1rem;
-  padding: 15px;
-  gap: 9px;
-  font-weight: 700;
-  font-size: 0.7rem;
-  line-height: 15px;
-  width: 10rem;
-  height: 2.5rem;
-  margin-top: 1rem;
-}
+<style scoped lang="scss">
+
+/* ============= CAROUSEL ===============  */
 :deep(.v-carousel__controls) {
   display: none;
 }
 
-/* ============= TITLE ===============  */
-.title {
-  font-size: 4rem;
-  line-height: 3.5rem;
-  letter-spacing: 1.1rem;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
-.subtitle {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  letter-spacing: 0.5rem;
-  margin-bottom: 8rem;
-}
-
-/* ============= CARD ===============  */
-.card {
-  position: relative;
-  left: 10%;
-  height: 100%;
-  width: 27%;
-  border-radius: 1rem;
-  margin-top: 1rem;
-}
-
-.profile-image {
-  width: 100%;
-  height: 12vh;
-}
-
-.name {
-  text-align: center;
-  font-size: 0.9rem;
-  white-space: normal;
-  padding: 0 !important;
-}
-.school,
-.status {
-  text-align: center;
-  white-space: normal;
-}
-
-.school {
-  color: #888888;
-  margin-top: -0.8rem;
-  font-weight: normal !important;
-  font-size: 0.8rem !important;
-  margin-top: 0.2px;
-  line-height: 1rem !important;
-}
-
-.status {
-  text-transform: uppercase;
-  font-weight: bold;
-  color: black !;
-  font-size: 100%;
-  margin-top: 0.8rem;
-}
-/* ============= RECTANGLE ===============  */
-.background-rectangle {
-  position: absolute;
-  width: 70%;
-  height: 20rem;
-  left: 72%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 200px 0px 0px 15rem;
-  z-index: -1;
-
-  /* ============= LOGO ===============  */
-}
-.logo {
-  width: 20rem;
-  margin-top: 10px;
-  margin-left: 4rem;
-}
-.logo-md {
-  width: 20rem;
-  margin-top: 10px;
-}
-.description {
-  text-align: left;
-  margin-left: 7rem;
-  width: 25vw;
-  margin-bottom: 1rem;
-}
-
-.desccription-md {
-  width: 20rem;
-  margin-top: 10px;
-}
-
-/* ============= CAROUSEL ===============  */
-
-.carousel-md{
-  height: 100%;
-  width: 100%;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
 .custom-controls {
   position: absolute;
   top: 50%;
@@ -276,54 +165,129 @@ const carouselItems = ref([
   display: flex;
   flex-direction: column;
   gap: 1vh;
-}
-
-.image {
-  height: 35rem;
-  right: 5rem;
-}
-
-
-.custom-controls div {
-  width: 0.6rem;
-  height: 0.6rem;
-  border-radius: 50%;
-  background-color: grey;
-  cursor: pointer;
-  margin-bottom: 0.5rem;
-}
-
-.custom-controls .active-control {
-  background-color: #000;
-  margin-right: 2rem;
-}
-
-/* ============= BUTTON ===============  */
-
-.btn-school {
-  background: rgba(32, 147, 190, 0.4);
-}
 
-.btn-artist {
-  background: rgba(250, 194, 10, 0.4);
+  div {
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 50%;
+    background-color: grey;
+    cursor: pointer;
+    margin-bottom: 0.5rem;
+  }
+
+  .active-control {
+    background-color: #000;
+    margin-right: 2rem;
+  }
 }
 
-.btn-manager {
-  background: rgba(216, 5, 11, 0.4);
+/* ============= Colonne gauche - Description ===============  */
+.col.presentation {
+  .logo {
+    width: 20rem;
+    margin-top: 10px;
+    margin-left: 6rem;
+  }
+
+  .description {
+    text-align: justify;
+    margin-top: 8px;
+    margin-left: 7rem;
+    width: 25vw;
+    margin-bottom: 1rem;
+  }
+
+  .learn-more-btn {
+    display: flex;
+    align-items: center;
+    margin-top: 16px;
+    border-radius: 0.5rem;
+    padding: 15px;
+    gap: 9px;
+    font-weight: 700;
+    font-size: 0.7rem;
+    line-height: 15px;
+    width: 10rem;
+    height: 2.5rem;
+    margin-left: 7rem;
+  }
+
+  .learn-more-btn :deep(.v-btn__append) {
+    color: black;
+    margin-left: 0;
+  }
+
+  .btn-school {
+    background: rgba(32, 147, 190, 0.4);
+  }
+
+  .btn-artist {
+    background: rgba(250, 194, 10, 0.4);
+  }
+
+  .btn-manager {
+    background: rgba(216, 5, 11, 0.4);
+  }
 }
 
-.btn-school,
-.btn-artist,
-.btn-manager {
-  border-radius: 0.5rem;
-  margin-left: 2vw;
-  padding: 15px;
-  gap: 9px;
-  font-weight: 700;
-  font-size: 0.7rem;
-  line-height: 15px;
-  width: 10rem;
-  height: 2.5rem;
-  margin-left: 7rem;
+/* ============= Colonne droite - Illustration ===============  */
+.col.illustration {
+  .card {
+    position: relative;
+    left: 10%;
+    height: 100%;
+    width: 27%;
+    border-radius: 1rem;
+    margin-top: 1rem;
+  }
+
+  .profile-image {
+    width: 100%;
+    height: 12vh;
+  }
+
+  .name {
+    text-align: center;
+    font-size: 0.9rem;
+    white-space: normal;
+    padding: 0 !important;
+  }
+
+  .school, .status {
+    text-align: center;
+    white-space: normal;
+  }
+
+  .school {
+    color: #888888;
+    font-weight: normal !important;
+    font-size: 0.8rem !important;
+    margin-top: 0.2px;
+    line-height: 1rem !important;
+  }
+
+  .status {
+    text-transform: uppercase;
+    font-weight: bold;
+    color: black;
+    font-size: 100%;
+    margin-top: 0.8rem;
+  }
+
+  .background-rectangle {
+    position: absolute;
+    width: 70%;
+    height: 20rem;
+    left: 72%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 200px 0px 0px 15rem;
+    z-index: -1;
+  }
+
+  .image {
+    height: 35rem;
+    right: 5rem;
+  }
 }
 </style>

components/Layout/UI/Title.vue

@@ -1,30 +1,30 @@
 <template>
   <LayoutContainer>
-    <div>
-      <h2 class="title" :style="{ color: titleColor }">{{ title }}</h2>
-    </div>
+    <h2
+      class="title"
+      :style="{ color: titleColor }"
+    >
+      {{ title }}
+    </h2>
   </LayoutContainer>
 </template>
 
-<script setup>
-
-const props = defineProps({
-  title: String,
-  titleColor: {
-    type: String,
-    default: "#0E2D32",
-  },
-});
+<script setup lang="ts">
+  const props = defineProps({
+    title: String,
+    titleColor: {
+      type: String,
+      default: "#0E2D32",
+    },
+  });
 </script>
 
-<style scoped>
-.title {
-  font-weight: 600;
-  font-size: 3rem;
-  line-height: 3rem;
-  color: inherit;
-  margin-left: 1rem;
-  color: var(--Vert-90, #0E2D32);
-  width: 35rem;
-}
+<style scoped lang="scss">
+  .title {
+    font-weight: 600;
+    font-size: 3rem;
+    line-height: 3rem;
+    margin-left: 1rem;
+    width: 35rem;
+  }
 </style>

pages/index.vue

@@ -3,7 +3,13 @@
 
   <CommonStickyMenu />
 
-  <HomeCaroussel />
+  <LayoutUITitlePage
+    title="LOGICIELS CULTURELS"
+    subtitle="UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE"
+    :class="mdAndDown ? 'mt-12' : ''"
+  />
+
+  <HomeCaroussel v-if="!mdAndDown"/>
 
   <HomePromotion />
 

types/interface.d.ts

@@ -17,3 +17,16 @@ interface MainMenuItem {
   to?: string,
   children?: Array<MainMenuItem>
 }
+
+interface CarouselItem {
+  logo: string,
+  description: string,
+  buttonClass: string,
+  image: string,
+  color: string,
+  link: string,
+  name: string,
+  school: string,
+  status: string,
+  avatar: string
+}