site_logiciels/components/Home/Besoin.vue

<template>
  <LayoutContainer :overflow="false">
    <v-row class="white-container">
      <v-row>
        <v-col  :cols="smAndDown ? 12 : 6">
          <v-img src="/images/eventAgenda/logiciel.png" :class="smAndDown ? 'screen-img-sm' : 'screen-img'">
          </v-img>
        </v-col>
        <div :class="smAndDown ? 'circle-sm' : 'circle'">
          <v-icon class="fa-brands fa-react icon"></v-icon>
          <div class="circle-text">Réponse aux besoins</div>
        </div>
        <v-col cols="6">
          <h3 :class="smAndDown ? 'title-event-sm d-flex justify-center' : 'title-event'">
            Une solution évolutive pour vous donner entière satisfaction
          </h3>

          <p :class="smAndDown ? 'details-sm' : 'details'">
            La satisfaction de nos clients est notre première motivation et nous
            nous tenons à votre écoute pour faire évoluer notre logiciel. Un
            besoin ? Notifiez le nous et après l'étude de votre demande en
            interne puis validation, nous intégrerons votre requête à notre
            processus de développement.
          </p>
        </v-col>
      </v-row>
    </v-row>
  </LayoutContainer>
</template>

<script setup>
import { useDisplay } from "vuetify";
const { lgAndUp, smAndDown, mdAndDown } = useDisplay();
</script>

<style scoped>

.btn-event-sm {
  font-family: "Barlow";
  font-style: normal;
  border-radius: 0.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-top: 3rem;
  
}
.icon-arrow {
  font-size: 1rem;
  margin-left: 1rem;
}
.btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rem;
}
.btn-event {
  font-family: "Barlow";
  font-style: normal;
  border-radius: 0.5rem;
  margin-left: 7vw;
  gap: 9px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 15px;
  width: 18rem;
  height: 3rem;
  margin-top: 3rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.title {
  font-family: "Barlow";
  font-style: normal;
  height: 9rem;
  font-weight: 400;
  font-size: 3rem;
  line-height: 3rem;
  text-align: center;
  margin-bottom: 3rem;
  margin-top: 4rem;
  color: #ffffff;
  width: 45rem;
}

.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  position: absolute;
  left: 35%;
  margin-top: 0.5rem;
  width: 300px;
  height: 300px;
  background: #eff9fb;
  border-radius: 50%;
}

.circle-sm{
  position: absolute;
  left: 25%;
  margin-top: 15rem;
  width: 300px;
  height: 300px;
  background: #eff9fb;
  border-radius: 50%;
}

.icon {
  font-size: 3rem;
  font-weight: bold;
  color: #0e2d32;
  margin-top: 6rem;
  margin-left: 8rem;
}
.circle-text {
  font-style: normal;
  font-weight: 300;
  font-size: 22px;
  line-height: 26px;
  text-align: center;
  color: #0e2d32;
  font-family: "Barlow";
  font-style: normal;
  margin-top: 2rem;
}


.title-event {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 38px;
  margin-top: 1rem;
  margin-left: 2rem;
  color: #091d20;
  width: 16rem;
  margin-left: 10rem;
}

.title-event-sm {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 38px;
  margin-top: 13rem;
  color: #091d20;
  margin-left: 2rem;
  width: 30rem;
  text-align: center;
}


.details {
  font-weight: 400;
  font-size: 1rem;
  margin-top: 3rem;
  margin-left: 2rem;
  color: #091d20;
  width: 16rem;
  margin-left: 10rem;
  font-family: "Barlow";
  font-style: normal;
}


.details-sm {
  font-weight: 400;
  font-size: 1rem;
  margin-top: 3rem;
  margin-left: 2rem;
  color: #091d20;
  font-family: "Barlow";
  font-style: normal;
  width: 30rem;
  text-align: center;
}



.container-sm {
  margin-bottom: 60rem;
}

.white-container {
  margin-top: 9rem;
  background-color: #ffffff;
}

.screen-img {
  margin-left: 8rem;
  width: 60%;
  border-radius: 20%;
}

.screen-img-sm{
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  border-radius: 20%;
}
</style>