school logiciel

components/Home/Help.vue

@@ -87,10 +87,9 @@
 }
 
 .help-img {
-  width: 722px;
-  height: 506px;
-  left: 2rem;
-  border-radius: 20px;
+  width: 50rem;
+  margin-left: 5rem;
+  border-radius: 3rem;
 }
 
 .subtitle-team {
@@ -101,7 +100,7 @@
   font-weight: 400;
   font-size: 30px;
   line-height: 34px;
-  width: 300px;
+  width: 20rem;
 }
 
 .container {

components/Home/Promotion.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
     <LayoutContainer>
       <v-col col="12" class="col-gestion">
         <v-row>
@@ -68,7 +67,6 @@
       </div>
 
     </LayoutContainer>
-  </div>
 </template>
 
 <script></script>

components/Layout/Caroussel.vue

@@ -8,6 +8,9 @@
       class="carousel"
       :hide-delimiter-background="true"
       :show-delimiters="false"
+      :touch="true"
+      cycle
+      :interval="3000"
     >
       <v-carousel-item v-for="(item, index) in carouselItems" :key="index">
         <v-row>
@@ -66,7 +69,7 @@
 
 <script setup>
 import { useDisplay } from "vuetify";
-const { mdAndDown, mdAndUp, lgAndUp } = useDisplay();
+const {lgAndUp } = useDisplay();
 
 let activeIndex = ref(0); // initialise avec le premier item affiché
 
@@ -175,7 +178,7 @@ const carouselItems = ref([
 }
 
 .image {
-  width: 20rem;
+  height: 35rem;
   margin-top: 6rem;
   right: 20%;
 }

components/Layout/Container.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="container">
+  <v-container class="container">
     <v-row justify="center" align="center">
       <v-col cols="12" sm="12" md="12">
         <slot />

components/Logiciels/Avantages.vue

@@ -0,0 +1,50 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <h5>Découvrez les avanatges de la solution</h5>
+    </v-row>
+    <v-row>
+      <h3>Des avantages concrets</h3>
+    </v-row>
+
+    <v-row>
+      <v-col cols="4">
+        <h4>Un gain de temps</h4>
+        <span>01</span>
+
+        <hr />
+
+        Centralisez toutes vos informations sur un seul et même outil et ne
+        perdez plus de temps avec des fichiers sur diverses applications.
+      </v-col>
+      <v-col cols="4">
+        <h4>Une activité structurée</h4>
+        <span>02</span>
+
+        <hr />
+
+        Des espaces dédiés et des outils spécifiques à vos besoins pour une
+        gestion optimisée et une lecture simplifiée.
+        <p><v-chip>Membre cmf</v-chip></p>
+        <v-img
+        src="/images/logiciels/school/screen3.png"
+        ></v-img>
+      </v-col>
+      <v-col cols="4">
+        <h4>Une gestion collaborative</h4>
+        <span>03</span>
+
+        <hr />
+
+        Grâce à des comptes dédiés, personnalisés et autonomes, permettez à vos
+        membres de mettre à jour leurs informations et d'interagir dans leur
+        agenda.
+      </v-col>
+    </v-row>
+
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped></style>

components/Logiciels/Banner.vue

@@ -0,0 +1,196 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="4" class="text-left">
+        <h1>Artist</h1>
+      </v-col>
+      <v-col cols="4" class="text-center">
+        <h1>Opentalent School</h1>
+      </v-col>
+      <v-col cols="4" class="text-right">
+        <h1>Manager</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 class="black-square">
+            <p>
+              École de musique, d'art, de danse, de cirque, conservatoires et
+              MJC
+            </p>
+          </div>
+          <div class="blue-square">
+            <img
+              src="/images/logo_school_white.png"
+              alt="Logo"
+              class="logo-image"
+            />
+          </div>
+        </div>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" class="menu-container">
+        <v-chip v-if="state.activeMenu === 'Présentation'" class="active-menu"
+          >Présentation</v-chip
+        >
+        <span v-else>Présentation</span>
+
+        <span>Inactif</span>
+
+        <v-chip v-if="state.activeMenu === 'Avantages'" class="active-menu"
+          >Avantages</v-chip
+        >
+        <span v-else>Avantages</span>
+
+        <v-chip
+          v-if="state.activeMenu === 'Fonctionnalités'"
+          class="active-menu"
+          >Fonctionnalités</v-chip
+        >
+        <span v-else>Fonctionnalités</span>
+
+        <v-chip v-if="state.activeMenu === 'Comparatif'" class="active-menu"
+          >Comparatif</v-chip
+        >
+        <span v-else>Comparatif</span>
+
+        <v-chip v-if="state.activeMenu === 'Contact'" class="active-menu"
+          >Contact</v-chip
+        >
+        <span v-else>Contact</span>
+
+        <v-chip v-if="state.activeMenu === 'Accompagnement'" class="active-menu"
+          >Accompagnement</v-chip
+        >
+        <span v-else>Accompagnement</span>
+
+        <v-chip v-if="state.activeMenu === 'Témoignages'" class="active-menu"
+          >Témoignages</v-chip
+        >
+        <span v-else>Témoignages</span>
+
+        <v-chip v-if="state.activeMenu === 'Aide'" class="active-menu"
+          >Aide</v-chip
+        >
+        <span v-else>Aide</span>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+const state = reactive({
+  activeMenu: "Présentation",
+});
+</script>
+
+<style scoped>
+.menu-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem 10rem;
+  background: white;
+  color: #c4c4c4;
+  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: 9rem;
+  height: 8rem;
+  background-color: black;
+  background: #9edbdd;
+}
+
+.blue-square {
+  position: absolute;
+  bottom: 0.4rem;
+  right: 9rem;
+  width: 9rem;
+  height: 8rem;
+  background: #0e2d32;
+}
+
+.logo-image {
+  width: 100%;
+  height: auto;
+  margin-top: 1.5rem;
+}
+
+.banner-container {
+  position: relative;
+  overflow: hidden;
+}
+.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;
+}
+
+.text-center {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 85px;
+  text-align: center;
+  color: #000000;
+  text-align: center;
+}
+
+.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;
+}
+
+.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/Logiciels/Fonctionnalites.vue

