site_logiciels/components/About/Valeurs.vue

<template>
  <AnchoredSection id="values">
    <LayoutContainer class="mt-12">
      <v-row class="custom-row">
        <LayoutUISubTitle>
          Les valeurs qui nous portent
        </LayoutUISubTitle>
      </v-row>

      <v-row class="mt-6 custom-row align-center mb-12">
        <v-col cols="6">
          <v-img
            src="/images/about/valeurs/valeur.png"
            cover
            class="valeur-img"
          />
        </v-col>

        <v-col cols="6">
          <div class="values">
            <v-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" cover />

                <h6>
                  {{ value.title }}
                </h6>

                <p>
                  {{ value.description }}
                </p>
              </v-col>
            </v-row>
          </div>
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
import type { SocietyValue } from "~/types/interface";

const values: Array<Array<SocietyValue>> = [
  [
    {
      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",
      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",
      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",
      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 lang="scss">
.valeur-img {
  background-repeat: no-repeat;
  background-position: center;
  height: 400px;
  width: 450px;
}

.custom-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.values {
  .v-row {
    border-top: 1px solid #e5e5e5;
  }

  .v-img {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
  }

  h6 {
    font-family: "Barlow", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 26px;
    color: #091d20;
    margin-bottom: 1rem;
  }
}
</style>