site_logiciels/components/Home/Help.vue

<template>
  <LayoutContainer>
    <v-row class="mt-12">
      <v-container>
        <div :class="!mdAndDown ? 'help-container' : 'help-container-md'" >
          <v-col cols="12" lg="6" md="12" sm="12">
            <v-img  :class="!mdAndDown ? 'help-img' : 'help-img-md'" src="/images/Home_logiciel/Opentalent_a_votre_service.png" />
          </v-col>

            <v-col cols="12" lg="6" md="12" sm="12">
            <h4  :class="!mdAndDown ? 'subtitle-team ml-10': 'subtitle-team-md'">
              Notre équipe est à vos côtés 
              pour vous guider
            </h4>

            <p :class="!mdAndDown ? 'need-help ml-10' : 'need-help-md'">
              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="!mdAndDown ? 'details ml-10' : 'details-md'">
                <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="ml-10">
              <a href="https://ressources.opentalent.fr/" target="_blank">
                <v-btn :class="!mdAndDown ? 'button-faq' : 'button-faq-md '">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, mdAndDown} = useDisplay();
</script>

<style scoped>

.help-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.help-container-md {
  display: flex;
  flex-direction: column;
  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;
  margin-left: auto;
  margin-right: auto;
}

.button-faq-md {
  width: 195px;
  height: 53px;
  background: #64afb7;
  border-radius: 6px;
  color: white;
  padding: 19px 28px;
  gap: 9px;
  margin-left: 3rem;
  margin-top: 2rem;
}

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

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

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

.need-help-md {
  width: 30rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.4rem;
  color: #0e2d32;
  width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

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

.help-img-md {
  width: 40rem;
  border-radius: 3rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
}

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

.subtitle-team-md {
  margin-bottom: 0.7rem;
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  line-height: 34px;
  text-align: left;
  width: 30rem;
  margin-left: auto;
  margin-right: auto;
}
</style>