site_logiciels/components/Logiciels/School/Projet.vue

<template>
  <LayoutContainer id="Contact">
      <v-row >
        <v-col cols="6">
          <!-- <div class="help-img">

          </div> -->
          <v-img class="help-img" src="/images/contact/contact.jpg" />
        </v-col>

        <v-col cols="5">
          <LayoutUISubTitle :titleText="` Contactez-nous `" />

          <LayoutUITitle :title="` Vous avez un projet ? `" />
          <div class="ml-6">
            <h6 class="subtitle">N'attendez plus, appelez-nous !</h6>
            <p class="contact-details">
              Vous avez une identité, des besoins, des projets... On est là pour
              vous écouter et vous offrir une offre personnalisée ! Que vous
              soyez une petite ou une structure plus conséquente, notre offre
              s'adapte à toutes les tailles : le prix de l’abonnement au
              logiciel varie en fonction du nombre d'élèves, tout en conservant
              l'intégralité des fonctionnalités.
            </p>
            <NuxtLink to="nous-contacter">
            <v-btn class="btn-contact"> Nous contacter </v-btn>
            </NuxtLink>
          </div>
        </v-col>
      </v-row>

      <v-row class="custom-row" >
        <v-col cols="6" >
          <LayoutUISubTitle :titleText="` Adhérents CMF `" />
          <LayoutUITitle :title="` Bénéficiez de conditions privilégiées `" />
          <div class="ml-4">
            <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
            <p class="contact-details mr-12">
              Si votre établissement d’enseignement artistique est 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 priviliégiés pour la
              version Opentalent School. <br />
            </p>
            <p class="mt-6 contact-details">
              Contactez-nous directement ou contactez votre fédération pour
              obtenir vos codes d’accès.
            </p>
            <v-btn class="btn-contact">
              Je souhaite obtenir mon code d'accès
            </v-btn>
          </div>
        </v-col>
        <v-col cols="6">
          <!-- <v-img class="logo-cmf" src="/images/logiciels/school/cmf_logo_orange.png" /> -->
          <div class="logo-cmf mt-12"></div>
        </v-col>
      </v-row>
  </LayoutContainer>
</template>
<script setup></script>

<style scoped>

.custom-row {
  width: 90%;
  margin: auto;
}


.logo-cmf {
  background-image: url("/images/logiciels/school/CMF-vivre_la_musique_ensemble.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.help-img {

  width: 100%;
  height: 100%;
}

.btn-contact {
  margin-top: 1rem;
  height: 53px;
  background: #64afb7;
  border-radius: 6px;
  color: white;
  padding: 19px 28px;
  gap: 9px;
}

@media (max-width: 1600px) {
  .contact-details {
    width: 30rem !important;
  }
}

.contact-details {
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #091d20;
  text-align: justify;
}

.subtitle {
  font-weight: 400;
  font-size: 34px;
  line-height: 38px;
  color: #071b1f;
  margin-bottom: 2rem;
}

.help-img {
  width: 100%;
  height: 90%;
  object-fit: cover;
  object-position: center;
}
</style>