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" class="mt-12">
        <LayoutUISubTitle :titleText="` Contactez-nous `" />

        <LayoutUITitle :title="` Vous avez un projet ? `" />
        <div class="ml-8">
          <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és ? `" />
        <div class="ml-8">
          <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">Contactez nous direcetement 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;

}
:deep().title{
  width: 100% !important;
}
.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;
}

.btn-contact {
  background: rgba(32, 147, 190, 0.4);
  border-radius: 6px;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  line-height: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.contact-details {
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #091d20;
  width: 40rem;
  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>