site_logiciels/components/Logiciels/Artist/Abonnement.vue

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

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

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

<style scoped>
.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-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 20px;
  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.2));
  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 {
  font-weight: 700;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  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;
}

.title {
  font-family: "Barlow";
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 18px;
  color: #091d20;
  margin-bottom: 4rem;
}

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