site_logiciels/components/Logiciels/Manager/Projet.vue

<template>
  <LayoutContainer>
    <v-row>
      <v-col cols="4">
        <h5>Contactez-nous</h5>
        <v-img
          src="/images/logiciels/school/femme-casque.jpg"
          class="femme-casque"
        />
      </v-col>
      <v-col cols="8">
        <h5>Vous avez un projet ?</h5>
        <h6>N'attendez plus, appelez-nous</h6>
        <p>
          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> Nous contacter</v-btn>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="2">
        <v-img src="/images/logiciels/school/cmf_logo_orange.png" />
      </v-col>
      <v-col cols="10">
        <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>
      </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" />
        </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" />
        </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" />
        </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 {
  border-top: 1px solid #000; 
  border-right: 1px solid #000;
}

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