site_logiciels/components/Logiciels/Artist/Abonnement.vue

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

        <v-col v-if="mdAndUp" cols="4" class="col-1">
          <LogicielsArtistAbonnementToSubscribe />
        </v-col>

        <v-col cols="12" lg="8" class="col-2">
          <h3>
            Opentalent Artist, <br />
            la solution que vous attendiez...
          </h3>

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

          <LogicielsArtistAbonnementToSubscribe v-if="mdAndDown" />

          <p class="cmf">
            Adhérents CMF ? <br />
            Et si on vous disait que vous l’avez déjà&nbsp;...
          </p>

          <div class="adherent-warning">
            <nuxt-link
              href="https://www.cmf-musique.org/"
              target="_blank"
              class="logo-cmf-link"
            >
              <v-img
                src="/images/logos/cmf/Logo_Confederation_Musicale_de_France-CMF_vivre_la_musique_ensemble.jpg"
                alt="Logo Confédération Musicale de France - CMF"
                class="logo-cmf"
              />
            </nuxt-link>

            <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 class="d-flex flex-row justify-center my-4">
                <v-btn
                  href="https://www.cmf-musique.org/contact/"
                  target="_blank"
                  class="btn-contact"
                >
                  Obtenir mes identifiants
                </v-btn>
              </div>
            </div>
          </div>
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup>
import { useDisplay } from 'vuetify'
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'

const { mdAndDown, mdAndUp } = useDisplay()
</script>

<style scoped lang="scss">
@media (max-width: 1240px) {
  .col-1 {
    order: 2;
  }
  .col-2 {
    order: 1;
  }
}

.solution {
  width: 45rem;

  @media (max-width: 600px) {
    width: 100%;
  }
}

h3 {
  color: var(--on-neutral-color);
  margin-bottom: 4rem;
  font-size: 42px;
  font-weight: 600;
  line-height: 42px;

  @media (max-width: 600px) {
    font-size: 32px;
  }
}

.cmf-container {
  margin-top: 4rem;
  margin-bottom: 4rem;

  p {
    color: var(--on-neutral-color);
    width: 25rem;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    margin-left: 2rem;

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

  @media (max-width: 1240px) {
    margin-top: 1rem;
  }
}

.logo-cmf {
  border-right: 1px solid var(--neutral-color);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 15rem;
  height: 10rem;

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

.cmf {
  margin-top: 3rem;
  margin-bottom: 2rem;
  color: var(--on-neutral-color);
  width: 40rem;
  font-size: 34px;
  font-weight: 400;
  line-height: 38px;

  @media (max-width: 600px) {
    width: 100%;
  }
}

.adherent-warning {
  display: flex;
  flex-direction: row;

  .logo-cmf-link {
    margin-top: auto;
    margin-bottom: auto;
    padding: 0 16px;
    border-right: solid 2px var(--on-neutral-color-extra-light);
  }

  @media (max-width: 600px) {
    flex-direction: column;
  }
}

.btn-contact {
  height: 53px;
  background: var(--secondary-color);
  border-radius: 6px;
  color: var(--on-secondary-color);
  padding: 19px 28px;
  gap: 9px;
  max-width: 90%;
}
</style>