site_logiciels/components/Home/EventAgenda.vue

<template>
  <v-container>
    <div class="container">
      <h2 class="title">
        Retrouvez tous vos évènements dans l'agenda et référencez vous dans
        l'annuaire
      </h2>

      <v-row>
        <v-col col="6">
          <v-btn> Découvrir l'évènement </v-btn>
        </v-col>

        <v-col col="6">
          <v-btn> Découvrir l'annuaire </v-btn>
        </v-col>
      </v-row>
    </div>

    <div class="white-container">
      <v-row>
        <v-col cols="6">
          <v-img 
          src="/images/eventAgenda/logiciel.png"
          class="screen-img"
          
          > </v-img>
        </v-col>

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

          <p>
            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>
    </div>
  </v-container>
</template>

<style scoped>

.screen-img {
  height: 400px;
  width: 500px;
  border-radius: 20px;
}
.white-container {
  height: 500px;
  width: 1600px;
}

.title {
  height: 114px;

  /* H3 Headline */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 34px;
  line-height: 38px;

  /* or 112% */
  text-align: center;

  /* NEUTRAL - BLANC */
  color: #ffffff;
}

.container {
  height: 500px;
  width: 1600px;
  background: url("/images/eventAgenda/eventAgenda.jpg") no-repeat center center;
  background-size: cover;
}
</style>