site_logiciels/components/Home/Help.vue

<template>
  <LayoutContainer>
    <div class="container">
      <v-row>
        <v-col :cols="smAndDown ? 12 : 8">
          <v-img
            :class="smAndDown ? 'help-img-sm' : 'help-img'"
            src="/images/help/Help.png"
          />
        </v-col>

        <v-col :cols="smAndDown ? 12 : 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>
<script setup>
import "vue3-carousel/dist/carousel.css";
import { useDisplay } from "vuetify";
const { smAndDown } = useDisplay();
</script>

<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;

  font-size: 1.5rem;
  line-height: 1.6rem;
}

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

.need-help {
  width: 25rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 2rem;
  color: #0e2d32;
}

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

.help-img-sm {
  width: 50rem;
  border-radius: 3rem;
}

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

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