site_logiciels/components/About/Equipe.vue

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

      <v-row>
        <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>
        <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>
        <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: "Fondateur / DIRECTEUR COMMERCIAL",
    photo: "/images/about/equipe/Guillaume_CORCOBA-co-fondateur_et_Gerant.png",
  },
  {
    name: "Michel",
    position: "FONDATEUR / Directeur développement",
    photo: "/images/about/equipe/Michel_PERNET-SOLLIET-Co-fondateur_et_Product_Owner.png",
  },
];

const employees: Array<SocietyMember> = [
  {
    name: "Johan",
    position: " FORMATEUR",
    photo: "/images/about/equipe/Johan_HAUDIQUET-Formateur_et_Assistance.png",
  },
  {
    name: "Nathalie",
    position: "Ch. DEVELOPPEMENT COMMERCIAL",
    photo: "/images/about/equipe/Nathalie_CHEVALON-Chargee_de_developpement_commercial.png",
  },
  {
    name: "Laetitia",
    position: "CH. COMMUNICATION & MARKETING",
    photo: "/images/about/equipe/Laetitia_SIFFOINTE-Chargee_de_Marketing_et_Communication.png",
  },
  {
    name: "Florence",
    position: "ASSISTANTE ADMINISTRATIVE",
    photo: "/images/about/equipe/Florence_JOANNIDIS-ADV.png",
  },
  {
    name: "Vincent",
    position: "LEAD DEVELOPPEUR",
    photo: "/images/about/equipe/Vincent_GUFFON-Lead_dev.png",
  },
  {
    name: "Olivier",
    position: "DEVELOPPEUR",
    photo: "/images/about/equipe/Olivier_MASSOT-Developpeur.png",
  },
  {
    name: "Sébastien",
    position: "DEVELOPPEUR",
    photo: "/images/about/equipe/Sebastien_FAVRE-BONTE_Developpeur.png",
  },
  {
    name: "Maha",
    position: "DEVELOPPEUSE",
    photo: "/images/about/equipe/Maha_BOUCHIBA-Developpeuse.png",
  },
];
</script>

<style scoped lang="scss">
.v-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;
}

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

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

.description {
  color: var(--primary-color);
  font-family: Barlow, serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 18px;
}

.name {
  color: var(--primary-color);
  font-family: Barlow, serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
}

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