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="lgAndUp" 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’aviez déjà&nbsp;...
          </p>

          <div class="border-row">
            <nuxt-link href="https://www.cmf-musique.org/" target="_blank">
              <v-img
                v-if="lgAndUp"
                src="/images/logo/logo-cmf-petit.png"
                alt="Logo Confédération Musicale de France - CMF"
                class="logo-cmf"
              />
              <v-img
                v-else
                src="/images/logo/logo-cmf.png"
                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>
          </div>
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

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

const { mdAndDown, lgAndUp } = 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%;
  }
}
</style>