site_logiciels/components/About/Valeurs.vue

<template>
  <LayoutContainer>
    <div id="Nos valeurs">
    <v-row class="mr-6 mb-6 mt-12">
      <v-col cols="5">
        <div class="title-container">
            <v-icon size="6" class="fa-solid fa-circle icon-title" />
            <h4 class="subtitle">Les valaurs qui nous portent</h4>
          </div>

        <div class="container-img">
          <img class="image-ronde top-img" src="/images/about/valeur1.jpg" />

          <v-row>
            <img class="image-ronde left-img" src="/images/about/valeur2.jpg" />
            <img
              class="image-ronde right-img"
              src="/images/about/valeur3.jpg"
            />
          </v-row>

          <img class="image-ronde bottom-img" src="/images/about/valeur4.jpg" />
        </div>
      </v-col>

      <v-col cols="7">
        <div class="valeur-container">
          <v-row class="row">
            <v-col cols="6">
              <v-icon class="fa-brands fa-react icon" />
              <h6 class="title-valeurs">Management social</h6>
              <p>
                Guillaume et Michel sont sur la même longueur d’onde et donnent
                le « La » à un management social et solidaire où plus que de
                mettre en avant l'entreprise, ils privilégient la mise en avant
                des hommes et femmes qui la composent. Toux ceux qui participent
                jour après jour à l’écriture de la partition sont valorisés. Le
                partage, l’échange et le dialogue en lieu et place des liens de
                subordination.
              </p>
            </v-col>

            <v-col cols="6">
              <v-icon class="fa-brands fa-react icon" />
              <h6 class="title-valeurs">Satisfaction client</h6>
              <p>
                Opentalent met un point d’honneur à satisfaire ses clients en
                leur proposant des solutions de qualité, un projet global dans
                lequel ils se retrouvent. L’intention de base est bel et bien de
                proposer un équilibre entre les solutions informatiques et la
                volonté personnelle en lien avec la production et les publics
                concernés.
              </p>
            </v-col>
          </v-row>
          <v-row class="row">
            <v-col cols="6">
              <v-icon class="fa-brands fa-react icon" />
              <h6 class="title-valeurs">Écologie</h6>
              <p>
                Proche des entreprises de l’Économie Sociale et Solidaire,
                Opentalent accorde une grande importance aux démarches liées à
                l’écologie et au développement durable. Le code des outils est
                par exemple optimisé pour limiter les ressources nécessaires des
                serveurs, réduisant ainsi leur empreinte carbone et améliorant
                le confort des utilisateurs au quotidien.
              </p>
            </v-col>

            <v-col cols="6">
              <v-icon class="fa-brands fa-react icon" />
              <h6 class="title-valeurs">Open source</h6>
              <p>
                Opentalent est une entreprise qui croit profondément aux vertus
                des logiciels Open Source et qui par son action contribue à leur
                développement.
              </p>
            </v-col>
          </v-row>
        </div>
      </v-col>
    </v-row>
    </div>
  </LayoutContainer>
</template>

<script setup></script>
<style scoped>

.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 18px;
  color: #091d20;
  width: 20rem;
  margin-left: 2rem;
}

.subtitle {
  color: #071b1f;
  font-family: "Barlow";
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.title {
  font-family: "Barlow";
  font-weight: 600;
  font-size: 3rem;
  line-height: 18px;
  color: #091d20;
  margin-bottom: 4rem;
}

.icon-title {
  margin-right: 0.7rem;
  color: #64afb7;
}
.row {
  border-top: 1px solid #e5e5e5;
}
.icon {
  color: #f4aa2a;
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

.title-valeurs {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 26px;
  color: #091d20;
  margin-bottom: 1rem;
}
.title-valeur {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 34px;
  line-height: 38px;
  color: #071b1f;
  text-align: center;
  margin-right: 19rem;
  margin-left: 12rem;
  text-align: left;
}

.left-img {
  position: relative;
  right: 2rem;
}

.right-img {
  position: relative;
  left: 2rem;
}
.container-img {
  margin-left: 14rem;
}
.bottom-img,
.top-img {
  margin-left: 4rem;
}

.top-img {
  position: relative;
  top: 4.5rem;
}

.bottom-img {
  position: relative;
  bottom: 4.5rem;
}
.image-ronde {
  width: 160px;
  height: 150px;
  border-radius: 90px;
}
</style>