site_logiciels/components/Formation/Banner.vue

<template>
  <LayoutContainer>
    <LayoutUITitlePage>
      Formation
      <template #subtitle>
        Prise en main ou piqûre de rappel,on est toujours à vos côtés.
      </template>
    </LayoutUITitlePage>

    <v-row>
      <!-- TODO: remplacer par le component CommonBanner comme dans WebinaireBanner -->
      <v-col cols="12" class="banner-container">
        <v-img
          src="/images/formation/banner.jpg"
          alt="banner"
          cover
          class="cover-image"
        />

        <div class="image-text mt-12">
          Et si vous passiez rapidement à la vitesse supérieure...
        </div>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<style scoped lang="scss">
  .banner-container {
    position: relative;
    height: 35rem;

    :deep(img) {
      width: 100%;
      height: 100%;
      object-position: center 30%;
      transform: scaleX(-1);
    }

    .image-text {
      position: absolute;
      top: 40px;
      left: 20px;
      font-family: "Barlow", serif;
      color: white;
      font-size: 3rem;
      width: 30rem;
      font-style: italic;
      font-weight: 300;
      line-height: 40px;
    }
  }
</style>