@@ -0,0 +1,102 @@
+<template>
+  <LayoutContainer>
+    <div class="container-green">
+    <v-row>
+      <h4>Découvrez toutes les foncitonnalités de notre solution</h4>
+    </v-row>
+
+    <v-row>
+      <h2>Des fonctionnalités adaptées à vos besoins</h2>
+    </v-row>
+
+    <v-row>
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="3">
+        <h6>bénéficier d'un espace dédié</h6>
+        <ul>
+          <li>Accès admin</li>
+          <li>Accès professeurs</li>
+          <li>Accès élèves/familles</li>
+        </ul>
+      </v-col>
+    </v-row>
+  </div>
+  </LayoutContainer>
+
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+
+.container-green {
+  background-color: #0E2D32;
+  padding: 5rem;
+  color: #EFF9FB;
+}
+</style>

components/Logiciels/Outil.vue

@@ -0,0 +1,175 @@
+<template>
+  <LayoutContainer>
+    <v-row class="outil-row">
+      <v-col cols="4">
+        <h4 class="title">Présentation d'opentalent school</h4>
+        <v-img src="/images/logiciels/school/screen.jpg" class="screen-img">
+        </v-img>
+      </v-col>
+
+      <v-col cols="6">
+        <h2>Un outil complet en ligne</h2>
+        <ul>
+          <li>Logiciel de gestion et communication en ligne</li>
+          <li>Destiné aux établissements d'enseignement artistique</li>
+          <li>
+            Gestion quotidienne et en temps réel (suivi pédagogique,
+            facturation, encaissement…)
+          </li>
+          <li>Pilotage complet de votre structure</li>
+        </ul>
+      </v-col>
+
+      <v-col cols="2">
+        <v-row>
+          <div class="blue-square">
+            <p>Nous contacter</p>
+          </div>
+        </v-row>
+
+        <v-row>
+          <div class="blue-square">
+            <p>Nous contacter</p>
+          </div>
+        </v-row>
+
+        <v-row>
+          <div class="darkblue-square">
+            <p>Nous contacter</p>
+          </div>
+        </v-row>
+      </v-col>
+      <v-row>
+        <v-col cols="4"> </v-col>
+
+        <v-col cols="5">
+          <div class="title-picto-container">
+            <h2>Des caractéristiques uniques & dédiées</h2>
+            <div class="picto-container">
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/school/picto1.png"
+              ></v-img>
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/school/picto2.png"
+              ></v-img>
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/school/picto3.png"
+              ></v-img>
+              <v-img
+                class="picto-img"
+                src="/images/logiciels/school/picto4.png"
+              ></v-img>
+            </div>
+          </div>
+        </v-col>
+
+        <v-col cols="2"> </v-col>
+      </v-row>
+    </v-row>
+
+    <v-row class="container-green">
+      <v-row>
+        <v-col cols="6" class="citation-school"> “ Pour les petits comme pour les grands établissements d’enseignement artistique.“</v-col>
+      </v-row>
+
+      <v-col cols="6">
+        <h6 class="subtitle-logiciel">Logiciel Opentalent</h6>
+        <v-img src="/images/logiciels/school/screen2.png" class="screen2-img">
+        </v-img>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.citation-school {
+  font-family: 'Barlow';
+font-style: italic;
+font-weight: 300;
+font-size: 2rem;
+width: 3rem;
+line-height: 40px;
+  color: #ffffff;
+  font-style: italic;
+  margin-top: 20rem;
+  margin-left: 5rem;
+}
+.subtitle-logiciel {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #ffffff;
+  margin-left: 5rem;
+  margin-right: 15rem;
+  margin-top : 4rem;
+  top: 10rem;
+}
+.screen2-img {
+  width: 50rem;
+  height: 40rem;
+  bottom: 4rem;
+}
+.container-green {
+  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
+    rgba(7, 27, 31, 0.3);
+  height: 35rem;
+}
+.title-picto-container {
+  align-items: start;
+}
+
+.picto-container {
+  display: flex;
+  justify-content: flex-start;
+  padding: 0 2rem;
+}
+
+.picto-img {
+  right: 5rem;
+  height: 10rem;
+  margin-bottom: 3rem;
+}
+
+.title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 18px;
+  color: #091d20;
+  margin-left: 5rem;
+  margin-right: 15rem;
+}
+
+.screen-img {
+  width: 20rem;
+  height: 15rem;
+  margin-top: 2rem;
+  margin-left: 5rem;
+}
+.outil-row {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+}
+.darkblue-square {
+  width: 6rem;
+  height: 6rem;
+  background: #0e2d32;
+  margin-left: 12rem;
+
+}
+.blue-square {
+  margin-left: 12rem;
+  width: 6rem;
+  height: 6rem;
+  background: rgba(32, 147, 190, 0.6);
+}
+</style>

