site_logiciels/components/About/Presentation.vue

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

        <v-col cols="12" lg="8">
          <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/about/passion.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-left: auto;
  margin-bottom: auto;
  margin-right: 32px;

  @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: 0 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>