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
          v-for="associate in associates"
          :key="associate.name"
          cols="12"
          sm="6"
          md="4"
          lg="3"
        >
          <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
          v-for="employee in employees"
          :key="employee.name"
          cols="12"
          sm="6"
          md="4"
          lg="3"
        >
          <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 / CTO',
    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 voile 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>