site_logiciels/components/Logiciels/Artist/Formations.vue

<template>
  <AnchoredSection id="webinars">
    <LayoutContainer>
      <div class="alt-theme">
        <v-container>
          <v-row class="center-90">
            <LayoutUISubTitle class="mt-12">
              Pour aller plus loin
            </LayoutUISubTitle>
          </v-row>

          <v-row class="formation center-90 py-12 align-center mb-12">
            <v-col cols="12" lg="6">
              <v-img
                src="/images/pages/opentalent_artist/formations/Webinaire_Opentalent_Artist.jpg"
                alt="Ordinateur avec un écran en visioconférence avec plusieurs personnes posé sur une table de salon devant une fenêtre avec des plantes et une tasse posées à côté"
              />
            </v-col>

            <v-col cols="12" lg="6">
              <h3>
                Webinaire - Partez à la découverte du logiciel Opentalent Artist
              </h3>

              <p class="details">
                Rejoignez notre webinaire, spécialement conçu pour les
                professionnels du secteur culturel : orchestres, chorales,
                compagnies de danse, troupes de théâtre et de cirque. Cette
                session interactive vous offre une occasion unique de vous
                immerger dans les fonctionnalités de notre logiciel, de
                comprendre ses avantages distinctifs et d'explorer les diverses
                versions disponibles. Ne manquez pas cette chance de simplifier
                votre gestion et de faire évoluer votre pratique artistique avec
                nos solutions technologiques innovantes !
              </p>

              <nuxt-link to="/webinaires">
                <v-btn> S'inscrire aux webinaires </v-btn>
              </nuxt-link>
            </v-col>
          </v-row>
        </v-container>
      </div>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
</script>

<style scoped lang="scss">
.v-container {
  padding: 0 !important;
}

.alt-color {
  color: var(--on-primary-color-alt);
}

.formation {
  .v-img {
    width: 500px;
    height: 440px;
    background-position: center;
    background-size: cover;
    border-radius: 10%;
    margin: 0 auto;
  }

  :deep(.v-img img) {
    object-fit: cover;
  }

  h3 {
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 35px;
    color: var(--on-primary-color);
    margin-bottom: 1rem;
  }

  .details {
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--on-primary-color);

    @media (max-width: 1240px) {
      margin-right: 24px !important;
    }

    @media (max-width: 600px) {
      margin-right: auto !important;
    }
  }

  .v-btn {
    font-weight: 500;
    font-size: 1rem;
    line-height: 18px;
    background: transparent;
    color: var(--on-primary-color);
    border: 1px solid;
    border-color: var(--on-primary-color);
    border-radius: 0.5rem;
    width: 90%;
    margin: 24px auto;
  }

  .v-col-12:nth-child(2) {
    @media (min-width: 1240px) {
      padding: 24px 64px;
    }
    @media (max-width: 1240px) {
      margin: 24px 5%;
      max-width: 90%;
    }

    a {
      display: flex;
      width: 100%;
      text-decoration: none;
    }
  }
}
</style>