Updated Doc

src/views/documentation/About.vue

@@ -1,31 +1,32 @@
 <template>
-  
-  <div class="DocContainer">
+  <div class="relative pb-10">
+    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
+    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">À propos</h1>
+  </div>
 
-    <h1 class="DocTitle py-10">À propos</h1>
-
-    <p class="text-justify">
+  <div class="mx-auto max-w-[1000px] px-4">
+    <p class="text-justify p-tos">
       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 class="SubTitle">
+    <h2 class="h2-tos">
       Notre Histoire
     </h2>
 
-    <p class="text-justify">
+    <p class="text-justify p-tos">
       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 class="SubTitle">
+    <h2 class="h2-tos">
       Notre Mission
     </h2>
 
-    <p class="text-justify">
+    <p class="text-justify p-tos">
       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 à
@@ -34,22 +35,22 @@
 
     </p>
 
-    <h2 class="SubTitle">
+    <h2 class="h2-tos">
       Notre Vision
     </h2>
 
-    <p class="text-justify">
+    <p class="text-justify p-tos">
       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 class="SubTitle">
+    <h2 class="h2-tos">
       Notre Équipe
     </h2>
 
-    <p class="text-justify">
+    <p class="text-justify p-tos">
       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
@@ -58,135 +59,83 @@
 
     <br>
     <v-row justify="center">
-      <v-card max-width="250px" style="margin: 10px;">
-
+      <v-card max-width="250px" class="card-member" 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 class="card-content">
+          <div class="member-name">Marc-Olivier</div>
+          <div class="member-name">Hébert</div>
+          <div class="member-title">Fondateur</div>
+          <p class="member-description">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;">
+
+      <v-card max-width="250px" class="card-member" 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 class="card-content">
+          <div class="member-name">Dominic</div>
+          <div class="member-name">Villemure</div>
+          <div class="member-title">Responsable Technique</div>
+          <p class="member-description">À 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;">
+      <v-card max-width="250px" class="card-member" 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 class="card-content">
+          <div class="member-name">Pascal</div>
+          <div class="member-name">Marchesseault</div>
+          <div class="member-title">Gestionnaire de projet / UI</div>
+          <p class="member-description">A pour mission d'assurer le développement du projet tout en créant une interface qui permettra au projet d'avoir une interaction positive et enrichissante avec Hutopy pour les utilisateurs.</p>
         </div>
       </v-card>
 
-      <v-card max-width="250px" style="margin: 10px;">
+      <v-card max-width="250px" class="card-member" 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 class="card-content">
+          <div class="member-name">Chloé</div>
+          <div class="member-name">Beaugrand</div>
+          <div class="member-title">Responsable Marketing</div>
+          <p class="member-description">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;">
+      <v-card max-width="250px" class="card-member" style="margin: 10px;">
         <img class="member-profile-picture"
-             src="/images/hutopymedia/tospage/membersPictures/profileEdouard.png"
+             src="/images/hutopymedia/tospage/membersPictures/Jonathan.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 class="card-content">
+          <div class="member-name">Jonathan</div>
+          <div class="member-name">Bourdon</div>
+          <div class="member-title">Programeur / Architecte</div>
+          <p class="member-description">Son expérience d'architecte senior nous permet de développer un logiciel avec une durabilité qui nous permettra de nous développer pendant de longues années.</p>
         </div>
       </v-card>
-
     </v-row>
 
-    <p class="text-justify py-6">
+
+    <p class="text-justify py-6 p-tos">
       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>
+  <selected-footer></selected-footer>
+  
+</template>
+
+<style>
+@import '@/cssstyle/tosstyle.css';
+</style>
+<script setup lang="ts">
+import SelectedFooter from "@/views/main/SelectedFooter.vue";
+</script>