site_logiciels/components/Logiciels/School/Projet.vue

<template>
  <LayoutContainer>
    <v-row>
      <div class="project-container">
        
      </div>
      <v-col cols="3">
        <div class="contact-container">
          <h5 class="contact">Contactez-nous</h5>
          <v-img
            src="/images/logiciels/school/femme-casque.jpg"
            class="femme-casque"
          >
          </v-img>
        </div>
      </v-col>
      <v-col cols="8">
        <div class="project-container">
          <h5 class="title">Vous avez un projet ?</h5>
          <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-row class="border-row">
      <v-col cols="2">
        <v-img
          class="logo-cmf"
          src="/images/logiciels/school/cmf_logo_orange.png"
        ></v-img>
      </v-col>
      <v-col cols="10">
        <div class="cmf-container">
          <h5>Adhérents CMF : bénéficiez de conditions privilégiées</h5>
          <p>
            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. Contactez nous direcetement ou contactez
            votre fédération pour obtenir vos codes d’accès.
          </p>
        </div>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="4" class="border">
        <div class="d-flex justify-center align-center">
          <v-icon class="fa-brands fa-react icon"></v-icon>
        </div>
        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
      </v-col>
      <v-col cols="4" class="border">
        <div class="d-flex justify-center align-center">
          <v-icon class="fa-brands fa-react icon"></v-icon>
        </div>
        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
      </v-col>

      <v-col cols="4" class="border">
        <div class="d-flex justify-center align-center">
          <v-icon class="fa-brands fa-react icon"></v-icon>
        </div>
        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup></script>

<style scoped>

.border-row{
  border: 1px solid #E5E5E5;
}
.cmf-container{
  margin-top: 4rem;
  margin-bottom: 4rem;
  width: 35rem;
}

.logo-cmf{
  width: 10rem;
  height: 10rem;
  margin-top: 3rem;
  margin-bottom: 4rem;
  margin-left: 3rem;
}

.project-container{
  margin-top: 4rem;
  margin-bottom: 4rem;
}

*{
  font-family: 'Barlow';
  font-style: normal;

}
.btn-contact {
  background: #F4AA2A;
border-radius: 6px;
  color: #fff;

  font-weight: 600;
  font-size: 12px;
  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;
}
.contact{
  margin-top: 2rem;
  margin-bottom: 3rem;
}
.title{
  margin-top: 2rem;
  margin-bottom: 1rem;
font-weight: 600;
font-size: 42px;
line-height: 42px;
color: #071B1F;
}

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

.contact-container{
  margin-left: 4rem;
font-weight: 600;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-top: 4rem;
margin-bottom: 2rem;
}
.border {
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.icon {
  font-size: 3rem;
  color: #0e2d32;
}
.femme-casque {
  width: 15rem;
}
</style>