site_logiciels/components/Logiciels/Artist/Abonnement.vue

<template>
  <AnchoredSection id="subscription">
    <LayoutContainer>
      <v-row class="mt-12 center-90">
        <v-col cols="4">
          <LayoutUISubTitle>
            S'abonner dès maintenant
          </LayoutUISubTitle>

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

<script setup>
import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
</script>

<style scoped lang="scss">
.subscription-steps ol {
  list-style-type: decimal;
  padding-left: 2rem;
  color: #000;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  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;
}

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

.download-button {
  font-weight: 700;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
}

.solution {
  width: 45rem;
  text-align: justify
}

h5 {
  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 var(--neutral-color);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 15rem;
  height: 10rem;
}

.cmf {
  margin-top: 3rem;
  margin-bottom: 2rem;
  color: #071b1f;
  width: 40rem;
  font-size: 34px;
  font-weight: 400;
  line-height: 38px;
}
</style>