<template>
  <LayoutContainer>
    <div id="Nos valeurs">
      <div class="v-row custom-row">
        <LayoutUISubTitle :titleText="'Les valeurs qui nous portent'" />
      </div>

      <v-row class="mt-6 custom-row align-center">
        <v-col cols="6">
          <div class="valeur-img"></div>
        </v-col>

        <v-col cols="6">
          <div class="valeur-container">
            <v-row
              class="row"
              v-for="(row, rowIndex) in values"
              :key="rowIndex"
            >
              <v-col
                cols="6"
                v-for="(value, valueIndex) in row"
                :key="valueIndex"
              >
                <v-img :src="value.img" class="icon-valeur" />
                <h6 class="title-valeurs">{{ value.title }}</h6>
                <p>{{ value.description }}</p>
              </v-col>
            </v-row>
          </div>
        </v-col>
      </v-row>
    </div>
  </LayoutContainer>
</template>
<script setup>
const values = [
  [
    {
      img: "/images/about/valeurs/Management.svg",
      title: "Management social",
      description:
        "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.",
    },
    {
      img: "/images/about/valeurs/Satisfaction-client.svg",
      icon: "fa-brands fa-react",
      title: "Satisfaction client",
      description:
        "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.",
    },
  ],
  [
    {
      img: "/images/about/valeurs/Ecologie.svg",
      icon: "fa-brands fa-react",
      title: "Écologie",
      description:
        "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.",
    },
    {
      img: "/images/about/valeurs/Open-source.svg",
      icon: "fa-brands fa-react",
      title: "Open source",
      description:
        "Opentalent est une entreprise qui croit profondément aux vertus des logiciels Open Source et qui par son action contribue à leur développement.",
    },
  ],
];
</script>
<style scoped>
.valeur-img {
  background-image: url(/images/about/valeurs/valeur.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 400px;
  width: 450px;
}
.custom-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.icon-valeur {
  width: 50px;
  height: 50px;
  margin-bottom: 1rem;
}

.row {
  border-top: 1px solid #e5e5e5;
}
.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: 170px;
  height: 170px;
  border-radius: 90px;
}
</style>
