From 88f79fd4b3e7b02e1e50a12913f048f7def41032 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 30 Jun 2024 02:57:33 -0400
Subject: [PATCH 1/2] Css styling for Tos

---
 src/cssstyle/documentation.css                | 24 +++++
 src/views/documentation/About.vue             | 56 +++--------
 src/views/documentation/ContentPolicy.vue     | 93 +++++++++---------
 src/views/documentation/CreatorGuide.vue      | 54 ++++-------
 src/views/documentation/FAQ.vue               | 54 ++++-------
 src/views/documentation/HelpAndContact.vue    | 94 ++++---------------
 src/views/documentation/Pricing.vue           | 22 ++---
 .../documentation/TermsAndConditions.vue      | 67 +++++--------
 src/views/main/Wallet.vue                     |  2 +-
 9 files changed, 170 insertions(+), 296 deletions(-)
 create mode 100644 src/cssstyle/documentation.css

diff --git a/src/cssstyle/documentation.css b/src/cssstyle/documentation.css
new file mode 100644
index 0000000..70e1259
--- /dev/null
+++ b/src/cssstyle/documentation.css
@@ -0,0 +1,24 @@
+h1 {
+    @apply self-center my-10 text-6xl font-bold;
+}
+
+h2 {
+    @apply text-lg font-semibold font-sans;
+}
+
+.DocTitle {
+    font-size: 2rem;
+    text-align: center;
+    color: #a30e79;
+}
+
+.SubTitle {
+    font-size: 1.5rem;
+    text-align: center;
+    color: #a30e79;
+    @apply py-6;
+}
+
+.DocContainer{
+    @apply flex  flex-col items-center justify-center max-w-screen-md px-5 pb-14  mx-auto;
+}
\ No newline at end of file
diff --git a/src/views/documentation/About.vue b/src/views/documentation/About.vue
index 2c53397..8210749 100644
--- a/src/views/documentation/About.vue
+++ b/src/views/documentation/About.vue
@@ -1,32 +1,31 @@
 <template>
   
-  <div class="document">
+  <div class="DocContainer">
 
-    <h1>À propos</h1>
+    <h1 class="DocTitle py-10">À propos</h1>
 
-    <p>
+    <p class="text-justify">
       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>
+    <h2 class="SubTitle">
       Notre Histoire
     </h2>
 
-    <p>
+    <p class="text-justify">
       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>
+    <h2 class="SubTitle">
       Notre Mission
     </h2>
 
-    <p>
+    <p class="text-justify">
       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 à
@@ -35,22 +34,22 @@
 
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Notre Vision
     </h2>
 
-    <p>
+    <p class="text-justify">
       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>
+    <h2 class="SubTitle">
       Notre Équipe
     </h2>
 
-    <p>
+    <p class="text-justify">
       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
@@ -181,7 +180,7 @@
 
     </v-row>
 
-    <p>
+    <p class="text-justify py-6">
       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
@@ -192,33 +191,6 @@
 
 </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>
+@import 'src/cssstyle/documentation.css';
 </style>
-<script setup lang="ts">
-</script>
\ No newline at end of file
diff --git a/src/views/documentation/ContentPolicy.vue b/src/views/documentation/ContentPolicy.vue
index 085c4cc..86b8cd2 100644
--- a/src/views/documentation/ContentPolicy.vue
+++ b/src/views/documentation/ContentPolicy.vue
@@ -1,16 +1,15 @@
 <template>
 
-  <div class="document">
-
-    <h1>
+  <div class="DocContainer">
+    <h1 class="DocTitle py-10">
       Politique de Contenu
     </h1>
 
-    <h2>
+    <h2 class="SubTitle">
       Introduction
     </h2>
 
-    <p>
+    <p class="text-justify">
       Hutopy vise à offrir une plateforme sécurisée, inclusive et respectueuse où les créateurs
       peuvent partager leur travail et interagir avec une communauté engagée. Pour maintenir cet
       environnement, nous avons établi des lignes directrices claires concernant le type de
@@ -18,11 +17,11 @@
       politique de contenu.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Contenu Autorisé
     </h2>
 
-    <ul>
+    <ul class="text-justify">
 
       <li>
         Hutopy encourage la publication de contenu créatif, éducatif et inspirant dans divers
@@ -47,11 +46,11 @@
 
     </ul>
 
-    <h2>
+    <h2 class="SubTitle">
       Contenu Interdit
     </h2>
 
-    <ul>
+    <ul class="text-justify">
 
       <li>
         Pour protéger notre communauté, certains types de contenu ne sont pas autorisés sur Hutopy,
@@ -85,87 +84,87 @@
 
     </ul>
 
-    <h2>
+    <h2 class="SubTitle">
       Droits d'Auteur et Propriété Intellectuelle
     </h2>
 
