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

<template>
  <div class="profile-circle">
    <v-img
      src="/images/logos/opentalent/Logo_Opentalent_Artist-blanc-col.png"
      alt="Logo Opentalent Artist - logiciel de gestion et de communication pour les orchestres, les chorales, les compagnies artistiques et troupes"
    />
  </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="/files/Bon_De_Commande_Artist_Public-2024.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 et complétez le formulaire</li>
      <li>Réglez votre abonnement par virement ou par chèque</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;
  padding-top: 12px;

  @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;
  text-align: center;
}

.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>