site_logiciels/components/Home/Help.vue

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

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

            <p class="need-help ml-10">
              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 ml-10">
                <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 ml-10">
              <a href="https://ressources.opentalent.fr/" target="_blank">
                <v-btn class="button-faq">Consulter la FAQ</v-btn>
              </a>
            </v-row>
          </v-col>
        </div>
      </v-container>
    </v-row>
  </LayoutContainer>
</template>
<script setup>
import "vue3-carousel/dist/carousel.css";
import { useDisplay } from "vuetify";
const { smAndDown } = useDisplay();
</script>

<style scoped>
.container {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
.help-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.button-faq {
  width: 195px;
  height: 53px;
  background: #64afb7;
  border-radius: 6px;
  color: white;
  padding: 19px 28px;
  gap: 9px;
}

.details {
  margin-top: 20px;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  color: #0e2d32;
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.detail-item {
  margin-left: 28px;
  margin-bottom: 15px;
  color: #0e2d32;
  font-size: 1.1rem;
}

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

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

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

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

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