-    <p>
+    <p class="text-justify">
       Respect des Droits : Vous devez posséder les droits sur le contenu que vous publiez sur
       Hutopy ou avoir l'autorisation expresse du détenteur des droits pour utiliser ce contenu.
     </p>
 
-    <p>
+    <p class="text-justify">
       Attribution : Lorsque vous utilisez ou adaptez le contenu protégé par des droits d'auteur
       appartenant à autrui, une attribution claire et correcte doit être fournie.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Modération et Signalement
     </h2>
 
-    <p>
+    <p class="text-justify">
       Modération : Hutopy utilise à la fois des modérateurs humains et des outils automatisés pour
       surveiller et évaluer le contenu publié, garantissant le respect de cette politique.
     </p>
 
-    <p>
+    <p class="text-justify">
       Signalement : Les utilisateurs de Hutopy sont encouragés à signaler tout contenu qu'ils
       considèrent comme enfreignant notre politique de contenu via les outils de signalement
       disponibles sur la plateforme.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Conséquences des Violations
     </h2>
 
-    <p>
+    <p class="text-justify">
       La violation de notre politique de contenu peut entraîner des actions allant de
       l'avertissement à la suppression du contenu ou à la suspension, voire à la résiliation du
       compte utilisateur.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Révisions de la Politique
     </h2>
 
-    <p>
+    <p class="text-justify">
       Hutopy se réserve le droit de modifier cette politique de contenu à tout moment pour
       refléter les changements dans nos pratiques ou pour se conformer à de nouvelles
       réglementations légales.
     </p>
 
 
-    <h2>
+    <h2 class="SubTitle">
       Dans le cas d’une non conformité aux politiques de contenus :
     </h2>
 
-    <p>
+    <p class="text-justify">
       1. Suspension des Fonds : Les montants accumulés sur le compte de l'utilisateur en question
       seront suspendus temporairement le temps de l'évaluation.
     </p>
 
-    <p>
+    <p class="text-justify">
       2. Redistribution à des Œuvres de Charité : Si, après évaluation, le contenu est
       définitivement jugé non conforme à nos clauses de conformité, les fonds suspendus seront
       redistribués à des œuvres de charité choisies par Hutopy. L'utilisateur concerné sera
       informé de cette décision et des raisons de la non-conformité de son contenu.
     </p>
 
-    <p>
+    <p class="text-justify">
       Cette mesure vise à renforcer la responsabilité des créateurs quant au type de contenu
       partagé sur Hutopy, tout en soutenant des causes bénéfiques en cas de violation de nos
       directives.
     </p>
 
-    <h2>
+    <h2 class="DocTitle py-10">
       Section Anti-Exploitation d’Hutopy
     </h2>
 
-    <h2 style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
+    <h2 class="SubTitle" style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
       Engagement d’Hutopy
     </h2>
 
-    <p>
+    <p class="text-justify">
       Hutopy s'engage fermement à maintenir une plateforme sûre et respectueuse pour tous ses
       utilisateurs. Nous prenons une position intransigeante contre toute forme d'exploitation
       humaine et nous travaillons activement pour prévenir, identifier et combattre les
@@ -174,15 +173,15 @@
       d'abus.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Politique de Tolérance Zéro
     </h2>
 
-    <p>
+    <p class="text-justify">
       Nous appliquons une politique de tolérance zéro à l'égard de :
     </p>
 
-    <ul>
+    <ul class="text-justify">
 
       <li>
         Exploitation sexuelle : Cela inclut, mais n'est pas limité à, la pornographie infantile,
@@ -201,15 +200,15 @@
 
     </ul>
 
-    <h2>
-      Politique de Tolérance Zéro
+    <h2 class="SubTitle">
+      Politique de Tolérance Zéro et Signalement/Actions
     </h2>
 
-    <p>
-      Signalement et Actions
+    <p class="text-justify">
+   
     </p>
 
-    <ul>
+    <ul class="text-justify">
 
       <li>Mécanismes de Signalement : Hutopy fournit des outils faciles à utiliser pour signaler
         rapidement tout contenu ou comportement suspect d'exploitation. Nous encourageons
@@ -225,33 +224,33 @@
 
     </ul>
 
-    <h2>
+    <h2 class="SubTitle">
       Collaboration avec les Autorités
     </h2>
 
-    <p>
+    <p class="text-justify">
       Nous collaborons étroitement avec les autorités et les organisations spécialisées pour
       combattre l'exploitation sous toutes ses formes. Hutopy est déterminé à respecter toutes les
       lois applicables et à coopérer avec les autorités dans leurs efforts de lutte contre
       l'exploitation et l'abus.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Engagements des Utilisateurs
     </h2>
 
