site_logiciels/components/JoinUs/Banner.vue

<template>
  <LayoutContainer>
    <v-row>
      <v-col cols="12" class="title">
        <h1 class="text-center">Nous rejoindre</h1>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12">
        <div class="banner-container">
          <img src="/images/join/join.jpg" alt="line" class="cover-image" />
        </div>
      </v-col>
    </v-row>

    <h3 class="text-center join-title bold mt-6">
      Opentalent, où l'innovation & la passion se rencontre !
    </h3>
    <h4 class="text-center join-title">
      Découvrez nos opportunités et rejoignez-nous dans cette aventure
      passionnante.
    </h4>
  </LayoutContainer>
</template>

<script setup></script>

<style scoped>

.bold {
  font-weight: 600 !important;
}
.join-title {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 2.5rem;
  text-align: center;
  margin-left: 30rem;
  margin-right: 30rem;
}
.title {
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 3rem;
  line-height: 85px;
}

.banner-container {
  position: relative;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 25rem;
  object-fit: cover;
  transition: transform 0.2s;
  margin: 0 auto;
  transform: scaleX(-1);
}
</style>