site_logiciels/components/About/FAQ.vue

<template>
  <LayoutContainer> 
      <v-row class="help-row">
        <v-col cols="6" class="help-col">
          <v-img class="help-img" src="/images/help/Help.png"/>
        </v-col>

        <v-col cols="6" class="help-col text-content">
          <h4 class="subtitle-team">
            Chez Opentalent, nous avons à coeur de répondre à vos interrogations et de vous apporter la solution faite pour vous.
          </h4>
          <v-row class="row-faq">
            <v-btn class="button-faq ml-6 mt-12">
              Nous contacter
            </v-btn>
          </v-row>
        </v-col>
      </v-row>
  </LayoutContainer>
</template>
<script setup>
</script>

<style scoped>
.button-faq {
  width: 195px;
  height: 53px;
  background: #64afb7;
  border-radius: 6px;
  color: white;
  padding: 19px 28px;
  gap: 9px;
  font-family: "Barlow";
}

.help-img {
  margin-left: 5rem;
  margin-right: 3rem;
  height: 100%;
}
.subtitle-team {
  margin-bottom: 2rem;
  margin-top: 10rem;
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  line-height: 34px;
  width: 35rem;
  color: white;
}

.container {
  margin-bottom: 1rem;
  margin-top: 3rem;
}

.help-row {
  align-items: stretch; /* Align items will cause the columns to match height */

  background: var(--Vert-90, #0E2D32);
}

.help-col {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  justify-content: flex-start; /* Align children at the start */
}

.text-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Spread text and button if there's extra space */
}

</style>