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">
      <h3 class="apply">
        Candidature spontanée
      </h3>
      <p class="apply-now">
        Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas à déposer votre candidature ci-dessous :
      </p>
      <v-btn class="btn-more">
        Envoyer ma candidature
      </v-btn>
    </v-row>

    <!-- <v-row class="apply-row ml-6 mb-6">
      <h3 class="apply">
        Candidature spontanée
      </h3>
      <p class="apply-now">
        Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas à déposer votre candidature ci-dessous :
      </p>
      <FormApplicationForm />
    </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: 2.5rem;
  line-height: 39px;
  color: #ffffff;
}

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

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

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

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

}

.apply {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 39px;
  color: #0e2d32;
  margin-top: 5rem;
  margin-bottom: 1rem;
}

.apply-now {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 300;
  font-size: 34px;
  line-height: 40px;
  color: #091d20;
  margin-bottom: 2rem;
}
.description-job {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 40px;
  color: #091d20;
}

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