page about

components/About/Banner.vue

@@ -0,0 +1,202 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+        <v-col cols="12" class="title">
+          <h1 class="text-center">Qui sommes nous ?</h1>
+        </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <div class="banner-container">
+          <img
+            src="/images/solutions/school.jpg"
+            alt="line"
+            class="cover-image"
+          />
+  
+
+        </div>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" class="menu-container">
+        <div v-for="menu in menus" :key="menu.label">
+          <v-chip v-if="state.activeMenu === menu.label" class="active-menu">{{ menu.label }}</v-chip>
+          <span v-else>{{ menu.label }}</span>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+const state = ref({
+  activeMenu: "Qui sommes-nous",
+})
+
+const menus = [
+  { label: 'Qui sommes-nous' },
+  { label: 'nos logiciels' },
+  { label: 'l\’agenda opentalent' },
+  { label: 'notre histoire' },
+  { label: 'notre équipe' }
+];
+</script>
+
+
+<style scoped>
+
+.title{
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  text-align: center;
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 3rem;
+line-height: 85px;
+}
+
+.container-title {
+  display: flex;
+  justify-content: space-around;
+  font-family: "Barlow";
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.text-left {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 85px;
+  color: #000000;
+  opacity: 0.1;
+  margin-top: 2rem;
+  margin-left: 5rem;
+}
+
+.logiciel {
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 3rem;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  margin-left: 6rem;
+  margin-right: 4rem;
+}
+
+.text-right {
+  margin-top: 2rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  text-align: right;
+  opacity: 0.1;
+  margin-right: 5rem;
+}
+
+.menu-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem 10rem;
+  background: white;
+  color: #bbb8b8;
+  font-family: "Barlow";
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+.black-square {
+  position: absolute;
+  bottom: 0.4rem;
+  right: 0;
+  width: 13rem;
+  height: 10rem;
+  background-color: black;
+  background: #9edbdd;
+}
+
+.blue-square {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 12rem;
+  width: 13rem;
+  height: 10rem;
+  background: #0e2d32;
+}
+
+.description-square {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 0.8rem;
+  text-align: center;
+  color: #091d20;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin-top: 0.5rem;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  margin-bottom: 1rem;
+}
+
+.content-row {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+}
+
+.icon {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.logo-image {
+  width: 90%;
+  height: auto;
+  margin-top: 1.5rem;
+  margin-left: 0.5rem;
+}
+
+.banner-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.cover-image {
+  width: 100%;
+  height: 25rem;
+  object-fit: cover;
+  transition: transform 0.2s;
+  margin: 0 auto;
+  transform: scaleX(-1);
+}
+</style>

components/About/Histoire.vue

@@ -0,0 +1,139 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="3">
+        <h5 class="title">Qui sommes-nous</h5>
+      </v-col>
+
+      <v-col cols="9">
+        <h3 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.”
+        </h3>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="6">
+        <v-img class="passion-img" src="/images/about/passion.jpg"> </v-img>
+      </v-col>
+
+      <v-col cols="6">
+        <h2 class="passion-title">Une histoire de passionnés</h2>
+        <p class="passion-details">
+          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 portail culturel
+          pour en faire la promotion.
+        </p>
+
+        <h2 class="culture-title">
+          La Culture au service du développement territorial
+        </h2>
+        <p class="culture-details">
+          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>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.culture-details {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #091d20;
+  width: 30rem;
+}
+
+.culture-title{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 400;
+font-size: 34px;
+line-height: 38px;
+color: #071B1F;
+margin-bottom: 3rem;
+width:25rem;
+}
+.passion-title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  color: #071b1f;
+  flex: none;
+  margin-bottom: 3rem;
+}
+
+.passion-details {
+  font-family: "Barlow";
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  color: #091d20;
+  width: 30rem;
+  margin-bottom: 2rem;
+}
+
+.passion-img {
+  width: 60%;
+  height: 100%;
+  margin-left: 5rem;
+  border-radius: 4rem;
+}
+
+.title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #071b1f;
+}
+
+.italic-title {
+  font-family: "Barlow";
+  font-style: italic;
+  font-weight: 300;
+  font-size: 34px;
+  line-height: 40px;
+  color: #091d20;
+  width: 50rem;
+  margin-left: 14rem;
+  margin-bottom: 3rem;
+}
+</style>