-    <p>
+    <p class="text-justify">
       En rejoignant Hutopy, les utilisateurs s'engagent à respecter nos principes
       anti-exploitation et à contribuer à la création d'un espace sûr pour tous. Tout manquement à
       ces engagements entraînera des conséquences sérieuses, conformément à notre politique de
       tolérance zéro.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Modération et Signalement
     </h2>
 
-    <ul>
+    <ul class="text-justify">
 
       <li>
         Modération : Hutopy utilise à la fois des modérateurs humains et des outils automatisés
@@ -267,31 +266,31 @@
 
     </ul>
 
-    <h2>
+    <h2 class="SubTitle">
       Conséquences des Violations
-    </h2>
+    </h2 >
 
-    <p>
+    <p class="text-justify">
       La violation de notre politique de contenu peut entraîner des actions allant de
       l'avertissement à la suppression du contenu ou à la suspension, voire à la résiliation du
       compte utilisateur.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Révisions de la Politique
     </h2>
 
-    <p>
+    <p class="text-justify">
       Hutopy se réserve le droit de modifier cette politique de contenu à tout moment pour
       refléter les changements dans nos pratiques ou pour se conformer à de nouvelles
       réglementations légales.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Contact
     </h2>
 
-    <p>
+    <p class="text-justify">
       Si vous avez des questions sur cette politique de contenu ou sur la manière dont nous
       l'appliquons, veuillez contacter notre équipe d'assistance à <a
         href="mailto:support@hutopy.com">support@hutopy.com</a>
diff --git a/src/views/documentation/CreatorGuide.vue b/src/views/documentation/CreatorGuide.vue
index 999c8b5..1b22f58 100644
--- a/src/views/documentation/CreatorGuide.vue
+++ b/src/views/documentation/CreatorGuide.vue
@@ -1,36 +1,36 @@
 <template>
 
-  <div class="document">
+  <div class="DocContainer">
 
-    <h1>Guide pour les Créateurs</h1>
+    <h1 class="DocTitle py-10">Guide pour les Créateurs</h1>
 
-    <h2>
+    <h2 class="SubTitle">
       Bienvenue dans la Communauté de Créateurs d’Hutopy
     </h2>
 
-    <p>
+    <p class="text-justify">
       Félicitations pour avoir choisi Hutopy pour partager votre créativité et votre savoir ! Ce
       guide est conçu pour vous aider à maximiser votre présence sur la plateforme, à engager
       votre audience et à tirer le meilleur parti des outils à votre disposition.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       1. Création de Votre Profil de Créateur :
     </h2>
 
     <ul>
-      <li>Personnalisez Votre Profil : Ajoutez une photo de profil, une bannière et une bio
+      <li class="text-justify">Personnalisez Votre Profil : Ajoutez une photo de profil, une bannière et une bio
         qui
         reflète votre personnalité et votre marque de créateur.
-      </li>
-      <li> Liens et Contacts : Intégrez des liens vers vos autres plateformes sociales</li>
+      </li >
+      <li class="text-justify"> Liens et Contacts : Intégrez des liens vers vos autres plateformes sociales</li>
     </ul>
 
-    <h2>
+    <h2 class="SubTitle">
       2. Publication de Contenu :
     </h2>
 
-    <ul>
+    <ul class="text-justify">
 
       <li>Diversifiez Votre Contenu : Explorez différents formats – vidéos, articles, podcasts –
         pour captiver divers segments d'audience.
@@ -43,11 +43,11 @@
 
     </ul>
 
-    <h2>
+    <h2 class="SubTitle">
       3. Engagement avec Votre Audience :
     </h2>
 
-    <ul>
+    <ul class="text-justify">
 
       <li>Interagissez : Répondez aux commentaires, participez à des discussions et créez des
         sondages pour encourager l'interaction.
@@ -59,22 +59,22 @@
 
     </ul>
 
-    <h2>
+    <h2 class="SubTitle">
       4. Monétisation :
     </h2>
 
-    <ul>
+    <ul class="text-justify">
       <li>Explorez les Options : Hutopy offre plusieurs voies de monétisation, y compris les
         abonnements payants, les dons et le programme d'ambassadeur. Choisissez ce qui convient
         le mieux à votre contenu et à votre audience.
       </li>
     </ul>
 
-    <h2>
+    <h2 class="SubTitle">
       5. Croissance et Développement :
     </h2>
 
-    <ul>
+    <ul class="text-justify">
       <li>
         Continuez à Apprendre : Utilisez le Centre de Ressources Éducatives d’Hutopy pour
         améliorer vos compétences et rester à jour sur les tendances du secteur. ( À venir )
@@ -84,25 +84,3 @@
   </div>
 
 </template>
