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"
            />
            <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-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"
            />
          </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"
            />
          </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"
            />
          </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>