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/pages/qui-sommes-nous/valeurs/Opentalent_les_valeurs_qui_nous_portent.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
                v-for="(value, valueIndex) in row"
                :key="valueIndex"
                cols="12"
                md="6"
              >
                <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/pages/qui-sommes-nous/valeurs/Management.svg',
      alt: 'Icône management social',
      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/pages/qui-sommes-nous/valeurs/Satisfaction-client.svg',
      alt: 'Icône Satisfaction client',
      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/pages/qui-sommes-nous/valeurs/Ecologie.svg',
      alt: 'Icône Écologie',
      title: 'Écologie',
      description:
        "Proche des entreprises de l'Économie Sociale et Solidaire, Opentalent s'engage résolument dans une démarche écologique et de développement durable. L'entreprise met tout en œuvre pour réduire son impact environnemental, notamment en recherchant en permanence de nouvelles solutions pour optimiser son impact écologique et contribuer à un avenir plus durable.",
    },
    {
      img: '/images/pages/qui-sommes-nous/valeurs/Open-source.svg',
      alt: 'Icône Open source',
      title: 'Open source',
      description:
        'Opentalent est une entreprise qui croit profondément aux vertus des logiciels Open Source et qui, par son action, contribue activement à leur développement. En choisissant le modèle Open Source, nous nous engageons à maintenir un haut niveau de transparence et de contrôle, renforçant ainsi la sécurité et l’efficacité de nos solutions.',
    },
  ],
]
</script>

<style scoped lang="scss">
.valeur-img {
  background-repeat: no-repeat;
  background-position: center;
  height: 400px;
  width: 450px;
  margin-left: auto;
  margin-right: auto;

  @media (max-width: 1240px) {
    width: 90%;
  }

  @media (max-width: 600px) {
    height: auto;
    width: 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: 0;
      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>