site_logiciels/components/Home/EventAgenda.vue

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

    <v-row>
      <v-col cols="12" class="btn-container">
        <v-col col="6">
          <v-btn class="btn-event"
            >Découvrir les évènements
            <v-icon class="fa-solid fa-arrow-right icon-arrow"></v-icon>
          </v-btn>
        </v-col>

        <v-col col="6">
          <v-btn class="btn-event"
            >Découvrir l’ANNUAIRE
            <v-icon class="fa-solid fa-arrow-right icon-arrow"></v-icon>
          </v-btn>
        </v-col>
      </v-col>
    </v-row>

    <div class="white-container">
      <v-row>
        <v-col cols="6">
          <v-img src="/images/eventAgenda/logiciel.png" class="screen-img">
          </v-img>
        </v-col>
        <div class="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="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. 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>
  </LayoutContainer>
</template>

<style scoped>
.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%;
}

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

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

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

.container {
  height: 30rem;
  margin-bottom: 30rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(
      180deg,
      rgba(14, 45, 50, 0.04) 0%,
      rgba(14, 45, 50, 0.2) 100%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("/images/eventAgenda/eventAgenda.jpg") no-repeat center 60%;
  background-size: cover;
}

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

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