site_logiciels/components/Home/EventAgenda.vue

<!--
Section "Agenda" de la page d'accueil
-->
<template>
  <LayoutContainer>
    <div class="container">
      <div class="d-flex flex-row justify-center">
        <h2 class="alt-theme bg-transparent">
          L’agenda Opentalent
        </h2>
      </div>

      <div class="d-flex align-center justify-center">
        <h3>
          Retrouvez tous les événements et toutes les structures culturelles
          autour de chez vous
        </h3>
      </div>

      <v-row justify="center" class="btn-container">
        <v-col cols="12" lg="6">
          <AgendaLink href="/">
            <v-btn append-icon="fas fa-arrow-right" class="btn-event">
              Découvrir l'agenda
            </v-btn>
          </AgendaLink>
        </v-col>

        <v-col cols="12" lg="6">
          <AgendaLink href="/annuaire">
            <v-btn
              append-icon="fas fa-arrow-right"
              :variant="lgAndUp ? 'elevated' : 'outlined'"
              class="btn-event btn-annuaire"
            >
              Découvrir l’annuaire
            </v-btn>
          </AgendaLink>
        </v-col>
      </v-row>
    </div>
  </LayoutContainer>
</template>

<script setup>
import { useDisplay } from 'vuetify'
import AgendaLink from '~/components/Common/AgendaLink.vue'
const { lgAndUp } = useDisplay()
</script>

<style scoped>
.container {
  height: 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/components/agenda/Opentalent_Agenda_evenement_culturel.jpg')
      no-repeat center 60%;
  background-size: cover;

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

h3 {
  height: 9rem;
  font-weight: 400;
  font-size: 3rem;
  line-height: 3rem;
  text-align: center;
  margin-bottom: 3rem;
  margin-top: 4rem;
  color: var(--on-primary-color);
  width: 45rem;

  @media (max-width: 600px) {
    font-size: 2rem;
    margin-right: auto;
    margin-left: auto;
    max-width: 80%;
  }
}

.btn-container {
  padding: 0 20rem;

  .v-col-12 {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 1240px) {
    padding: 0 5rem;
    margin-top: 48px;

    a {
      display: block;
      width: 80%;
      margin: 5px auto;
    }
  }

  @media (max-width: 1600px) {
    padding: 0 5%;
  }
}

.btn-event {
  border-radius: 0.5rem;
  gap: 9px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 15px;
  width: 18rem;
  margin-top: 3rem;
  min-width: 20rem;
  max-width: 20rem;
  height: 3.5rem;

  @media (max-width: 1240px) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-width: 0;
  }
}

.btn-annuaire {
  @media (max-width: 1240px) {
    color: var(--on-primary-color);
    font-weight: 600;
    border: solid 2px var(--on-primary-color);
  }
}
</style>