site_logiciels/components/Home/Promotion.vue

<template>
  <LayoutContainer>
    <v-row class="gestion">
      <v-col>
        <div class="d-flex justify-center align-center flex-column">
          <v-icon
            size="6"
            icon="fas fa-circle"
          />
          <h5>
            GESTION ET PROMOTION
          </h5>
        </div>

        <v-row>
          <p class="text-block">
            <span class="highlight">Simplifiez</span>-vous la vie avec un outil

            <span class="inline-pic-container">
              <v-img
                src="/images/Home_logiciel/ecole_de_musique-piano.jpg"
              />
            </span>

            tout en un pour la gestion et la promotion

            <span class="inline-pic-container">
              <v-img
                src="/images/Home_logiciel/ecole_de_danse-danseuse.jpg"
              />
            </span>

            , de votre structure culturelle.

            <span class="inline-pic-container">
              <v-img
                src="/images/Home_logiciel/ecole_de_cirque.jpg"
              />
            </span>
          </p>
        </v-row>
      </v-col>
    </v-row>

    <v-row class="demo">
      <v-col>
        <v-img
          src="/images/home/écran.JPG"
          class="screen"
        >
          <v-icon icon="fas fa-play" class="play-icon" />
        </v-img>

      </v-col>
    </v-row>

    <section class="outil">
      <v-row>
        <v-col>
          <h3>
            Un outil complet et intuitif <br />
            pour chaque structure
          </h3>
        </v-col>
      </v-row>

      <v-row class="pictos">
        <v-col cols="12" lg="6">
          <v-row>
            <img src="/images/pictoHome/network.svg" alt="network" />
            <p>
              Logiciel de gestion et communication en ligne
            </p>
          </v-row>

          <v-row>
            <img src="/images/pictoHome/website.svg" alt="website" />
            <p>
              Site web intégré et simple d’usage
            </p>
          </v-row>
        </v-col>

        <v-col cols="12" lg="6">
          <v-row>
            <img src="/images/pictoHome/visibility.svg" alt="visibility" />
            <p>
              Augmentez votre visibilité avec l'agenda culturel
            </p>
          </v-row>

          <v-row>
            <img src="/images/pictoHome/communication.svg" alt="communication" />
            <p>
              Communiquez en réseau
            </p>
          </v-row>
        </v-col>
      </v-row>
    </section>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useDisplay } from "vuetify";

const { mdAndDown } = useDisplay();
</script>

<style scoped lang="scss">

.highlight {
  color: var(--secondary-color);
}

.v-row.gestion {
  >.v-col {
    margin-bottom: 4rem;
    background: var(--primary-color);
  }

  h5 {
    font-size: 1rem;
    line-height: 1rem;
    margin-top: 1rem;
    color: var(--secondary-color);
    text-align: center;
    letter-spacing: 2.16px;
    text-transform: uppercase;
  }

  .fa-circle{
    margin-top: 1rem;
    color: var(--on-primary-color);
    margin-right: 1rem;
  }

  .text-block {
    font-weight: 600;
    font-size: 3rem;
    text-align: center;
    color: var(--on-primary-color);
    height: 20rem;
    width: 45rem;
    margin: 2rem auto 28rem;
  }

  .inline-pic-container {
    display: inline-flex;
    justify-content: center;
    vertical-align: middle;
  }

  .v-img {
    height: auto;
    width: 7rem;
    max-width: 100%;
    border-radius: 5rem;
  }

  @media (max-width: 960px) {
    .text-block {
      font-weight: 500;
      font-size: 2rem;
      line-height: 3.5rem;
      height: 10rem;
      width: 40rem;
      margin: 3rem 2rem 5rem;
    }

    .v-img {
      width: 3.2rem;
      border-radius: 5rem;
    }
  }
}

.v-row.demo {
  margin-bottom: -28rem;

  .screen {
    width: 900px;
    object-fit: cover;
    margin: 2rem auto;
    text-align: center;
    border-radius: 20px;
    transition: transform 0.2s;
    bottom: 30rem;
  }

  @media (max-width: 960px) {
    .screen {
      width: 100%;
    }
  }

  @media (min-width: 600px) {
    .screen:hover {
      transform: scale(1.1);
    }
  }

  .play-icon {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--on-primary-color);
    cursor: pointer;
    z-index: 100;
  }
}

section.outil {
  margin-bottom: 36px;

  h3 {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 3rem;
    text-align: center;
  }

  .pictos {
    .v-row {
      border-bottom: solid 1px var(--on-primary-color-alt);
      margin: 0;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .v-row:first-child {
      border-top: solid 1px var(--on-primary-color-alt);
    }

    img {
      width: 50px;
      height: 50px;
      margin-right: 2rem;
    }

    p {
      font-weight: 400;
      font-size: 22px;
      line-height: 26px;
      width: 25rem;
      color: var(--primary-color);
      margin-bottom: 1rem;
    }
  }
}
</style>