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">
      Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est
      ipsa laborum sed internos dolor in pariatur vitae. Et quis nostrum non
      praesentium impedit 33 doloribus cumque et adipisci velit!
    </h3>
  </LayoutContainer>
</template>

<script setup></script>

<style scoped>
.join-title {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 2.5rem;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  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>