add trial buttons to home page

components/Home/Caroussel.vue

@@ -34,6 +34,16 @@ Carrousel de la page d'accueil
             >
               En savoir plus
             </v-btn>
+
+            <v-btn
+              v-if="item.link === 'opentalent-artist'"
+              to="/shop/try/artist-premium"
+              append-icon="fas fa-arrow-right"
+              :class="['mt-3 mb-3 artist-premium-btn']"
+              :style="{ backgroundColor: item.color }"
+            >
+              Essai gratuit de 30 jours
+            </v-btn>
           </v-col>
 
           <!-- Partie Illustration -->
@@ -226,7 +236,8 @@ const onIntersect = (isIntersecting: boolean) => {
     margin-bottom: 1rem;
   }
 
-  .learn-more-btn {
+  .learn-more-btn,
+  .artist-premium-btn {
     display: flex;
     align-items: center;
     margin-top: 16px;
@@ -236,7 +247,6 @@ const onIntersect = (isIntersecting: boolean) => {
     font-weight: 700;
     font-size: 0.7rem;
     line-height: 15px;
-    width: 10rem;
     height: 2.5rem;
 
     @media (max-width: 600px) {
@@ -245,6 +255,14 @@ const onIntersect = (isIntersecting: boolean) => {
     }
   }
 
+  .learn-more-btn {
+    width: 10rem;
+  }
+
+  .artist-premium-btn {
+    width: 14rem;
+  }
+
   .learn-more-btn :deep(.v-btn__append) {
     color: var(--on-neutral-color);
     margin-left: 0;

components/Home/Solution.vue

@@ -33,7 +33,7 @@ Section "Solutions" de la page d'accueil
               <v-row>
                 <div :class="['image-container', solution.class]">
                   <v-img :src="solution.image" />
-                  <v-btn v-if="xlAndUp">Découvrir</v-btn>
+                  <v-btn v-if="xlAndUp" class="discover-btn">Découvrir</v-btn>
                 </div>
               </v-row>
             </nuxt-link>
@@ -60,7 +60,17 @@ Section "Solutions" de la page d'accueil
             </v-row>
 
             <v-row v-if="lgAndDown">
-              <v-btn :to="solution.link">Découvrir</v-btn>
+              <v-btn :to="solution.link" class="discover-btn">Découvrir</v-btn>
+            </v-row>
+
+            <v-row>
+              <v-btn
+                v-if="solution.name === 'Artist'"
+                to="shop/try/artist-premium"
+                class="artist-premium-trial-btn"
+              >
+                Essai gratuit de 30 jours
+              </v-btn>
             </v-row>
           </div>
         </v-container>
@@ -248,7 +258,7 @@ h4 {
     transition: opacity 0.3s;
   }
 
-  .v-btn {
+  .discover-btn {
     left: 50%;
     font-size: 0.8rem;
     border-radius: 6px;
@@ -345,6 +355,15 @@ h4 {
   }
 }
 
+.artist-premium-trial-btn {
+  height: 36px;
+  width: 100%;
+  max-width: 350px;
+  background: transparent;
+  color: var(--on-primary-color);
+  border: solid 2px var(--on-primary-color);
+}
+
 .footer {
   p {
     text-align: right;

pages/shop/try/artist-premium.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>