school logiciel vue

components/Logiciels/School/Accompagnement.vue

@@ -0,0 +1,108 @@
+<template>
+  <LayoutContainer>
+    <div class="container-green">
+      <v-row>
+        <h6>Accompagnement</h6>
+      </v-row>
+
+      <v-row>
+        <v-col cols="3">
+          <v-img
+            src="/images/logiciels/school/reunion.jpg"
+            class="reunion-img"
+          ></v-img>
+        </v-col>
+
+        <v-col cols="6">
+          <h3>Formation prise en main du logiciel - En ligne</h3>
+          <p>
+            Parce qu’on sait qu’appréhender un nouvel outil peut-être fastidieux
+            et que vous n’avez pas de temps à perdre,... Lors de votre
+            souscription, nous vous invitons à choisir des dates de formation
+            qui se déroulera sous 2 jours non consécutifs. En effet, ce sont des
+            journées riches d’informations et nous mettons un point d’honneur à
+            vous laisser digérer cette première journée, vous familiariser
+            davantage avec vos nouvelles connaissances avant de passer à la
+            seconde. Destinée aux nouveaux utilisateurs, elle est obligatoire
+            lors de l'acquisition du logiciel. Elle est également utile lors
+            d'un changement de personnel dans la structure.
+          </p>
+
+          <v-btn>S’incrire à une formation</v-btn>
+        </v-col>
+      </v-row>
+    </div>
+
+    <v-row class="card-container">
+  <v-col cols="3" class="d-flex justify-center align-center small-padding">
+    <div class="card">
+      <h3>30 1500</h3>
+      <p>elèves</p>
+    </div>
+  </v-col>
+
+  <v-col cols="3" class="d-flex justify-center align-center">
+    <div class="card">
+      <h3>30 1500</h3>
+      <p>elèves</p>
+    </div>
+  </v-col>
+
+  <v-col cols="3" class="d-flex justify-center align-center">
+    <div class="card">
+      <h3>30 1500</h3>
+      <p>elèves</p>
+    </div>
+  </v-col>
+
+  <v-col cols="3" class="d-flex justify-center align-center">
+    <div class="card">
+      <h3>30 1500</h3>
+      <p>elèves</p>
+    </div>
+  </v-col>
+</v-row>
+
+
+    <v-row>
+      <!-- Caroussel-->
+      <v-carousel>
+        <v-carousel-item
+          v-for="(item, i) in items"
+          :key="i"
+          :src="item.src"
+          reverse-transition="fade-transition"
+          transition="fade-transition"
+        ></v-carousel-item>
+      </v-carousel>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+
+.container-green {
+  background-color: #0e2d32;
+  padding: 20px;
+  margin-bottom: 20px;
+  color: white;
+}
+
+.card-container {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-left: 20rem;
+  margin-right:20rem;
+}
+.card {
+  background: #C3E5E7;
+  border-radius: 10px;
+  padding-left: 5rem; 
+  padding-right: 5rem;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+</style>

components/Logiciels/School/Agenda.vue

@@ -0,0 +1,55 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="4">
+        <h3>L'agenda Opentalent</h3>
+      </v-col>
+
+      <v-col cols="4"> </v-col>
+
+      <v-col cols="4">
+        <v-btn>Tous les évèvenements</v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <!-- slide card-->
+      <v-col cols="4">
+        <v-card>
+          <v-img
+            src="/images/logiciels/school/enseignement.jpg"
+            class="enseignement"
+          >
+            <v-card-title class="title">Enseignement</v-card-title>
+          </v-img>
+        </v-card>
+      </v-col>
+      
+      <v-col cols="4">
+        <v-card>
+          <v-img
+            src="/images/logiciels/school/enseignement.jpg"
+            class="enseignement"
+          >
+            <v-card-title class="title">Enseignement</v-card-title>
+          </v-img>
+        </v-card>
+      </v-col>
+
+      <v-col cols="4">
+        <v-card>
+          <v-img
+            src="/images/logiciels/school/enseignement.jpg"
+            class="enseignement"
+          >
+            <v-card-title class="title">Enseignement</v-card-title>
+          </v-img>
+        </v-card>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped></style>

components/Logiciels/School/FAQ.vue

@@ -0,0 +1,52 @@
+<template>
+  <LayoutContainer>
+    <div class="container-img">
+      <v-row>
+        <h5>Vous voulez tirer le meilleur de notre logiciel ?</h5>
+      </v-row>
+
+      <v-row>
+        <v-col cols="6">
+          <h3>
+            Quelle que soit votre demande, notre équipe est à vos côtés pour
+            vous guider
+          </h3>
+
+          <v-btn>
+            Consulter notre FAQ
+          </v-btn>
+        </v-col>
+
+      
+        <v-col cols="6">
+          <v-btn>
+            De nombreux articles tutoriels accessibles 24h/24
+          </v-btn>
+
+          <v-btn>
+            Support accessible du lundi au vendredi via l’outil en ligne 
+          </v-btn>
+        </v-col>
+      </v-row>
+    </div>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+/** container image : image cover */
+.container-img {
+  background-image: url("/images/logiciels/school/faq.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

components/Logiciels/Premium.vue → components/Logiciels/School/Premium.vue

@@ -132,8 +132,12 @@ export default {
 
 .thead {
   background-color: #fff;
-  font-weight: bold;
   height: 8rem;
+  font-family: 'Barlow';
+font-style: normal;
+font-weight: 400;
+font-size: 30px;
+line-height: 34px;
 }
 .table-comparatif {
   width: 74rem;

components/Logiciels/School/Projet.vue

@@ -0,0 +1,85 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="4">
+        <h5>Contactez-nous</h5>
+        <v-img
+          src="/images/logiciels/school/femme-casque.jpg"
+          class="femme-casque"
+        >
+        </v-img>
+      </v-col>
+      <v-col cols="8">
+        <h5>Vous avez un projet ?</h5>
+        <h6>N'attendez plus, appelez-nous</h6>
+        <p>
+          Vous avez une identité, des besoins, des projets... On est là pour
+          vous écouter et vous offrir une offre personnalisée ! Que vous soyez
+          une petite ou une structure plus conséquente, notre offre s'adapte à
+          toutes les tailles : le prix de l’abonnement au logiciel varie en
+          fonction du nombre d'élèves, tout en conservant l'intégralité des
+          fonctionnalités.
+        </p>
+
+        <v-btn> Nous contacter</v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="2">
+        <v-img src="/images/logiciels/school/cmf_logo_orange.png"></v-img>
+      </v-col>
+      <v-col cols="10">
+        <h5>Adhérents CMF : bénéficiez de conditions privilégiées</h5>
+        <p>
+          Si votre établissement d’enseignement artistique est adhérent à la
+          Confédération Musicale de France (CMF), vous bénéficiez gratuitement,
+          dans le cadre de votre adhésion, de la version Opentalent Artist
+          standard et de conditions priviliégiés pour la version Opentalent
+          School. Contactez nous direcetement ou contactez votre fédération pour
+          obtenir vos codes d’accès.
+        </p>
+      </v-col>
+    </v-row>
+
+    <v-row >
+      <v-col cols="4" class="border" >
+        <div class="d-flex justify-center align-center ">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+      <v-col cols="4" class="border">
+        <div class="d-flex justify-center align-center">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+
+      <v-col cols="4" class="border">
+        <div class="d-flex justify-center align-center">
+          <v-icon  class="fa-brands fa-react icon"></v-icon>
+        </div>
+        <p class="d-flex justify-center align-center">Paiement Sécurisé</p>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.border{
+  border-top: 1px solid #000; /* Remplacez #000 par la couleur de votre choix */
+  border-right: 1px solid #000; /* Remplacez #000 par la couleur de votre choix */
+}
+
+.icon{
+  font-size: 3rem;
+  color: #0E2D32;
+}
+.femme-casque {
+  width: 20rem;
+}
+</style>

components/Logiciels/School/Reviews.vue

@@ -0,0 +1,57 @@
+<template>
+<LayoutContainer>
+  <v-row>
+    <v-col cols="4">
+      <h3>C'est eux qui en parlent le mieux</h3>
+    </v-col>
+
+    <v-col cols="8">
+      <!-- slide card-->
+
+  <v-sheet
+    class="mx-auto"
+    elevation="8"
+    max-width="800"
+  >
+    <v-slide-group
+      v-model="model"
+      class="pa-4"
+      selected-class="bg-success"
+      show-arrows
+    >
+      <v-slide-group-item
+        v-for="n in 15"
+        :key="n"
+        v-slot="{ isSelected, toggle, selectedClass }"
+      >
+        <v-card
+          color="grey-lighten-1"
+          :class="['ma-4', selectedClass]"
+          height="200"
+          width="100"
+          @click="toggle"
+        >
+          <div class="d-flex fill-height align-center justify-center">
+            <v-scale-transition>
+              <v-icon
+                v-if="isSelected"
+                color="white"
+                size="48"
+                icon="mdi-close-circle-outline"
+              ></v-icon>
+            </v-scale-transition>
+          </div>
+        </v-card>
+      </v-slide-group-item>
+    </v-slide-group>
+  </v-sheet>
+    </v-col>
+  </v-row>
+</LayoutContainer>
+</template>
+
+<script>
+</script>
+
+<style scoped>
+</style>

components/Logiciels/School/Solutions.vue

@@ -0,0 +1,130 @@
+<template>
+<LayoutContainer>
+  <v-row>
+    <h4>Ces solutions peuvent vous intéresser</h4>
+  </v-row>
+
+  <v-row class="row-artist">
+    <v-col cols="3">
+      <v-img
+      src="/images/opentalent_artist_black.png"
+      >
+      </v-img>
+    </v-col>
+    
+    <v-col cols="2">
+      <h5>Opentalent Artist</h5>
+    </v-col>
+
+    <v-col cols="7">
+      <!-- list v-chip-->
+      <v-chip-group
+      active-class="primary--text"
+      column
+      >
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Agenda</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Facturation</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Comptabilité</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Communication</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Site internet</span>
+        </v-chip>
+    </v-chip-group>
+    </v-col>
+
+  </v-row>
+
+  <v-row class="row-artist">
+    <v-col cols="3">
+      <v-img
+      src="/images/opentalent_manager_black.jpg"
+      >
+      </v-img>
+    </v-col>
+    
+    <v-col cols="2">
+      <h5>Opentalent Artist</h5>
+    </v-col>
+
+    <v-col cols="7">
+      <!-- list v-chip-->
+      <v-chip-group
+      active-class="primary--text"
+      column
+      >
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Agenda</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Facturation</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Comptabilité</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Communication</span>
+        </v-chip>
+        <v-chip
+        class="ma-2"
+        color="primary"
+        label
+        >
+          <span>Site internet</span>
+        </v-chip>
+    </v-chip-group>
+    </v-col>
+
+  </v-row>
+</LayoutContainer>
+
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>

pages/logiciels/school.vue

@@ -1,15 +1,19 @@
 <template>
   <LayoutNavigation />
-  <LogicielsBanner />
-  <LogicielsOutil />
-<LogicielsAvantages />
-<LogicielsFonctionnalites />
-<LogicielsPremium />
-
+  <LogicielsSchoolBanner />
+  <LogicielsSchoolOutil />
+  <LogicielsSchoolAvantages />
+  <LogicielsSchoolFonctionnalites />
+  <LogicielsSchoolPremium />
+  <LogicielsSchoolProjet/>
+  <LogicielsSchoolAccompagnement/>
+  <LogicielsSchoolReviews/>
+  <LogicielsSchoolAgenda/>
+  <LogicielsSchoolFAQ/>
+  <LogicielsSchoolSolutions/>
+  <LayoutFooter />
 </template>
 
-<script setup>
-</script>
+<script setup></script>
 
-<style scoped>
-</style>
+<style scoped></style>