site_logiciels/components/About/Valeurs.vue

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

      <v-row class="mt-6 center-90 align-center mb-12">
        <v-col cols="12" lg="6">
          <v-img
            src="/images/about/valeurs/valeur.png"
            alt="Quatre photos: une prise de haut où l’on voit les pieds d’une personne avec un smiley dessiné sur du goudron, l'une de mains tenant de la terre avec une plante dans un décor de forêt, l'une d’une enseigne lumineuse écrit « Open » en blanc entouré d’un cercle orange et l'une de mains de femmes posées les unes en dessus des autres."
            cover
            class="valeur-img"
          />
        </v-col>

        <v-col cols="12" lg="6">
          <div class="values">
            <v-row
              v-for="(row, rowIndex) in values"
              :key="rowIndex"
            >
              <v-col
                cols="12"
                md="6"
                v-for="(value, valueIndex) in row"
                :key="valueIndex"
              >
                <div class="d-flex flex-row align-center">
                  <v-img
                    :src="value.img"
                    :alt="value.alt"
                    cover
                    class="mr-3"
                  />

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

                <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",
      alt: "Icône de deux mains tenant une roue crantée",
      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",
      alt: "Icône d’utilisateurs avec des étoiles en dessous",
      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",
      alt: "Icône de la planète Terre entourée d’une branche avec des feuilles",
      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",
      alt: "Icône d’une roue crantée ouverte avec des flèches entrant et sortant",
      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;

  @media (max-width: 1240px) {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

.values {
  .v-row {
    @media (min-width: 1240px) {
      border-top: 1px solid var(--on-neutral-color-extra-light);
    }
  }

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

    @media (max-width: 600px) {
      margin-left: auto;
      margin-right: auto;
    }
  }

  h6 {
    font-weight: 500;
    font-size: 22px;
    line-height: 26px;
    color: var(--primary-color);
    margin-bottom: 1rem;
  }

  @media (max-width: 1240px) {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
</style>