-
-<style scoped>
-
-.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
-}
-
-</style>
-<script setup lang="ts">
-</script>
\ No newline at end of file
diff --git a/src/views/documentation/FAQ.vue b/src/views/documentation/FAQ.vue
index 9b58f48..a67168c 100644
--- a/src/views/documentation/FAQ.vue
+++ b/src/views/documentation/FAQ.vue
@@ -1,15 +1,14 @@
 <template>
 
-  <div class="content">
-
-    <h1>FAQ</h1>
+  <div class="DocContainer">
+    <h1 class="DocTitle py-10">FAQ</h1>
 
     <blockquote class="important">
       Certaines fonctionnalités ne sont pas encore implémentées, donc certains libellés sont
       prévus pour la v1.0.
     </blockquote>
 
-    <h2>
+    <h2 class="SubTitle">
       Foire Aux Questions
     </h2>
 
@@ -21,7 +20,7 @@
       fonctionnalités.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       1. Comment puis-je créer un compte sur Hutopy ?
     </h2>
 
@@ -35,7 +34,7 @@
       interagir avec la communauté Hutopy immédiatement après.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       2. Quels types de contenu puis-je publier sur Hutopy ?
     </h2>
 
@@ -47,7 +46,7 @@
       nos valeurs.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       3. Comment Hutopy rémunère-t-il les créateurs de contenu ?
     </h2>
 
@@ -57,11 +56,11 @@
       des utilisateurs.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       4. Comment puis-je modifier mon profil ?
     </h2>
 
-    <p>
+    <p >
       Connectez-vous à votre compte, accédez à
       votre profil, puis cliquez sur "Éditer le profil" pour modifier vos informations, ajouter
       une bio, changer votre photo de profil, et plus encore.
@@ -76,7 +75,7 @@
       votre compte sur votre profil dans la section plus. Notez que cette action est irréversible.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       6. Que faire si j'oublie mon mot de passe ?
     </h2>
 
@@ -86,7 +85,7 @@
       votre adresse courriel.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       7. Comment signaler un contenu inapproprié ?
     </h2>
 
@@ -96,7 +95,7 @@
       bouton "Signaler" associé au contenu en question pour alerter notre équipe de modération.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       8. Comment puis-je contacter le support Hutopy ?
     </h2>
 
@@ -106,7 +105,7 @@
       réseaux sociaux. Notre équipe s'efforce de répondre rapidement à toutes les demandes.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       9. Quels sont les frais pour les créateurs sur Hutopy ?
     </h2>
 
@@ -119,7 +118,7 @@
       expérience sur Hutopy.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       10. Y a-t-il des frais pour s'inscrire ou pour maintenir mon compte sur Hutopy ?
     </h2>
 
@@ -129,7 +128,7 @@
       commencer à utiliser Hutopy et à partager votre contenu sans aucun coût initial.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       11. Les utilisateurs doivent-ils payer pour accéder au contenu sur Hutopy ?
     </h2>
 
@@ -141,7 +140,7 @@
       travail.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       12. Existe-t-il des frais pour retirer mes gains de la plateforme ?
     </h2>
 
@@ -152,7 +151,7 @@
       imposés par ces services ou institutions financières, mais pas par Hutopy.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       13. Les frais Hutopy sont-ils les mêmes pour tous les types de contenu ?
     </h2>
 
@@ -166,28 +165,9 @@
 
 </template>
 
-<style scoped>
+<style>
 
 .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
-}
-
 </style>
-<script setup lang="ts">
-</script>
\ No newline at end of file
diff --git a/src/views/documentation/HelpAndContact.vue b/src/views/documentation/HelpAndContact.vue
index 8914b2f..3aa4230 100644
--- a/src/views/documentation/HelpAndContact.vue
+++ b/src/views/documentation/HelpAndContact.vue
@@ -1,86 +1,32 @@
 <template>
-
-  <div class="content">
-
-    <h1>Aide et Contact</h1>
-
-    <p>
-      Bienvenue dans notre espace d'assistance ! Que vous soyez un créateur à la recherche de
-      conseils pour optimiser votre présence sur Hutopy, ou un utilisateur curieux d'en apprendre
-      plus sur notre plateforme, vous êtes au bon endroit. Notre objectif est de vous fournir tout
-      le soutien nécessaire pour que votre expérience sur Hutopy soit aussi enrichissante et
-      agréable que possible.
+  <div class="DocContainer">
+    <h1 class="DocTitle py-10">Aide et Contact</h1>
+    <p class="text-justify">
+      Bienvenue dans notre espace d'assistance ! Que vous soyez un créateur à la recherche de conseils pour optimiser votre présence sur Hutopy, ou un utilisateur curieux d'en apprendre plus sur notre plateforme, vous êtes au bon endroit. Notre objectif est de vous fournir tout le soutien nécessaire pour que votre expérience sur Hutopy soit aussi enrichissante et agréable que possible.
     </p>
 
