site_logiciels/components/About/Equipe.vue

<template>
  <LayoutContainer id="team">
    <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 class="name"> {{ employe.nom }}</v-card-title>
          <v-card-subtitle class="poste">{{ 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_CORCOBA-co-fondateur_et_Gerant.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/Michel_PERNET-SOLLIET-Co-fondateur_et_Product_Owner.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/Johan_HAUDIQUET-Formateur_et_Assistance.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/Nathalie_CHEVALON-Chargee_de_developpement_commercial.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/Laetitia_SIFFOINTE-Chargee_de_Marketing_et_Communication.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/Florence_JOANNIDIS-ADV.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/Vincent_GUFFON-Lead_dev.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/Olivier_MASSOT-Developpeur.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/Sebastien_FAVRE-BONTE_Developpeur.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/Maha_BOUCHIBA-Developpeuse.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;
}
.v-card-subtitle {
  text-overflow: ellipsis;
  white-space: normal;
}


</style>