site_logiciels/components/Home/Besoin.vue

<template>
  <LayoutContainer :overflow="false">
    <v-row class="mt-6" justify="center" v-if="!mdAndDown" >
      <v-col cols="6" class="relative-container" >
        <div class="screen-img ml-4"></div>
        <!-- <div class="circle">
          <v-icon class="fa-brands fa-react icon" />
          <div class="circle-text">Réponse aux besoins</div>
        </div> -->
      </v-col>

      <v-col cols="6" >
        <h3 class="title-event mt-12">
          Une solution évolutive pour vous donner entière satisfaction
        </h3>

        <p class="details ">
          La satisfaction de nos clients est notre première motivation et nous
          nous tenons à votre écoute pour faire évoluer notre logiciel. <br />
          <span class="bold">Un besoin ?</span> <br />
          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>
  </LayoutContainer>
</template>

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

<style scoped>

.v-row
{
  margin-left:auto !important;
  margin-right: auto !important;
  max-width: 1400px !important;
}



.relative-container {
  position: relative;
}

.bold {
  font-weight: bold;
}

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

.details {
  font-weight: 400;
  font-size: 1rem;
  margin-top: 3rem;
  margin-left: 2rem;
  color: #091d20;
  width: 20rem;
  text-align: justify;
}

.screen-img {
  background-image: url("/images/home/Repondre-aux-besoins-des-clients-Opentalent.png");
  background-position: center;
  background-size: cover;
  width: 700px;
  height: 500px;
}
</style>