-    <h2>
-      FAQ (Foire Aux Questions)
-    </h2>
-
-    <p>
-      Retrouvez les réponses aux questions les plus fréquemment posées concernant l'utilisation
-      d’Hutopy, les fonctionnalités de la plateforme, les options de monétisation, et plus encore.
-      Consulter la FAQ
+    <h2 class="SubTitle">FAQ (Foire Aux Questions)</h2>
+    <p class="text-justify">
+      Retrouvez les réponses aux questions les plus fréquemment posées concernant l'utilisation d’Hutopy, les fonctionnalités de la plateforme, les options de monétisation, et plus encore. Consulter la FAQ
     </p>
 
-    <h2>Contactez-Nous</h2>
-
-    <p>Nous sommes toujours ravis d'entendre nos utilisateurs ! Que ce
-      soit pour partager vos retours, poser une question spécifique, ou demander des
-      renseignements sur des partenariats, n'hésitez pas à nous contacter.</p>
-
-    <p>
-      - Par E-mail : <a href="mailto:info@hutopy.com" style="color: #a30e79;">info@hutopy.com</a>
-      <br>
-      - Réseaux Sociaux : Nous sommes actifs sur <a href="https://www.facebook.com/Hutopy"
-                                                    style="color: #a30e79;">Facebook</a>, et <a
-        href="https://www.instagram.com/hutopy.inc"
-        style="color: #a30e79;">Instagram</a> <br>
+    <h2 class="SubTitle">Contactez-Nous</h2>
+    <p class="text-justify">
+      Nous sommes toujours ravis d'entendre nos utilisateurs ! Que ce soit pour partager vos retours, poser une question spécifique, ou demander des renseignements sur des partenariats, n'hésitez pas à nous contacter.
+    </p>
+    <p class="text-justify">
+      - Par E-mail : <a href="mailto:info@hutopy.com" style="color: #a30e79;">info@hutopy.com</a><br>
+      - Réseaux Sociaux : Nous sommes actifs sur <a href="https://www.facebook.com/Hutopy" style="color: #a30e79;">Facebook</a>, et <a href="https://www.instagram.com/hutopy.inc" style="color: #a30e79;">Instagram</a><br>
       - Suivez-nous pour rester informé et interagir avec notre communauté.
     </p>
 
-    <h2>Assistance Technique</h2>
-
-    <p>
-      Rencontrez-vous un problème technique ? <br>
-      Notre équipe d'assistance est là pour vous aider :
-      <a href="mailto:support@hutopy.com" style="color: #a30e79;">support@hutopy.com</a>
+    <h2 class="SubTitle">Assistance Technique</h2>
+    <p class="text-justify">
+      Rencontrez-vous un problème technique ?
+      Notre équipe d'assistance est là pour vous aider : <a href="mailto:support@hutopy.com" style="color: #a30e79;">support@hutopy.com</a>
     </p>
-
-    <p>Nous sommes là pour rendre votre expérience sur Hutopy aussi fluide
-      et positive que possible. N'hésitez pas à nous contacter pour toute aide supplémentaire !
+    <p class="text-justify mt-5">
+      Nous sommes là pour rendre votre expérience sur Hutopy aussi fluide et positive que possible. N'hésitez pas à nous contacter pour toute aide supplémentaire !
     </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>
\ No newline at end of file
diff --git a/src/views/documentation/Pricing.vue b/src/views/documentation/Pricing.vue
index 6d7f12f..4091cde 100644
--- a/src/views/documentation/Pricing.vue
+++ b/src/views/documentation/Pricing.vue
@@ -1,14 +1,10 @@
 <template>
 
-  <div class="document">
+  <div class="DocContainer ">
 
-    <h1>Frais</h1>
+    <h1 class="DocTitle py-6 ">Frais</h1>
 
-    <h2>
-      Frais
-    </h2>
-
-    <p>
+    <p class="text-justify">
       Découvrez Hutopy, l'endroit où la valorisation de votre travail atteint son apogée. Avec une
       commission réduite à seulement 9 %, notre engagement envers votre succès est palpable.
       Chaque pourcentage prélevé est réinvesti avec soin pour catalyser votre croissance afin de
@@ -16,8 +12,8 @@
       pointe, et un support utilisateur de premier ordre. Notre objectif ? Amplifier votre
       expansion et garantir une expérience utilisateur sans précédent.
     </p>