components/About/Logiciels.vue

@@ -0,0 +1,342 @@
+<template>
+  <LayoutContainer :overflow="false">
+    <div class="container-title">
+      <p class=" solution-subtitle">ce qui nous anime</p>
+    <h3 class="title">
+      Nos Logiciels
+    </h3>
+    </div>
+ 
+
+    <v-row>
+      <v-col cols="3" class="col-info">
+        <small class="opentalent-small">Opentalent</small>
+        <h2 class="logiciel-name">Artist</h2>
+        <hr class="bar" />
+        <p class="description-logiciel">
+          Orchestre, chorales, compagnies de danse, théâtre et cirque
+        </p>
+
+        <v-row>
+          <div class="artist-image">
+            <v-img
+              src="/images/OpenTalent_LogoNoir_Jaune_white.png"
+              class="logo"
+            >
+            </v-img>
+          </div>
+        </v-row>
+
+        <v-row>
+          <v-col cols="6">
+            <ul class="list-solutions">
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
+
+          <v-col cols="6">
+            <ul>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
+        </v-row>
+      </v-col>
+
+      <v-col cols="3" class="col-info">
+        <small class="opentalent-small">Opentalent</small>
+        <h2 class="logiciel-name">Manager</h2>
+        <hr class="bar" />
+        <p class="description-logiciel">
+          Fédérations, confédérations et collectivités
+        </p>
+
+        <v-row>
+          <v-row>
+            <div class="manager-image">
+              <v-img
+                src="/images/OpenTalent_LogoNoir_rouge_manager_white.png"
+                class="logo"
+              >
+              </v-img>
+              <div class="overlay">
+                <button class="discover-button">Découvrir</button>
+              </div>
+            </div>
+          </v-row>
+        </v-row>
+
+        <v-row>
+          <v-col cols="6">
+            <ul class="list-solutions">
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
+
+          <v-col cols="6">
+            <ul>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
+        </v-row>
+      </v-col>
+
+      <v-col cols="3" class="col-info">
+        <small class="opentalent-small">Opentalent</small>
+        <h2 class="logiciel-name">School</h2>
+        <hr class="bar" />
+        <p class="description-logiciel">
+          Petits et grands établissements d'enseignement artistique
+        </p>
+
+        <v-row>
+          <v-row>
+            <div class="school-image">
+              <v-img src="/images/logo_school_white.png" class="logo"> </v-img>
+            </div>
+          </v-row>
+        </v-row>
+
+        <v-row>
+          <v-col cols="6">
+            <ul class="list-solutions">
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
+
+          <v-col cols="6">
+            <ul>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+              <li class="details-solution">Gestion des membres</li>
+            </ul>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<style scoped>
+.discover-button {
+  background-color: transparent;
+  border: none;
+  color: white;
+  font-family: "Barlow";
+  font-size: 1.2rem;
+  font-weight: 600;
+  padding: 1rem 2rem;
+  border-radius: 2rem;
+  cursor: pointer;
+}
+.logo {
+  width: 5rem;
+  height: 4rem;
+  margin-top: 13rem;
+  margin-left: 13rem;
+}
+
+.list-solutions {
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
+  font-size: 0.5rem;
+}
+
+.details-solution {
+  font-size: 0.5rem;
+  margin-top: 0.5rem;
+  width: 10rem;
+  margin-left: 1rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 0.7rem;
+  line-height: 18px;
+  color: #091d20;
+}
+
+.bar {
+  color: #c3e5e7;
+}
+.artist-image {
+  position: relative;
+  background: url(/images/solutions/artist.jpg);
+  background-size: cover;
+  background-position: center;
+  border-radius: 0px 0px 10px 10px;
+  width: 19rem;
+  height: 17rem;
+  margin-top: 2rem;
+  margin-left: 0.9rem;
+}
+
+.artist-image::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
+  border-radius: 0px 0px 10px 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.artist-image:hover::before {
+  opacity: 1;
+}
+.manager-image {
+  position: relative;
+  background: url(/images/solutions/manager.png);
+  background-size: cover;
+  background-position: center;
+  border-radius: 0px 0px 10px 10px;
+  width: 19rem;
+  height: 17rem;
+  margin-top: 4rem;
+  margin-left: 2rem;
+}
+
+.manager-image::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
+  border-radius: 0px 0px 10px 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.manager-image:hover::before {
+  opacity: 1;
+}
+
+.school-image {
+  position: relative;
+  background: url(/images/solutions/school.jpg);
+  background-size: cover;
+  background-position: center;
+  border-radius: 0px 0px 10px 10px;
+  width: 19rem;
+  height: 17rem;
+  margin-top: 4rem;
+  margin-left: 1.5rem;
+}
+
+.school-image::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
+  border-radius: 0px 0px 10px 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.school-image:hover::before {
+  opacity: 1;
+}
+
+.col-info:first-child {
+  margin-left: 9rem;
+}
+
+.col-info {
+  width: 4rem;
+  margin-left: 2rem;
+}
+.solution-img {
+  width: 15rem;
+  height: 15rem;
+  object-fit: cover;
+  margin-top: 2rem;
+}
+
+.description-logiciel {
+  font-family: "Barlow";
+  font-style: normal;
+  font-size: 0.9rem;
+  line-height: 0.9rem;
+  margin-top: 1rem;
+  color: #0E2D32;
+}
+
+.logiciel-name {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 30px;
+  line-height: 2rem;
+  color: #0E2D32;
+  margin-bottom: 1rem;
+}
+
+.opentalent-small {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 15px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #0E2D32;
+}
+.title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 00;
+  font-size: 2rem;
+  line-height: 42px;
+  color: #0E2D32;
+  margin-bottom: 3rem;
+}
+
+.solution-subtitle {
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 600;
+font-size: 10px;
+line-height: 15px;
+
+/* identical to box height, or 150% */
+display: flex;
+align-items: center;
+letter-spacing: 0.18em;
+text-transform: uppercase;
+
+color: #071B1F;
+}
+.container {
+  margin-bottom: 20rem;;
+  height: 30rem;
+  position: relative;
+}
+
+.container-title{
+  margin-top: 5rem;
+  margin-left: 8rem;
+  margin-bottom: 5rem;
+}
+
+</style>

