site_logiciels/components/JoinUs/Missions.vue

<template>
  <LayoutContainer>
    <div
      v-for="(job, jobIndex) in jobs"
      :key="jobIndex"
      class="mission-container"
    >
      <!-- Première ligne -->
      <v-row class="announcement-title ml-6 mr-6">
        <div class="title-job">
          {{ job.title }}
        </div>
        <v-btn class="btn-more" text> En savoir plus </v-btn>
      </v-row>

      <!-- Deuxième ligne -->
      <v-row class="announcement-location ml-6 mr-6">
        <v-icon class="icon-location">
          <i class="fas fa-map-marker"></i>
        </v-icon>
        <div class="location">
          {{ job.location }}
        </div>
      </v-row>
    </div>

    <v-row class="apply-row ml-6 mb-6">
      <v-col cols="12">
      <p class="apply-now">
        Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas à
        déposer votre candidature ci-dessous :
      </p>
    </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-btn class="btn-send"> Envoyer ma candidature </v-btn>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup>
import { ref } from "vue";
const jobs = ref([
  {
    id: 1,
    image: "/images/Opentalent.png",
    title: "Assistant(e) Commercial(e) h/f",
    contractType: "CDI",
    location: "Paris",
    description:
      "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
    properties: ["CDI", "Paris", "Commercial"],
  },
  {
    id: 1,
    image: "/images/Opentalent.png",
    title: "Assistant(e) Commercial(e) h/f",
    contractType: "CDI",
    location: "Paris",
    description:
      "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
    properties: ["CDI", "Paris", "Commercial"],
  },
  {
    id: 1,
    image: "/images/Opentalent.png",
    title: "Assistant(e) Commercial(e) h/f",
    contractType: "CDI",
    location: "Paris",
    description:
      "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
    properties: ["CDI", "Paris", "Commercial"],
  },
]);
</script>

<style scoped>
.announcement-title {
  background: #0e2d32;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.title-job {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 39px;
  color: #ffffff;
}

.btn-more, .btn-send {
  background: #9edbdd;
  color: white;
}

.btn-send {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
}

.announcement-location {
  background: #9edbdd;
  display: flex;
  align-items: center;
  padding: 10px;
}

.icon-location {
  color: #0e2d32;
}

.location {
  margin-left: 10px;
  font-size: 2rem;
}


.apply-now {
  text-align: center;
  font-style: italic;
  font-weight: 300;
  font-size: 34px;
  line-height: 40px;
  color: #091d20;
  margin-bottom: 2rem;
}

.mission-container {
  margin-top: 5rem;
  margin-bottom: 5%;
}
</style>