site_logiciels/components/Home/Help.vue

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

        <v-col cols="4">
          <h4 class="subtitle-team">
            Notre équipe est à vos côtés pour vous guider
          </h4>

          <p class="need-help">
            Besoin d’aide ? <br />
            Vous souhaitez en savoir plus sur nos solutions ou vous avez besoin
            d'assistance sur l'utilisation de l'un de nos logiciels ?
          </p>

          <v-row>
            <ul class="details">
              <li class="detail-item">
                Ouvert du lundi au vendredi de 8h15 à 17h45
              </li>
              <li class="detail-item">Support joignable par mail</li>
              <li class="detail-item">
                De nombreux articles tutoriels accessibles 24h/24
              </li>
            </ul>
          </v-row>

          <v-row class="row-faq">
            <v-btn class="button-faq"> consulter la FAQ </v-btn>
          </v-row>
        </v-col>
      </v-row>
    </div>
  </LayoutContainer>
</template>

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

.row-faq {
  margin-top: 2rem;
}

.details {
  margin-top: 50px;
  width: 19rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  color: #0e2d32;
}

.detail-item {
  margin-left: 28px;
  margin-bottom: 15px;
  width: 286px;
  left: 933px;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #0e2d32;
}

.need-help {
  width: 15rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #0e2d32;
}

.help-img {
  width: 50rem;
  margin-left: 5rem;
  border-radius: 3rem;
}

.subtitle-team {
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 34px;
  width: 20rem;
}

.container {
  margin-bottom: 1rem;
  margin-top: 3rem;
}
</style>