components/About/Valeurs.vue

@@ -0,0 +1,154 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="5">
+        <h3 class="title-valeur">Les valeurs qui nous portent</h3>
+
+        <div class="container-img">
+          <img class="image-ronde top-img" src="/images/about/valeur1.jpg" />
+
+          <v-row>
+            <img class="image-ronde left-img" src="/images/about/valeur2.jpg" />
+            <img
+              class="image-ronde right-img"
+              src="/images/about/valeur3.jpg"
+            />
+          </v-row>
+
+          <img class="image-ronde bottom-img" src="/images/about/valeur4.jpg" />
+        </div>
+      </v-col>
+
+      <v-col cols="7">
+        <div class="valeur-container">
+          <v-row class="row">
+            <v-col cols="6">
+              <v-icon class="fa-brands fa-react icon"></v-icon>
+              <h6 class="title-valeurs">Management social</h6>
+              <p>
+                Guillaume et Michel sont sur la même longueur d’onde et donnent
+                le « La » à un management social et solidaire où plus que de
+                mettre en avant l'entreprise, ils privilégient la mise en avant
+                des hommes et femmes qui la composent. Toux ceux qui participent
+                jour après jour à l’écriture de la partition sont valorisés. Le
+                partage, l’échange et le dialogue en lieu et place des liens de
+                subordination.
+              </p>
+            </v-col>
+
+            <v-col cols="6">
+              <v-icon class="fa-brands fa-react icon"></v-icon>
+              <h6 class="title-valeurs">Management social</h6>
+              <p>
+                Guillaume et Michel sont sur la même longueur d’onde et donnent
+                le « La » à un management social et solidaire où plus que de
+                mettre en avant l'entreprise, ils privilégient la mise en avant
+                des hommes et femmes qui la composent. Toux ceux qui participent
+                jour après jour à l’écriture de la partition sont valorisés. Le
+                partage, l’échange et le dialogue en lieu et place des liens de
+                subordination.
+              </p>
+            </v-col>
+          </v-row>
+          <v-row class="row">
+            <v-col cols="6">
+              <v-icon class="fa-brands fa-react icon"></v-icon>
+              <h6 class="title-valeurs">Management social</h6>
+              <p>
+                Guillaume et Michel sont sur la même longueur d’onde et donnent
+                le « La » à un management social et solidaire où plus que de
+                mettre en avant l'entreprise, ils privilégient la mise en avant
+                des hommes et femmes qui la composent. Toux ceux qui participent
+                jour après jour à l’écriture de la partition sont valorisés. Le
+                partage, l’échange et le dialogue en lieu et place des liens de
+                subordination.
+              </p>
+            </v-col>
+
+            <v-col cols="6">
+              <v-icon class="fa-brands fa-react icon"></v-icon>
+              <h6 class="title-valeurs">Management social</h6>
+              <p>
+                Guillaume et Michel sont sur la même longueur d’onde et donnent
+                le « La » à un management social et solidaire où plus que de
+                mettre en avant l'entreprise, ils privilégient la mise en avant
+                des hommes et femmes qui la composent. Toux ceux qui participent
+                jour après jour à l’écriture de la partition sont valorisés. Le
+                partage, l’échange et le dialogue en lieu et place des liens de
+                subordination.
+              </p>
+            </v-col>
+          </v-row>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+<style scoped>
+
+.row{
+  border-top: 1px solid #E5E5E5;
+}
+.icon{
+  color: #F4AA2A;
+  font-size: 1.5rem;
+  font-weight: 900;
+  margin-bottom: 1rem;
+}
+
+.title-valeurs{
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 500;
+font-size: 22px;
+line-height: 26px;
+color: #091D20;
+margin-bottom: 1rem;
+}
+.title-valeur {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 38px;
+  color: #071b1f;
+  text-align: center;
+  margin-right: 19rem;
+  margin-left: 12rem;
+  text-align: left;
+}
+
+.left-img {
+  position: relative;
+  right: 2rem;
+}
+
+.right-img {
+  position: relative;
+  left: 2rem;
+}
+.container-img {
+  margin-left: 14rem;
+}
+.bottom-img,
+.top-img {
+  margin-left: 4rem;
+}
+
+.top-img {
+  position: relative;
+  top: 4.5rem;
+}
+
+.bottom-img {
+  position: relative;
+  bottom: 4.5rem;
+}
+.image-ronde {
+  width: 160px;
+  height: 150px;
+  border-radius: 90px;
+}
+</style>

components/Logiciels/School/Banner.vue

@@ -70,7 +70,7 @@ const menus = [
   { label: 'Accompagnement' },
   { label: 'Témoignages' },
   { label: 'Aide' }
-]
+];
 </script>
 
 <style scoped>

pages/about.vue

@@ -0,0 +1,13 @@
+<template>
+  <LayoutNavigation/>
+  <AboutBanner/>
+  <AboutHistoire />
+  <AboutValeurs />
+  <AboutLogiciels />
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>