Adds messages

src/views/documentation/About.vue

@@ -0,0 +1,224 @@
+<template>
+  
+  <div class="document">
+
+    <h1>À propos</h1>
+
+    <p>
+      Bienvenue sur la page "À Propos" d’Hutopy, où nous partageons notre histoire, notre mission,
+      notre vision, et vous présentons l'équipe passionnée qui rend tout cela possible. Hutopy
+      n'est pas seulement une plateforme ; c'est une communauté, un mouvement, un lieu où la
+      créativité rencontre la technologie pour créer des expériences inoubliables.
+
+    </p>
+
+    <h2>
+      Notre Histoire
+    </h2>
+
+    <p>
+      Hutopy a été fondée en 2024, née de l'idée simple mais puissante que chaque créateur qu'il
+      soit grand ou petit, novice ou expérimenté, devrait avoir accès aux outils et au soutien
+      nécessaires pour partager sa passion avec le monde.
+    </p>
+
+    <h2>
+      Notre Mission
+    </h2>
+
+    <p>
+      Notre mission est de démocratiser la création de contenu numérique, en offrant une
+      plateforme accessible, intuitive et puissante qui permet aux créateurs de tout horizon de
+      s'exprimer, d'innover et de connecter avec une audience mondiale. Nous nous engageons à
+      fournir les outils, les ressources et le soutien nécessaires pour que chaque voix puisse
+      être entendue.
+
+    </p>
+
+    <h2>
+      Notre Vision
+    </h2>
+
+    <p>
+      Nous envisageons un monde où la barrière entre les créateurs et leur audience est réduite au
+      minimum, où les idées, l'expertise et les histoires peuvent circuler librement et sans
+      entrave. Hutopy aspire à être au cœur de cet écosystème créatif et professionnel, en étant
+      une source d'inspiration, une plateforme de lancement et un foyer pour tous.
+    </p>
+
+    <h2>
+      Notre Équipe
+    </h2>
+
+    <p>
+      Derrière Hutopy, il y a une équipe de penseurs innovants, de créatifs passionnés et de
+      technologues dévoués, tous unis par le désir de soutenir la communauté des créateurs de
+      contenu. Notre équipe est notre plus grande force, chaque membre apportant une expertise
+      unique et une perspective fraîche à notre mission commune.
+    </p>
+
+    <br>
+    <v-row justify="center">
+      <v-card max-width="250px" style="margin: 10px;">
+
+        <img class="member-profile-picture"
+             src="/images/hutopymedia/tospage/membersPictures/profileMarco.png"
+             alt="Marc-Olivier Hébert">
+
+        <div style="margin: 10px;">
+          <v-typography class="name"
+                        style="font-size: 1.5rem; font-weight: bold;">Marc-Olivier
+          </v-typography>
+          <br>
+          <v-typography class="name"
+                        style="font-size: 1.5rem; font-weight: bold;">
+            Hébert
+          </v-typography>
+          <br>
+          <v-typography class="task" style="font-size: 1rem;">Fondateur</v-typography>
+          <br><br>
+          <p class="text" style="hyphens: auto; font-size: 0.8rem; text-align: justify;">Avec
+            une
+            vision claire et un engagement sans faille, il a lancé Hutopy pour changer la
+            manière dont le contenu est créé et partagé.</p>
+        </div>
+      </v-card>
+      <v-card max-width="250px" style="margin: 10px;">
+        <img class="member-profile-picture"
+             src="/images/hutopymedia/tospage/membersPictures/profileDominique.png"
+             alt="Dominic Villemure">
+
+        <div style="margin: 10px;">
+          <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Dominic
+          </v-typography>
+          <br>
+          <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
+            Villemure
+          </v-typography>
+          <br>
+          <v-typography class="task" style="font-size: 1rem;">Responsable
+            Technique
+          </v-typography>
+          <br><br>
+          <p class="text" style="hyphens: auto; font-size: 0.8rem; text-align: justify;">À la
+            tête de notre équipe de développement, il assure qu’Hutopy reste à la pointe de
+            la technologie.
+          </p>
+        </div>
+      </v-card>
+
+      <v-card max-width="250px" style="margin: 10px;">
+        <img class="member-profile-picture"
+             src="/images/hutopymedia/tospage/membersPictures/profilePascal.png"
+             alt="Pascal Marchesseault">
+        <div style="margin: 10px;">
+          <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Pascal
+          </v-typography>
+          <br>
+          <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
+            Marchesseault
+          </v-typography>
+          <br>
+          <v-typography class="task" style="font-size: 1rem;">Expérience
+            utilisateur
+          </v-typography>
+          <br>
+          <br>
+
+          <p class="text" style="hyphens: auto; font-size: 0.8rem; text-align: justify;">Le
+            champion
+            de l'expérience utilisateur, il veille à ce que chaque interaction avec Hutopy
+            soit
+            positive et enrichissante pour tous les utilisateurs.</p>
+        </div>
+      </v-card>
+
+      <v-card max-width="250px" style="margin: 10px;">
+        <img class="member-profile-picture"
+             src="/images/hutopymedia/tospage/membersPictures/profileChloe.png"
+             alt="Chloé Beaugrand">
+        <div style="margin: 10px;">
+          <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Chloé
+          </v-typography>
+          <br>
+          <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
+            Beaugrand
+          </v-typography>
+          <br>
+          <v-typography class="task" style="font-size: 1rem;">Responsable
+            Marketing
+          </v-typography>
+          <br>
+          <br>
+          <p class="text" style="hyphens: auto; font-size: 0.8rem; text-align: justify;">Elle
+            façonne
+            l'image d’Hutopy et engage notre communauté à travers des campagnes innovantes
+            et
+            impactantes.</p>
+        </div>
+      </v-card>
+
+      <v-card max-width="250px" style="margin: 10px;">
+        <img class="member-profile-picture"
+             src="/images/hutopymedia/tospage/membersPictures/profileEdouard.png"
+             alt="Édouard Letarte">
+        <div style="margin: 10px;">
+          <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Édouard
+          </v-typography>
+          <br>
+          <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
+            Letarte
+          </v-typography>
+          <br>
+          <v-typography class="task" style="font-size: 1rem;">Intégrateur
+          </v-typography>
+          <br><br>
+          <p class="text" style="hyphens: auto; font-size: 0.8rem; text-align: justify;">Son
+            expertise nous permet d'intégrer des fonctionnalités qui permettent à Hutopy de
+            devenir réalité.</p>
+        </div>
+      </v-card>
+
+    </v-row>
+
+    <p>
+      Chez Hutopy, nous sommes plus qu'une plateforme ; nous sommes une famille dédiée à la
+      réussite de nos créateurs. Nous vous invitons à nous joindre dans cette aventure
+      passionnante, à partager votre créativité et votre expertise avec le monde et à faire
+      d’Hutopy votre utopie. Merci de faire partie de notre histoire.
+    </p>
+
+  </div>
+
+</template>
+
+<style scoped>
+
+.important {
+  @apply m-2 text-red-500 my-4
+}
+
+.document {
+  @apply flex flex-col mx-10 space-y-4
+}
+
+h1 {
+  @apply self-center my-20 text-6xl font-bold
+}
+
+h2 {
+  @apply text-lg font-normal font-semibold font-sans
+}
+
+p {
+  @apply text-base font-normal font-sans
+}
+
+.member-profile-picture {
+  width: 250px;
+  height: auto;
+}
+
+</style>
+<script setup lang="ts">
+</script>