site_logiciels/components/Home/Besoin.vue

<template>
  <LayoutContainer :overflow="false">
    <v-row class="mt-6" justify="center">
      <v-col cols="6" class="relative-container" >
        <div class="screen-img"></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">
          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>
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 10rem;
}

.relative-container {
  position: relative;
}

.bold {
  font-weight: bold;
}

.circle {
  position: absolute;
  top: 20%;
  right: 0;
  margin-top: 0.5rem;
  width: 300px;
  height: 300px;
  background: #eff9fb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

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

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

.screen-img {
  position: absolute;
  right: 0;
  margin-left: 3rem;
  width: 600px;
  height: 500px;
  background-image: url("/images/eventAgenda/logiciel.png");
  background-position: center;
  background-size: cover;
  border-radius: 10%;
  margin-right: 10rem;
}
</style>