site_logiciels/components/Logiciels/School/Projet.vue

<template>
  <LayoutContainer id="contact">
    <v-container>
      <v-row no-gutters>
        <v-col cols="6">
          <v-img class="help-img" src="/images/contact/contact.jpg" />
        </v-col>

        <v-col cols="6">
          <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>
            <v-btn class="btn-contact"> Nous contacter </v-btn>
          </div>
        </v-col>
      </v-row>
    </v-container>

    <v-container>
      <v-row no-gutters>
        <v-col cols="6" class="mt-12">
          <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">
              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"></div>
        </v-col>
      </v-row>
    </v-container>
  </LayoutContainer>
</template>
<script setup></script>

<style scoped>
.v-row {
  max-width: 1800px;
  margin: 0 auto;
}

.logo-cmf {
  background-image: url("/images/logiciels/school/cmf_logo_orange.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  margin-top: 2rem;
  margin-left: 2rem;
}

.btn-contact {
  background: rgba(32, 147, 190, 0.4);
  padding: 15px;
  gap: 9px;
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 15px;
  height: 2.5rem;
  font-size: .9rem;
  color: #fff;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

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