site_logiciels/components/Common/Banner/BannerTitle.vue

<template>
  <LayoutContainer>
    <div class="container-title">
      <v-col cols="3" class="lateral-text">
        <span>
          {{ leftText }}
        </span>
      </v-col>
      <v-col cols="6">
        <h1>
          {{ title }}
        </h1>
      </v-col>
      <v-col cols="3" class="lateral-text">
        <span>
          {{ rightText }}
        </span>
      </v-col>
    </div>
  </LayoutContainer>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  leftText: {
    type: String,
    required: false,
    default: ""
  },
  rightText: {
    type: String,
    required: false,
    default: ""
  },
});
</script>

<style scoped>
.container-title {
  display: flex;
  justify-content: space-around;
  line-height: 16px;
  align-items: center;
  text-align: center;
  letter-spacing: 0.18em;
  border-bottom: 0.1rem solid var(--on-neutral-color-extra-light);
}

h1 {
  font-size: 72px;
  line-height: 77px;
  color: var(--on-neutral-color);
  text-align: center;
}

.lateral-text {
  position: absolute;
  font-weight: 600;
  font-size: 72px;
  line-height: 85px;
  opacity: 0.08;
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-style: normal;

}

.lateral-text:first-child {
  left: -10rem;
}

.lateral-text:last-child {
  right: -10rem;
}
</style>