site_logiciels/components/About/Equipe.vue

<template>
  <AnchoredSection id="team">
    <LayoutContainer class="mb-12">
      <v-row class="mt-12 center-90">
        <LayoutUISubTitle>
          Notre équipe
        </LayoutUISubTitle>
      </v-row>

      <v-row class="center-90">
        <LayoutUITitle>
          Une équipe spécialisée et passionnée
        </LayoutUITitle>

        <span 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.
        </span>
      </v-row>

      <v-row class="center-90">
        <v-col
          cols="12" sm="6" md="4" lg="3"
          v-for="associate in associates"
          :key="associate.name"
        >
          <v-card>
            <v-img
              :src="associate.photo"
              :height="370"
            />

            <v-card-title class="name">
              {{ associate.name }}
            </v-card-title>

            <v-card-subtitle class="position">
              {{ associate.position }}
            </v-card-subtitle>
          </v-card>
        </v-col>
      </v-row>

      <v-row class="center-90">
        <v-col
          cols="12" sm="6" md="4" lg="3"
          v-for="employee in employees"
          :key="employee.name"
        >
          <v-card>
            <v-img
              :src="employee.photo"
              :height="370"
            />

            <v-card-title class="name">
              {{ employee.name }}
            </v-card-title>

            <v-card-subtitle class="position">
              {{ employee.position }}
            </v-card-subtitle>
          </v-card>
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

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

const associates: Array<SocietyMember> = [
  {
    name: "Guillaume",
    position: "Co-fondateur / Gérant",
    photo: "/images/pages/qui-sommes-nous/equipe/Guillaume_CORCOBA-co-fondateur_et_Gerant.png",
    alt: "Avatar d’un homme avec les cheveux poivre et sel court portant un polo bordeaux et un jean"
  },
  {
    name: "Michel",
    position: "Co-fondateur / Product Owner",
    photo: "/images/pages/qui-sommes-nous/equipe/Michel_PERNET-SOLLIET-Co-fondateur_et_Product_Owner.png",
    alt: "Avatar d’un homme avec les cheveux bruns mi-long portant un pull jaune et un pantalon noir"
  },
];

const employees: Array<SocietyMember> = [
  {
    name: "Johan",
    position: "Formation et Assistance",
    photo: "/images/pages/qui-sommes-nous/equipe/Johan_HAUDIQUET-Formateur_et_Assistance.png",
    alt: "Avatar d’un homme avec les cheveux bruns court portant un sweat noir et un pantalon beige"
  },
  {
    name: "Nathalie",
    position: "Développement Commercial",
    photo: "/images/pages/qui-sommes-nous/equipe/Nathalie_CHEVALON-Chargee_de_developpement_commercial.png",
    alt: "Avatar d’une femme avec les cheveux bruns mi-long et ondulée portant une chemise noire/blanche et un jean bleu foncé"
  },
  {
    name: "Laetitia",
    position: "Marketing & Communication",
    photo: "/images/pages/qui-sommes-nous/equipe/Laetitia_SIFFOINTE-Chargee_de_Marketing_et_Communication.png",
    alt: "Avatar d’une femme avec les cheveux blonds long et ondulée portant un pull gris et un jean noir"
  },
  {
    name: "Florence",
    position: "Assistante administrative et commerciale",
    photo: "/images/pages/qui-sommes-nous/equipe/Florence_JOANNIDIS-ADV.png",
    alt: "Avatar d’une femme avec des lunettes, les cheveux bruns long et attaché portant un pull bleu et un jean bleu foncé"
  },
  {
    name: "Vincent",
    position: "Lead developer",
    photo: "/images/pages/qui-sommes-nous/equipe/Vincent_GUFFON-Lead_dev.png",
    alt: "Avatar d’un homme avec les cheveux bruns court avec une barbe rousse portant un tee-shirt noir et un jean bleu"
  },
  {
    name: "Olivier",
    position: "Développeur",
    photo: "/images/pages/qui-sommes-nous/equipe/Olivier_MASSOT-Developpeur.png",
    alt: "Avatar d’un homme avec les cheveux blonds mi-long et un bouc blond portant un gilet gris et un jean noir"
  },
  {
    name: "Sébastien",
    position: "Développeur",
    photo: "/images/pages/qui-sommes-nous/equipe/Sebastien_FAVRE-BONTE_Developpeur.png",
    alt: "Avatar d’un homme avec des lunettes, les cheveux bruns court portant un pull bleu et un jean bleu foncé"
  },
  {
    name: "Maha",
    position: "Développeuse",
    photo: "/images/pages/qui-sommes-nous/equipe/Maha_BOUCHIBA-Developpeuse.png",
    alt: "Avatar d’une femme portant un turban sur les cheveux, haut beige et blanc et un jean bleu foncé"
  },
];
</script>

<style scoped lang="scss">
.v-card {
  max-width: 284px;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.v-card-subtitle {
  text-overflow: ellipsis;
  white-space: normal;
}

.details {
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  width: 30rem;
}

.description {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
}

.name {
  color: var(--primary-color);
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
}

.position {
  color: var(--primary-color);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
</style>