-
-    <p>
+    <br>
+    <p class="text-justify">
       Pour chaque transaction, un frais minime assure la sécurité et la fiabilité des paiements,
       grâce à un partenaire de confiance mondialement reconnu. Ce dernier sécurise des milliards
       en transactions chaque année pour une diversité d'entreprises, à des entreprises en
@@ -25,16 +21,16 @@
       % plus un 0,30 $ par transaction, une petite contribution pour la tranquillité d'esprit et
       la protection de vos revenus.
     </p>
-
-    <p>
+    <br>
+    <p class="text-justify">
       Notre modèle tarifaire, pensé pour la simplicité et la transparence, a pour ambition ultime
       d'optimiser vos gains. Chez Hutopy, la notion de partenariat prend tout son sens : votre
       épanouissement est au cœur de nos préoccupations. Bénéficiez d'une plateforme qui élargit
       votre horizon créatif et entrepreneurial, tout en vous assurant que vos intérêts et ceux de
       vos donnateurs sont précieusement gardés.
     </p>
-
-    <p>
+    <br>
+    <p class="text-justify">
       Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation de la passion
       en profit devient réalité, grâce au soutien indéfectible d'une équipe dévouée à enrichir
       votre parcours. Nous vous invitons à nous rejoindre pour explorer ensemble les avenues de
diff --git a/src/views/documentation/TermsAndConditions.vue b/src/views/documentation/TermsAndConditions.vue
index 3456413..0565d79 100644
--- a/src/views/documentation/TermsAndConditions.vue
+++ b/src/views/documentation/TermsAndConditions.vue
@@ -1,14 +1,14 @@
 <template>
 
-  <div class="document">
+  <div class="DocContainer">
 
-    <h1>Conditions générales</h1>
+    <h1 class="DocTitle py-10">Conditions générales</h1>
 
-    <h2>
+    <h2 class="SubTitle">
       Bienvenue sur Hutopy
     </h2>
 
-    <p>
+    <p class="text-justify">
       En accédant à la plateforme Hutopy et en l'utilisant, vous acceptez de vous conformer aux
       conditions générales d'utilisation suivantes, qui sont conçues pour assurer une expérience
       sûre, respectueuse et positive pour tous les utilisateurs. Ces conditions s'appliquent à
@@ -16,47 +16,47 @@
       service.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Utilisation Acceptable
     </h2>
 
-    <p>
+    <p class="text-justify">
       1. Contenu : Vous vous engagez à ne pas publier de contenu illégal, diffamatoire,
       abusif, pornographique, haineux, raciste ou de toute autre nature susceptible de causer
       du tort. Tout contenu publié reste sous votre responsabilité.
     </p>
 
-    <p>
+    <p class="text-justify">
       2. Comportement : Tout comportement visant à nuire à d'autres utilisateurs, à la
       plateforme ou à ses opérations est strictement interdit. Cela inclut le piratage, la
       diffusion de logiciels malveillants et les tentatives d'hameçonnage.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Droits de Propriété Intellectuelle
     </h2>
 
-    <p>
+    <p class="text-justify">
       Le contenu publié sur Hutopy par les utilisateurs reste la propriété de leurs créateurs
       respectifs. En publiant du contenu sur Hutopy, vous accordez à la plateforme une licence non
       exclusive, transférable, libre de droits et mondiale pour utiliser, reproduire, modifier,
       publier, traduire et distribuer ce contenu dans tout média.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Confidentialité
     </h2>
 
-    <p>
+    <p class="text-justify">
       La protection de vos données personnelles est de la plus haute importance pour Hutopy. Votre
       information est collectée et utilisée conformément à notre politique de confidentialité.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Limitation de Responsabilité
     </h2>
 
-    <p>
+    <p class="text-justify">
       Hutopy et ses affiliés ne seront pas responsables des dommages indirects, accidentels,
       spéciaux, consécutifs ou punitifs, y compris sans limitation, la perte de profits, de
       données ou d'usage, que ce soit dans une action contractuelle, délictuelle y compris la
@@ -64,11 +64,11 @@
       plateforme Hutopy.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Clause de Non-Poursuite
     </h2>
 
-    <p>
+    <p class="text-justify">
       En acceptant ces conditions générales d'utilisation, vous convenez qu'en aucun cas Hutopy,
       ses dirigeants, employés, partenaires, agents, fournisseurs ou affiliés ne pourront être
       tenus responsables de dommages directs, indirects, accidentels, spéciaux, consécutifs ou
@@ -77,11 +77,11 @@
       réclamation liée à votre utilisation de la plateforme.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Gestion du Contenu Inapproprié et Sanctions Financières
     </h2>
 
-    <p>
+    <p class="text-justify">
       Hutopy s'engage à maintenir un environnement sûr et respectueux pour tous ses utilisateurs.
       Ainsi, tout contenu publié sur la plateforme est sujet à une évaluation de conformité avec
       nos directives et nos standards éthiques. Dans l'éventualité où le contenu d'un utilisateur
