refact HomePromotion component

.env.test

@@ -0,0 +1,6 @@
+NUXT_ENV=test
+NUXT_DEBUG=1
+DEBUG=1
+
+NUXT_API_BASE_URL=https://api.test.opentalent.fr
+NUXT_PUBLIC_API_BASE_URL=https://api.test.opentalent.fr

README.md

@@ -6,9 +6,11 @@ Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introdu
 
 Make sure to install the dependencies:
 
-````bash
-# yarn
-yarn install
+    yarn install
+
+Créer le symlink vers le bon fichier env (remplacer <environnement> par l'env courant):
+
+    ln -s .env.<environnement> .env
 
 ## Development Server
 

components/Common/StickyMenu.vue

@@ -129,7 +129,7 @@ const onActionClick = (action: StickyMenuAction) => {
 .sticky-menu.lateral {
   position: sticky;
   right: 0;
-  top: 50%;
+  top: 60%;
   transform: translateY(-50%);
   float: right;
 

components/Home/Promotion.vue

@@ -1,32 +1,40 @@
 <template>
   <LayoutContainer>
-    <v-row>
-      <v-col col="12" :class="mdAndDown ? 'col-gestion' : 'col-gestion-md'">
+    <v-row class="gestion">
+      <v-col>
         <div class="d-flex justify-center align-center flex-column">
-          <v-icon size="6" class="fa-solid fa-circle icon-title" />
-          <h5 class="subtitle">GESTION ET PROMOTION</h5>
+          <v-icon
+            size="6"
+            icon="fas fa-circle"
+          />
+          <h5>
+            GESTION ET PROMOTION
+          </h5>
         </div>
+
         <v-row>
-          <p :class="smAndDown ? 'text-gestion-sm' : 'text-gestion'">
-            <span class="span-color">Simplifiez</span>-vous la vie avec un outil
-            <span class="d-inline-flex align-center">
+          <p class="text-block">
+            <span class="highlight">Simplifiez</span>-vous la vie avec un outil
+
+            <span class="inline-pic-container">
               <v-img
                 src="/images/Home_logiciel/ecole_de_musique-piano.jpg"
-                :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
               />
             </span>
+
             tout en un pour la gestion et la promotion
-            <span class="d-inline-flex align-center">
+
+            <span class="inline-pic-container">
               <v-img
                 src="/images/Home_logiciel/ecole_de_danse-danseuse.jpg"
-                :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
               />
             </span>
+
             , de votre structure culturelle.
-            <span class="d-inline-flex align-center">
+
+            <span class="inline-pic-container">
               <v-img
                 src="/images/Home_logiciel/ecole_de_cirque.jpg"
-                :class="smAndDown ? 'rectangle-img-sm' : 'rectangle-img'"
               />
             </span>
           </p>
@@ -34,266 +42,215 @@
       </v-col>
     </v-row>
 
-    <v-row class="outil">
-      <v-col cols="12">
+    <v-row class="demo">
+      <v-col>
         <v-img
           src="/images/home/écran.JPG"
-          :class="[
-            smAndDown ? 'screen-sm' : 'screen',
-            !smAndDown && isZoomed ? 'zoom' : '',
-          ]"
-          @mouseover="zoomIn"
-          @mouseleave="zoomOut"
-        />
-        <div class="play-icon-container">
-          <i class="fas fa-play"></i>
-        </div>
-      </v-col>
-    </v-row>
+          class="screen"
+        >
+          <v-icon icon="fas fa-play" class="play-icon" />
+        </v-img>
 
-    <v-row>
-      <v-col cols="12">
-        <h3 class="text-center text-outil">
-          Un outil complet et intuitif <br />
-          pour chaque structure
-        </h3>
       </v-col>
     </v-row>
 
-    <v-row class="mb-6">
-      <v-col cols="12" lg="6" md="12" sm="12">
-        <div class="horizontal-line" />
-        <v-row class="picto-container">
-          <img src="/images/pictoHome/picto4.svg" class="picto" />
-          <p class="text-outil-details">
-            Logiciel de Gestion et communication en ligne
-          </p>
-        </v-row>
-        <div class="horizontal-line" />
-        <v-row class="picto-container">
-          <img src="/images/pictoHome/picto3.svg" class="picto" />
-          <p class="text-outil-details">Site Web intégré et simple d’usage</p>
-        </v-row>
-        <div class="horizontal-line" />
-      </v-col>
+    <section class="outil">
+      <v-row>
+        <v-col>
+          <h3>
+            Un outil complet et intuitif <br />
+            pour chaque structure
+          </h3>
+        </v-col>
+      </v-row>
 
-      <v-col cols="12" lg="6" md="12" sm="12">
-        <div class="horizontal-line" />
-        <v-row class="picto-container">
-          <img src="/images/pictoHome/picto1.svg" class="picto" />
-          <p class="text-outil-details">
-            Augmentez votre visibilité avec l'agenda culturel
-          </p>
-        </v-row>
-        <div class="horizontal-line" />
-        <v-row class="picto-container">
-          <img src="/images/pictoHome/picto2.svg" class="picto" />
-          <p class="text-outil-details">Communiquez en réseau</p>
-        </v-row>
-        <div class="horizontal-line" />
-      </v-col>
-    </v-row>
+      <v-row class="pictos">
+        <v-col cols="12" lg="6">
+          <v-row>
+            <img src="/images/pictoHome/network.svg" alt="network" />
+            <p>
+              Logiciel de gestion et communication en ligne
+            </p>
+          </v-row>
+
+          <v-row>
+            <img src="/images/pictoHome/website.svg" alt="website" />
+            <p>
+              Site web intégré et simple d’usage
+            </p>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" lg="6">
+          <v-row>
+            <img src="/images/pictoHome/visibility.svg" alt="visibility" />
+            <p>
+              Augmentez votre visibilité avec l'agenda culturel
+            </p>
+          </v-row>
+
+          <v-row>
+            <img src="/images/pictoHome/communication.svg" alt="communication" />
+            <p>
+              Communiquez en réseau
+            </p>
+          </v-row>
+        </v-col>
+      </v-row>
+    </section>
   </LayoutContainer>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script setup lang="ts">
 import { useDisplay } from "vuetify";
-const { smAndDown, mdAndDown } = useDisplay();
-const isZoomed = ref(false);
-
-const zoomIn = () => {
-  isZoomed.value = true;
-};
 
-const zoomOut = () => {
-  isZoomed.value = false;
-};
+const { mdAndDown } = useDisplay();
 </script>
 
-<style scoped>
-.outil {
-  margin-bottom: -28rem;
-}
-.play-icon-container {
-  position: absolute;
-  top: 45%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 3rem;
-  color: white;
-  cursor: pointer;
-  z-index: 100;
-}
-.text-gestion .d-inline-flex {
-  vertical-align: middle;
-}
+<style scoped lang="scss">
 
-.rectangle-img,
-.rectangle-img-sm {
-  max-width: 100%;
-  height: auto;
+.highlight {
+  color: #caf5f4;
 }
 
-.rectangle-img-sm {
-  width: 3.2rem;
-  border-radius: 5rem;
-}
+.v-row.gestion {
+  >.v-col {
+    margin-bottom: 4rem;
+    background: #0e2d32;
+  }
 
-.align-center {
-  align-items: center;
-  display: inline-flex;
-}
+  h5 {
+    font-size: 1rem;
+    line-height: 1rem;
+    margin-top: 1rem;
+    color: #c1eff0;
+    text-align: center;
+    letter-spacing: 2.16px;
+    text-transform: uppercase;
+  }
 
-.picto-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-.horizontal-line {
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-  height: 1px;
-  background-color: #d1cdc7;
-  margin-bottom: 1rem;
-}
-.text-outil-sm {
-  font-weight: 400;
-  font-size: 22px;
-  line-height: 26px;
-  width: 19rem;
-  color: #0e2d32;
-}
-.picto-group {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-.picto-sm {
-  margin-left: 4rem;
-  width: 50px;
-  height: 50px;
-  margin-right: 2rem;
-}
-.picto {
-  width: 50px;
-  height: 50px;
-  margin-right: 2rem;
-}
-.screen-sm {
-  width: 100%;
-  object-fit: cover;
-  text-align: center;
-  transition: transform 0.2s;
-}
-.screen {
-  width: 900px;
-  object-fit: cover;
-  margin: 2rem auto;
-  text-align: center;
-  border-radius: 20px;
-  transition: transform 0.2s;
-  bottom: 30rem;
-}
+  .fa-circle{
+    margin-top: 1rem;
+    color: #ffffff;
+    margin-right: 1rem;
+  }
 
-.screen:hover {
-  transform: scale(1.1);
-}
+  .text-block {
+    font-weight: 600;
+    font-size: 3rem;
+    text-align: center;
+    color: white;
+    height: 20rem;
+    width: 45rem;
+    margin: 2rem auto 28rem;
+  }
 
-.subtitle {
-  font-size: 1rem;
-  line-height: 1rem;
-  margin-top: 1rem;
-  color: #c1eff0;
-  text-align: center;
-  letter-spacing: 2.16px;
-  text-transform: uppercase;
-}
+  .inline-pic-container {
+    display: inline-flex;
+    justify-content: center;
+    vertical-align: middle;
+  }
 
-.icon-title {
-  margin-top: 1rem;
-  color: #ffffff;
-  margin-right: 1rem;
-}
+  .v-img {
+    height: auto;
+    width: 7rem;
+    max-width: 100%;
+    border-radius: 5rem;
+  }
 
-.with-border,
-.with-border-top {
-  border-bottom: 1px solid #d1cdc7;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
+  @media (max-width: 960px) {
+    .text-block {
+      font-weight: 500;
+      font-size: 2rem;
+      line-height: 3.5rem;
+      height: 10rem;
+      width: 40rem;
+      margin: 3rem 2rem 5rem;
+    }
 
-.with-border-top {
-  border-top: 1px solid #d1cdc7;
+    .v-img {
+      width: 3.2rem;
+      border-radius: 5rem;
+    }
+  }
 }
 
-.row-outil {
-  margin-left: 4rem;
-}
+.v-row.demo {
+  margin-bottom: -28rem;
 
-.text-outil-details {
-  font-weight: 400;
-  font-size: 22px;
-  line-height: 26px;
-  width: 25rem;
-  color: #0e2d32;
-  margin-bottom: 1rem;
-}
+  .screen {
+    width: 900px;
+    object-fit: cover;
+    margin: 2rem auto;
+    text-align: center;
+    border-radius: 20px;
+    transition: transform 0.2s;
+    bottom: 30rem;
+  }
 
-.text-outil {
-  font-weight: 400;
-  font-size: 2rem;
-  color: #0e2d32;
-  margin-bottom: 3rem;
-}
+  @media (max-width: 960px) {
+    .screen {
+      width: 100%;
+    }
+  }
 
-.col-gestion {
-  margin-bottom: 4rem;
-  background: #0e2d32;
-}
+  @media (min-width: 600px) {
+    .screen:hover {
+      transform: scale(1.1);
+    }
+  }
 
-.col-gestion-md {
-  background: #0e2d32;
-  margin-bottom: 4rem;
+  .play-icon {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 3rem;
+    color: white;
+    cursor: pointer;
+    z-index: 100;
+  }
 }
 
-.text-gestion-sm {
-  font-weight: 500;
-  font-size: 2rem;
-  line-height: 3.5rem;
-  text-align: center;
-  color: white;
-  height: 10rem;
-  width: 40rem;
-  margin: 3rem 2rem 5rem;
-}
+section.outil {
+  margin-bottom: 36px;
 
-.v-container {
-  padding: 0;
-}
+  h3 {
+    color: #0e2d32;
+    font-size: 2rem;
+    font-weight: 400;
+    margin-bottom: 3rem;
+    text-align: center;
+  }
 
-.text-gestion {
-  font-weight: 600;
-  font-size: 3rem;
-  text-align: center;
-  color: white;
-  height: 20rem;
-  margin-top: 3rem;
-  width: 45rem;
-  margin: 2rem auto 28rem;
-}
+  .pictos {
+    .v-row {
+      border-bottom: solid 1px #cccccc;
+      margin: 0;
+      height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
 
-.span-color {
-  color: #caf5f4;
-}
+    .v-row:first-child {
+      border-top: solid 1px #cccccc;
+    }
+
+    img {
+      width: 50px;
+      height: 50px;
+      margin-right: 2rem;
+    }
 
-.rectangle-img {
-  width: 7rem;
-  border-radius: 5rem;
+    p {
+      font-weight: 400;
+      font-size: 22px;
+      line-height: 26px;
+      width: 25rem;
+      color: #0e2d32;
+      margin-bottom: 1rem;
+    }
+  }
 }
 </style>