site_logiciels/components/Logiciels/School/Projet.vue

<template>
  <div id="contact">
    <LayoutContainer>
      <v-row>
        <div class="project-container" />
        <v-col cols="4">
          <div class="contact-container">
            <div class="d-flex justify-center align-center">
              <v-icon
                size="10"
                class="fa-solid fa-circle icon-title"
              />
              <h5 class="contact">
                Contactez-nous
              </h5>
            </div>
            <v-img
              src="/images/logiciels/school/femme-casque.jpg"
              class="femme-casque"
            />
          </div>
        </v-col>
        <v-col cols="6">
          <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-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;
  margin-right: 10rem;
}

.icon-title {
  margin-bottom: 0.5rem;
  margin-right: 1rem;
  color: rgba(32, 147, 190, 0.6);
}
.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 {
  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>