site_logiciels/components/About/Equipe.vue

<template>
  <LayoutContainer id="Notre équipe">
    <v-row class="mt-12 custom-row">
      <LayoutUISubTitle
        :iconSize="6"
        :iconClasses="iconClasses"
        :titleText="'notre équipe'"
      />
    </v-row>
    <v-row class=" custom-row">
      <LayoutUITitle title="Une équipe spécialisée et passionnée" />
    <h4 class="details ml-4 mt-6 mb-12">
      Chez Opentalent, on recherche des compétences mais surtout des hommes et des femmes qui souhaitent s'engager dans un projet porteur de sens.
    </h4>
    </v-row>


    <v-row class=" custom-row">
      <v-col cols="12" sm="6" md="4" lg="3" v-for="chef in chefs" :key="chef.id">
        <v-card>
          <v-img :src="chef.photo" height="370px"></v-img>
          <v-card-title class="name">{{ chef.nom }}</v-card-title>
          <v-card-subtitle class="poste">{{ chef.poste }}</v-card-subtitle>
          <v-card-text clas>{{ chef.description }}</v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <v-row class=" custom-row"> 
      <v-col cols="12" sm="6" md="4" lg="3" v-for="employe in employes" :key="employe.id">
        <v-card>
          <v-img :src="employe.photo" height="370px"></v-img>
          <v-card-title>{{ employe.nom }}</v-card-title>
          <v-card-subtitle>{{ employe.poste }}</v-card-subtitle>
          <v-card-text>{{ employe.description }}</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup>
import { ref } from 'vue';

const chefs = ref([
  { id: 1, nom: 'Guillaume', poste: 'Fondateur / DIRECTEUR COMMERCIAL', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.' },
  { id: 1, nom: 'Michel', poste: 'FONDATEUR / Directeur développement', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.' },

]);

const employes = ref([
  { id: 1, nom: 'Johan', poste: ' FORMATEUR', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
  { id: 1, nom: 'Nathalie', poste: 'Ch. DEVELOPPEMENT COMMERCIAL', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolorel' },
  { id: 1, nom: 'Laetitia', poste: 'CH. COMMUNICATION & MARKETING', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
  { id: 1, nom: 'Florence', poste: 'ASSISTANTE ADMINISTRATIVE', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
  { id: 1, nom: 'Vincent', poste: 'LEAD DEVELOPPEUR', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
  { id: 1, nom: 'Olivier', poste: 'DEVELOPPEUR', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
  { id: 1, nom: 'Sébastien', poste: 'DEVELOPPEUR', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' },
   { id: 1, nom: 'Maha', poste: 'DEVELOPPEUSE', photo: '/images/about/equipe/guillaume.png', description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore' }
]);
</script>

<style scoped>
.custom-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.v-card {
  max-width: 284px;
  border: none !important; 
  box-shadow: none !important; 
  background-color: transparent !important;
}

.details {
  color: var(--Vert-100, #091D20);
  font-family: Barlow;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  width: 30rem;
}

.v-card {
  max-width: 284px;
  border: none !important; 
  box-shadow: none !important; 
  background-color: transparent !important;
}

.description {
  color: var(--Vert-100, #091D20);
font-family: Barlow;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 18px; 
}

.name{
  color: #112528;
/* Subtitle 1 */
font-family: Barlow;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: 26px; 
}

.poste{
  color: #071B1F;
font-family: Barlow;
font-size: 10px;
font-style: normal;
font-weight: 600;
line-height: 15px; 
letter-spacing: 1.8px;
text-transform: uppercase; 
}

</style>