site_logiciels/components/Logiciels/Artist/Abonnement/ToSubscribe.vue

<template>
  <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"
    >
      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
        </p>
      </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>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">

.profile-circle {
  top: 3rem;
  width: 100px;
  height: 100px;
  position: relative;
  background-color: var(--on-neutral-color);
  border-radius: 50%;
  margin-left: 11rem;

  @media (max-width: 1240px) {
    margin-left: auto;
    margin-right: auto;
  }
}

.subscription-info {
  margin-left: 4rem;
  background: var(--secondary-color);
  border-radius: 10px;
  height: 15rem;
  width: 20rem;
  padding: 1rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--on-secondary-color);
  text-align: center;
  font-size: 1rem;
  font-weight: 300;
  line-height: 18px;

  @media (max-width: 1240px) {
    width: 80%;
  }

  @media (max-width: 600px) {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.download-button {
  font-weight: 700;
  background-color: var(--on-neutral-color);
  color: var(--neutral-color);
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
}

.subscription-steps ol {
  list-style-type: decimal;
  padding-left: 2rem;
  color: var(--on-neutral-color);
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  margin-left: 3rem;
  width: 20rem;

  @media (max-width: 1240px) {
    width: 80%;
  }

  @media (max-width: 600px) {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
</style>