@@ -95,31 +95,31 @@
       directives, afin de contribuer à une communauté positive et enrichissante pour tous.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Modifications des Conditions
     </h2>
 
-    <p>
+    <p class="text-justify">
       Hutopy se réserve le droit de modifier ou de remplacer ces conditions à tout moment. Il est
       de votre responsabilité de revoir régulièrement ces conditions pour vous tenir informé des
       mises à jour.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Résiliation
     </h2>
 
-    <p>
+    <p class="text-justify">
       Hutopy peut résilier ou suspendre votre accès à la plateforme immédiatement, sans préavis ni
       responsabilité, pour quelque raison que ce soit, y compris, sans limitation, si vous violez
       les conditions.
     </p>
 
-    <h2>
+    <h2 class="SubTitle">
       Loi Applicable
     </h2>
 
-    <p>
+    <p class="text-justify">
       Ces conditions seront régies et interprétées conformément aux lois du pays/juridiction où
       est basée la plateforme, sans égard à ses conflits de dispositions légales.
     </p>
@@ -128,24 +128,3 @@
 
 </template>
 
-<style scoped>
-
-.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
-}
-
-</style>
-<script setup lang="ts">
-</script>
\ No newline at end of file
diff --git a/src/views/main/Wallet.vue b/src/views/main/Wallet.vue
index 9d8b872..8cdbb2e 100644
--- a/src/views/main/Wallet.vue
+++ b/src/views/main/Wallet.vue
@@ -6,7 +6,7 @@
         <span class="font-bold">Montant Total : {{ formattedBalance }}</span>
       </div>
       <div class="text-right">
-        <span class="font-bold">Nombre de transactions total : {{ transactionCount }}</span>
+        <span class="font-bold">Transactions total : {{ transactionCount }}</span>
       </div>
     </div>
     <v-data-table

From c26a4ba148267c7e8c0df4f0ceb811c55d0810c1 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 30 Jun 2024 12:39:54 -0400
Subject: [PATCH 2/2] I changed the visuals of the documentation files,
 improved the appearance of the post page, modified the header of the profile
 view, and added a Feed view.

---
 src/router/index.js                |  9 +++++-
 src/views/main/Creator.vue         | 45 ++++++++++++++++++------------
 src/views/main/Feed.vue            | 41 +++++++++++++++++++++++++++
 src/views/main/PostCard.vue        | 20 ++++++-------
 src/views/main/PostContentMenu.vue |  7 +----
 src/views/main/Profile.vue         |  2 +-
 src/views/manualusers/ARPS.vue     |  2 +-
 7 files changed, 89 insertions(+), 37 deletions(-)
 create mode 100644 src/views/main/Feed.vue

diff --git a/src/router/index.js b/src/router/index.js
index 6aca19e..6147cb1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,7 +19,8 @@ import Profile from '../views/main/Profile.vue'
 import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
 import Leffet from '../views/manualusers/LeffetProfile.vue'
 import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
