site_logiciels/components/Home/Besoin.vue

<template>
  <LayoutContainer>
    <v-row
      class="mt-6"
      justify="center"
    >
      <v-col cols="12" lg="6">
        <div class="screen-img ml-4" />
      </v-col>

      <v-col cols="12" lg="6" class="detail-col" >
        <h3 class="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 />
          <b>Un besoin ?</b> <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 lang="ts">
  import { useDisplay } from "vuetify";
  const { mdAndDown } = useDisplay();
</script>

<style scoped lang="scss">
.v-row
{
  margin-left:auto !important;
  margin-right: auto !important;
  max-width: 1400px !important;
}

h3 {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 38px;
  margin-top: 1rem;
  margin-left: 2rem;
  color: var(--primary-color);
  width: 16rem;
}

p {
  font-weight: 400;
  font-size: 1rem;
  margin-top: 3rem;
  margin-left: 2rem;
  color: var(--primary-color);
  width: 20rem;
}

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

  @media (max-width: 1240px) {
    width: 90%;
    height: 400px;
  }

  @media (max-width: 600px) {
    height: 240px;
  }
}

.detail-col {
  @media (max-width: 1240px) {
    * {
      width: 80%;
      margin: auto;
      text-align: justify;
    }

    h3 {
      margin-bottom: 16px;
      text-align: center;
      font-weight: 600;
    }
  }
}
</style>