refactor the Abonnement section of the artist page

assets/style/theme.scss

@@ -7,7 +7,7 @@ body {
   --on-primary-color: #ffffff;
   --on-primary-color-alt: #caf5f4;
   --secondary-color: #9edbdd;
-  --on-secondary-color: #ffffff;
+  --on-secondary-color: #262626;
   --neutral-color-alt: #dbdbdb;
   --on-neutral-color-alt: #000000;
 

components/Logiciels/Artist/Abonnement.vue

@@ -1,89 +1,90 @@
 <template>
   <AnchoredSection id="subscription">
-    <div>
-      <LayoutContainer>
-        <v-row class="mt-12">
-          <v-col cols="4">
-            <LayoutUISubTitle
-              :iconSize="6"
-              :iconClasses="iconClasses"
-              :titleText="'S\'abonner dès maintenant'"
-              :iconColor="'#fac20a'"
-            />
-            <div class="profile-circle">
-              <v-img
-                src="/images/logo/logiciels/OT_Artist-BLANC.png"
-                style="top: 0.5rem"
-              ></v-img>
-            </div>
+    <LayoutContainer>
+      <v-row class="mt-12">
+        <v-col cols="4">
+          <LayoutUISubTitle>
+            S'abonner dès maintenant
+          </LayoutUISubTitle>
 
-            <div class="subscription-info">
-              <p class="mt-3 mb-6">
-                Pour vous abonner au logiciel, téléchargez et remplissez le
-                formulaire avant de nous le transmettre
-              </p>
-              <a
-                href="https://www.opentalent.fr/fileadmin/stockage/commercial/contrats/BDC_Artist_Public-23.pdf"
-                target="_blank"
-                class="download-button"
-                >Télécharger le formulaire d'abonnement</a
+          <div class="profile-circle">
+            <v-img src="/images/logo/logiciels/OT_Artist-BLANC.png" />
+          </div>
+
+          <div class="subscription-info">
+            <p class="mt-3 mb-6">
+              Pour vous abonner au logiciel, téléchargez et remplissez le
+              formulaire avant de nous le transmettre
+            </p>
+            <a
+              href="https://www.opentalent.fr/fileadmin/stockage/commercial/contrats/BDC_Artist_Public-23.pdf"
+              target="_blank"
+              class="download-button"
               >
-            </div>
-            <div class="subscription-steps">
-              <ol>
-                <li class="mt-6">Téléchargez le formulaire</li>
-                <li>Complétez le formulaire</li>
-                <li>
-                  Joignez le règlement par chèque avec le formulaire à <br />
-                  <br />
-                  2iOPENservice <br />
+              Télécharger le formulaire d'abonnement
+            </a>
+          </div>
+
+          <div class="subscription-steps">
+            <ol>
+              <li class="mt-6">
+                Téléchargez le formulaire
+              </li>
+              <li>
+                Complétez le formulaire
+              </li>
+              <li>
+                Joignez le règlement par chèque avec le formulaire à <br />
+                <p class="pa-3">
+                  2iOPENService <br />
                   217 rue Raoul Follereau <br />
                   74300 CLUSES
-                </li>
-                <br />
-                <li>
-                  Après réception de votre formulaire d'adhésion et de votre
-                  règlement, nous vous ouvrons le service choisi. Vous recevrez
-                  alors un mail avec votre identifiant de connexion, votre mot de
-                  passe, ainsi que l'URL de votre site internet.
-                </li>
-              </ol>
-            </div>
-          </v-col>
-
-          <v-col cols="8">
-            <h5 class="title">
-              Opentalent Artist, <br> la solution que vous attendiez...
-            </h5>
-            <p class="solution" style="text-align: justify">
-              Conçu pour les structures artistiques telles que chorales,
-              orchestres (fanfares, orchestres d'harmonie, symphoniques, musiques
-              actuelles, petites formations musicales...), compagnies de danse,
-              troupes de théâtre, cirque, arts de la rue… Le logiciel s'adapte à
-              vos besoins d'évolution !
-            </p>
-            <h3 class="cmf">
-              Adhérents CMF ? <br> Et si on vous disait que vous l’aviez déjà ...
-            </h3>
-            <div class="border-row">
-
-
-              <div class="logo-cmf"></div>
-              <div class="cmf-container">
-                <p class="cmf-text">
-                  Attention si vous êtes adhérent à la Confédération Musicale de
-                  France (CMF), vous bénéficiez gratuitement, dans le cadre de
-                  votre adhésion, de la version Opentalent Artist Standard, et de
-                  conditions privilégiées pour la version Artist Premium.
-                  Contactez nous ou contactez votre fédération pour obtenir vos
-                  codes d'accès.
                 </p>
-              </div>
+              </li>
+              <li>
+                Après réception de votre formulaire d'adhésion et de votre
+                règlement, nous vous ouvrons le service choisi. Vous recevrez
+                alors un mail avec votre identifiant de connexion, votre mot de
+                passe, ainsi que l'URL de votre site internet.
+              </li>
+            </ol>
+          </div>
+        </v-col>
+
+        <v-col cols="8">
+          <h5>
+            Opentalent Artist, <br> la solution que vous attendiez...
+          </h5>
+
+          <p class="solution">
+            Conçu pour les structures artistiques telles que chorales,
+            orchestres (fanfares, orchestres d'harmonie, symphoniques, musiques
+            actuelles, petites formations musicales...), compagnies de danse,
+            troupes de théâtre, cirque, arts de la rue… Le logiciel s'adapte à
+            vos besoins d'évolution !
+          </p>
+
+          <p class="cmf">
+            Adhérents CMF ? <br> Et si on vous disait que vous l’aviez déjà ...
+          </p>
+
+          <div class="border-row">
+            <v-img src="/images/logiciels/school/cmf_logo_orange.png" class="logo-cmf" />
+
+            <div class="cmf-container">
+              <p>
+                Attention si vous êtes adhérent à la Confédération Musicale de
+                France (CMF), vous bénéficiez gratuitement, dans le cadre de
+                votre adhésion, de la version Opentalent Artist Standard, et de
+                conditions privilégiées pour la version Artist Premium.
+                Contactez nous ou contactez votre fédération pour obtenir vos
+                codes d'accès.
+              </p>
             </div>
-          </v-col>
-        </v-row>
-      </LayoutContainer>
-    </div>
+          </div>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
   </AnchoredSection>
 </template>
 
@@ -91,17 +92,18 @@
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .v-container {
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
 }
+
 .subscription-steps ol {
   list-style-type: decimal;
   padding-left: 2rem;
   color: #000;
-  font-family: Barlow;
+  font-family: Barlow, serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 300;
@@ -109,18 +111,20 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   margin-left: 3rem;
   width: 20rem;
 }
+
 .profile-circle {
+  top: 0.5rem;
   width: 100px;
   height: 100px;
   position: relative;
   background-color: #000;
   border-radius: 50%;
   margin-left: 11rem;
-  top: 3rem;
 }
+
 .subscription-info {
   margin-left: 4rem;
-  background: var(--Jaune-Artist-20, rgba(250, 194, 10, 0.2));
+  background: var(--secondary-color);
   border-radius: 10px;
   height: 15rem;
   width: 20rem;
@@ -129,10 +133,9 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   display: flex;
   flex-direction: column;
   justify-content: center;
-  color: var(--Vert-100, #091d20);
-
+  color: var(--on-secondary-color);
   text-align: center;
-  font-family: "Barlow";
+  font-family: "Barlow", serif;
   font-size: 1rem;
   font-style: normal;
   font-weight: 300;
@@ -149,36 +152,36 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   display: inline-block;
 }
 
-.black-circle {
-  width: 90px;
-  height: 90px;
-  background-color: #000;
-  border-radius: 50%;
-  flex-shrink: 0;
-  margin-top: -1.5rem;
-  margin-left: -2rem;
-}
 .solution {
   width: 45rem;
+  text-align: justify
 }
 
-.title {
-  font-family: "Barlow";
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 18px;
+h5 {
+  font-family: "Barlow", serif;
   color: #091d20;
   margin-bottom: 4rem;
+  font-size: 42px;
+  font-weight: 600;
+  line-height: 42px;
 }
 
 .cmf-container {
   margin-top: 4rem;
   margin-bottom: 4rem;
+
+  p {
+    color: #091d20;
+    width: 25rem;
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 20px;
+    margin-left: 2rem;
+  }
 }
 
 .logo-cmf {
-  border-right: 1px solid #e5e5e5;
-  background-image: url("/images/logiciels/school/cmf_logo_orange.png");
+  border-right: 1px solid var(--neutral-color);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
@@ -186,31 +189,15 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   height: 10rem;
 }
 
-.cmf-text {
-  color: #091d20;
-  width: 25rem;
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 20px;
-  margin-left: 2rem;
-}
 .cmf {
   margin-top: 3rem;
   margin-bottom: 2rem;
   color: #071b1f;
   width: 40rem;
-  font-family: Barlow;
+  font-family: Barlow, serif;
   font-size: 34px;
   font-style: normal;
   font-weight: 400;
   line-height: 38px;
 }
-.title {
-  font-weight: 600;
-  font-size: 42px;
-  line-height: 42px;
-  color: #071b1f;
-  font-family: "Barlow";
-  font-style: normal;
-}
 </style>