site_logiciels/components/Logiciels/Artist/Abonnement.vue

<template>
  <div id="Abonnement">
    <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"></v-img>

          </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" class="download-button">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> <br> 
                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, la solution que vous attendiez...
          </h5>
          <p class="solution">
            Que vous soyez une petite ou une structure plus conséquente, notre
            offre s'adapte à toutes les tailles : le prix de l’abonnement au
            logiciel varie en fonction du nombre d'élèves, tout en conservant
            l'intégralité des fonctionnalités.
          </p>
          <h3 class="cmf">
            Adhérents CMF ? Et si on vous disait que vous l’aviez déjà ...
          </h3>
          <div class="border-row">
            <!-- <v-img
              class="logo-cmf"
              src="/images/logiciels/school/cmf_logo_orange.png"
            /> -->

            <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>
          </div>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<script setup></script>

<style scoped>
.subscription-steps ol {
  list-style-type: decimal;
  padding-left: 2rem;
  color: #000;
/* Body Large - Light */
font-family: Barlow;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 20px; /* 125% */ 
margin-left: 3rem;
width: 20rem;
}
.profile-circle {
  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.20));
  border-radius: 10px;
  height: 15rem;
  width: 20rem;
  padding: 1rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--Vert-100, #091D20);

text-align: center;
font-family: Barlow;
font-size: 1rem;
font-style: normal;
font-weight: 300;
line-height: 18px; 
}



.download-button {
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  margin-left: 1rem;
}

/* Style du rond noir */
.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;
}

.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 18px;
  color: #091d20;
  width: 25rem;
  margin-left: 2rem;
}

.subtitle {
  color: #071b1f;
  font-family: "Barlow";
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.title {
  font-family: "Barlow";
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 18px;
  color: #091d20;
  margin-bottom: 4rem;
  width: 45rem;
}
.border-row {
  text-align: justify;
  border: 1px solid #e5e5e5;
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  width: 50rem;
  height: 15rem;
  border-radius: 5%;
}
.cmf-container {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.logo-cmf {
  border-right: 1px solid #e5e5e5;
  background-image: url("/images/logiciels/school/cmf_logo_orange.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 15rem; 
  height: 10rem;
}

.cmf-text {
  color: #091d20;
  width: 20rem;
  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-size: 34px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px;
}
.contact-details {
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #091d20;
  width: 20rem;
  font-family: "Barlow";
  font-style: normal;
}
.icon-title {
  margin-right: 1rem;
  color: #fac20a;
}
.title {
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  color: #071b1f;
  font-family: "Barlow";
  font-style: normal;
}
</style>