site_logiciels/components/Logiciels/Artist/Projet.vue

<template>
  <div id="Contact">
    <LayoutContainer>
      <v-row>
        <v-col cols="3">
          <div class="d-flex justify-center align-center">
            <v-icon size="10" class="fa-solid fa-circle icon-title"></v-icon>
            <h5 class="subtitle-abo">S'abonner dès maintenant</h5>
          </div>
        </v-col>

        <v-col cols="0">
            <h5 class="subtitle">
              Opentalent Artist, la solution que vous attendiez...
            </h5>
            <p>
              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>
            <h3>
              Adhérents CMF ? Et si on vous disait que vous l’aviez déjà ...
            </h3>
        </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-col">
          <div class="d-flex justify-center align-center">
            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
          </div>
          <p class="d-flex justify-center align-center details">
            Paiement Sécurisé
          </p>
        </v-col>
        <v-col cols="4" class="border-col">
          <div class="d-flex justify-center align-center">
            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
          </div>
          <p class="d-flex justify-center align-center details">
            Service clef en main
          </p>
        </v-col>

        <v-col cols="4" class="border-col">
          <div class="d-flex justify-center align-center">
            <v-icon size="35" class="fa-brands fa-react icon"></v-icon>
          </div>
          <p class="d-flex justify-center align-center details">
            Soutien pour votre activité
          </p>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<script setup></script>

<style scoped>
.details {
  color: var(--vert-100, #091d20);
  margin-right: auto;
  margin-left: auto;
  width: 8rem;
  text-align: center;
  margin-top: 0.7rem;
  font-size: 1rem;
  font-family: "Barlow";
  font-weight: 300;
  line-height: 14px;
}
.border-col {
  border-top: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  height: 8rem;
}
.border-row {
  border: 1px solid #e5e5e5;
  margin-left: 10rem;
  margin-right: 28rem;
  margin-bottom: 3rem;
}
.cmf-container {
  margin-left: 3rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
  width: 30rem;
}

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

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

.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;
  font-family: "Barlow";
  font-style: normal;
}

.contact-details {
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #091d20;
  width: 20rem;
  font-family: "Barlow";
  font-style: normal;
}
.contact {
  margin-bottom: 0.5rem;
}

.icon-title {
  margin-right: 1rem;
  color: #fac20a;
}
.title {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  color: #071b1f;
  font-family: "Barlow";
  font-style: normal;
}
.subtitle-abo {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.9rem;
}
.subtitle {
  font-weight: 400;
  font-size: 34px;
  line-height: 38px;
  color: #071b1f;
  margin-bottom: 2rem;
  font-family: "Barlow";
  font-style: normal;
}

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

.icon {
  margin-top: 1rem;
  color: #0e2d32;
}
.femme-casque {
  width: 18rem;
}
</style>