-import Creator from "@/views/main/Creator.vue";
+import Creator from "@/views/main/Creator.vue"
+import Feed from '../views/main/Feed.vue';
 
 const routes = [
     {
@@ -131,6 +132,12 @@ const routes = [
         name: 'wallet',
         component: Wallet
     },
+    {
+        path: '/feed',
+        name: 'feed',
+        component: Feed
+    },
+
 
 
 ]
diff --git a/src/views/main/Creator.vue b/src/views/main/Creator.vue
index 7984b51..d608ba2 100644
--- a/src/views/main/Creator.vue
+++ b/src/views/main/Creator.vue
@@ -1,28 +1,37 @@
 <template>
   <div>
-
-    <v-img cover
-           max-height="375"
-           :src="imageSrc">
-    </v-img>
-
-    <div class="w-full border-b-2 p-6">
-      <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>
-    </div>
     
-    <div class="w-full border-b-2 p-6">
-      <h2 class="font-sans font-semibold">Commentaires</h2>
-      <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>
-    </div>
+  <div class="flex flex-column w-max-[100] ">
+    
+  </div>
+
+
+<!--    <div class="w-full border-b-2 p-6">-->
+<!--      <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>-->
+<!--    </div>-->
+<!--    -->
+<!--    <div class="w-full border-b-2 p-6">-->
+<!--      <h2 class="font-sans font-semibold">Commentaires</h2>-->
+<!--      <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
+<!--    </div>-->
 
     <PostContentMenu></PostContentMenu>
 
-    <div class="flex">
-      <PostCard v-for="post in posts"
-                :post="post"
-                class="m-2 bg-red w-full">
-      </PostCard>
+
+    <div class="flex flex-col items-center">
+      <div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
+        <PostCard v-for="post in posts"
+                  :key="post.id"
+                  :post="post"
+                  class=" bg-white w-full content-center rounded-3xl mt-2">
+        </PostCard>
+      </div>
     </div>
+
+    
+    
+    
+   
   </div>
 </template>
 
diff --git a/src/views/main/Feed.vue b/src/views/main/Feed.vue
new file mode 100644
index 0000000..48ace0e
--- /dev/null
+++ b/src/views/main/Feed.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+
+    <div class="flex flex-column w-max-[100] ">
+
+    </div>
+
+
+
+    <div class="flex flex-col items-center">
+      <div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
+        <PostCard v-for="post in posts"
+                  :key="post.id"
+                  :post="post"
+                  class=" bg-white w-full content-center rounded-3xl mt-2">
+        </PostCard>
+      </div>
+    </div>
+
+
+
+
+
+  </div>
+</template>
+
+<script setup>
+
+import PostContentMenu from '@/views/main/PostContentMenu.vue'
+import PostCard from "@/views/main/PostCard.vue"
+import posts from "@/views/main/posts.json"
+import PostMessage from "@/views/messages/PostMessage.vue";
+import MessageList from "@/views/messages/MessageList.vue";
+
+let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/main/PostCard.vue b/src/views/main/PostCard.vue
index 7fca6ff..746fdf4 100644
--- a/src/views/main/PostCard.vue
+++ b/src/views/main/PostCard.vue
@@ -1,28 +1,28 @@
 <template>
 
 
-  <div class=" shadow-lg rounded-lg max-w-sm">
+  <div class="border-2 shadow-2xl mb-4 ">
+    <div class="mt-1">
 
-    <div class="h-48 object-cover bg-purple">
-
-      <v-img :src="props.post.banner"
+      <v-img class="mt-1 rounded-t-2xl " :src="props.post.banner"
              v-if="!isHttpUrl">
       </v-img>
 
-      <iframe v-if="isHttpUrl"
+
+      <iframe  style="min-height: 400px" class="w-full rounded-t-2xl"
+           v-if="isHttpUrl"
               :src="props.post.banner"
               title="YouTube video player"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
               referrerpolicy="strict-origin-when-cross-origin"
               allowfullscreen>
       </iframe>
+  
 
     </div>
-
-    <div class="text-lg font-bold">{{ props.post.title }}</div>
-    <div class="text-sm text-gray-500">{{ props.post.title }}</div>
-    <div class="text-base text-gray-700">{{ props.post.content }}</div>
-
+    <div class="text-lg font-bold m-4">{{ props.post.title }}</div>
+    <div class="text-sm text-gray-500 m-4">{{ props.post.title }}</div>
+    <div class="text-base text-gray-700 m-4 text-justify">{{ props.post.content }}</div>
   </div>
 
 </template>
diff --git a/src/views/main/PostContentMenu.vue b/src/views/main/PostContentMenu.vue
index ed46932..15d2dd4 100644
--- a/src/views/main/PostContentMenu.vue
+++ b/src/views/main/PostContentMenu.vue
@@ -95,6 +95,7 @@
             </v-card>
         </v-container>
     </v-col>
+
 </template>
 
 <script setup>
@@ -112,13 +113,7 @@ const removeContent = (index) => {
     contents.value.splice(index, 1);
 };
 
-const postContent = () => {
-    // Implémenter la logique pour poster le contenu
-};
 
-const previewContent = () => {
-    // Implémenter la logique pour prévisualiser le contenu
-};
 
 const cancelPost = () => {
     if (contents.value.length > 0) {
diff --git a/src/views/main/Profile.vue b/src/views/main/Profile.vue
index d83f283..ee726d4 100644
--- a/src/views/main/Profile.vue
+++ b/src/views/main/Profile.vue
@@ -2,7 +2,7 @@
   <div class="px-2">
     <div class="flex flex-col max-w-2xl mx-auto rounded-3xl shadow-2xl mt-2 mb-16">
 
-      <H1 class="text-center text-4xl bg-fuchsia-900 p-3  rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
+      <H1 class="text-center text-4xl bg-fuchsia-900 p-3 w-full rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
         Personnaliser votre profil
       </H1>
       
diff --git a/src/views/manualusers/ARPS.vue b/src/views/manualusers/ARPS.vue
index a2d0188..474eece 100644
--- a/src/views/manualusers/ARPS.vue
+++ b/src/views/manualusers/ARPS.vue
@@ -88,7 +88,7 @@
     </div>
   </div>
 
-  <CreatorFeed ></CreatorFeed>
+ 
 
   <!--Post-modale-->
   <v-dialog v-model="isDialogActive" max-width="500">