site_logiciels/components/About/Presentation.vue

<template>
  <AnchoredSection id="about">
    <LayoutContainer>
      <v-row class="my-4 center-90">
        <v-col cols="12">
          <LayoutUISubTitle> Qui sommes-nous ? </LayoutUISubTitle>
        </v-col>
      </v-row>

      <v-row class="my-6 center-90">
        <v-col cols="12">
          <div class="italic-title">
            “Imaginé par des musiciens pour des musiciens, Opentalent se veut
            être la référence pour la gestion et la promotion du spectacle
            vivant sur les territoires.”
          </div>
        </v-col>
      </v-row>

      <v-row class="history mb-12">
        <v-col cols="12" md="6">
          <v-img
            src="/images/pages/qui-sommes-nous/presentation/Concu_par_des_passiones_pour_des_passionnes.JPG"
            alt="Entretien dans un bureau entre un homme et une femme de dos"
            cover
          />
        </v-col>

        <v-col cols="12" md="6">
          <h3>Une histoire de passionnés</h3>

          <p class="mb-8">
            En 2005, Guillaume CORCOBA, musicien depuis toujours et à ce moment
            là président d'un orchestre d'harmonie, mais également membre du
            conseil d'administration de sa fédération, réfléchit à un outil pour
            centraliser les informations de sa structure, mais également au
            niveau fédéral. Il souhaite simplifier la gestion des structures
            culturelles et en faire la promotion, car pour lui, le milieu
            culturel est indispensable. Il est rapidement rejoint par Michel
            PERNET-SOLLIET, lui aussi musicien, et ils montent ensemble
            Openassos, qui deviendra quelques années plus tard, Opentalent.
            Opentalent c'est un ensemble de 3 logiciels spécialement dédiés à la
            culture et un agenda culturel pour en faire la promotion.
          </p>

          <h3>La Culture au service du développement territorial</h3>

          <p>
            Qui n'a jamais entendu que la culture coûtait trop cher ? On
            l'entend , ha ça oui on l'a même trop entendu ! Mais la culture
            c'est avant tout un facteur de lien social incroyable. On se
            retrouve, on échange, on partage... on vit ensemble. On crée des
            vrais moments et on développe des groupes de passionnés. On
            participe à rendre nos collectivités attractives et surtout on les
            fait vivre, toute l'année, à toutes les saisons. Depuis plusieurs
            décennies, un grand nombre de territoires s'appuie sur le
            développement de la culture comme un outil de développement
            territorial pour faire face à la désindustrialisation, à une
            croissance démographique ralentie ou encore une image défavorable.
            Ce modèle de développement par la culture pour pallier un déficit
            d’attractivité touristique inspire de plus en plus de politiques de
            développement territorial.
          </p>
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

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

<style scoped lang="scss">
.italic-title {
  font-style: italic;
  font-weight: 300;
  font-size: 34px;
  line-height: 40px;
  color: var(--primary-color);
  width: 80%;
  margin: auto;

  @media (max-width: 1240px) {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

.v-row.history {
  width: 80%;
  margin-left: auto;
  margin-right: auto;

  .v-col-12 {
    padding: 16px 5%;
  }

  .v-img {
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    margin: 0 auto;

    @media (max-width: 600px) {
      width: 90%;
    }
  }

  h3 {
    font-weight: 600;
    font-size: 42px;
    line-height: 42px;
    flex: none;
    margin-bottom: 3rem;
  }

  h4 {
    font-weight: 400;
    font-size: 34px;
    line-height: 38px;
    color: var(--primary-color);
    margin-bottom: 3rem;
    width: 25rem;
    text-align: justify;

    @media (max-width: 600px) {
      width: 100%;
    }
  }

  p {
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 2rem;

    @media (max-width: 600px) {
      width: 100%;
    }
  }

  @media (max-width: 1240px) {
    h3,
    h4,
    p,
    .v-img {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
  }
}
</style>