components/Logiciels/Premium.vue

@@ -0,0 +1,156 @@
+<template>
+  <LayoutContainer>
+    <h6 class="subtitle">Comparatif de nos solutions</h6>
+    <h3 class="title">Et si vous passiez à la version Premium</h3>
+    <table class="table-comparatif">
+      <thead>
+        <tr>
+          <th class="thead"></th>
+          <th class="thead"></th>
+          <th class="thead">
+            <p>Standard</p>
+            <p>A partir de 44,10 ttc /mois</p>
+          </th>
+          <th class="thead">
+            <p>Premium</p>
+            <p>A partir de 60,20 ttc /mois</p>
+          </th>        </tr>
+      </thead>
+      <tbody class="table-body">
+        <tr v-for="row in tableData" :key="row.id" class="table-row">
+          <td class="table-data">{{ row.column1 }}</td>
+          <td>{{ row.column2 }}</td>
+          <td>{{ row.column3 }}</td>
+          <td>{{ row.column4 }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </LayoutContainer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          id: 1,
+          column1: "Donnée 1",
+          column2: "Donnée 2",
+          column3: "Donnée 3",
+          column4: "Donnée 4",
+        },
+        {
+          id: 2,
+          column1: "Donnée 5",
+          column2: "Donnée 6",
+          column3: "Donnée 7",
+          column4: "Donnée 8",
+        },
+        {
+          id: 3,
+          column1: "Donnée 9",
+          column2: "Donnée 10",
+          column3: "Donnée 11",
+          column4: "Donnée 12",
+        },
+        {
+          id: 4,
+          column1: "Donnée 13",
+          column2: "Donnée 14",
+          column3: "Donnée 15",
+          column4: "Donnée 16",
+        },
+        {
+          id: 5,
+          column1: "Donnée 17",
+          column2: "Donnée 18",
+          column3: "Donnée 19",
+          column4: "Donnée 20",
+        },
+        {
+          id: 6,
+          column1: "Donnée 21",
+          column2: "Donnée 22",
+          column3: "Donnée 23",
+          column4: "Donnée 24",
+        },
+        {
+          id: 7,
+          column1: "Donnée 25",
+          column2: "Donnée 26",
+          column3: "Donnée 27",
+          column4: "Donnée 28",
+        },
+        {
+          id: 8,
+          column1: "Donnée 29",
+          column2: "Donnée 30",
+          column3: "Donnée 31",
+          column4: "Donnée 32",
+        },
+        {
+          id: 9,
+          column1: "Donnée 33",
+          column2: "Donnée 34",
+          column3: "Donnée 35",
+          column4: "Donnée 36",
+        },
+        {
+          id: 10,
+          column1: "Donnée 37",
+          column2: "Donnée 38",
+          column3: "Donnée 39",
+          column4: "Donnée 40",
+        },
+        {
+          id: 11,
+          column1: "Donnée 41",
+          column2: "Donnée 42",
+          column3: "Donnée 43",
+          column4: "Donnée 44",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+
+.subtitle {
+  font-size: 1.5rem;
+  font-weight: 400;
+  margin-left: 9rem;
+}
+
+.title{
+  font-size: 1.5rem;
+  font-weight: 400;
+  margin-left: 9rem;
+}
+
+.thead {
+  background-color: #fff;
+  font-weight: bold;
+  height: 8rem;
+}
+.table-comparatif {
+  width: 74rem;
+  margin-top: 1rem;
+  margin-left: 15rem;
+  margin-right: 5rem;
+  border: none;
+  border-collapse: collapse;
+}
+.table-row{
+  background-color: white;
+  text-align: center;
+  height: 3rem;
+}
+
+.table-body .table-row:nth-child(even) {
+  background-color: rgba(32, 147, 190, 0.2);
+}
+
+</style>

pages/logiciels/artist.vue

@@ -0,0 +1,10 @@
+<template>
+  <LayoutNavigation></LayoutNavigation>
+
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>

pages/logiciels/manager.vue

@@ -0,0 +1,10 @@
+<template>
+  <p>manager</p>
+
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>

pages/logiciels/school.vue

@@ -0,0 +1,15 @@
+<template>
+  <LayoutNavigation />
+  <LogicielsBanner />
+  <LogicielsOutil />
+<LogicielsAvantages />
+<LogicielsFonctionnalites />
+<LogicielsPremium />
+
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>