From 5d3429afb20d9f27eb457696bf746e9423cb87ef Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad0@hotmail.com>
Date: Tue, 25 Jun 2024 00:50:49 -0400
Subject: [PATCH] Some changes

---
 public/medias/hutopy.png                      |  Bin 0 -> 65842 bytes
 src/App.vue                                   |   88 +-
 src/layouts/DefaultLayout.vue                 |  242 ----
 src/layouts/FooterLayout.vue                  |  155 --
 src/layouts/MainPage.vue                      |  964 -------------
 .../postcomponents/postimagecomponents        |    0
 src/main.js                                   |   35 +-
 src/router/index.js                           |  265 ++--
 src/views/LoginView.vue                       |  559 ++++----
 src/views/PayementCompleted.vue               |    9 +-
 src/views/SignupView.vue                      |    7 -
 src/views/main/Browse.vue                     |   36 +
 src/views/main/Creator.vue                    |   37 +
 src/views/main/CreatorCard.vue                |   22 +
 src/views/main/CreatorFolio.vue               |  951 -------------
 src/views/main/CreatorMainPage.vue            |   11 -
 .../main/CreatorViewComponents/Banner.vue     |   21 -
 src/views/main/Footer.vue                     |   20 +
 src/views/main/Header.vue                     |  127 ++
 src/views/main/Home.vue                       |  164 +++
 src/views/main/HomeView.vue                   |  672 ---------
 src/views/main/{ContactView.vue => Join.vue}  |   26 +-
 src/views/main/PostCard.vue                   |   46 +
 .../main}/PostContentMenu.vue                 |    0
 src/views/main/SideBar.vue                    |   78 +
 src/views/main/SiteMenu.vue                   |   81 ++
 src/views/main/UsersBrowser.vue               |  883 ------------
 src/views/main/YourProfile.vue                |   11 +-
 src/views/main/creators.json                  |   51 +
 src/views/main/posts.json                     |   26 +
 src/views/manualusers/ARPS.vue                | 1097 +++-----------
 src/views/manualusers/ChloeProfile.vue        | 1043 ++++----------
 src/views/manualusers/GuillaumeAime.vue       | 1162 ++++-----------
 src/views/manualusers/HutopyProfile.vue       |  936 ------------
 src/views/manualusers/LeffetProfile.vue       |  846 ++++-------
 src/views/manualusers/MathieuCaron.vue        | 1263 ++++-------------
 src/views/pages/About.vue                     |  224 +++
 src/views/pages/ContentPolicy.vue             |  324 +++++
 src/views/pages/CreatorGuide.vue              |  108 ++
 src/views/pages/FAQ.vue                       |  193 +++
 src/views/pages/HelpAndContact.vue            |   86 ++
 src/views/pages/Pricing.vue                   |   68 +
 src/views/pages/TermsAndConditions.vue        |  151 ++
 src/views/tos/About.vue                       |  259 ----
 src/views/tos/ContentPolicy.vue               |  336 -----
 src/views/tos/FAQ.vue                         |  244 ----
 src/views/tos/Frais.vue                       |  107 --
 src/views/tos/GuideForCreators.vue            |  141 --
 src/views/tos/HelpAndContact.vue              |  122 --
 src/views/tos/TermsAndConditions.vue          |  185 ---
 50 files changed, 3555 insertions(+), 10927 deletions(-)
 create mode 100644 public/medias/hutopy.png
 delete mode 100644 src/layouts/DefaultLayout.vue
 delete mode 100644 src/layouts/FooterLayout.vue
 delete mode 100644 src/layouts/MainPage.vue
 delete mode 100644 src/layouts/postcomponents/postimagecomponents
 create mode 100644 src/views/main/Browse.vue
 create mode 100644 src/views/main/Creator.vue
 create mode 100644 src/views/main/CreatorCard.vue
 delete mode 100644 src/views/main/CreatorFolio.vue
 delete mode 100644 src/views/main/CreatorMainPage.vue
 delete mode 100644 src/views/main/CreatorViewComponents/Banner.vue
 create mode 100644 src/views/main/Footer.vue
 create mode 100644 src/views/main/Header.vue
 create mode 100644 src/views/main/Home.vue
 delete mode 100644 src/views/main/HomeView.vue
 rename src/views/main/{ContactView.vue => Join.vue} (94%)
 create mode 100644 src/views/main/PostCard.vue
 rename src/{layouts => views/main}/PostContentMenu.vue (100%)
 create mode 100644 src/views/main/SideBar.vue
 create mode 100644 src/views/main/SiteMenu.vue
 delete mode 100644 src/views/main/UsersBrowser.vue
 create mode 100644 src/views/main/creators.json
 create mode 100644 src/views/main/posts.json
 delete mode 100644 src/views/manualusers/HutopyProfile.vue
 create mode 100644 src/views/pages/About.vue
 create mode 100644 src/views/pages/ContentPolicy.vue
 create mode 100644 src/views/pages/CreatorGuide.vue
 create mode 100644 src/views/pages/FAQ.vue
 create mode 100644 src/views/pages/HelpAndContact.vue
 create mode 100644 src/views/pages/Pricing.vue
 create mode 100644 src/views/pages/TermsAndConditions.vue
 delete mode 100644 src/views/tos/About.vue
 delete mode 100644 src/views/tos/ContentPolicy.vue
 delete mode 100644 src/views/tos/FAQ.vue
 delete mode 100644 src/views/tos/Frais.vue
 delete mode 100644 src/views/tos/GuideForCreators.vue
 delete mode 100644 src/views/tos/HelpAndContact.vue
 delete mode 100644 src/views/tos/TermsAndConditions.vue

diff --git a/public/medias/hutopy.png b/public/medias/hutopy.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b718483cc4bfd0617582f600e2165a6a2a42347
GIT binary patch
literal 65842
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

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 7e1f5b6..3f26cbc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,95 @@
 <template>
   <v-app>
-    <RouterView>
+    <div class="m-0 flex flex-column h-screen">
 
+      <Header class="fixed w-full z-40 top-0 p-2">
+      </Header>
 
-    </RouterView>
+      <div class="flex flex-row justify-center">
+
+        <div class="w-48 fixed left-0 top-16 h-full border-r-2 bg-purple z-30">
+
+          <SideBar v-if="!hideSideBar">
+          </SideBar>
+
+        </div>
+
+        <!-- TODO: Put this #F4F4F4 color into a style somewhere as SystemDefaultBackground or something similar -->
+        <div class="flex flex-col p-2 ml-48 mt-16 bg-amber-50">
+          <RouterView></RouterView>
+          <Footer></Footer>
+        </div>
+
+      </div>
+
+      <div class="fixed z-50 bottom-10 right-10 flex flex-column">
+
+        <div v-if="showPopup"
+             ref="popup"
+             class="z-50 shadow-md shadow-gray-500 rounded-2xl">
+
+          <div class="bg-purple-800 p-4 rounded-t-2xl font-semibold self-center">
+            Je Soutiens!
+          </div>
+
+          <div class="bg-purple-200 rounded-b-2xl p-4">
+            <div class="mx-2">
+              <StripePayment></StripePayment>
+            </div>
+          </div>
+
+        </div>
+
+        <div @click="togglePopup"
+             ref="popupButton"
+             class="bg-purple rounded-full w-10 h-10 flex justify-center items-center self-end mt-4 cursor-pointer">
+          <v-icon>mdi-plus</v-icon>
+        </div>
+
+      </div>
+
+    </div>
   </v-app>
 </template>
 
 <script setup>
+import Header from "@/views/main/Header.vue";
+import Footer from "@/views/main/Footer.vue";
+import SideBar from "@/views/main/SideBar.vue";
+import {useRoute} from 'vue-router'
+import {ref, onMounted, onUnmounted, computed} from 'vue';
+import StripePayment from "@/views/StripePayment.vue";
+
+const route = useRoute()
+const hideSideBar = computed(() => route.meta.hideSideBar === true)
+
+// Reactive variable to control the visibility of the popup
+const showPopup = ref(false);
+const popup = ref(null);
+const popupButton = ref(null);
+
+// Function to toggle the popup visibility
+const togglePopup = () => {
+  showPopup.value = !showPopup.value
+};
+
+// Function to handle clicks outside the popup
+const handleClickOutside = (event) => {
+  if (popup.value
+      && !popup.value.contains(event.target)
+      && !popupButton.value.contains(event.target)) {
+    showPopup.value = false;
+  }
+};
+
+// Add event listener for clicks outside the popup when component is mounted
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+// Remove event listener when component is unmounted
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
 </script>
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
deleted file mode 100644
index 5ba3c0b..0000000
--- a/src/layouts/DefaultLayout.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<template>
-
-  <body style="background-color: #f4f4f4;">
-    <!-- PC Version -->
-    <v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" elevation="5">
-      <v-container fluid>
-        <v-row>
-          <v-menu>
-            <template v-slot:activator="{ props }">
-              <v-row align="center"> <!-- Utilisation de align="center" pour aligner verticalement le contenu -->
-                <v-col class="ml-4">
-                  <router-link to="/">
-                    <v-img src="/images/hutopymedia/icons/logohutopy.png" alt="Description de l'image"
-                           style="height: 70px; width: 70px;" class="mr-2" :elevation="10"></v-img>
-                  </router-link>
-                </v-col>
-                
-                <v-col cols="auto" class="ml-auto"> <!-- Utilisation de ml-auto pour aligner à droite -->
-                  <div class="d-flex align-center">
-                    <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
-                         class="header-profile-icon mr-2" alt="Logo">
-                    <v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props" ref="walletActivator">
-                      {{ currentUserName }}
-                    </v-btn>
-                  </div>
-                </v-col>
-              </v-row>
-            </template>
-
-            <!-- Dropdown Menu Profile/Connection -->
-            <v-list style="padding: 0;">
-              <v-list-item v-if="!currentUser">
-                <router-link :to="{ name: 'contact' }">
-                  <v-btn class="full-width-btn" flat>Inscription</v-btn>
-                </router-link>
-              </v-list-item>
-              <v-list-item v-if="currentUser">
-                <v-btn @click="openWalletDialog" class="full-width-btn" flat>
-                  <v-icon left class="mr-4">mdi-wallet</v-icon>
-                  <p>Bourse</p>
-                </v-btn>
-              </v-list-item>
-              <v-list-item v-if="currentUser">
-                <router-link :to="{ name: 'yourprofile' }">
-                  <v-btn class="full-width-btn" flat>
-                    <v-icon left class="mr-4">mdi-account-details</v-icon>
-                    <p>Mon profil</p>
-                  </v-btn>
-                </router-link>
-              </v-list-item>
-
-              <v-list-item v-if="currentUser">
-                <v-btn @click="logout" class="full-width-btn" flat>Déconnecter</v-btn>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-row>
-      </v-container>
-    </v-card>
-
-    <!-- Mobile version -->
-    <v-card style="z-index: 2000; background-color: #f4f4f4;" class="hidden-md-and-up">
-      <v-app-bar app>
-        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
-        <v-row>
-          <v-col cols="11" class="d-flex align-center justify-center">
-            <!-- Logo Top bar -->
-            <img src="/images/hutopymedia/banners/hutopy.png" class="mobile-header" alt="Logo">
-          </v-col>
-        </v-row>
-      </v-app-bar>
-
-      <!-- Left-side Menu -->
-      <v-navigation-drawer v-model="drawer" temporary>
-        <v-list>
-          <v-list-item :title="currentUserName">
-            <template v-slot:prepend>
-              <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
-                class="mobile-profile-picture mini-profile-picture" alt="Avatar">
-            </template>
-          </v-list-item>
-        </v-list>
-
-        <!-- Left-side Button -->
-        <v-divider></v-divider>
-        <v-list density="compact" nav>
-          <h1 class="h1-navigation">Navigation</h1>
-          <router-link :to="{ name: 'home' }">
-            <v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
-          </router-link>
-          <router-link :to="{ name: 'userbrowser' }">
-            <v-list-item prepend-icon="mdi-account-multiple" title="Créateurs" value="friends"></v-list-item>
-          </router-link>
-          <router-link :to="{ name: 'contact' }">
-            <v-list-item prepend-icon="mdi-handshake" title="Aidez-nous" value="friends"></v-list-item>
-          </router-link>
-
-          <router-link :to="{ name: 'yourprofile' }">
-            <v-list-item prepend-icon="mdi-account-details" title="Mon profil" value="friends"> </v-list-item>
-          </router-link>
-
-
-          <v-list-item v-if="currentUser" @click="openWalletDialog" prepend-icon="mdi-wallet" title="Bourse"
-            value="wallet"></v-list-item>
-
-          <v-list-item v-if="currentUser" @click="logout" style="margin-top: 110%;" prepend-icon="mdi-logout"
-            title="Déconnecter" value="logout"></v-list-item>
-        </v-list>
-      </v-navigation-drawer>
-    </v-card>
-
-    <!-- Wallet Modal -->
-    <v-dialog v-model="walletDialog" transition="dialog-top-transition" width="auto">
-      <v-card style="border-radius: 30px;">
-        <div class="text-center" style="margin-top: 2%; margin-bottom: 2%;">
-          <v-icon left size="48">mdi-wallet</v-icon>
-          <v-toolbar title="Portefeuille"
-            style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
-        </div>
-
-        <v-card-text class="text-h1 pa-12">
-          <v-row>
-            <v-col>
-              <v-row>
-                <v-col class="text-center">
-                  <h1 style="margin-bottom: -4px; font-size: 1.3rem;">Balance actuelle</h1>
-                  <h1 style=" margin-bottom: -45px; font-size: 3.5rem;">{{ currentUser.totalBalance }}$</h1>
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-        </v-card-text>
-
-        <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions" height="250"
-          item-value="name">
-        </v-data-table-virtual>
-
-        <v-dialog activator="#activator-target" max-width="650">
-          <template v-slot:default="{ isActive }">
-            <v-card prepend-icon="mdi-file-document-edit" text="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 : du développement de fonctionnalités innovantes à la maintenance d'une infrastructure technologique de pointe, en passant par un support utilisateur de premier ordre. Notre objectif ? Amplifier votre expansion et garantir une expérience utilisateur sans précédent.
-Pour chaque transaction, un frais minime assure la sécurité et la fiabilité de vos paiements, grâce à un partenaire de confiance à la renommée mondiale. Ce dernier sécurise pour des milliards en transactionchaque année pour une diversité d'entreprises, allant des startups dynamiques aux conglomerats établis. Ce gage de sécurité est disponible pour une modique somme : 2,9 % plus 0,30 $ par transaction, une petite contribution pour la tranquillité d'esprit et la protection de vos revenus.
-Notre modèle tarifaire a été pensé dans un esprit de simplicité et de transparence, avec l'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 sont précieusement gardés.
-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 succès que nous pouvons emprunter ensemble, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre allié dans la quête du succès.
-" title="Comission">
-              <template v-slot:actions>
-                <v-btn class="ml-auto" text="Close" @click="isActive.value = false"></v-btn>
-              </template>
-            </v-card>
-          </template>
-        </v-dialog>
-
-        <v-card-actions class="justify-center">
-          <v-row justify="center">
-            <v-btn id="activator-target">
-              Comisssion
-            </v-btn>
-            <v-btn @click="walletDialog = false" text="Fermer"></v-btn>
-          </v-row>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </body>
-</template>
-
-<script async setup>
-import MyUserModel from "@/models/myUserModel.js";
-import { useClient } from "@/plugins/api.js";
-import { onBeforeMount, ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-const client = useClient();
-const router = useRouter();
-
-const drawer = ref(false);
-const currentUserName = ref("INVITÉ");
-const walletDialog = ref(false);
-let currentUser = null;
-
-const headers = ref([
-  { title: 'Montant', value: 'amount', width: '20%', key: "amount" },
-  { title: 'Date', value: 'created', width: '20%', key: "created" },
-  { title: 'Message', value: 'tipMessage', width: '60%' }
-]);
-
-onBeforeMount(async () => {
-  try {
-    const myUser = await client.get("/api/GetMyUser");
-    const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
-    currentUser = currentUserModel;
-    currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName;
-  } catch (error) {
-    console.log("User not logged");
-  }
-});
-
-function logout() {
-  localStorage.removeItem('jwt');
-  currentUser = null;
-  currentUserName.value = "INVITÉ";
-  router.push('/');
-}
-
-function openWalletDialog() {
-  walletDialog.value = true;
-}
-</script>
-
-<style scoped>
-.full-width-btn {
-  width: 100%;
-  text-align: left;
-  padding-left: 24px;
-  padding-right: 24px;
-  z-index: 1001;
-}
-.mini-profile-picture {
-  border-radius: 100px;
-}
-.header-profile-icon {
-  height: 60px;
-  width: 60px;
-  border-radius: 50px;
-  border: 2px solid #a30e79;
-}
-.mobile-profile-picture {
-  height: 40px;
-  border-radius: 50px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  border: 2px solid #a30e79;
-  margin-right: 10px;
-}
-.mobile-header {
-  height: 50px;
-  width: auto;
-  border-radius: 10px;
-}
-.h1-navigation {
-  padding-left: 20%;
-  font-size: 1.4rem;
-  font-weight: 800;
-}
-</style>
\ No newline at end of file
diff --git a/src/layouts/FooterLayout.vue b/src/layouts/FooterLayout.vue
deleted file mode 100644
index 8d7c16b..0000000
--- a/src/layouts/FooterLayout.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-
-  <body style="background-color: #f4f4f4;">
-    <v-container style="background-color: #f4f4f4;">
-      <div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
-        class="footer-align">
-
-        <!-- Hutopy footer logo -->
-        <v-container style="background-color: #f4f4f4">
-          <v-row justify="center" style="margin-top: 30px;">
-            <v-col cols="5" lg="5" md="5" sm="12" xs="7">
-              <router-link :to="{ name: 'home' }">
-                <v-img src="/images/hutopymedia/banners/hutopy.png" class="hutopy-footer-picture"></v-img>
-              </router-link>
-            </v-col>
-          </v-row>
-        </v-container>
-
-        <!-- Hutopy Social network links -->
-        <v-container>
-          <!-- Facebook link -->
-          <v-row justify="center">
-            <v-col cols="auto">
-              <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                <img class="icons" src="/images/hutopymedia/icons/pink/facebookpink.png" alt="Description image 2">
-              </a>
-            </v-col>
-
-            <!-- Instagram link -->
-            <v-col cols="auto">
-              <a href="https://www.instagram.com/hutopy.inc/">
-                <img src="/images/hutopymedia/icons/pink/instagrampink.png" alt="Description image 3" class="icons">
-              </a>
-            </v-col>
-
-            <!-- Need X Account -->
-            <v-col cols="auto">
-              <a href="https://twitter.com/Hutopyinc">
-                <img src="/images/hutopymedia/icons/pink/xpink.png" alt="Description image 1" class="icons">
-              </a>
-
-            </v-col>
-          </v-row>
-        </v-container>
-
-        <!-- Loop for social network links -->
-        <v-container class="text-center" style="flex-grow: 1;">
-          <router-link v-for="link in links" :key="link" :to="getLinkUrl(link)"
-            class="mx-2 text-decoration-none text-black">
-            <v-btn class="black--text" rounded="xl" variant="text">{{ link }}</v-btn>
-          </router-link>
-        </v-container>
-
-        <v-container class="text-black text-center ">
-          {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
-        </v-container>
-
-      </div>
-    </v-container>
-  </body>
-</template>
-
-
-
-<script setup>
-const links = [
-  'Aide & Contact',
-  'FAQ',
-  'Guide pour les créateurs',
-  'Conditions générales',
-  'Politique de Contenu',
-  'À Propos',
-  'Frais'
-];
-
-const linkRoutes = {
-  'Aide & Contact': { name: 'helpandcontact' },
-  'FAQ': { name: 'FAQ' },
-  'Guide pour les créateurs': { name: 'guideforcreators' },
-  'Conditions générales': { name: 'termsandconditions' },
-  'Politique de Contenu': { name: 'contentpolicy' },
-  'À Propos': { name: 'about' },
-  'Frais': { name: 'frais' }
-};
-
-// If broken link, redirect to home page.
-const getLinkUrl = (link) => linkRoutes[link] || { name: 'home' };
-</script>
-
-
-<style>
-.icons {
-  width: 50px;
-  height: auto;
-}
-
-.hutopy-footer-picture {
-  height: 70px;
-  margin-bottom: 3%;
-  min-height: 70px;
-  min-width: auto;
-}
-
-.custom-footer {
-  padding: 10px;
-}
-
-.no-margin {
-  margin: 0 !important;
-}
-
-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  background-color: rgba(107, 0, 101, 1);
-}
-
-footer a:not(:last-child) {
-  margin-right: 20px;
-}
-
-.footertextcolor {
-  margin-top: 5px;
-  margin-bottom: 40px;
-  color: azure;
-}
-
-.socialiconspacer {
-  margin-top: 25px;
-}
-
-.custom-color-button {
-  background-color: rgb(255, 0, 0);
-  color: white;
-
-  font-size: 1.5rem;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-.background {
-  background-color: rgba(107, 0, 101, 1);
-}
-
-@media (min-width: 150px) and (max-width: 598px) {
-
-  .hutopy-footer-picture {
-    min-width: 200px;
-    margin-left: -15px;
-  }
-
-}
-</style>
\ No newline at end of file
diff --git a/src/layouts/MainPage.vue b/src/layouts/MainPage.vue
deleted file mode 100644
index 077bd39..0000000
--- a/src/layouts/MainPage.vue
+++ /dev/null
@@ -1,964 +0,0 @@
-<template>
-    <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
-
-    <!-- Router Info and user  informations
-    <v-container style="margin-top: -1%; margin-bottom: 2%;">
-        <v-row>
-            <v-col align="center">
-                <div>
-                    <p>Router : {{ selectedUsername }}</p>
-                    <div v-if="PublicCreatorData">
-                        <h1>{{ PublicCreatorData.userName }}</h1>
-                        <h1>{{ PublicCreatorData.firstName }} {{ PublicCreatorData.lastName }}</h1>
-                    </div>
-                    <div v-else>
-                        <p v-if="errorMessage">{{ errorMessage }}</p>
-                    </div>
-
-                    <form @submit.prevent="manualFetch">
-                        <input v-model="manualUsername" placeholder="Enter username" />
-                        <button type="submit">Fetch User</button>
-                    </form>
-                </div>
-            </v-col>
-        </v-row>
-    </v-container>
-    -->
-
-    <div style="background-color: #f4f4f4;">
-        <!-- Mobile -->
-        <v-row class="fluid hidden-md-and-up social-mobile-container"
-            style="margin-top: -10px; position: relative; z-index: 0;" hidden-md-and-down>
-            <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-                    style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-            </v-col>
-        </v-row>
-
-        <!-- PurpleLine -->
-        <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"></v-row>
-
-        <!-- Profile picture -->
-        <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-        </v-row>
-
-        <!-- User Social Network Links -->
-        <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
-            hidden-md-and-down>
-            <!-- Facebook -->
-            <v-row no-gutters class="d-flex justify-space-between align-center"
-                style="margin-left: 3%; margin-right: 3%;">
-                <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
-                    class="d-flex justify-center align-center">
-                    <a href="https://www.facebook.com/GuillaumeMousseau222">
-                        <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
-                            alt="Facebook"></v-img>
-                    </a>
-                </v-col>
-                <!-- Instagram -->
-                <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
-                    class="d-flex justify-center align-center">
-                    <a href="https://www.instagram.com/guillaumeaime/">
-                        <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
-                            alt="Instagram"></v-img>
-                    </a>
-                </v-col>
-                <!-- Profile picture - Small -->
-                <v-col cols="4" sm="4" xs="0" class="hidden-xs">
-                    <v-row class="d-flex justify-center align-center">
-                        <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-                    </v-row>
-                </v-col>
-
-                <!-- TikTok -->
-                <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
-                    class="d-flex justify-center align-center">
-                    <a href="https://www.tiktok.com/@guillaumeaime">
-                        <v-img class="socialicons-mobile invert-color"
-                            src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok"></v-img>
-                    </a>
-                </v-col>
-
-                <v-spacer class="hidden-xs"> </v-spacer>
-            </v-row>
-
-            <!-- User informations Name title and description  -->
-            <v-row class="social-container-mobile">
-                <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-                    <v-row class="d-flex justify-center">
-                        {{ name }}
-                    </v-row>
-                </v-col>
-                <v-spacer xs="12" sm="4"></v-spacer>
-                <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-                    <v-row class="d-flex justify-center">
-                        {{ title }}
-                    </v-row>
-                </v-col>
-            </v-row>
-            <v-row>
-                <v-container
-                    style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
-                    class="social-icon-group-mobile">
-                    <v-expansion-panels style="min-width: 320px;">
-                        <v-col cols="12" offset="-1">
-                            <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                                text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
-                                title="À propos : Ma mission est claire :"></v-expansion-panel>
-                        </v-col>
-                    </v-expansion-panels>
-                </v-container>
-            </v-row>
-        </v-container>
-
-        <!-- Bannière Pc -->
-        <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0;"
-            hidden-sm-and-up>
-            <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-                    style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-            </v-col>
-        </v-row>
-        <v-row class="hidden-sm-and-down"
-            style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);" hidden-sm-and-up></v-row>
-
-        <!-- Core (Menu / Center / Donation) -->
-        <v-row>
-            <!-- Menu -->
-            <v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
-                <v-col style="margin: 0;">
-                    <v-row class="Hutopy-menu-sticky-mobile">
-                        <v-spacer></v-spacer>
-                        <v-col>
-                            <v-container style=" overflow-y: hidden;">
-                                <!-- Nav-Btn -->
-                                <v-col cols="12" class="px-0">
-                                    <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
-                                        style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
-                                    <v-list dense class="main-background">
-                                        <v-list-item v-for="item in navigationItems" :key="item.link">
-                                            <router-link :to="item.link">
-                                                <v-btn text class="d-flex align-start align-center main-background"
-                                                    elevation="0" outlined="false">
-                                                    <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                                                    {{ item.text }}
-                                                </v-btn>
-                                            </router-link>
-                                        </v-list-item>
-                                    </v-list>
-                                </v-col>
-                            </v-container>
-                        </v-col>
-                    </v-row>
-                    <v-row style="height: 300px;"></v-row>
-                </v-col>
-            </v-col>
-
-            <!-- Profile Info Picture name title & description -->
-            <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
-                <div v-if="PublicCreatorData">
-                    <v-row class="d-flex justify-center align-center">
-                        <v-col xl="10" xxl="8">
-                            <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
-                                <v-container>
-                                    <v-img :src="profilePicture"
-                                        class="elevation-4 mobile-profile-picture-creator"></v-img>
-                                    <!-- User informations Name & title  -->
-                                    <v-container class="background-profile-container" style="margin-top: -8%;">
-                                        <v-row>
-                                            <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
-                                                <h1 class="name-info">{{ PublicCreatorData.userName }}</h1>
-                                            </v-col>
-                                            <v-col></v-col>
-                                        </v-row>
-                                        <v-row>
-                                            <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
-                                                <h1 class="occupation-info">{{ title }}</h1>
-                                            </v-col>
-                                            <v-col></v-col>
-                                        </v-row>
-
-                                        <!-- User Social Network Links -->
-                                        <v-row>
-                                            <v-spacer></v-spacer>
-                                            <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
-                                                <v-row>
-                                                    <a href="https://www.facebook.com/GuillaumeMousseau222">
-                                                        <img class="socialicons"
-                                                            src="/images/hutopymedia/icons/black/facebookblack.png"
-                                                            alt="Description image 2">
-                                                    </a>
-                                                    <a href="https://www.instagram.com/p/C2f-3UnNdfX/">
-                                                        <img class="socialicons"
-                                                            src="/images/hutopymedia/icons/black/instagramblack.png"
-                                                            alt="Description image 2">
-                                                    </a>
-                                                    <a href="https://www.tiktok.com/@guillaumeaime">
-                                                        <img class="socialicons invert-color"
-                                                            src="/images/hutopymedia/icons/white/tiktokwhite.png"
-                                                            alt="Description image 2">
-                                                    </a>
-                                                </v-row>
-                                            </v-col>
-                                            <v-col background-color="primary"></v-col>
-                                        </v-row>
-
-                                        <!-- Description  -->
-                                        <v-row>
-                                            <v-container
-                                                style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
-                                                <v-expansion-panels style="min-width: 320px;">
-                                                    <v-col cols="12" offset="-1">
-                                                        <v-expansion-panel class="background-pink text-justify"
-                                                            style="color: white;"
-                                                            text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
-                                                            title="À propos : Ma mission est claire :">
-                                                        </v-expansion-panel>
-                                                    </v-col>
-                                                </v-expansion-panels>
-                                            </v-container>
-                                        </v-row>
-                                    </v-container>
-                                </v-container>
-                            </v-container>
-                        </v-col>
-                    </v-row>
-
-                    <v-row class="d-flex justify-center align-center">
-                        <v-col xl="10" xxl="8">
-                            <PostContentMenu style="margin-top: -30px;"></PostContentMenu>
-                        </v-col>
-                    </v-row>
-                </div>
-                <div v-else>
-                    <v-row class="d-flex justify-center align-center">
-                        <v-col xl="10" xxl="8" align="center">
-                            <v-card class="pa-5" elevation="2" style="max-width: 400px;">
-                                <v-row class="d-flex justify-center align-center">
-                                    <v-icon size="128" color="grey">mdi-magnify</v-icon>
-                                </v-row>
-                                <v-row class="d-flex justify-center align-center">
-                                    <p>L'utilisateur <span style="color: red;">{{ selectedUsername }}</span> n'a pas
-                                        été trouvé</p>
-                                </v-row>
-                            </v-card>
-                        </v-col>
-                    </v-row>
-                </div>
-            </v-col>
-
-
-            <!-- Large-Monitor-RightCol Donation -->
-            <v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down" hidden-sm-and-up>
-                <v-row>
-                    <v-col>
-                        <v-container class="sticky-bottom-label Je-soutien-container"
-                            style="max-width: 400px ;  bottom: 0;">
-                            <!-- Donnation -->
-                            <v-card style="border-radius: 20px;">
-                                <v-container>
-                                    <v-row class="mb-0"
-                                        style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                                        <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                                            JE SOUTIENS!
-                                        </v-card-title>
-                                    </v-row>
-                                    <StripePayment></StripePayment>
-                                </v-container>
-                            </v-card>
-                        </v-container>
-                        <v-container style="height: 300px;">
-                        </v-container>
-                    </v-col>
-                    <v-spacer>
-                    </v-spacer>
-                </v-row>
-            </v-col>
-        </v-row>
-
-        <v-snackbar v-model="errorSnackBar">
-            {{ snackBarMessage }}
-            <template v-slot:actions>
-                <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
-            </template>
-        </v-snackbar>
-
-        <!-- Mobile Donation -->
-        <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
-            style="background-color: #6b0065; margin-top: 30px; text-align: center;">
-            <!-- Barre cliquable pour ouvrir le drawer -->
-            <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
-                style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
-                JE SOUTIENS
-            </v-btn>
-        </v-col>
-
-        <!-- Drawer du bas -->
-        <template>
-            <div>
-                <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
-                    <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
-                        <h1 class="text-soutiens">JE SOUTIENS</h1>
-                        <StripePayment></StripePayment>
-                    </v-container>
-                </v-bottom-sheet>
-            </div>
-        </template>
-    </div>
-    <FooterLayout></FooterLayout>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-import { useClient } from "@/plugins/api.js";
-import { computed, onMounted, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import StripePayment from '../views/StripePayment.vue';
-
-const PublicCreatorData = ref(null);
-const selectedUsername = ref('');
-const route = useRoute();
-const client = useClient();
-
-let errorSnackBar = ref(false);
-let snackBarMessage = ref('');
-const errorMessage = ref('');
-
-let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
-let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
-let drawerbottom = ref(false);
-
-const name = computed(() => {
-    return PublicCreatorData.value ? PublicCreatorData.value.userName : '';
-});
-const title = 'Créateur de contenus';
-
-let navigationItems = [
-    { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-    { icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' },
-    { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
-];
-
-const fetchUser = async (username) => {
-    console.log(`Fetching user: ${username}`);
-    try {
-        const response = await client.get(`/api/Users`, {
-            params: {
-                UserName: username
-            }
-        });
-        const data = response.data;
-        console.log(`Data received: `, data);
-        if (data && Object.keys(data).length > 0 && (data.userName || data.firstName || data.lastName)) {
-            PublicCreatorData.value = data; // Met à jour la référence réactive
-            errorMessage.value = '';
-            errorSnackBar.value = false;
-        } else {
-            PublicCreatorData.value = null; // Réinitialise la référence si l'utilisateur n'est pas trouvé
-            errorMessage.value = "Utilisateur non trouvé";
-            snackBarMessage.value = "Utilisateur non trouvé";
-            errorSnackBar.value = true;
-        }
-    } catch (error) {
-        console.error(`Error fetching user: ${error}`);
-        PublicCreatorData.value = null;
-        errorMessage.value = "Erreur lors de la récupération des données";
-        snackBarMessage.value = "Erreur lors de la récupération des données";
-        errorSnackBar.value = true;
-    }
-};
-
-const updateUser = () => {
-    selectedUsername.value = route.params.username;
-    console.log(`Route username: ${selectedUsername.value}`);
-    if (selectedUsername.value) {
-        fetchUser(selectedUsername.value);
-    }
-};
-
-onMounted(updateUser);
-
-watch(() => route.params.username, updateUser);
-</script>
-
-
-<style scoped>
-.invert-color {
-    filter: invert(1);
-}
-
-
-.Hutopy-menu-sticky-mobile {
-    position: sticky;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 1000;
-    margin-top: -40px;
-}
-
-.sticky-bottom-label {
-    position: sticky;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 1000;
-    margin-top: 20px;
-}
-
-.sticky-top-label {
-    position: sticky;
-    bottom: 0;
-    right: 10%;
-    width: 100%;
-    z-index: 1000;
-}
-
-.text-soutiens {
-    margin-bottom: 15px;
-    color: white;
-    font-size: 1.5rem;
-    letter-spacing: 7px;
-    text-align: center;
-}
-
-.name-info {
-    margin-top: -10px;
-    margin-left: 15%;
-}
-
-.occupation-info {
-    margin-left: 15%;
-    font-size: large;
-}
-
-.name-info-mobile {
-    margin-left: 22px;
-    font-size: 1.3rem
-}
-
-.main-background {
-    background-color: #f4f4f4;
-}
-
-.profile-container {
-    margin-top: -16%;
-}
-
-.btn-custom {
-    width: 100%;
-    background-color: transparent;
-}
-
-.background-profile-container {
-    background-color: #ececec;
-    color: white;
-    border-top: 3px solid #a30e79;
-    border-right: 3px solid #a30e79;
-    font-weight: 700;
-    font-size: 1.15rem;
-    border-radius: 25px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
-}
-
-.background-pink {
-    background-color: #cc6f91;
-    color: white;
-    font-weight: 400;
-}
-
-.label-text {
-    font-weight: 400;
-    margin-left: 3%;
-    font-size: 1rem;
-}
-
-.profile-name {
-    margin-top: -15%;
-}
-
-.socialicons {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 3px;
-    margin-left: 40px;
-}
-
-.socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 27px;
-    margin-left: 20px;
-}
-
-.youtube-card {
-    margin-left: 2%;
-    margin-right: 2%;
-    border-radius: 15px;
-    background-color: #f4f4f4;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
-}
-
-.card-title {
-    font-size: 1.4rem;
-    margin-top: 10px;
-}
-
-.card-date {
-    margin-left: 10px;
-    margin-top: -18px;
-    margin-bottom: -20px;
-    font-size: .8rem;
-}
-
-
-
-.social-container {
-    background-color: #006d77;
-    border-top-right-radius: 30px;
-    border-bottom-right-radius: 30px;
-    font-size: 1.7rem;
-    font-weight: 600;
-    color: white;
-}
-
-.social-container2 {
-    background-color: #0baab2;
-    border-bottom-right-radius: 30px;
-    font-size: 1.4rem;
-    font-weight: 500;
-    color: white;
-}
-
-.social-container-mobile {
-    background-color: #006d77;
-    font-size: 1.4rem;
-    font-weight: 600;
-    color: white;
-    z-index: 1000;
-    margin: auto;
-    text-align: center;
-}
-
-.social-container2-mobile {
-    background-color: #0baab2;
-    z-index: 1000;
-    font-size: 1.2rem;
-    font-weight: 500;
-    color: white;
-}
-
-.social-icon-group-mobile {
-    background-color: #0baab2;
-}
-
-.mini-profile-picture {
-    border-radius: 100px;
-}
-
-.btn-card-options {
-    background-color: #f4f4f4;
-    width: 50px;
-    margin-left: -12px;
-    margin-top: 10px;
-}
-
-.mobile-profile-picture-creator {
-    border-radius: 100px;
-    height: 150px;
-    width: 150px;
-    border-radius: 50%;
-    max-width: 150px;
-    border: 4px solid white;
-    z-index: 1000;
-}
-
-.mobile-header {
-    height: 50px;
-    margin-left: -13%;
-    margin-top: 6%;
-}
-
-.h1-navigation {
-    text-align: center;
-    font-weight: 600;
-    margin-bottom: 10%;
-}
-
-.mobile-profile-picture {
-    height: 40px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-    border: 2px solid #a30e79;
-    margin-right: 10px
-}
-
-.profile-banner {
-    margin-top: 25px;
-    min-height: 200px
-}
-
-.v-navigation-drawer {
-    max-height: 100vh;
-}
-
-@media (min-width: 150px) and (max-width: 474px) {
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(-30%) translateX(0%);
-    }
-
-    .socialicons-mobile {
-        width: 35px;
-        max-width: 100px;
-        margin-top: 0px;
-        margin-left: 20px;
-    }
-}
-
-
-@media (min-width: 475px) and (max-width: 599px) {
-    .socialicons-mobile {
-        width: 35px;
-        max-width: 100px;
-        margin-top: 0px;
-        margin-left: px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(-30%) translateX(0%);
-    }
-
-    .profile-container-mobile {
-        width: 110%;
-        margin-left: -3%;
-        margin-top: -112px;
-    }
-
-    .occupation-info {
-        font-size: 1rem;
-    }
-
-    .card-youtube {
-        min-height: 250px;
-    }
-
-    .name-info-mobile {
-        font-size: 1.6rem;
-    }
-}
-
-@media (min-width: 599px) and (max-width: 749px) {
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(25%) translateX(0%);
-    }
-
-    .profile-container {
-
-        width: 110%;
-        margin-left: -3%;
-    }
-
-    .profile-container-mobile {
-
-        width: 110%;
-        margin-left: -3%;
-        margin-top: -110px;
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-    }
-
-    .occupation-info {
-        font-size: 1rem;
-    }
-
-    .card-youtube {
-        min-height: 330px;
-    }
-}
-
-@media (min-width: 750px) and (max-width: 960px) {
-    .mobile-profile-picture-creator {
-        transform: scale(1.8) translateY(25%) translateX(0%);
-    }
-
-    .profile-container {
-        width: 110%;
-        margin-left: -3%;
-    }
-
-    .profile-container-mobile {
-        width: 110%;
-        margin-left: -3%;
-        margin-top: -110px;
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-    }
-
-    .occupation-info {
-        font-size: 1rem;
-    }
-
-    .card-youtube {
-        min-height: 425px;
-    }
-}
-
-@media (min-width: 960px) and (max-width: 1280px) {
-    .middle-col {
-        margin-left: -30px;
-    }
-
-    .text-soutiens {
-        font-size: 1.2rem;
-        letter-spacing: 5px;
-    }
-
-    .profile-container {
-        margin-top: -185px;
-        min-width: 480px
-    }
-
-    .card-youtube {
-        min-height: 270px;
-    }
-
-    .Je-soutien-container {
-        min-width: 325px;
-        margin-left: -35px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.3) translateY(25%) translateX(-50px);
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-        margin-left: 20px;
-        margin-top: -6px
-    }
-
-    .occupation-info {
-        margin-left: 40px;
-        margin-top: -8px
-    }
-
-    .social-container {
-        margin-left: 80px;
-        min-width: 270px;
-        max-height: 40px
-    }
-
-    .social-container2 {
-        margin-left: 50px;
-        min-width: 250px;
-        max-height: 35px
-    }
-
-    .socialicons {
-        width: 34px;
-        max-width: 100px;
-        margin-top: 15px;
-        margin-left: 25px;
-    }
-}
-
-@media (min-width: 1280px) and (max-width: 1600px) {
-    .text-soutiens {
-        font-size: 1.3rem;
-        letter-spacing: 8px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.3) translateY(25%) translateX(-50px);
-    }
-
-    .profile-container {
-        margin-top: -180px;
-    }
-
-    .card-youtube {
-        min-height: 290px;
-    }
-
-    .menu-col {
-        margin-left: -4%;
-    }
-
-    .Je-soutien-container {
-        min-width: 350px;
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-        margin-left: 20px;
-        margin-top: -6px
-    }
-
-    .social-container {
-        margin-left: 90px;
-        min-width: 350;
-        max-height: 40px
-    }
-
-    .occupation-info {
-        margin-left: 70px;
-        margin-top: -8px
-    }
-
-    .social-container2 {
-
-        margin-left: 40px;
-        min-width: 290px;
-        max-height: 35px
-    }
-
-    .socialicons {
-        width: 34px;
-        max-width: 100px;
-        margin-top: 15px;
-        margin-left: 25px;
-    }
-}
-
-@media (min-width: 1600px) and (max-width: 1919px) {
-    .text-soutiens {
-        font-size: 1.3rem;
-
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.4) translateY(25%) translateX(-40px);
-    }
-
-    .profile-container {
-        margin-top: -171px;
-    }
-
-    .card-youtube {
-        min-height: 355px;
-    }
-
-    .menu-col {
-        margin-left: -4%;
-    }
-
-    .Je-soutien-container {
-        min-width: 400px;
-    }
-
-    .name-info {
-        font-size: 1.5rem;
-        margin-top: -4px;
-        margin-left: 35px;
-    }
-
-    .occupation-info {
-        font-size: 1.3rem;
-        margin-left: 75px;
-        margin-top: -2px
-    }
-
-    .social-container2 {
-        margin-left: 70px;
-        min-width: 300px;
-    }
-}
-
-@media (min-width: 1920px) and (max-width: 2559px) {
-    .text-soutiens {
-        font-size: 1.3rem;
-    }
-
-    .profile-container {
-        margin-top: -160px;
-    }
-
-    .card-youtube {
-        min-height: 380px;
-    }
-
-    .Je-soutien-container {
-        min-width: 400px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.4) translateY(25%) translateX(-40px);
-    }
-
-    .name-info {
-        font-size: 1.5rem;
-        margin-left: 35px;
-        margin-top: -4px;
-    }
-
-    .social-container {
-        margin-left: 100px;
-    }
-
-    .occupation-info {
-        font-size: 1.3rem;
-        margin-left: 110px;
-        margin-top: -4px
-    }
-
-    .social-container2 {
-        margin-left: 30px;
-        min-width: 360px;
-    }
-
-    .socialicons {
-        width: 38px;
-        max-width: 100px;
-        margin-top: 13px;
-        margin-left: 40px;
-    }
-}
-
-@media (min-width: 2560px) {
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(25%) translateX(-20px);
-    }
-
-    .card-youtube {
-        min-height: 380px;
-    }
-
-    .text-soutiens {
-        font-size: 1.5rem;
-    }
-
-    .name-info {
-        font-size: 2rem;
-
-    }
-
-    .social-container {
-        margin-left: 140px;
-    }
-
-    .social-container2 {
-        margin-left: 130px;
-    }
-
-    .occupation-info {
-        font-size: 1.5rem;
-        margin-left: 65px;
-        margin-top: -6px
-    }
-
-    .socialicons {
-        width: 45px;
-        max-width: 100px;
-        margin-top: 15px;
-        margin-left: 40px;
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/layouts/postcomponents/postimagecomponents b/src/layouts/postcomponents/postimagecomponents
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main.js b/src/main.js
index e0578b6..f2e3024 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,32 +1,27 @@
-import './assets/main.css'
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import {createApp} from 'vue'
 import App from './App.vue'
 import router from './router'
+import './assets/main.css'
+import {createPinia} from 'pinia'
 import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
-import { createVuetify } from 'vuetify'
+import {createVuetify} from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import clientPlugin from './plugins/api.js'
 import vueGoogleOauth from 'vue3-google-login'
 
 const vuetify = createVuetify({
-  components,
-  directives
+    components,
+    directives
 });
 
-const app = createApp(App);
-
-// Create an axios client preconfigured to the Hutopy API.
-app.use(clientPlugin);
-
-app.use(vueGoogleOauth, {
-  clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
-});
-
-app.use(createPinia());
-app.use(vuetify);
-app.use(router);
-
-app.mount('#app')
+createApp(App)
+    .use(clientPlugin)
+    .use(createPinia())
+    .use(vuetify)
+    .use(router)
+    .use(vueGoogleOauth, {
+        clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
+    })
+    .mount('#app');
diff --git a/src/router/index.js b/src/router/index.js
index 5414f70..cb603d2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,164 +1,137 @@
+import {createRouter, createWebHistory} from 'vue-router'
 import ARPS from '@/views/manualusers/ARPS.vue'
 import GuillaumeAime from '@/views/manualusers/GuillaumeAime.vue'
-import About from '@/views/tos/About.vue'
-import ContentPolicy from '@/views/tos/ContentPolicy.vue'
-import FAQ from '@/views/tos/FAQ.vue'
-import Frais from '@/views/tos/Frais.vue'
-import GuideForCreators from '@/views/tos/GuideForCreators.vue'
-import HelpAndContact from '@/views/tos/HelpAndContact.vue'
-import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
-import { createRouter, createWebHistory } from 'vue-router'
-import MainPage from '../layouts/MainPage.vue'
+import About from '@/views/pages/About.vue'
+import ContentPolicy from '@/views/pages/ContentPolicy.vue'
+import FAQ from '@/views/pages/FAQ.vue'
+import Pricing from '@/views/pages/Pricing.vue'
+import CreatorGuide from '@/views/pages/CreatorGuide.vue'
+import HelpAndContact from '@/views/pages/HelpAndContact.vue'
+import TermsAndConditions from '@/views/pages/TermsAndConditions.vue'
 import LoginView from '../views/LoginView.vue'
 import PaymentCompleted from '../views/PayementCompleted.vue'
 import SignupView from '../views/SignupView.vue'
-import ContactView from '../views/main/ContactView.vue'
-import CreatorMainPage from '../views/main/CreatorMainPage.vue'
-import CreatorFolio from '../views/main/CreatorFolio.vue'
-import HomeView from '../views/main/HomeView.vue'
-import UserBrowser from '../views/main/UsersBrowser.vue'
+import Join from '../views/main/Join.vue'
+import Home from '../views/main/Home.vue'
+import Browse from '../views/main/Browse.vue'
 import YourProfile from '../views/main/YourProfile.vue'
 import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
-import Hutopy from '../views/manualusers/HutopyProfile.vue'
 import Leffet from '../views/manualusers/LeffetProfile.vue'
 import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
+import Creator from "@/views/main/Creator.vue";
 
 const routes = [
-  {
-    path: '/',
-    name: 'main',
-    component: HomeView
-  },
-  {
-    path: '/creatorfolio',
-    name: 'creatorfolio',
-    component: CreatorFolio
-  },
-  {
-    path: '/paymentcompleted',
-    name: 'PayementCompleted',
-    component: PaymentCompleted
-  },
-  {
-    path: '/yourprofile',
-    name: 'yourprofile',
-    component: YourProfile
-  },
-  {
-    path: '/contact',
-    name: 'contact',
-    component: ContactView
-  },
-  {
-    path: '/signup',
-    name: 'signup',
-    component: SignupView
-  },
-  {
-    path: '/login',
-    name: 'login',
-    component: LoginView
-  },
-  {
-    path: '/home',
-    name: 'home',
-    component: HomeView
-  },
-  {
-    path: '/helpandcontact',
-    name: 'helpandcontact',
-    component: HelpAndContact
-  },
-  {
-    path: '/termsandconditions',
-    name: 'termsandconditions',
-    component: TermsAndConditions
-  },
-  {
-    path: '/contentpolicy',
-    name: 'contentpolicy',
-    component: ContentPolicy
-  },
-  {
-    path: '/faq',
-    name: 'FAQ',
-    component: FAQ
-  },
-  {
-    path: '/guideforcreators',
-    name: 'guideforcreators',
-    component: GuideForCreators
-  },
-  {
-    path: '/about',
-    name: 'about',
-    component: About
-  },
-  {
-    path: '/frais',
-    name: 'frais',
-    component: Frais
-  },
-  {
-    path: '/Hutopy',
-    name: 'Hutopy',
-    component: Hutopy
-  },
-  {
-    path: '/Leffet',
-    name: 'Leffet',
-    component: Leffet
-  },
-  {
-    path: '/userbrowser',
-    name: 'userbrowser',
-    component: UserBrowser
-  },
-  {
-    path: '/chloebeaugrand',
-    name: 'chloebeaugrand',
-    component: ChloeBeaugrand
-  },
-  {
-    path: '/guillaumeaime',
-    name: 'guillaumeaime',
-    component: GuillaumeAime
-  },
-  {
-    path: '/mathieucaron',
-    name: 'mathieucaron',
-    component: MathieuCaron
-  },
-  {
-    path: '/arps',
-    name: 'arps',
-    component: ARPS
-  },
-  {
-    path: '/:username',
-    name: 'user-profile',
-    component: MainPage
-  },
+    {
+        path: '/',
+        component: Home,
+        meta: {hideSideBar: true}
+    },
+    {
+        path: '/browse',
+        component: Browse
+    },
+    
+    {
+        path: '/@leffet',
+        component: Leffet
+    },
+    {
+        path: '/@chloebeaugrand',
+        component: ChloeBeaugrand
+    },
+    {
+        path: '/@guillaumeaime',
+        component: GuillaumeAime
+    },
+    {
+        path: '/@mathieucaron',
+        component: MathieuCaron
+    },
+    {
+        path: '/@arps',
+        component: ARPS
+    },
+    
+    {
+        path: '/@:creator',
+        component: Creator
+    },
+
+    {
+        path: '/helpandcontact',
+        component: HelpAndContact,
+        meta: {hideSideBar: true}
+    },
+    {
+        path: '/termsandconditions',
+        name: 'termsandconditions',
+        component: TermsAndConditions,
+        meta: {hideSideBar: true}
+    },
+    {
+        path: '/contentpolicy',
+        name: 'contentpolicy',
+        component: ContentPolicy,
+        meta: {hideSideBar: true}
+    },
+    {
+        path: '/faq',
+        name: 'FAQ',
+        component: FAQ,
+        meta: {hideSideBar: true}
+    },
+    {
+        path: '/guideforcreators',
+        name: 'guideforcreators',
+        component: CreatorGuide,
+        meta: {hideSideBar: true}
+    },
+    {
+        path: '/about',
+        name: 'about',
+        component: About,
+        meta: {hideSideBar: true}
+    },
+    {
+        path: '/pricing',
+        name: 'pricing',
+        component: Pricing,
+        meta: {hideSideBar: true}
+    },
+    {
+        path: '/join',
+        name: 'join',
+        component: Join,
+        meta: {hideSideBar: true}
+    },
+
+    {
+        path: '/paymentcompleted',
+        name: 'PayementCompleted',
+        component: PaymentCompleted
+    },
+    {
+        path: '/yourprofile',
+        name: 'yourprofile',
+        component: YourProfile
+    },
+    {
+        path: '/signup',
+        name: 'signup',
+        component: SignupView
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: LoginView
+    },
+
 
-  {
-    path: '/creatorFolio',
-    name: 'creatorFolio',
-    component: CreatorFolio
-  },
-  {
-    path: '/creatormainpage',
-    name: 'creatormainpage',
-    component: CreatorMainPage
-  }
 ]
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
-  scrollBehavior(to, from, savedPosition) {
-    return { top: 0 };
-  }
-
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes
 })
 
 export default router
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 81136df..84f2b21 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,112 +1,109 @@
 <template>
-    <v-app style="background-color: #f4f4f4;">
-      <!-- Google Oauth -->
-        <div class="sm:flex hidden items-center justify-between flex-col"
-            style="background-color: #f4f4f4; margin-top: 3%;">
+    
+  <!-- Google Oauth -->
+  <div class="sm:flex hidden items-center justify-between flex-col"
+       style="margin-top: 3%;">
 
-            <body style="background-color: #f4f4f4;">
-                <v-container style=" background-color: #f4f4f4;">
-                    <v-row align="center" justify="center">
-                        <!-- Header -->
-                        <v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
-                            <img class="login-picture" src="/images/hutopymedia/loginpage/loginhutopy.png">
-                        </v-col>
+    <v-container>
+      <v-row align="center" justify="center">
+        <!-- Header -->
+        <v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
+          <img class="login-picture" src="/images/hutopymedia/loginpage/loginhutopy.png">
+        </v-col>
 
-                        <!-- Connexion-objects -->
-                        <v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
-                            <h1 class="text-center display-6 h1-connexion">Connexion</h1>
-                            <h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous vous connecter à votre
-                                compte?</h2>
-                            <v-card-text>
-                                <v-form class="label-mail-password">
-                                    <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
-                                        label="Nom d'utilisateur" class="text-start"></v-text-field>
-                                    <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
-                                        label="Mot de passe" class="text-start"></v-text-field>
-                                </v-form>
-                                <v-snackbar v-model="errorSnackBar">
-                                  Nom d'utilisateur ou mot de passe invalide.
-                                    <template v-slot:actions>
-                                        <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
-                                    </template>
-                                </v-snackbar>
-                            </v-card-text>
-                            <v-card-actions>
-                                <div class="flex-grow-1"></div>
-                                <router-link :to="{ name: 'home' }">
-                                    <v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
-                                </router-link>
-                                <v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
-                              <GoogleLogin :callback="googleCallback" popup-type="TOKEN">
-                                <v-btn color="primary" class="ma-2 btnhome">Google Login</v-btn>
-                              </GoogleLogin>
-
-                              <FacebookAuth :appId="facebookAppId" @on-submit="facebookCallback">
-                                <v-btn color="primary" class="ma-2 btnhome">Facebook Login</v-btn>
-                              </FacebookAuth>
-
-                            </v-card-actions>
-                            <div class="text-center">
-                                <h2 class="text-center display-3 h2pasinscrit">Pas encore inscrit?</h2>
-                                <router-link :to="{ name: 'contact' }">
-                                    <v-btn color="#6b0065" class="inscriptionbtn"
-                                        style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
-                                </router-link>
-                            </div>
-                        </v-col>
-                    </v-row>
-                </v-container>
-
-            </body>
-            <FooterLayout></FooterLayout>
-        </div>
-
-
-        <div class="sm:hidden flex flex-col items-center justify-start"
-            style="background-color: #f4f4f4; height: 100vh;">
-            <img style="margin-top: 10%;  width: 350px;  box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px; "
-                src="/images/hutopymedia/loginpage/loginhutopy.png">
-
-            <h1 class="h1-connexion">Connexion</h1>
-            <h2 class="h2-connexion">Comment souhaitez-vous
-                vous connecter à votre compte?</h2>
-
-            <v-form style="max-width: 400px; width: 350px;">
-                <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="Nom d'utilisateur"></v-text-field>
-                <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
-                    label="Mot de passe"></v-text-field>
+        <!-- Connexion-objects -->
+        <v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
+          <h1 class="text-center display-6 h1-connexion">Connexion</h1>
+          <h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous vous connecter à votre
+            compte?</h2>
+          <v-card-text>
+            <v-form class="label-mail-password">
+              <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
+                            label="Nom d'utilisateur" class="text-start"></v-text-field>
+              <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
+                            label="Mot de passe" class="text-start"></v-text-field>
             </v-form>
+            <v-snackbar v-model="errorSnackBar">
+              Nom d'utilisateur ou mot de passe invalide.
+              <template v-slot:actions>
+                <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
+              </template>
+            </v-snackbar>
+          </v-card-text>
+          <v-card-actions>
+            <div class="flex-grow-1"></div>
+            <RouterLink to="/">
+              <v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
+            </RouterLink>
+            <v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
+            <GoogleLogin :callback="googleCallback" popup-type="TOKEN">
+              <v-btn color="primary" class="ma-2 btnhome">Google Login</v-btn>
+            </GoogleLogin>
 
-            <v-card-actions>
-                <div class="flex-grow-1"></div>
-                <router-link :to="{ name: 'home' }">
-                    <v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
-                </router-link>
-                <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
-            </v-card-actions>
-            <div class="text-center">
-                <h2 class="h2pasinscrit">
-                    Pas encore
-                    inscrit?</h2>
-                <router-link :to="{ name: 'contact' }">
-                    <v-btn color="#6b0065" class="inscriptionbtn"
-                        style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
-                </router-link>
-            </div>
+            <FacebookAuth :appId="facebookAppId" @on-submit="facebookCallback">
+              <v-btn color="primary" class="ma-2 btnhome">Facebook Login</v-btn>
+            </FacebookAuth>
+
+          </v-card-actions>
+          <div class="text-center">
+            <h2 class="text-center display-3 h2pasinscrit">Pas encore inscrit?</h2>
+            <RouterLink :to="{ name: 'join' }">
+              <v-btn color="#6b0065" class="inscriptionbtn"
+                     style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions
+              </v-btn>
+            </RouterLink>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+
+
+  <div class="sm:hidden flex flex-col items-center justify-start"
+       style="height: 100vh;">
+    
+    <img style="margin-top: 10%;  width: 350px;  box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px;"
+         src="/images/hutopymedia/loginpage/loginhutopy.png">
+
+    <h1 class="h1-connexion">Connexion</h1>
+    <h2 class="h2-connexion">Comment souhaitez-vous vous connecter à votre compte?</h2>
+
+    <v-form style="max-width: 400px; width: 350px;">
+      <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="Nom d'utilisateur"></v-text-field>
+      <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
+                    label="Mot de passe"></v-text-field>
+    </v-form>
+
+    <v-card-actions>
+      <div class="flex-grow-1"></div>
+      <RouterLink to="/">
+        <v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
+      </RouterLink>
+      <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
+    </v-card-actions>
+    <div class="text-center">
+      <h2 class="h2pasinscrit">
+        Pas encore
+        inscrit?</h2>
+      <RouterLink :to="{ name: 'join' }">
+        <v-btn color="#6b0065" class="inscriptionbtn"
+               style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions
+        </v-btn>
+      </RouterLink>
+    </div>
+
+  </div>
 
-        </div>
-    </v-app>
 </template>
 
 
 <script setup>
-import FooterLayout from '@/layouts/FooterLayout.vue';
 import {auth} from '@/stores/auth.js';
 import {ref} from 'vue';
 import {useRouter} from 'vue-router';
 import {useClient} from "@/plugins/api.js";
 import {GoogleLogin} from "vue3-google-login";
-import { FacebookAuth } from '@xtiannyeto/vue-auth-social';
+import {FacebookAuth} from '@xtiannyeto/vue-auth-social';
 
 const api = useClient()
 
@@ -117,13 +114,13 @@ let user = ref({});
 let errorSnackBar = ref(false);
 
 async function login() {
-    // TODO: Make the store handle errors
-    try {
-        await store.login(api, user.value.email, user.value.password)
-        await router.push('/');
-    } catch (error) {
-        errorSnackBar.value = true;
-    }
+  // TODO: Make the store handle errors
+  try {
+    await store.login(api, user.value.email, user.value.password)
+    await router.push('/');
+  } catch (error) {
+    errorSnackBar.value = true;
+  }
 }
 
 const googleCallback = async (response) => {
@@ -135,273 +132,273 @@ const googleCallback = async (response) => {
 
 const facebookAppId = import.meta.env.VITE_FACEBOOK_APP_ID;
 const facebookCallback = async (response) => {
-  console.log("User Successfully Logged In" , response)
+  console.log("User Successfully Logged In", response)
 }
 
 </script>
 
 <style scoped>
 .h1-connexion {
-    font-size: 0.55em;
+  font-size: 0.55em;
 }
 
 .h2-connexion {
-    font-size: 0.55em;
+  font-size: 0.55em;
 }
 
 .label-mail-password {
-    margin-bottom: -10%;
+  margin-bottom: -10%;
 }
 
 
 @media (min-width: 300px) {
-    .h1-connexion {
-        font-size: 2em;
-        margin-bottom: 5%;
-    }
+  .h1-connexion {
+    font-size: 2em;
+    margin-bottom: 5%;
+  }
 
-    .h2-connexion {
-        font-size: 1.1em;
-        margin-bottom: 5%;
+  .h2-connexion {
+    font-size: 1.1em;
+    margin-bottom: 5%;
 
-        text-align: center;
-    }
+    text-align: center;
+  }
 
-    .h2pasinscrit {
-        margin-bottom: 6%;
-        font-size: 1.1em;
-    }
+  .h2pasinscrit {
+    margin-bottom: 6%;
+    font-size: 1.1em;
+  }
 
-    .inscriptionbtn {
-        transform: scale(.7);
-    }
+  .inscriptionbtn {
+    transform: scale(.7);
+  }
 }
 
 @media (min-width: 450px) and (max-width: 670px) {
-    .h1-connexion {
-        font-size: 2em;
-        margin-bottom: 5%;
-    }
+  .h1-connexion {
+    font-size: 2em;
+    margin-bottom: 5%;
+  }
 
-    .h2-connexion {
-        font-size: 1.1em;
-        margin-bottom: 5%;
+  .h2-connexion {
+    font-size: 1.1em;
+    margin-bottom: 5%;
 
-        text-align: center;
-    }
+    text-align: center;
+  }
 
-    .h2pasinscrit {
-        margin-bottom: 6%;
-        font-size: 1.1em;
-    }
+  .h2pasinscrit {
+    margin-bottom: 6%;
+    font-size: 1.1em;
+  }
 
-    .inscriptionbtn {
-        transform: scale(.7);
-    }
+  .inscriptionbtn {
+    transform: scale(.7);
+  }
 
-    .login-picture {
-        width: auto;
-        border-radius: 30px;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+  .login-picture {
+    width: auto;
+    border-radius: 30px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
 
 
-    }
+  }
 }
 
 @media (min-width: 641px) and (max-width: 770px) {
-    .h1-connexion {
-        font-size: 2.5em;
-    }
+  .h1-connexion {
+    font-size: 2.5em;
+  }
 
-    .h2-connexion {
-        font-size: 1.1em;
-        margin-bottom: 5%;
-    }
+  .h2-connexion {
+    font-size: 1.1em;
+    margin-bottom: 5%;
+  }
 
-    .h2pasinscrit {
-        margin-bottom: 5%;
-        font-size: 1.1em;
-    }
+  .h2pasinscrit {
+    margin-bottom: 5%;
+    font-size: 1.1em;
+  }
 
-    .label-mail-password {
-        margin-bottom: -3%;
-        width: 425px;
-        margin-left: 6%;
+  .label-mail-password {
+    margin-bottom: -3%;
+    width: 425px;
+    margin-left: 6%;
 
-    }
+  }
 
-    .btnhome {
+  .btnhome {
 
-        font-size: 1em;
+    font-size: 1em;
 
-        justify-content: center;
-        transform: matrix(1, 0, 0, 1, -160, 0);
-    }
+    justify-content: center;
+    transform: matrix(1, 0, 0, 1, -160, 0);
+  }
 
-    .login-picture {
-        width: auto;
-        border-radius: 30px;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+  .login-picture {
+    width: auto;
+    border-radius: 30px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
 
 
-    }
+  }
 
-    .inscriptionbtn {
-        transform: scale(.8);
-    }
+  .inscriptionbtn {
+    transform: scale(.8);
+  }
 }
 
 @media (min-width: 769px) and (max-width: 1280px) {
-    .h1-connexion {
-        font-size: 3em;
-    }
+  .h1-connexion {
+    font-size: 3em;
+  }
 
-    .h2-connexion {
-        font-size: 1.2em;
-        margin-bottom: 5%;
-    }
+  .h2-connexion {
+    font-size: 1.2em;
+    margin-bottom: 5%;
+  }
 
-    .h2pasinscrit {
-        margin-bottom: 5%;
-        font-size: 1.7em;
-    }
+  .h2pasinscrit {
+    margin-bottom: 5%;
+    font-size: 1.7em;
+  }
 
-    .label-mail-password {
-        margin-bottom: -3%;
-        width: 550px;
-        margin-left: 9%;
+  .label-mail-password {
+    margin-bottom: -3%;
+    width: 550px;
+    margin-left: 9%;
 
-    }
+  }
 
-    .inscriptionbtn {
-        transform: scale(.8);
-    }
+  .inscriptionbtn {
+    transform: scale(.8);
+  }
 
-    .login-picture {
-        width: auto;
-        border-radius: 30px;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+  .login-picture {
+    width: auto;
+    border-radius: 30px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
 
 
-    }
+  }
 
-    .btnhome {
-        font-size: 1em;
+  .btnhome {
+    font-size: 1em;
 
-        justify-content: center;
+    justify-content: center;
 
-    }
+  }
 }
 
 @media (min-width: 1279px) and (max-width: 1920px) {
-    .h1-connexion {
-        font-size: 2em;
-        margin-top: 4%;
-        font-weight: 600;
-    }
+  .h1-connexion {
+    font-size: 2em;
+    margin-top: 4%;
+    font-weight: 600;
+  }
 
-    .h2-connexion {
-        font-size: 1em;
-        margin-bottom: 5%;
-        font-weight: 500;
-    }
+  .h2-connexion {
+    font-size: 1em;
+    margin-bottom: 5%;
+    font-weight: 500;
+  }
 
-    .h2pasinscrit {
-        margin-bottom: 5%;
-        font-size: 1.3em;
-    }
+  .h2pasinscrit {
+    margin-bottom: 5%;
+    font-size: 1.3em;
+  }
 
-    .label-mail-password {
-        margin-bottom: -10%;
-        margin-top: -4%;
+  .label-mail-password {
+    margin-bottom: -10%;
+    margin-top: -4%;
 
-    }
+  }
 
-    .inscriptionbtn {
-        transform: scale(.6);
-        margin-top: -5%;
-    }
+  .inscriptionbtn {
+    transform: scale(.6);
+    margin-top: -5%;
+  }
 
-    .login-picture {
-        width: auto;
-        border-radius: 30px;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
-        margin-left: -5%;
+  .login-picture {
+    width: auto;
+    border-radius: 30px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+    margin-left: -5%;
 
-    }
+  }
 }
 
 @media (min-width: 1921px) {
-    .h1-connexion {
-        font-size: 4.2em;
-    }
+  .h1-connexion {
+    font-size: 4.2em;
+  }
 
-    .h2-connexion {
-        font-size: 1.3em;
-        margin-bottom: 5%;
-        margin-left: 6%;
-    }
+  .h2-connexion {
+    font-size: 1.3em;
+    margin-bottom: 5%;
+    margin-left: 6%;
+  }
 
-    .h2pasinscrit {
-        margin-bottom: 5%;
-        font-size: 1.7em;
-    }
+  .h2pasinscrit {
+    margin-bottom: 5%;
+    font-size: 1.7em;
+  }
 
 
-    .label-mail-password {
-        margin-left: 5%;
-        margin-bottom: 0%;
-        width: auto;
-    }
+  .label-mail-password {
+    margin-left: 5%;
+    margin-bottom: 0%;
+    width: auto;
+  }
 
-    .connexion-container {
-        margin-left: -7%;
+  .connexion-container {
+    margin-left: -7%;
 
-    }
+  }
 
-    .login-picture {
-        width: auto;
-        border-radius: 30px;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
-        margin-left: -10%;
-    }
+  .login-picture {
+    width: auto;
+    border-radius: 30px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+    margin-left: -10%;
+  }
 }
 
 @media (min-width: 2500px) and (max-width: 4000px) {
-    .h1-connexion {
-        font-size: 6.2em;
-    }
+  .h1-connexion {
+    font-size: 6.2em;
+  }
 
-    .h2-connexion {
-        font-size: 1.7em;
-        margin-bottom: 5%;
-    }
+  .h2-connexion {
+    font-size: 1.7em;
+    margin-bottom: 5%;
+  }
 
-    .h2pasinscrit {
-        margin-bottom: 5%;
-        font-size: 1.7em;
-    }
+  .h2pasinscrit {
+    margin-bottom: 5%;
+    font-size: 1.7em;
+  }
 
-    .label-mail-password {
-        margin-bottom: 0%;
-        margin-left: 10%;
-        width: auto;
-    }
+  .label-mail-password {
+    margin-bottom: 0%;
+    margin-left: 10%;
+    width: auto;
+  }
 
-    .inscriptionbtn {
-        transform: scale(1);
-    }
+  .inscriptionbtn {
+    transform: scale(1);
+  }
 
 
-    .connexion-container {
-        margin-left: -3%;
-    }
+  .connexion-container {
+    margin-left: -3%;
+  }
 
-    .login-picture {
-        width: auto;
-        border-radius: 30px;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
-        margin-left: -5%;
-    }
+  .login-picture {
+    width: auto;
+    border-radius: 30px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+    margin-left: -5%;
+  }
 }
 </style>
diff --git a/src/views/PayementCompleted.vue b/src/views/PayementCompleted.vue
index 8af6c9f..e02c937 100644
--- a/src/views/PayementCompleted.vue
+++ b/src/views/PayementCompleted.vue
@@ -1,8 +1,5 @@
 <template>
 
-  <body style="background-color: #f4f4f4;">
-
-    <DefaultLayout></DefaultLayout>
     <v-container>
       <div class="margin-top-mobile">
         <v-row style="margin-top: 4%; margin-bottom: 2%" class="d-flex justify-center align-center">
@@ -60,14 +57,10 @@
         </template>
       </v-snackbar>
     </v-container>
-    <FooterLayout></FooterLayout>
-
-  </body>
+  
 </template>
 
 <script async setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
 import { useClient } from '@/plugins/api.js';
 import { onBeforeMount, ref } from 'vue';
 import { useRouter } from 'vue-router';
diff --git a/src/views/SignupView.vue b/src/views/SignupView.vue
index 9c45b1f..e51ba78 100644
--- a/src/views/SignupView.vue
+++ b/src/views/SignupView.vue
@@ -1,7 +1,5 @@
 <template>
     <v-app style="background-color: #f4f4f4;">
-        <DefaultLayout></DefaultLayout>
-
         <v-row>
             <v-col cols=6 align="center">
                 <v-img class="login-picture" max-width="500" src="/images/hutopymedia/loginpage/loginhutopy.png"
@@ -58,15 +56,10 @@
                 </div>
             </v-col>
         </v-row>
-
-
-        <FooterLayout></FooterLayout>
     </v-app>
 </template>
 
 <script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
 import { RouterLink } from "vue-router";
 </script>
 
diff --git a/src/views/main/Browse.vue b/src/views/main/Browse.vue
new file mode 100644
index 0000000..8f242a2
--- /dev/null
+++ b/src/views/main/Browse.vue
@@ -0,0 +1,36 @@
+<template>
+
+  <div>
+
+    <v-img max-height="375"
+           src="images/usersmedia/HutopyProfile/banners/banner01.png"
+           cover>
+    </v-img>
+
+    <div class="text-5xl font-semibold text-center py-10">
+      CRÉATEURS
+    </div>
+
+    <div class="grid grid-cols-2">
+      <RouterLink v-for="(creator, index) in creators"
+                  :key="index"
+                  :to="creator.routerLink">
+        <CreatorCard :creator="creator"
+                     class="m-2">
+        </CreatorCard>
+      </RouterLink>
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+
+import CreatorCard from "@/views/main/CreatorCard.vue";
+import creators from "@/views/main/creators.json"; // Import the JSON file
+
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/main/Creator.vue b/src/views/main/Creator.vue
new file mode 100644
index 0000000..25b6ad2
--- /dev/null
+++ b/src/views/main/Creator.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+
+    <v-img cover
+           max-height="375"
+           :src="imageSrc">
+    </v-img>
+
+    <PostContentMenu></PostContentMenu>
+
+    <div class="flex">
+      <RouterLink v-for="(post, index) in posts"
+                  :key="index"
+                  :to="post.routerLink"
+          class="bg-amber flex grow">
+        <PostCard :post="post"
+                  class="m-2 bg-red w-full">
+        </PostCard>
+      </RouterLink>
+
+    </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"
+
+let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/main/CreatorCard.vue b/src/views/main/CreatorCard.vue
new file mode 100644
index 0000000..d6e5128
--- /dev/null
+++ b/src/views/main/CreatorCard.vue
@@ -0,0 +1,22 @@
+<template>
+  <v-card class="shadow-lg rounded-lg overflow-hidden max-w-sm">
+    <v-img :src="creator.imageUrl" class="w-full h-48 object-cover"></v-img>
+    <v-card-title class="text-lg font-bold">{{ creator.name }}</v-card-title>
+    <v-card-subtitle class="text-sm text-gray-500">{{ creator.title }}</v-card-subtitle>
+    <v-card-text class="text-base text-gray-700">{{ creator.description }}</v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  creator: {
+    type: Object,
+    required: true,
+    validator: (profile) => {
+      return 'image' in profile && 'name' in profile && 'title' in profile && 'description' in profile;
+    }
+  }
+});
+</script>
\ No newline at end of file
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
deleted file mode 100644
index 2f7eb67..0000000
--- a/src/views/main/CreatorFolio.vue
+++ /dev/null
@@ -1,951 +0,0 @@
-<template>
-  <div style="background-color: #f4f4f4;">
-    <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
-
-    <!-- "Mobile -->
-    <v-row class="fluid hidden-md-and-up social-mobile-container"
-           style="margin-top: -10px; position: relative; z-index: 0;">
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-               style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-      </v-col>
-    </v-row>
-
-    <!-- "PurpleLine" -->
-    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-    </v-row>
-
-    <!-- "Mobile-Profile" -->
-    <!-- "Profile picture" -->
-    <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
-      <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-    </v-row>
-
-    <!-- User Social Network Links -->
-    <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons">
-
-      <!-- Facebook -->
-      <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.facebook.com/GuillaumeMousseau222">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
-                   alt="Facebook"></v-img>
-          </a>
-        </v-col>
-        <!-- Instagram -->
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.instagram.com/guillaumeaime/">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
-                   alt="Instagram"></v-img>
-          </a>
-        </v-col>
-        <!-- Profile picture - Small -->
-        <v-col cols="4" sm="4" xs="0" class="hidden-xs">
-          <v-row class="d-flex justify-center align-center">
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-          </v-row>
-        </v-col>
-
-        <!-- TikTok -->
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.tiktok.com/@guillaumeaime">
-            <v-img class="socialicons-mobile invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
-                   alt="TikTok"></v-img>
-          </a>
-        </v-col>
-
-        <v-spacer class="hidden-xs"> </v-spacer>
-      </v-row>
-
-      <!-- User informations Name title and description  -->
-      <v-row class="social-container-mobile">
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row class="d-flex justify-center">
-            {{ name }}
-          </v-row>
-        </v-col>
-        <v-spacer xs="12" sm="4"></v-spacer>
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row class="d-flex justify-center">
-            {{ title }}
-          </v-row>
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
-                     class="social-icon-group-mobile">
-          <v-expansion-panels style="min-width: 320px;">
-            <v-col cols="12" offset="-1">
-              <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                                 text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
-                                 title="À propos : Ma mission est claire :">
-              </v-expansion-panel>
-            </v-col>
-          </v-expansion-panels>
-        </v-container>
-      </v-row>
-    </v-container>
-
-    <!-- Bannière Pc -->
-    <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0;">
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-               style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-      </v-col>
-    </v-row>
-    <v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-    </v-row>
-
-    <!-- "Core (Menu / Center / Donation)" -->
-    <v-row>
-      <!-- "Menu" -->
-      <v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col">
-        <v-col style="margin: 0;">
-          <v-row class="Hutopy-menu-sticky-mobile">
-            <v-spacer></v-spacer>
-            <v-col>
-              <v-container style=" overflow-y: hidden;">
-                <!-- Nav-Btn -->
-                <v-col cols="12" class="px-0">
-                  <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
-                         style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
-                  <v-list dense class="main-background">
-                    <v-list-item v-for="item in navigationItems" :key="item.link">
-                      <router-link :to="item.link">
-                        <v-btn text class="d-flex align-start align-center main-background" elevation="0">
-                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                          {{ item.text }}
-                        </v-btn>
-                      </router-link>
-                    </v-list-item>
-                  </v-list>
-                </v-col>
-              </v-container>
-            </v-col>
-          </v-row>
-          <v-row style="height: 3000px;"></v-row>
-        </v-col>
-      </v-col>
-
-      <!-- Profile Info Picture name title & description -->
-      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
-        <v-row class="d-flex justify-center align-center">
-          <v-col xl="10" xxl="8">
-            <v-container class="profile-container hidden-sm-and-down">
-              <v-container>
-                <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-                <!-- User informations Name & title  -->
-                <v-container class="background-profile-container" style="margin-top: -8%;">
-                  <v-row>
-                    <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
-                      <h1 class="name-info">{{ name }}</h1>
-                    </v-col>
-                    <v-col></v-col>
-                  </v-row>
-                  <v-row>
-                    <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
-                      <h1 class="occupation-info">{{ title }}</h1>
-                    </v-col>
-                    <v-col></v-col>
-                  </v-row>
-
-                  <!-- User Social Network Links -->
-                  <v-row>
-                    <v-spacer></v-spacer>
-                    <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
-                      <v-row>
-                        <a href="https://www.facebook.com/GuillaumeMousseau222">
-                          <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
-                               alt="Description image 2">
-                        </a>
-                        <a href="https://www.instagram.com/p/C2f-3UnNdfX/">
-                          <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
-                               alt="Description image 2">
-                        </a>
-
-                        <a href="https://www.tiktok.com/@guillaumeaime">
-                          <img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
-                               alt="Description image 2">
-                        </a>
-                      </v-row>
-                    </v-col>
-                    <v-col background-color="primary"></v-col>
-                  </v-row>
-
-                  <!-- Description  -->
-                  <v-row>
-                    <v-container
-                        style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
-                      <v-expansion-panels style="min-width: 320px;">
-                        <v-col cols="12" offset="-1">
-                          <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                                             text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
-                                             title="À propos : Ma mission est claire :">
-                          </v-expansion-panel>
-                        </v-col>
-                      </v-expansion-panels>
-                    </v-container>
-                  </v-row>
-                </v-container>
-              </v-container>
-            </v-container>
-          </v-col>
-        </v-row>
-
-        <v-row class="d-flex justify-center align-center">
-          <v-col xl="10" xxl="8">
-            <PostContentMenu style="margin-top: -30px;"></PostContentMenu>
-          </v-col>
-        </v-row>
-
-        <!-- Example carte dynamique avec expension -->
-        <v-row class="d-flex justify-center align-center">
-          <v-col xl="10" xxl="8">
-            <v-container>
-              <v-card class="flow-menu m-0 youtube-card">
-                <v-col>
-                  <v-row>
-                    <v-col class="text-center">
-                      <h1 class="card-title">POST DYNAMIQUE</h1>
-                    </v-col>
-                    <v-col class="text-right">
-                      <v-btn class="btn-card-options" flat tile elevation="0">
-                        <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                      </v-btn>
-                    </v-col>
-                  </v-row>
-                </v-col>
-                <v-img :src="imageSrc" title="Guillaumem"></v-img>
-                <p class="text-justify pa-10" style="margin-bottom: -10px; font-size: 1em">
-                  C’est un honneur de vous présenter mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement.
-                </p>
-                <div v-if="showMore">
-                  <v-row no-gutters>
-                    <v-col cols="6" class="text-center pa-0">
-                      <v-img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png" @click="openCarousel(0)" class="image-full"></v-img>
-                    </v-col>
-                    <v-col cols="6" class="text-center pa-0">
-                      <v-img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png" @click="openCarousel(1)" class="image-full"></v-img>
-                    </v-col>
-                  </v-row>
-                  <p class="text-justify pa-10" style="font-size: 1em; margin-bottom: -25px">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                  </p>
-
-                  <p class="text-justify pa-10" style="font-size: 1em;">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                  </p>
-
-                  <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                          src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
-                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                          allowfullscreen></iframe>
-
-                  <p class="text-justify pa-10" style="font-size: 1em;">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                  </p>
-                </div>
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                    style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                  
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-bottom: 15px; margin-bottom: -20px"
-                              placeholder="Commentaire"></v-text-field>
-                <v-row>
-                  <v-col class="text-right" style="margin-right: 25px">
-                    <v-btn variant="plain" @click="toggleShowMore" class="text-body-2" style="margin-bottom: 10px;  font-weight: bold">
-                      {{ showMore ? 'AFFICHER MOINS' : 'AFFICHER PLUS' }}
-                    </v-btn>
-                  </v-col>
-
-                </v-row>
-              </v-card>
-            </v-container>
-          </v-col>
-
-          <v-dialog v-model="carouselVisible" max-width="600px">
-            <v-carousel v-model="currentImage">
-              <v-carousel-item v-for="(image, index) in images" :key="index">
-                <v-img :src="image"></v-img>
-              </v-carousel-item>
-            </v-carousel>
-          </v-dialog>
-        </v-row>
-
-        <!-- Card youtube balado -->
-       
-      </v-col>
-
-      <!-- "Large-Monitor-RightCol" Donation -->
-      <v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down">
-        <v-row>
-          <v-col>
-            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
-              <!-- Donnation -->
-              <v-card style="border-radius: 20px;">
-                <v-container>
-                  <v-row class="mb-0"
-                         style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                      JE SOUTIENS!
-                    </v-card-title>
-                  </v-row>
-                  <StripePayment></StripePayment>
-                </v-container>
-              </v-card>
-            </v-container>
-            <v-container style="height: 3000px;">
-            </v-container>
-          </v-col>
-          <v-spacer>
-          </v-spacer>
-        </v-row>
-      </v-col>
-    </v-row>
-
-    <!-- "Mobile" Donation -->
-    <v-col class="hidden-md-and-up sticky-bottom-label"
-           style="background-color: #6b0065; margin-top: 30px; text-align: center;">
-      <!-- Barre cliquable pour ouvrir le drawer -->
-      <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
-             style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
-        JE SOUTIENS
-      </v-btn>
-    </v-col>
-
-    <!-- Drawer du bas -->
-    <template>
-      <div>
-        <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
-          <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
-            <h1 class="text-soutiens">JE SOUTIENS</h1>
-            <StripePayment></StripePayment>
-          </v-container>
-        </v-bottom-sheet>
-      </div>
-    </template>
-
-    <FooterLayout></FooterLayout>
-  </div>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-import PostContentMenu from '@/layouts/PostContentMenu.vue';
-import { ref } from 'vue';
-import StripePayment from '../StripePayment.vue';
-
-let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
-let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
-let name = 'Guillaume Mousseau';
-let title = 'Créateur de contenus';
-let drawerbottom = ref(false);
-
-let navigationItems = [
-  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-  { icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' },
-  { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
-];
-
-// Ajouter la variable réactive pour gérer l'état d'affichage du contenu
-let showMore = ref(false);
-
-// Ajouter les variables et méthodes pour gérer le carrousel
-let carouselVisible = ref(false);
-let currentImage = ref(0);
-let images = [
-  '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png',
-  '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand.jpg',
-  // Ajoutez ici toutes les images que vous souhaitez afficher dans le carrousel
-];
-
-const toggleShowMore = () => {
-  showMore.value = !showMore.value;
-};
-
-const openCarousel = (index) => {
-  currentImage.value = index;
-  carouselVisible.value = true;
-};
-</script>
-
-<style scoped>
-.invert-color {
-  filter: invert(1);
-}
-
-.Hutopy-menu-sticky-mobile {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: -40px;
-}
-
-.sticky-bottom-label {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: 20px;
-}
-
-.sticky-top-label {
-  position: sticky;
-  bottom: 0;
-  right: 10%;
-  width: 100%;
-  z-index: 1000;
-}
-
-.text-soutiens {
-  margin-bottom: 15px;
-  color: white;
-  font-size: 1.5rem;
-  letter-spacing: 7px;
-  text-align: center;
-}
-
-.name-info {
-  margin-top: -10px;
-  margin-left: 15%;
-}
-
-.occupation-info {
-  margin-left: 15%;
-  font-size: large;
-}
-
-.name-info-mobile {
-  margin-left: 22px;
-  font-size: 1.3rem
-}
-
-.main-background {
-  background-color: #f4f4f4;
-}
-
-.profile-container {
-  margin-top: -16%;
-}
-
-.btn-custom {
-  width: 100%;
-  background-color: transparent;
-}
-
-.background-profile-container {
-  background-color: #ececec;
-  color: white;
-  border-top: 3px solid #a30e79;
-  border-right: 3px solid #a30e79;
-  font-weight: 700;
-  font-size: 1.15rem;
-  border-radius: 25px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
-}
-
-.background-pink {
-  background-color: #cc6f91;
-  color: white;
-  font-weight: 400;
-}
-
-.label-text {
-  font-weight: 400;
-  margin-left: 3%;
-  font-size: 1rem;
-}
-
-.profile-name {
-  margin-top: -15%;
-}
-
-.socialicons {
-  width: 35px;
-  max-width: 100px;
-  margin-top: 3px;
-  margin-left: 40px;
-}
-
-.socialicons-mobile {
-  width: 35px;
-  max-width: 100px;
-  margin-top: 27px;
-  margin-left: 20px;
-}
-
-.youtube-card {
-  margin-left: 2%;
-  margin-right: 2%;
-  border-radius: 15px;
-  background-color: #f4f4f4;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
-}
-
-.card-title {
-  font-size: 1.4rem;
-  margin-top: 10px;
-}
-
-.card-date {
-  margin-left: 10px;
-  margin-top: -18px;
-  margin-bottom: -20px;
-  font-size: .8rem;
-}
-
-.social-container {
-  background-color: #006d77;
-  border-top-right-radius: 30px;
-  border-bottom-right-radius: 30px;
-  font-size: 1.7rem;
-  font-weight: 600;
-  color: white;
-}
-
-.social-container2 {
-  background-color: #0baab2;
-  border-bottom-right-radius: 30px;
-  font-size: 1.4rem;
-  font-weight: 500;
-  color: white;
-}
-
-.social-container-mobile {
-  background-color: #006d77;
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: white;
-  z-index: 1000;
-  margin: auto;
-  text-align: center;
-}
-
-.social-container2-mobile {
-  background-color: #0baab2;
-  z-index: 1000;
-  font-size: 1.2rem;
-  font-weight: 500;
-  color: white;
-}
-
-.social-icon-group-mobile {
-  background-color: #0baab2;
-}
-
-.mini-profile-picture {
-  border-radius: 100px;
-}
-
-.btn-card-options {
-  background-color: #f4f4f4;
-  width: 50px;
-  margin-left: -12px;
-  margin-top: 10px;
-}
-
-.mobile-profile-picture-creator {
-  border-radius: 100px;
-  height: 150px;
-  width: 150px;
-  border-radius: 50%;
-  max-width: 150px;
-  border: 4px solid white;
-  z-index: 1000;
-}
-
-.mobile-header {
-  height: 50px;
-  margin-left: -13%;
-  margin-top: 6%;
-}
-
-.h1-navigation {
-  text-align: center;
-  font-weight: 600;
-  margin-bottom: 10%;
-}
-
-.mobile-profile-picture {
-  height: 40px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  border: 2px solid #a30e79;
-  margin-right: 10px
-}
-
-.profile-banner {
-  margin-top: 25px;
-  min-height: 200px
-}
-
-.v-navigation-drawer {
-  max-height: 100vh;
-}
-
-@media (min-width: 150px) and (max-width: 474px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(-30%) translateX(0%);
-  }
-
-  .socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 0px;
-    margin-left: 20px;
-  }
-}
-
-
-@media (min-width: 475px) and (max-width: 599px) {
-  .socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 0px;
-    margin-left: px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(-30%) translateX(0%);
-  }
-
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -112px;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 250px;
-  }
-
-  .name-info-mobile {
-    font-size: 1.6rem;
-  }
-}
-
-@media (min-width: 599px) and (max-width: 749px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(25%) translateX(0%);
-  }
-
-  .profile-container {
-
-    width: 110%;
-    margin-left: -3%;
-  }
-
-  .profile-container-mobile {
-
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 330px;
-  }
-}
-
-@media (min-width: 750px) and (max-width: 960px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.8) translateY(25%) translateX(0%);
-  }
-
-  .profile-container {
-    width: 110%;
-    margin-left: -3%;
-  }
-
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 425px;
-  }
-}
-
-@media (min-width: 960px) and (max-width: 1280px) {
-  .middle-col {
-    margin-left: -30px;
-  }
-
-  .text-soutiens {
-    font-size: 1.2rem;
-    letter-spacing: 5px;
-  }
-
-  .profile-container {
-    margin-top: -185px;
-    min-width: 480px
-  }
-
-  .card-youtube {
-    min-height: 270px;
-  }
-
-  .Je-soutien-container {
-    min-width: 325px;
-    margin-left: -35px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25%) translateX(-50px);
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-    margin-left: 20px;
-    margin-top: -6px
-  }
-
-  .occupation-info {
-    margin-left: 40px;
-    margin-top: -8px
-  }
-
-  .social-container {
-    margin-left: 80px;
-    min-width: 270px;
-    max-height: 40px
-  }
-
-  .social-container2 {
-    margin-left: 50px;
-    min-width: 250px;
-    max-height: 35px
-  }
-
-  .socialicons {
-    width: 34px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 25px;
-  }
-}
-
-@media (min-width: 1280px) and (max-width: 1600px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-    letter-spacing: 8px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25%) translateX(-50px);
-  }
-
-  .profile-container {
-    margin-top: -180px;
-  }
-
-  .card-youtube {
-    min-height: 290px;
-  }
-
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 350px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-    margin-left: 20px;
-    margin-top: -6px
-  }
-
-  .social-container {
-    margin-left: 90px;
-    min-width: 350;
-    max-height: 40px
-  }
-
-  .occupation-info {
-    margin-left: 70px;
-    margin-top: -8px
-  }
-
-  .social-container2 {
-
-    margin-left: 40px;
-    min-width: 290px;
-    max-height: 35px
-  }
-
-  .socialicons {
-    width: 34px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 25px;
-  }
-}
-
-@media (min-width: 1600px) and (max-width: 1919px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.4) translateY(25%) translateX(-40px);
-  }
-
-  .profile-container {
-    margin-top: -171px;
-  }
-
-  .card-youtube {
-    min-height: 355px;
-  }
-
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
-  .name-info {
-    font-size: 1.5rem;
-    margin-top: -4px;
-    margin-left: 35px;
-  }
-
-  .occupation-info {
-    font-size: 1.3rem;
-    margin-left: 75px;
-    margin-top: -2px
-  }
-
-  .social-container2 {
-    margin-left: 70px;
-    min-width: 300px;
-  }
-}
-
-@media (min-width: 1920px) and (max-width: 2559px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-  }
-
-  .profile-container {
-    margin-top: -160px;
-  }
-
-  .card-youtube {
-    min-height: 380px;
-  }
-
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.4) translateY(25%) translateX(-40px);
-  }
-
-  .name-info {
-    font-size: 1.5rem;
-    margin-left: 35px;
-    margin-top: -4px;
-  }
-
-  .social-container {
-    margin-left: 100px;
-  }
-
-  .occupation-info {
-    font-size: 1.3rem;
-    margin-left: 110px;
-    margin-top: -4px
-  }
-
-  .social-container2 {
-    margin-left: 30px;
-    min-width: 360px;
-  }
-
-  .socialicons {
-    width: 38px;
-    max-width: 100px;
-    margin-top: 13px;
-    margin-left: 40px;
-  }
-}
-
-@media (min-width: 2560px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(25%) translateX(-20px);
-  }
-
-  .card-youtube {
-    min-height: 380px;
-  }
-
-  .text-soutiens {
-    font-size: 1.5rem;
-  }
-
-  .name-info {
-    font-size: 2rem;
-  }
-
-  .social-container {
-    margin-left: 140px;
-  }
-
-  .social-container2 {
-    margin-left: 130px;
-  }
-
-  .occupation-info {
-    font-size: 1.5rem;
-    margin-left: 65px;
-    margin-top: -6px
-  }
-
-  .socialicons {
-    width: 45px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 40px;
-  }
-}
-</style>
diff --git a/src/views/main/CreatorMainPage.vue b/src/views/main/CreatorMainPage.vue
deleted file mode 100644
index ebabdbe..0000000
--- a/src/views/main/CreatorMainPage.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
- <default-layout></default-layout>
-  <banner></banner>
-  <FooterLayout></FooterLayout>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-import Banner from '@/views/main/CreatorViewComponents/Banner.vue';
-</script>
\ No newline at end of file
diff --git a/src/views/main/CreatorViewComponents/Banner.vue b/src/views/main/CreatorViewComponents/Banner.vue
deleted file mode 100644
index 4032a45..0000000
--- a/src/views/main/CreatorViewComponents/Banner.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <v-container fluid>
-    <!-- Bannière Pc -->
-    <v-row   style="margin-top: -15px; position: relative; z-index: 0; width: 100vw;">
-      <v-col cols="12" class="pa-0">
-        <v-img class="profile-banner" max-height="375" max-width="100%" :src="imageSrc" cover
-               style="width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-
-      </v-col>
-    </v-row  >
-   
-    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-    </v-row>
-  </v-container>
-</template>
-
-
-<script setup>
-let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
-let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
-</script>
\ No newline at end of file
diff --git a/src/views/main/Footer.vue b/src/views/main/Footer.vue
new file mode 100644
index 0000000..2b166b6
--- /dev/null
+++ b/src/views/main/Footer.vue
@@ -0,0 +1,20 @@
+<template>
+  
+  <footer>
+
+    <div class="text-black text-center ">
+      {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
+    </div>
+    
+  </footer>
+  
+</template>
+
+
+<style>
+
+footer {
+  @apply flex justify-center pt-10
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
new file mode 100644
index 0000000..a60ef7c
--- /dev/null
+++ b/src/views/main/Header.vue
@@ -0,0 +1,127 @@
+<template>
+
+  <header class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20">
+
+    <div v-if="showPopup"
+         ref="popupRef"
+         class="bg-white shadow-md shadow-gray-700 top-16 left-0 absolute z-50 rounded-br-2xl border-t-2 border-gray-800"
+         @mouseleave="handleMouseLeave"
+         @mouseenter="handleMouseEnter">
+      <SiteMenu></SiteMenu>
+    </div>
+
+    <div class="flex items-center">
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer">
+      </v-app-bar-nav-icon>
+
+      <RouterLink to="/">
+        <v-img src="/medias/hutopy.png"
+               ref="popupButtonRef"
+               alt="Hutopy Logo"
+               class="mr-2 h-10 w-20"
+               @mouseenter="togglePopup(true)">
+        </v-img>
+      </RouterLink>
+    </div>
+
+
+    <div class="flex items-center">
+      <v-text-field
+          v-model="searchQuery"
+          placeholder="Search"
+          hide-details
+          clearable
+          class="rounded-full mx-2 w-80"
+          append-inner-icon="mdi-magnify"
+          @click:append-inner="onSearch">
+      </v-text-field>
+
+      <v-icon class="mx-2">mdi-bell-outline</v-icon>
+
+      <span class="flex items-center mx-2">
+        
+      <span class="text-black text-base font-sans font-medium mr-3">
+      {{ currentUserName }}
+      </span>
+  
+      <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
+           class="rounded-circle h-10 w-10"
+           alt="Logo"/>        
+      </span>
+
+    </div>
+
+  </header>
+
+</template>
+
+
+<script setup>
+import {ref, onMounted, onUnmounted} from 'vue';
+import {useRouter} from 'vue-router';
+import SiteMenu from "@/views/main/SiteMenu.vue";
+
+
+const showPopup = ref(false);
+const popupRef = ref(null);
+const popupButtonRef = ref(null);
+let mouseLeaveTimeout = null;
+
+const togglePopup = (state) => {
+  clearTimeout(mouseLeaveTimeout)
+  showPopup.value = state
+};
+
+// Function to handle mouse enter event
+const handleMouseEnter = () => {
+  clearTimeout(mouseLeaveTimeout);
+};
+
+// Function to handle mouse leave event
+const handleMouseLeave = () => {
+  mouseLeaveTimeout = setTimeout(() => {
+    showPopup.value = false;
+  }, 200);
+};
+
+// Add event listener for clicks outside the popup when component is mounted
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+// Remove event listener when component is unmounted
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+// Function to handle clicks outside the popup
+const handleClickOutside = (event) => {
+  if (popupRef.value
+      && !popupRef.value.contains(event.target)
+      && popupButtonRef.value
+      && !popupButtonRef.value.contains(event.target)) {
+    showPopup.value = false;
+  }
+};
+
+
+const currentUserName = 'Jo Bumble'
+const searchQuery = ref('');
+const router = useRouter();
+
+const onSearch = () => {
+  const query = searchQuery.value.trim();
+
+  if (!query) {
+    router.push('/browse');
+  } else {
+    const words = query.split(' ');
+
+    if (words.length === 1) {
+      router.push(`/@${words[0]}`);
+    } else {
+      router.push({name: 'browse', query: {q: query}});
+    }
+  }
+};
+</script>
diff --git a/src/views/main/Home.vue b/src/views/main/Home.vue
new file mode 100644
index 0000000..7d8f606
--- /dev/null
+++ b/src/views/main/Home.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="px-40 flex flex-column items-center border-4 border-amber-700 ">
+
+    <div class="py-20 w-1/2">
+      <img src="/images/hutopymedia/banners/hutopy.png"
+           alt="Hutopy Logo">
+    </div>
+
+    <div class="py-2 w-full ">
+      <img src="/images/hutopymedia/homepage/bannierehomepage.png"
+           alt="Hutopy Banner"
+           class="rounded-xl">
+    </div>
+
+    <div class="flex flex-row justify-center h-40 w-full bg-red overflow-auto ">
+      
+      <img src="/images/hutopymedia/homepage/creer.png"
+           alt="Create CallToAction"
+           class="rounded-xl">
+
+      <img src="/images/hutopymedia/homepage/partager.png"
+           alt="Share CallToAction"
+           class="rounded-xl">
+
+      <img src="/images/hutopymedia/homepage/inspirer.png"
+           alt="Inspire CallToAction"
+           class="rounded-xl">
+
+    </div>
+
+    <div class="flex flex-column">
+
+      <img src="/images/hutopymedia/homepage/votrehutopy.png"
+           alt="YourHutopy">
+
+      <div class="grid grid-cols-2">
+
+        <div>
+          <p>
+            Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
+            cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
+            écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer,
+            mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
+            communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
+            la créativité.
+          </p>
+
+          <p>
+            Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
+            conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
+            réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
+            autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
+            prendre vie.
+          </p>
+        </div>
+
+        <div class="grid grid-cols-2 space-x-2 space-y-2">
+
+          <v-img src="/images/hutopymedia/homepage/grinding.png"
+                 class="rounded-lg">
+          </v-img>  
+
+          <v-img src="/images/hutopymedia/homepage/microphone.png"
+                 class="rounded-lg">
+          </v-img>
+
+          <v-img src="/images/hutopymedia/homepage/girlarmy.png"
+                 class="rounded-lg">
+          </v-img>
+
+          <v-img src="/images/hutopymedia/homepage/girlvr.png"
+                 class="rounded-lg skew-x-12">
+          </v-img>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+
+  <!-- They are on the Hutopy section -->
+  <v-row style="margin-top: 20px; margin-bottom: 10px;">
+    <v-spacer></v-spacer>
+
+    <!-- Subtitle :Ils sont sur Hutopy -->
+    <v-col cols="9" xs="12" sm="12" md="12" lg="10" xl="8" xxl="7">
+      <h1 style=" margin-bottom: 20px; text-align: center;  font-size: 4rem; font-weight: bold; color: #24393c">
+        Ils sont sur Hutopy.</h1>
+      <v-spacer></v-spacer>
+      <v-col>
+
+        <!-- Account links  -->
+        <v-row justify="center" class="profile-images">
+          <v-col>
+            <RouterLink to="/">
+              <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
+                   alt="Profile Image" class="profile-image  ">
+            </RouterLink>
+          </v-col>
+          <v-col>
+            <RouterLink to="/@guillaumeaime">
+              <img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
+                   alt="Profile Image" class="profile-image">
+            </RouterLink>
+          </v-col>
+          <v-col>
+            <RouterLink to="@chloebeaugrand">
+              <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
+                   alt="Profile Image" class="profile-image">
+            </RouterLink>
+          </v-col>
+        </v-row>
+      </v-col>
+      <v-row justify='center'>
+        <RouterLink to="/browse">
+          <v-btn style="border-radius:10px; background-color:#a30e79; color:white">Découvre les autres créateurs
+          </v-btn>
+        </RouterLink>
+      </v-row>
+      <v-spacer></v-spacer>
+    </v-col>
+    <v-spacer></v-spacer>
+  </v-row>
+
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+
+p {
+  @apply my-4 font-semibold font-sans
+}
+
+.container-spacer {
+  margin-bottom: 50px;
+}
+
+.profile-images {
+  gap: 15px;
+  transform: scale(.92);
+}
+
+.profile-image {
+  width: auto;
+  border-radius: 35px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.overlay p {
+  color: white;
+  font-size: 1.5rem;
+  text-align: center;
+}
+
+body {
+  background-color: #F4F4F4;
+}
+
+</style>
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
deleted file mode 100644
index ef8824b..0000000
--- a/src/views/main/HomeView.vue
+++ /dev/null
@@ -1,672 +0,0 @@
-<template>
-  <div style="background-color: #F4F4F4;">
-    <DefaultLayout></DefaultLayout>
-    <!--PC ---------------------------------------------------------------------------------------------->
-    <div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
-
-      <!--Logo & bouttons -->
-      <v-container class="d-flex justify-center align-center container-spacer header-container">
-        <v-row justify="center" align="center">
-          <v-col></v-col>
-          <v-col cols="5" xl="4" xxl="4">
-            <v-img class="profile-banner" src="/images/hutopymedia/banners/hutopy.png"></v-img>
-          </v-col>
-          <v-col>
-            <v-row>
-              <RouterLink :to="{ name: 'contact' }">
-                <v-btn size="large" style="border-radius: 40px;" color="rgb(107, 0, 101)" outlined elevation="0">
-                  Inscription
-                </v-btn>
-              </RouterLink>
-            </v-row>
-          </v-col>
-        </v-row>
-      </v-container>
-
-      <!--Header -->
-      <v-container class="container-spacer">
-        <v-row>
-          <v-spacer></v-spacer>
-          <v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
-            <v-img class="profile-banner banner-homepage" src="/images/hutopymedia/homepage/bannierehomepage.png"
-              style="border-radius: 20px;"></v-img>
-          </v-col>
-          <v-spacer></v-spacer>
-        </v-row>
-      </v-container>
-
-      <!-- Créer Profiter Inspirer  -->
-      <v-container class="container-spacer">
-        <v-row class="d-flex justify-center creer-profiter-inspirer-row">
-          <v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
-            <v-row justify="center" align="center" class="créer-profiter-inspirer-row">
-              <v-col cols="4" sm="4" md="4">
-                <v-hover v-slot="{ isHovering, props }">
-                  <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto card-size" v-bind="props">
-                    <v-img src="/images/hutopymedia/homepage/creer.png"
-                      style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
-                    <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
-                      <v-container>
-                        <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
-                          <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">CRÉER
-                          </h3>
-                          <p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur Hutopy,
-                            où
-                            chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
-                            possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
-                        </v-card>
-                      </v-container>
-                    </v-overlay>
-                  </v-card>
-                </v-hover>
-              </v-col>
-
-              <v-col cols="4" sm="4" md="4">
-                <v-hover v-slot="{ isHovering, props }">
-                  <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size " v-bind="props">
-                    <v-img src="/images/hutopymedia/homepage/partager.png"
-                      style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
-                    <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
-                      <v-container>
-                        <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
-                          <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
-                            PROFITER
-                          </h3>
-                          <p class="text-justify pa-4" style="font-size: 1.2em;">Plongez dans l'univers Hutopy et
-                            découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
-                            interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens et
-                            enrichir votre quotidien.</p>
-                        </v-card>
-                      </v-container>
-                    </v-overlay>
-                  </v-card>
-                </v-hover>
-              </v-col>
-
-              <v-col cols="4" sm="4" md="4">
-                <v-hover v-slot="{ isHovering, props }">
-                  <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" v-bind="props">
-                    <v-img src="/images/hutopymedia/homepage/inspirer.png"
-                      style="border-radius: 20px; width: 80vw;"></v-img>
-                    <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
-                      <v-container>
-                        <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
-                          <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
-                            INSPIRER
-                          </h3>
-                          <p class="text-justify pa-4" style="font-size: 1.2em;">Devenez une source d'inspiration sur
-                            Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez positivement
-                            la
-                            communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs rêves dans un
-                            cercle vertueux de créativité et d'inspiration.</p>
-                        </v-card>
-                      </v-container>
-                    </v-overlay>
-                  </v-card>
-                </v-hover>
-              </v-col>
-            </v-row>
-          </v-col>
-        </v-row>
-      </v-container>
-
-      <!-- Votre Hutopy  -->
-      <v-container class="container-spacer">
-        <v-row justify="center">
-          <v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
-            <v-row justify="center">
-              <v-col cols="6" md="7" lg="6">
-
-                <!-- Subtitle : Votre Hutopy -->
-                <v-img cols="12" style="margin-top: -5%; min-width: 350px;"
-                  src="/images/hutopymedia/homepage/votrehutopy.png"></v-img>
-
-                <!-- Your Hutopy text-->
-                <p class="text-center text-justify votre_hutopy_fontsize"
-                  style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
-                  Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
-                  cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
-                  écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer,
-                  mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
-                  communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
-                  la créativité.
-                </p>
-
-                <p class="text-center text-justify votre_hutopy_fontsize"
-                  style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
-                  Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
-                  conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
-                  réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
-                  autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
-                  prendre vie.
-                </p>
-
-                <v-col cols="12" class="text-center">
-                  <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
-                    <v-btn size="x-large" style="width: 300px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
-                      elevation="0">
-                      Inscription
-                    </v-btn>
-                  </RouterLink>
-                </v-col>
-              </v-col>
-
-              <!-- 4 pictures  -->
-              <v-col cols="6" md="5" lg="6">
-                <v-row justify="center" class="votre-hutopy-img">
-                  <v-col cols="6" sm="12" md="12" lg="6">
-                    <v-img style="border-radius: 30px;" src="/images/hutopymedia/homepage/grinding.png"
-                      class="hidden-md-and-down" hidden-and-down></v-img>
-                  </v-col>
-                  <v-col cols="6" sm="12" md="12" lg="6">
-                    <v-img style="border-radius: 30px;" src="/images/hutopymedia/homepage/microphone.png"></v-img>
-                  </v-col>
-                  <v-col cols="6" sm="12" md="6" lg="6">
-                    <v-img style="border-radius: 30px;" src="/images/hutopymedia/homepage/girlarmy.png"></v-img>
-                  </v-col>
-                  <v-col cols="6" sm="6" md="6" lg="6">
-                    <v-img style="border-radius: 30px;" class="d-none d-md-block"
-                      src="/images/hutopymedia/homepage/girlvr.png"></v-img>
-                  </v-col>
-                </v-row>
-              </v-col>
-            </v-row>
-          </v-col>
-        </v-row>
-      </v-container>
-
-
-      <!-- They are on the Hutopy section -->
-      <v-row style="margin-top: 20px; margin-bottom: 10px;">
-        <v-spacer></v-spacer>
-
-        <!-- Subtitle :Ils sont sur Hutopy -->
-        <v-col cols="9" xs="12" sm="12" md="12" lg="10" xl="8" xxl="7">
-          <h1 style=" margin-bottom: 20px; text-align: center;  font-size: 4rem; font-weight: bold; color: #24393c">
-            Ils sont sur Hutopy.</h1>
-          <v-spacer></v-spacer>
-          <v-col>
-
-            <!-- Account links  -->
-            <v-row justify="center" class="profile-images">
-              <v-col>
-                <router-link :to="{ name: 'Hutopy' }">
-                  <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
-                    alt="Profile Image" class="profile-image  ">
-                </router-link>
-              </v-col>
-              <v-col>
-                <router-link :to="{ name: 'guillaumeaime' }">
-                  <img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
-                    alt="Profile Image" class="profile-image">
-                </router-link>
-              </v-col>
-              <v-col>
-                <router-link :to="{ name: 'chloebeaugrand' }">
-                  <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
-                    alt="Profile Image" class="profile-image">
-                </router-link>
-              </v-col>
-            </v-row>
-          </v-col>
-          <v-row justify='center'>    
-            <router-link :to="{ name: 'userbrowser' }">  
-            <v-btn style="border-radius:10px; background-color:#a30e79; color:white">Découvre les autres créateurs
-            </v-btn>
-          </router-link>
-          </v-row>
-         <v-spacer></v-spacer>
-        </v-col>
-        <v-spacer></v-spacer>
-      </v-row>
-    </div>
-
-    <!-- Mobile ---------------------------------------------------------------------------------------->
-    <div class="md:hidden flex flex-col items-center justify-center">
-      <div>
-        <!--Banner -->
-        <img src="/images/hutopymedia/homepage/bannierehomepage.png" class="banner-image" alt="Bannière">
-
-        <!-- Créer -->
-        <v-row style="margin-top: 30px;" align="center">
-          <v-col cols="6">
-            <v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
-              src="/images/hutopymedia/homepage/creer.png"></v-img>
-          </v-col>
-          <v-col>
-            <p style="margin: 20px; text-align: justify;" class="center-vertical">Libérez votre créativité sur Hutopy,
-              où chaque idée trouve sa
-              place et chaque
-              créateur détient la clé
-              d'un monde rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
-          </v-col>
-        </v-row>
-
-        <!--  Partager   -->
-        <v-row align="center">
-          <v-col>
-            <p style=" margin: 20px; text-align: justify;" class="center-vertical">Devenez une source d'inspiration sur
-              Hutopy, en partageant
-              votre vision, votre
-              talent et vos histoires.
-              Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs
-              rêves dans un cercle vertueux de créativité et d'inspiration.</p>
-          </v-col>
-          <v-col cols="6">
-            <v-img style="margin-right: 25px; border-radius: 20px; width: 85%;"
-              src="/images/hutopymedia/homepage/partager.png"></v-img>
-          </v-col>
-        </v-row>
-
-        <!--   Inspirer  -->
-        <v-row align="center">
-          <v-col cols="6">
-            <v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
-              src="/images/hutopymedia/homepage/inspirer.png"></v-img>
-          </v-col>
-          <v-col>
-            <p style="margin: 20px; text-align: justify;" class="center-vertical">Devenez une source d'inspiration sur
-              Hutopy, en partageant
-              votre vision, votre
-              talent et vos histoires.
-              Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs
-              rêves dans un cercle vertueux de créativité et d'inspiration.</p>
-          </v-col>
-        </v-row>
-
-        <!--  Votre Hutopy : Title  -->
-        <v-img style="margin-top: 50px; margin-bottom: 25px; min-width: 350px;"
-          src="/images/hutopymedia/homepage/votrehutopy.png"></v-img>
-
-        <!--  Votre Hutopy : Text  -->
-        <v-row align="center">
-          <v-col cols="11" style="margin: 4%;">
-            <p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
-              Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
-              cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
-              écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer,
-              mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
-              communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
-              la créativité.
-            </p>
-            <p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
-              Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
-              conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
-              réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
-              autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
-              prendre vie.
-            </p>
-          </v-col>
-        </v-row>
-
-        <!--  4 pictures  -->
-        <v-row style="margin-left: 15px; margin-right: 15px;">
-          <v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
-            <v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/microphone.png"></v-img>
-          </v-col>
-          <v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
-            <v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/grinding.png"></v-img>
-          </v-col>
-        </v-row>
-        <v-row style="margin-left: 15px; margin-right: 15px;">
-          <v-col style="padding-left: 15px; padding-right: 15px;">
-            <v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/girlarmy.png"></v-img>
-          </v-col>
-          <v-col style="padding-left: 15px; padding-right: 15px;">
-            <v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/girlvr.png"></v-img>
-          </v-col>
-        </v-row>
-
-        <!--  Inscription Btn  -->
-        <v-container align="center">
-          <RouterLink :to="{ name: 'contact' }">
-            <v-btn block size="x-large" style="margin-top: 60px; border-radius: 10px;" color="rgb(107, 0, 101)" outlined
-              elevation="4">
-              Inscription
-            </v-btn>
-          </RouterLink>
-        </v-container>
-
-
-        <!-- They are on the Hutopy section -->
-        <h1
-          style="margin-top: 50px;  margin-bottom: 50px; text-align: center;  font-size: 3rem; font-weight: bold; color: #24393c">
-          Ils sont sur Hutopy.</h1>
-
-        <v-col>
-          <v-row justify="center" class="profile-images">
-            <v-col cols="8">
-              <router-link :to="{ name: 'Hutopy' }">
-                <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
-                  alt="Profile Image" class="profile-image  ">
-              </router-link>
-            </v-col>
-            <v-col cols="8">
-              <router-link :to="{ name: 'guillaumeaime' }">
-                <img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
-                  alt="Profile Image" class="profile-image">
-              </router-link>
-            </v-col>
-            <v-col cols="8">
-              <router-link :to="{ name: 'chloebeaugrand' }">
-                <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
-                  alt="Profile Image" class="profile-image">
-              </router-link>              
-            </v-col>     
-            <v-row justify='center'>    
-            <router-link :to="{ name: 'userbrowser' }">  
-            <v-btn style="margin-top:30px; border-radius:10px; background-color:#a30e79; color:white">Découvre les autres créateurs
-            </v-btn>
-          </router-link>
-          </v-row>       
-          </v-row>
-        </v-col>
-      </div>
-    </div>
-
-    
-
-    <v-snackbar v-model="errorNoAccessSnackBar">
-      Vous n'etes pas connecter !
-      <template v-slot:actions>
-        <v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
-          Fermer
-        </v-btn>
-        <v-btn color="green" variant="text" @click="goToLoginPage()">
-          Se connecter
-        </v-btn>
-      </template>
-    </v-snackbar>
-
-    <v-list style="background-color: #F4F4F4;" lines="one">
-      <v-list-item v-for=" item  in  itemList " :key="item" :title="item.firstName"
-        :subtitle="item.lastName"></v-list-item>
-    </v-list>
-    <FooterLayout></FooterLayout>
-  </div>
-
-
-</template>
-
-<script async setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-const router = useRouter()
-let itemList = ref([]);
-let errorNoAccessSnackBar = ref(false);
-
-const goToLoginPage = () => {
-  router.push('/login');
-}
-
-</script>
-
-<style scoped>
-.center-vertical {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
-.layer1-backgroundmobile {
-  background-color: rgba(163, 14, 121, 0.1);
-  border-radius: 20px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-}
-
-.layer2-backgroundmobile {
-  border-radius: 20px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-}
-
-.container-spacer {
-  margin-bottom: 50px;
-}
-
-.profile-images {
-  gap: 15px;
-  transform: scale(.92);
-}
-
-.profile-image {
-  width: auto;
-  border-radius: 35px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-}
-
-.image {
-  width: 100%;
-  height: auto;
-  border-radius: 8px;
-}
-
-.overlay {
-  position: absolute;
-  border-radius: 8px;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(163, 14, 121, 0.80);
-  display: flex;
-  text-align: left;
-  font-size: 1.5rem;
-  align-items: center;
-  opacity: 0;
-  transition: opacity 0.3s ease-in-out;
-}
-
-.banner-image {
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-  margin-top: 60px;
-}
-
-.image-container:hover .overlay {
-  opacity: 1;
-}
-
-.overlay p {
-  color: white;
-  font-size: 1.5rem;
-  text-align: center;
-}
-
-.custom-container {
-  position: relative;
-  max-width: 100vw;
-}
-
-.v-card {
-  max-width: calc(100% - 20px);
-}
-
-.v-card-imagecontainerpos {
-  margin-top: 55px;
-  border-radius: 8px;
-}
-
-body {
-  background-color: #F4F4F4;
-}
-
-
-
-@media (max-width: 600px) {
-  .votre_hutopy_fontsize {
-    font-size: 0.55em;
-  }
-}
-
-
-@media (min-width: 601px) and (max-width: 889px) {
-  .votre_hutopy_fontsize {
-    font-size: 1.06em;
-  }
-
-  .créer-profiter-inspirer-row {
-    margin-left: -120px;
-    margin-top: -120px
-  }
-
-  .card-size {
-    transform: scale(.7);
-  }
-
-  .banner-homepage {
-    transform: scale(1.19)
-  }
-
-  .votre-hutopy-img {
-    margin-top: -30px;
-  }
-
-  .header-container {
-    margin-top: 30px;
-  }
-}
-
-
-@media (min-width: 890px) and (max-width: 960px) {
-
-  .header-container {
-    margin-top: 30px;
-  }
-
-  .votre_hutopy_fontsize {
-    font-size: 1.2em;
-  }
-
-  .card-size {
-    transform: scale(.75);
-  }
-
-  .créer-profiter-inspirer-row {
-    margin-left: -80px;
-    margin-top: -130px
-  }
-
-  .banner-homepage {
-    transform: scale(1.07)
-  }
-
-  .votre-hutopy-img {
-    margin-top: -40px;
-  }
-}
-
-
-@media (min-width: 961px) and (max-width: 1280px) {
-  .votre_hutopy_fontsize {
-    font-size: 1.1em;
-  }
-
-  .banner-homepage {
-    transform: scale(1.06)
-  }
-
-  .card-size {
-    transform: scale(.90);
-  }
-
-  .créer-profiter-inspirer-row {
-    margin-left: -55px;
-    margin-top: -90px
-  }
-
-  .in-between-image {
-    margin-left: -100px;
-  }
-
-  .profile-images {
-    gap: 15px;
-    transform: scale(.72);
-  }
-
-  .votre-hutopy-img {
-    margin-top: -30px;
-  }
-}
-
-
-@media (min-width: 1281px) and (max-width: 1920px) {
-  .votre_hutopy_fontsize {
-    font-size: 1.2em;
-  }
-
-  .card-size {
-    transform: scale(1);
-  }
-
-  .banner-homepage {
-    transform: scale(1.03)
-  }
-
-  .créer-profiter-inspirer-row {
-    margin-left: -25px;
-    margin-top: -70px
-  }
-
-  .profile-images {
-    gap: 15px;
-    transform: scale(.64);
-  }
-
-  .votre-hutopy-img {
-    margin-top: 65px;
-  }
-}
-
-@media (min-width: 1921px) and (max-width: 2560px) {
-  .votre_hutopy_fontsize {
-    font-size: 1.2em;
-  }
-
-  .créer-profiter-inspirer-row {
-    margin-top: -60px;
-  }
-
-  .banner-homepage {
-    transform: scale(1.0)
-  }
-
-  .profile-images {
-    gap: 15px;
-    transform: scale(.90);
-  }
-
-  .votre-hutopy-img {
-    margin-top: 65px;
-  }
-}
-
-@media (min-width: 2561px) {
-  .votre_hutopy_fontsize {
-    font-size: 1.2em;
-  }
-
-  .créer-profiter-inspirer-row {
-    margin-top: -50px;
-  }
-
-  .card-size {
-    transform: scale(.98);
-  }
-
-  .banner-homepage {
-    transform: scale(.98)
-  }
-
-  .profile-images {
-    gap: 15px;
-    transform: scale(.978);
-  }
-
-  .votre-hutopy-img {
-    margin-top: -10px;
-  }
-}
-</style>
diff --git a/src/views/main/ContactView.vue b/src/views/main/Join.vue
similarity index 94%
rename from src/views/main/ContactView.vue
rename to src/views/main/Join.vue
index 7ec4227..5f12227 100644
--- a/src/views/main/ContactView.vue
+++ b/src/views/main/Join.vue
@@ -1,24 +1,12 @@
 <template>
-  <DefaultLayout></DefaultLayout>
   <!--PC -->
   <div class="hutopy-backgroud-color">
-    <div class="hidden-xs flex-col items-center page-margin">
-      <v-container>
+   
+    <div class="flex hidden-xs flex-col items-center page-margin">
 
-        <!-- Banner -->
-        <v-row class="text-center align-center row-between-logo-text home-row">
-          <v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
-          <img class="hutopy-header-image" src="/images/hutopymedia/banners/hutopy.png">
-          <v-col class="ml-0 text-left ">
-            <!-- Home btn -->
-            <RouterLink :to="{ name: 'home' }">
-              <v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0"> Accueil</v-btn>
-            </RouterLink>
-          </v-col>
-        </v-row>
-      </v-container>
+      <img class="h-20"
+           src="/images/hutopymedia/banners/hutopy.png" />
 
-      <!-- Home btn -->
       <v-container class="row-between-logo-text">
         <v-row>
           <v-spacer></v-spacer>
@@ -152,10 +140,6 @@
         dans le ciel de notre utopie partagée.
       </p>
     </div>
-
-
-
-    <FooterLayout></FooterLayout>
   </div>
 
 
@@ -185,8 +169,6 @@
 
 
 <script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
 import { useClient } from "@/plugins/api.js";
 import { ref } from 'vue';
 
diff --git a/src/views/main/PostCard.vue b/src/views/main/PostCard.vue
new file mode 100644
index 0000000..46f112a
--- /dev/null
+++ b/src/views/main/PostCard.vue
@@ -0,0 +1,46 @@
+<template>
+
+
+  <div class=" shadow-lg rounded-lg max-w-sm">
+
+    <div class="h-48 object-cover bg-purple">
+
+      <v-img :src="props.post.banner"
+             v-if="!isHttpUrl">
+      </v-img>
+
+      <iframe 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>
+
+</template>
+
+<script setup>
+import {defineProps, computed} from 'vue';
+
+const isHttpUrl = computed(() => props.post.banner.startsWith('http'))
+
+const props = defineProps({
+  post: {
+    type: Object,
+    required: true,
+    validator: (post) => {
+      return 'banner' in post && 'image' in post && 'name' in post && 'title' in post && 'description' in post;
+    }
+  }
+});
+
+
+</script>
\ No newline at end of file
diff --git a/src/layouts/PostContentMenu.vue b/src/views/main/PostContentMenu.vue
similarity index 100%
rename from src/layouts/PostContentMenu.vue
rename to src/views/main/PostContentMenu.vue
diff --git a/src/views/main/SideBar.vue b/src/views/main/SideBar.vue
new file mode 100644
index 0000000..50aeedf
--- /dev/null
+++ b/src/views/main/SideBar.vue
@@ -0,0 +1,78 @@
+<template>
+
+  <aside>
+   
+    <nav>
+      
+      <h2>Subscriptions</h2>
+
+      <ul class="space-y-32">
+        <li>
+          <RouterLink to="/@hutopy">
+            <div class="nav-button">
+              <v-icon class="mx-2">mdi-home</v-icon>
+              Hutopy
+            </div>
+          </RouterLink>
+
+          <RouterLink to="/@leffet">
+            <div class="nav-button">
+              <v-icon class="mx-2">mdi-home</v-icon>
+              L'Effet
+            </div>
+          </RouterLink>
+
+          <RouterLink to="/@chloebeaugrand">
+            <div class="nav-button">
+              <v-icon class="mx-2">mdi-home</v-icon>
+              Chloe Beaugrand
+            </div>
+          </RouterLink>
+
+          <RouterLink to="/@guillaumeaime">
+            <div class="nav-button">
+              <v-icon class="mx-2">mdi-home</v-icon>
+              Guillaume Aime
+            </div>
+          </RouterLink>
+
+          <RouterLink to="/@mathieucaron">
+            <div class="nav-button">
+              <v-icon class="mx-2">mdi-home</v-icon>
+              Mathieu Caron
+            </div>
+          </RouterLink>
+
+          <RouterLink to="/@arps">
+            <div class="nav-button">
+              <v-icon class="mx-2">mdi-home</v-icon>
+              ARPS
+            </div>
+          </RouterLink>
+
+        </li>
+      </ul>
+
+    </nav>
+    
+  </aside>
+
+</template>
+
+<style scoped>
+
+.nav-button {
+  @apply bg-purple-800 rounded p-1 m-2
+}
+
+.nav-button:hover {
+  @apply bg-purple-400
+}
+
+h2 {
+  @apply font-sans font-bold ml-2
+}
+
+</style>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/main/SiteMenu.vue b/src/views/main/SiteMenu.vue
new file mode 100644
index 0000000..0944c5d
--- /dev/null
+++ b/src/views/main/SiteMenu.vue
@@ -0,0 +1,81 @@
+<template>
+
+  <div class="flex flex-column py-4 px-8">
+
+    <div class="flex flex-row self-center pb-4 pt-2">
+
+      <!-- Facebook -->
+      <a href="https://www.facebook.com/profile.php?id=61556819217561">
+        <img src="/images/hutopymedia/icons/pink/facebookpink.png"
+             alt="Facebook Logo">
+      </a>
+
+      <!-- Instagram -->
+      <a href="https://www.instagram.com/hutopy.inc/">
+        <img src="/images/hutopymedia/icons/pink/instagrampink.png"
+             alt="Instagram Logo">
+      </a>
+
+      <!-- X / Twitter -->
+      <a href="https://twitter.com/Hutopyinc">
+        <img src="/images/hutopymedia/icons/pink/xpink.png"
+             alt="X Logo">
+      </a>
+
+    </div>
+
+    <div class="grid grid-cols-1">
+
+      <RouterLink class="nav-button" to="/join">
+        Aidez-nous
+      </RouterLink>
+
+      <RouterLink class="nav-button" to="/helpandcontact">
+        Aide & Contact
+      </RouterLink>
+
+      <RouterLink class="nav-button" to="/faq">
+        FAQ
+      </RouterLink>
+
+      <RouterLink class="nav-button" to="/guideforcreators">
+        Guide pour les créateurs
+      </RouterLink>
+
+      <RouterLink class="nav-button" to="/termsandconditions">
+        Conditions générales
+      </RouterLink>
+
+      <RouterLink class="nav-button" to="/contentpolicy">
+        Politique de Contenu
+      </RouterLink>
+
+      <RouterLink class="nav-button" to="/about">
+        À Propos
+      </RouterLink>
+
+      <RouterLink class="nav-button" to="/pricing">
+        Frais
+      </RouterLink>
+
+    </div>
+
+  </div>
+
+</template>
+
+<style scoped>
+
+.nav-button {
+  @apply rounded m-1 flex justify-center font-sans
+}
+
+.nav-button:hover {
+  @apply text-purple-800 bg-gray-50
+}
+
+img {
+  @apply m-2 w-10 h-10
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/main/UsersBrowser.vue b/src/views/main/UsersBrowser.vue
deleted file mode 100644
index 176d552..0000000
--- a/src/views/main/UsersBrowser.vue
+++ /dev/null
@@ -1,883 +0,0 @@
-<template>
-    <div style="background-color: #f4f4f4;">
-        <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
-
-        <!-- "Mobile -->
-        <v-row class="fluid hidden-md-and-up social-mobile-container"
-            style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
-            <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-                    style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-            </v-col>
-        </v-row>
-
-        <!-- "PurpleLine" -->
-        <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-        </v-row>
-
-        <!-- "Mobile-Profile" -->
-        <!-- "Profile picture" -->
-        <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-        </v-row>
-
-        <!-- User Social Network Links -->
-        <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
-            hidden-md-and-down>
-
-            <!-- Facebook -->
-            <v-row no-gutters class="d-flex justify-space-between align-center"
-                style="margin-left: 3%; margin-right: 3%;">
-                <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
-                    class="d-flex justify-center align-center">
-                    <a href="https://www.facebook.com/Hutopy">
-                        <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
-                            alt="Facebook"></v-img>
-                    </a>
-                </v-col>
-                <!-- Instagram -->
-                <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
-                    class="d-flex justify-center align-center">
-                    <a href="https://www.instagram.com/hutopy.inc/">
-                        <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
-                            alt="Instagram"></v-img>
-                    </a>
-                </v-col>
-                <!-- Profile picture - Small -->
-                <v-col cols="4" sm="4" xs="0" class="hidden-xs">
-                    <v-row class="d-flex justify-center align-center">
-                        <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-                    </v-row>
-                </v-col>
-
-                <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
-                    class="d-flex justify-center align-center">
-                    <a href="https://twitter.com/Hutopyinc">
-                        <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png"
-                            alt="X"></v-img>
-                    </a>
-                </v-col>
-
-                <v-spacer class="hidden-xs"> </v-spacer>
-
-
-
-            </v-row>
-
-            <!-- User informations Name title and description  -->
-            <v-row class="social-container-mobile">
-                <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-                    <v-row class="d-flex justify-center">
-                        {{ name }}
-                    </v-row>
-                </v-col>
-                <v-spacer xs="12" sm="4"></v-spacer>
-                <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-                    <v-row class="d-flex justify-center">
-                        {{ title }}
-                    </v-row>
-                </v-col>
-            </v-row>
-            <v-row>
-                <v-container
-                    style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
-                    class="social-icon-group-mobile">
-                    <v-expansion-panels style="min-width: 320px;">
-                        <v-col cols="12" offset="-1">
-                            <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                                text="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
-                                title="À propos d'Hutopy :">
-                            </v-expansion-panel>
-                        </v-col>
-                    </v-expansion-panels>
-                </v-container>
-            </v-row>
-        </v-container>
-
-        <!-- Bannière Pc -->
-        <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
-            hidden-sm-and-up>
-            <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-                    style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-            </v-col>
-        </v-row>
-        <v-row class="hidden-sm-and-down"
-            style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);" hidden-sm-and-up>
-        </v-row>
-
-        <!-- "Core (Menu / Center / Donation)" -->
-        <v-row>
-            <!-- "Menu" -->
-            <v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
-                <v-col style="margin: 0;">
-                    <v-row class="Hutopy-menu-sticky-mobile">
-                        <v-spacer></v-spacer>
-                        <v-col>
-                            <v-container style=" overflow-y: hidden;">
-                                <!-- Nav-Btn -->
-                                <v-col cols="12" class="px-0">
-                                    <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
-                                        style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
-                                    <v-list dense class="main-background">
-                                        <v-list-item v-for="item in navigationItems" :key="item.link">
-                                            <router-link :to="item.link">
-                                                <v-btn text class="d-flex align-start align-center main-background"
-                                                    elevation="0" outlined="false">
-                                                    <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                                                    {{ item.text }}
-                                                </v-btn>
-                                            </router-link>
-                                        </v-list-item>
-                                    </v-list>
-                                </v-col>
-                            </v-container>
-                        </v-col>
-                    </v-row>
-                    <v-row style="height: 400px;"></v-row>
-                </v-col>
-            </v-col>
-
-            <!-- creators -->
-            <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
-                <v-container fluid style="margin-bottom: -40px; font-size: 3rem;">
-                    <v-row justify="center" class="text-center">
-                        <v-row justify="center">
-                            <v-col cols="12" class="text-left d-flex justify-center ">
-                                <div class="headline font-weight-bold">CRÉATEURS</div>
-                            </v-col>
-                        </v-row>
-                    </v-row>
-                </v-container>
-
-                <v-container>
-                    <v-row justify="center">
-                        <v-col cols="12">
-                            <v-container class="mt-10">
-                                <v-row justify="center">
-                                    <router-link v-for="(profile, index) in profiles" :key="index"
-                                        :to="profile.routerLink" class="text-decoration-none">
-                                        <v-col>
-                                            <v-card class="mb-4 card-equal-width"
-                                                style="max-width: 250px; height: 300px;">
-                                                <v-img :src="profile.imageUrl" height="200px" width="300px"
-                                                    style="margin-top: 10px;"></v-img>
-                                                <v-card-title style="font-weight: 600;" class="text-center">{{
-                    profile.name
-                }}</v-card-title>
-                                                <v-card-text class="text-center">{{ profile.description }}</v-card-text>
-                                            </v-card>
-                                        </v-col>
-                                    </router-link>
-                                </v-row>
-                            </v-container>
-                        </v-col>
-                    </v-row>
-                </v-container>
-            </v-col>
-
-            <!-- "Large-Monitor-RightCol" Donation -->
-            <v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down" hidden-sm-and-up>
-                <v-row>
-                    <v-col>
-                        <v-container class="sticky-bottom-label Je-soutien-container"
-                            style="max-width: 400px ;  bottom: 0;">
-                            <!-- Donnation -->
-                            <v-card style="border-radius: 20px;">
-                                <v-container>
-                                    <v-row class="mb-0"
-                                        style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                                        <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                                            JE SOUTIENS!
-                                        </v-card-title>
-                                    </v-row>
-                                    <StripePayment creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
-                                </v-container>
-                            </v-card>
-                        </v-container>
-                        <v-container style="height: 400px;">
-                        </v-container>
-                    </v-col>
-                    <v-spacer>
-                    </v-spacer>
-                </v-row>
-            </v-col>
-        </v-row>
-
-        <!-- "Mobile" Donation -->
-        <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
-            style="background-color: #6b0065; margin-top: 30px; text-align: center;">
-
-            <!-- Barre cliquable pour ouvrir le drawer -->
-            <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
-                style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
-                JE SOUTIENS
-            </v-btn>
-        </v-col>
-
-        <!-- Drawer du bas -->
-        <template>
-            <div>
-                <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
-                    <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
-                        <h1 class="text-soutiens">JE SOUTIENS</h1>
-                        <StripePayment creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
-                    </v-container>
-                </v-bottom-sheet>
-
-            </div>
-        </template>
-
-        <FooterLayout></FooterLayout>
-    </div>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-import { ref } from 'vue';
-import StripePayment from '../StripePayment.vue';
-let imageSrc = '/images/usersmedia/HutopyProfile/banners/banner01.png';
-let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
-let name = 'Hutopy'
-let title = 'Page officiel'
-let drawerbottom = ref(false)
-
-let navigationItems = [
-    { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-    { icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
-    { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
-];
-
-const profiles = ref([
-    {
-        id: 1,
-        name: "Hutopy",
-        description: "Page officielle",
-        imageUrl: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
-        routerLink: 'Hutopy'
-    },
-    {
-        id: 2,
-        name: "L'effet",
-        description: "Fondation",
-        imageUrl: '/images/usersmedia/leffet/profilepictures/leffetProfile01.png',
-        routerLink: 'leffet'
-    },
-    {
-        id: 3,
-        name: "Guillaume M",
-        description: "Créateur de contenus",
-        imageUrl: '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png',
-        routerLink: 'guillaumeaime'
-    },
-    {
-        id: 4,
-        name: "Chloé Beaugrand",
-        description: "Spécialiste en médias sociaux",
-        imageUrl: '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png',
-        routerLink: 'chloebeaugrand'
-    },
-
-    {
-        id: 5,
-        name: "Mathieu Caron",
-        description: "Entrevue Atypique",
-        imageUrl: '/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png',
-        routerLink: 'mathieuCaron'
-    },
-
-    {
-        id: 6,
-        name: "ARPS",
-        description: "Agence créative",
-        imageUrl: '/images/usersmedia/ARPS/profilepictures/profileARPS.png',
-        routerLink: 'ARPS'
-    }
-]);
-</script>
-
-<style scoped>
-.invert-color {
-    filter: invert(1);
-}
-
-
-.Hutopy-menu-sticky-mobile {
-    position: sticky;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 1000;
-    margin-top: -40px;
-}
-
-.sticky-bottom-label {
-    position: sticky;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 1000;
-    margin-top: 20px;
-}
-
-.sticky-top-label {
-    position: sticky;
-    bottom: 0;
-    right: 10%;
-    width: 100%;
-    z-index: 1000;
-}
-
-.text-soutiens {
-    margin-bottom: 15px;
-    color: white;
-    font-size: 1.5rem;
-    letter-spacing: 7px;
-    text-align: center;
-}
-
-.name-info {
-    margin-top: -10px;
-    margin-left: 15%;
-}
-
-.occupation-info {
-    margin-left: 15%;
-    font-size: large;
-}
-
-.name-info-mobile {
-    margin-left: 22px;
-    font-size: 1.3rem
-}
-
-.main-background {
-    background-color: #f4f4f4;
-}
-
-.profile-container {
-    margin-top: -16%;
-}
-
-.btn-custom {
-    width: 100%;
-    background-color: transparent;
-}
-
-.background-profile-container {
-    background-color: #ececec;
-    color: white;
-    border-top: 3px solid #a30e79;
-    border-right: 3px solid #a30e79;
-    font-weight: 700;
-    font-size: 1.15rem;
-    border-radius: 25px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
-}
-
-.background-pink {
-    background-color: #23393b;
-    color: white;
-    font-weight: 400;
-}
-
-.label-text {
-    font-weight: 400;
-    margin-left: 3%;
-    font-size: 1rem;
-}
-
-.profile-name {
-    margin-top: -15%;
-}
-
-.socialicons {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 3px;
-    margin-left: 40px;
-}
-
-.socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 27px;
-    margin-left: 20px;
-}
-
-.youtube-card {
-    margin-left: 2%;
-    margin-right: 2%;
-    border-radius: 15px;
-    background-color: #f4f4f4;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
-}
-
-.card-title {
-    font-size: 1.4rem;
-    margin-top: 10px;
-}
-
-.card-date {
-    margin-left: 10px;
-    margin-top: -18px;
-    margin-bottom: -20px;
-    font-size: .8rem;
-}
-
-.social-container {
-    background-color: #6b0065;
-    border-top-right-radius: 30px;
-    border-bottom-right-radius: 30px;
-    font-size: 1.7rem;
-    font-weight: 600;
-    color: white;
-}
-
-.social-container2 {
-    background-color: #a30e79;
-    border-bottom-right-radius: 30px;
-    font-size: 1.4rem;
-    font-weight: 500;
-    color: white;
-}
-
-.social-container-mobile {
-    background-color: #a30e79;
-    font-size: 1.4rem;
-    font-weight: 600;
-    color: white;
-    z-index: 1000;
-    margin: auto;
-    text-align: center;
-}
-
-.social-container2-mobile {
-    background-color: #0baab2;
-    z-index: 1000;
-    font-size: 1.2rem;
-    font-weight: 500;
-    color: white;
-}
-
-.social-icon-group-mobile {
-    background-color: #6b0065;
-}
-
-.mini-profile-picture {
-    border-radius: 100px;
-}
-
-.btn-card-options {
-    background-color: #f4f4f4;
-    width: 50px;
-    margin-left: -12px;
-    margin-top: 10px;
-}
-
-.mobile-profile-picture-creator {
-    border-radius: 100px;
-    height: 150px;
-    width: 150px;
-    border-radius: 50%;
-    max-width: 150px;
-    border: 4px solid white;
-    z-index: 1000;
-}
-
-.mobile-header {
-    height: 50px;
-    margin-left: -13%;
-    margin-top: 6%;
-}
-
-.h1-navigation {
-    text-align: center;
-    font-weight: 600;
-    margin-bottom: 10%;
-}
-
-.mobile-profile-picture {
-    height: 40px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-    border: 2px solid #a30e79;
-    margin-right: 10px
-}
-
-.profile-banner {
-    margin-top: 25px;
-    min-height: 200px
-}
-
-.v-navigation-drawer {
-    max-height: 100vh;
-}
-
-@media (min-width: 150px) and (max-width: 474px) {
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(-30%) translateX(0%);
-    }
-
-    .socialicons-mobile {
-        width: 35px;
-        max-width: 100px;
-        margin-top: 0px;
-        margin-left: 20px;
-    }
-}
-
-
-@media (min-width: 475px) and (max-width: 599px) {
-    .socialicons-mobile {
-        width: 35px;
-        max-width: 100px;
-        margin-top: 0px;
-        margin-left: px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(-30%) translateX(0%);
-    }
-
-    .profile-container-mobile {
-        width: 110%;
-        margin-left: -3%;
-        margin-top: -112px;
-    }
-
-    .occupation-info {
-        font-size: 1rem;
-    }
-
-    .card-youtube {
-        min-height: 250px;
-    }
-
-    .name-info-mobile {
-        font-size: 1.6rem;
-    }
-}
-
-@media (min-width: 599px) and (max-width: 749px) {
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(25%) translateX(0%);
-    }
-
-    .profile-container {
-
-        width: 110%;
-        margin-left: -3%;
-    }
-
-    .profile-container-mobile {
-
-        width: 110%;
-        margin-left: -3%;
-        margin-top: -110px;
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-    }
-
-    .occupation-info {
-        font-size: 1rem;
-    }
-
-    .card-youtube {
-        min-height: 330px;
-    }
-}
-
-@media (min-width: 750px) and (max-width: 960px) {
-    .mobile-profile-picture-creator {
-        transform: scale(1.8) translateY(25%) translateX(0%);
-    }
-
-    .profile-container {
-        width: 110%;
-        margin-left: -3%;
-    }
-
-    .profile-container-mobile {
-        width: 110%;
-        margin-left: -3%;
-        margin-top: -110px;
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-    }
-
-    .occupation-info {
-        font-size: 1rem;
-    }
-
-    .card-youtube {
-        min-height: 425px;
-    }
-}
-
-@media (min-width: 960px) and (max-width: 1280px) {
-    .middle-col {
-        margin-left: -30px;
-    }
-
-    .text-soutiens {
-        font-size: 1.2rem;
-        letter-spacing: 5px;
-    }
-
-    .profile-container {
-        margin-top: -185px;
-        min-width: 480px
-    }
-
-    .card-youtube {
-        min-height: 270px;
-    }
-
-    .Je-soutien-container {
-        min-width: 325px;
-        margin-left: -35px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.3) translateY(25%) translateX(-50px);
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-        margin-left: 20px;
-        margin-top: -6px
-    }
-
-    .occupation-info {
-        margin-left: 40px;
-        margin-top: -8px
-    }
-
-    .social-container {
-        margin-left: 80px;
-        min-width: 270px;
-        max-height: 40px
-    }
-
-    .social-container2 {
-        margin-left: 50px;
-        min-width: 250px;
-        max-height: 35px
-    }
-
-    .socialicons {
-        width: 34px;
-        max-width: 100px;
-        margin-top: 15px;
-        margin-left: 25px;
-    }
-}
-
-@media (min-width: 1280px) and (max-width: 1600px) {
-    .text-soutiens {
-        font-size: 1.3rem;
-        letter-spacing: 8px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.3) translateY(25%) translateX(-50px);
-    }
-
-    .profile-container {
-        margin-top: -180px;
-    }
-
-    .card-youtube {
-        min-height: 290px;
-    }
-
-    .menu-col {
-        margin-left: -4%;
-    }
-
-    .Je-soutien-container {
-        min-width: 350px;
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-        margin-left: 20px;
-        margin-top: -6px
-    }
-
-    .social-container {
-        margin-left: 90px;
-        min-width: 350;
-        max-height: 40px
-    }
-
-    .occupation-info {
-        margin-left: 70px;
-        margin-top: -8px
-    }
-
-    .social-container2 {
-
-        margin-left: 40px;
-        min-width: 290px;
-        max-height: 35px
-    }
-
-    .socialicons {
-        width: 34px;
-        max-width: 100px;
-        margin-top: 15px;
-        margin-left: 25px;
-    }
-}
-
-@media (min-width: 1600px) and (max-width: 1919px) {
-    .text-soutiens {
-        font-size: 1.3rem;
-
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.4) translateY(25%) translateX(-40px);
-    }
-
-    .profile-container {
-        margin-top: -171px;
-    }
-
-    .card-youtube {
-        min-height: 355px;
-    }
-
-    .menu-col {
-        margin-left: -4%;
-    }
-
-    .Je-soutien-container {
-        min-width: 400px;
-    }
-
-    .name-info {
-        font-size: 1.5rem;
-        margin-top: -4px;
-        margin-left: 35px;
-    }
-
-    .occupation-info {
-        font-size: 1.3rem;
-        margin-left: 75px;
-        margin-top: -2px
-    }
-
-    .social-container2 {
-        margin-left: 70px;
-        min-width: 300px;
-    }
-}
-
-@media (min-width: 1920px) and (max-width: 2559px) {
-    .text-soutiens {
-        font-size: 1.3rem;
-    }
-
-    .profile-container {
-        margin-top: -160px;
-    }
-
-    .card-youtube {
-        min-height: 380px;
-    }
-
-    .Je-soutien-container {
-        min-width: 400px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.4) translateY(25%) translateX(-40px);
-    }
-
-    .name-info {
-        font-size: 1.5rem;
-        margin-left: 35px;
-        margin-top: -4px;
-    }
-
-    .social-container {
-        margin-left: 100px;
-    }
-
-    .occupation-info {
-        font-size: 1.3rem;
-        margin-left: 110px;
-        margin-top: -4px
-    }
-
-    .social-container2 {
-        margin-left: 30px;
-        min-width: 360px;
-    }
-
-    .socialicons {
-        width: 38px;
-        max-width: 100px;
-        margin-top: 13px;
-        margin-left: 40px;
-    }
-}
-
-@media (min-width: 2560px) {
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(25%) translateX(-20px);
-    }
-
-    .profile-container {
-        margin-top: -150px
-    }
-
-    .profile-banner {
-        margin-top: 25px;
-        min-height: 450px;
-    }
-
-    .card-youtube {
-        min-height: 380px;
-    }
-
-    .text-soutiens {
-        font-size: 1.5rem;
-    }
-
-    .name-info {
-        font-size: 2rem;
-
-    }
-
-    .social-container {
-        margin-left: 140px;
-    }
-
-    .social-container2 {
-        margin-left: 130px;
-    }
-
-    .occupation-info {
-        font-size: 1.5rem;
-        margin-left: 65px;
-        margin-top: -6px
-    }
-
-    .socialicons {
-        width: 45px;
-        max-width: 100px;
-        margin-top: 15px;
-        margin-left: 40px;
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/main/YourProfile.vue b/src/views/main/YourProfile.vue
index df2e6f4..aad3771 100644
--- a/src/views/main/YourProfile.vue
+++ b/src/views/main/YourProfile.vue
@@ -1,8 +1,5 @@
 <template>
 
-  <body style="background-color:#f4f4f4">
-    <DefaultLayout></DefaultLayout>
-
     <v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;">
     </v-row>
 
@@ -47,9 +44,9 @@
                 :readonly="!isEditing"></v-text-field>
             </v-form>
             <v-col class="text-right">
-              <router-link :to="{ name: 'creatorfolio' }" class="">
+              <RouterLink :to="{ name: 'creatorfolio' }" class="">
                 <v-btn style="margin-right: 20px;">Retour</v-btn>
-              </router-link>
+              </RouterLink>
               <v-btn @click="toggleEdit">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</v-btn>
             </v-col>
           </v-col>
@@ -57,13 +54,9 @@
       </v-container>
     </v-container>
 
-    <FooterLayout></FooterLayout>
-  </body>
 </template>
 
 <script async setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
 import MyUserModel from "@/models/myUserModel.js";
 import { useClient } from "@/plugins/api.js";
 import { onBeforeMount, ref } from 'vue';
diff --git a/src/views/main/creators.json b/src/views/main/creators.json
new file mode 100644
index 0000000..f05c95b
--- /dev/null
+++ b/src/views/main/creators.json
@@ -0,0 +1,51 @@
+[
+  {
+    "ìd": 1,
+    "name": "Hutopy",
+    "title": "Page officielle",
+    "description": "Site officiel pour Hutopy. Venez-nous-y retrouver avec tous vos fans!",
+    "imageUrl": "/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png",
+    "routerLink": "@hutopy",
+    "about": "Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur.",
+    "contacts": {
+      "twitter": "https://twitter.com/Hutopyinc",
+      "facebook": "https://www.facebook.com/Hutopy",
+      "instagram": "https://www.instagram.com/hutopy.inc/"
+    }
+  },
+  {
+    "id": 2,
+    "name": "L'effet",
+    "description": "Fondation",
+    "imageUrl": "/images/usersmedia/leffet/profilepictures/leffetProfile01.png",
+    "routerLink": "@leffet"
+  },
+  {
+    "id": 3,
+    "name": "Guillaume M",
+    "description": "Créateur de contenus",
+    "imageUrl": "/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png",
+    "routerLink": "@guillaumeaime"
+  },
+  {
+    "id": 4,
+    "name": "Chloé Beaugrand",
+    "description": "Spécialiste en médias sociaux",
+    "imageUrl": "/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png",
+    "routerLink": "@chloebeaugrand"
+  },
+  {
+    "id": 5,
+    "name": "Mathieu Caron",
+    "description": "Entrevue Atypique",
+    "imageUrl": "/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png",
+    "routerLink": "@mathieuCaron"
+  },
+  {
+    "id": 6,
+    "name": "ARPS",
+    "description": "Agence créative",
+    "imageUrl": "/images/usersmedia/ARPS/profilepictures/profileARPS.png",
+    "routerLink": "@ARPS"
+  }
+]
\ No newline at end of file
diff --git a/src/views/main/posts.json b/src/views/main/posts.json
new file mode 100644
index 0000000..18a0a6d
--- /dev/null
+++ b/src/views/main/posts.json
@@ -0,0 +1,26 @@
+[
+  {
+    "id": 1,
+    "creatorId": 1,
+    "title": "Déploiement de la version 0.10 d'Hutopy",
+    "date": "24-04-2024",
+    "banner": "https://www.youtube.com/embed/neKWqjE0eSs?si=Bo7xbYaw9-56w3lU",
+    "content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
+  },
+  {
+    "id": 1,
+    "creatorId": 1,
+    "title": "Déploiement de la version 0.10 d'Hutopy",
+    "date": "24-04-2024",
+    "banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
+    "content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
+  },
+  {
+    "id": 1,
+    "creatorId": 1,
+    "title": "Déploiement de la version 0.10 d'Hutopy",
+    "date": "24-04-2024",
+    "banner": "/images/usersmedia/HutopyProfile/pictures/version.png",
+    "content": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy."
+  }
+]
\ No newline at end of file
diff --git a/src/views/manualusers/ARPS.vue b/src/views/manualusers/ARPS.vue
index a5565dd..c6a0169 100644
--- a/src/views/manualusers/ARPS.vue
+++ b/src/views/manualusers/ARPS.vue
@@ -1,489 +1,237 @@
 <template>
-  <div style="background-color: #f4f4f4;">
-    <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
 
-    <!-- "Mobile -->
-    <v-row class="fluid hidden-md-and-up social-mobile-container"
-      style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-      </v-col>
-    </v-row>
+  <v-row class="fluid" style="margin-top: -65px; position: relative; z-index: 0;">
+    <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
+      <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
+             style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+    </v-col>
+  </v-row>
+  <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
+  </v-row>
 
-    <!-- "PurpleLine" -->
-    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-    </v-row>
+  <!-- "Core (Menu / Center / Donation)" -->
+  <v-row>
+    <!-- Profile Info Picture name title & description -->
+    <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
+      <v-container class="profile-container">
+        <v-container>
+          <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+          <!-- User informations Name & title  -->
+          <v-container class="background-profile-container" style="margin-top: -8%;">
+            <v-row>
+              <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
+                <h1 class="name-info">{{ name }}</h1>
+              </v-col>
+              <v-col></v-col>
+            </v-row>
+            <v-row>
+              <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
+                <h1 class="occupation-info">{{ title }}</h1>
+              </v-col>
+              <v-col></v-col>
+            </v-row>
 
-    <!-- "Mobile-Profile" -->
-    <!-- "Profile picture" -->
-    <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
-      <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-    </v-row>
+            <!-- User Social Network Links -->
+            <v-row>
+              <v-spacer></v-spacer>
+              <v-col cols="10" style="margin-top: 1%; margin-bottom: -2%;">
+                <v-row>
+                  <a href="https://www.facebook.com/arps.company">
+                    <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png" alt="Facebook">
+                  </a>
+                  <a href="https://www.instagram.com/arps.co/">
+                    <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png" alt="Instagram">
+                  </a>
+                  <a href="https://www.youtube.com/channel/UCgnT_psydUXohYm5Yz_wFUg">
+                    <img class="socialicons" src="/images/hutopymedia/icons/black/youtube.png" alt="Youtube">
+                  </a>
+                  <a href="https://www.tiktok.com/@arps.co"> <img class="socialicons"
+                                                                  src="/images/hutopymedia/icons/black/tiktokblack.png"
+                                                                  alt="tiktokblack">
+                  </a>
+                  <a href="https://www.linkedin.com/in/mickael-simard-96079a90/"> <img class="socialicons"
+                                                                                       src="/images/hutopymedia/icons/black/linkedinblack.png"
+                                                                                       alt="linkedin">
+                  </a>
+                  <a href="https://www.arps.ca//"> <img class="socialicons"
+                                                        src="/images/hutopymedia/icons/black/arpsblack.png"
+                                                        alt="ARPS">
+                  </a>
+                </v-row>
+              </v-col>
+              <v-col background-color="primary"></v-col>
+            </v-row>
 
-    <!-- User Social Network Links -->
-    <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
-      hidden-md-and-down>
-
-      <!-- Facebook -->
-      <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
-        <v-col cols="2" sm="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.facebook.com/arps.company">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
-              alt="Facebook"></v-img>
-          </a>
-        </v-col>
-
-        <v-col cols="2" sm="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.instagram.com/arps.co/">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
-              alt="Facebook"></v-img>
-          </a>
-        </v-col>
-
-        <v-col cols="2" sm="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.youtube.com/channel/UCgnT_psydUXohYm5Yz_wFUg">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/youtube.png" alt="Facebook"></v-img>
-          </a>
-        </v-col>
-
-        <!-- Profile picture - Small -->
-        <v-col cols="4" sm="4" xs="0" class="hidden-xs">
-          <v-row class="d-flex justify-center align-center">
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-          </v-row>
-        </v-col>
-
-        <v-col cols="2" sm="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.tiktok.com/@arps.co">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/tiktokblack.png"
-              alt="Facebook"></v-img>
-          </a>
-        </v-col>
-
-        <v-col cols="2" sm="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.linkedin.com/in/mickael-simard-96079a90/">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/linkedinblack.png"
-              alt="Facebook"></v-img>
-          </a>
-        </v-col>
-
-        <!-- Instagram -->
-        <v-col cols="2" sm="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.arps.ca/">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/arpsblack.png"
-              alt="Instagram"></v-img>
-          </a>
-        </v-col>
-      </v-row>
-
-
-
-
-      <!-- User informations Name title and description  -->
-      <v-row class="social-container-mobile">
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row class="d-flex justify-center">
-            {{ name }}
-          </v-row>
-        </v-col>
-        <v-spacer xs="12" sm="4"></v-spacer>
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row class="d-flex justify-center">
-            {{ title }}
-          </v-row>
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
-          class="social-icon-group-mobile">
-          <v-expansion-panels style="min-width: 320px;">
-            <v-col cols="12" offset="-1">
-              <v-expansion-panel class="background-pink text-justify"
-                style="border-bottom-left-radius:0px; border-bottom-right-radius: 0px; color: white;" text="
-                      Une agence créative spécialisée en production audiovisuelle, création de contenu et stratégie marketing située à Saint-Hyacinthe qui accompagne les PME, les entrepreneurs ainsi que les artistes afin d'affiner leur notoriété par le biais d'images à la hauteur de leur travail.
-" title="Qui sommes-nous ?">
-              </v-expansion-panel>
-              <v-expansion-panel class="background-pink text-justify"
-                style="border-top-left-radius: 0px; border-top-right-radius: 0px; color: white;" text="
-                        Originairement une marque de vêtements fondée en 2012 en Montérégie par Mickael Simard, ARPS s'est fait connaître dans le milieu de la mode urbaine, de la musique et de l'art. Au travers les années, l'entreprise à su développer une expertise au niveau du développement d'un branding efficace. Aujourd’hui, nous sommes là pour raconter VOTRE histoire tout en partageant nos idées.
-
-" title="Notre histoire">
-              </v-expansion-panel>
-            </v-col>
-          </v-expansion-panels>
-        </v-container>
-      </v-row>
-    </v-container>
-
-    <!-- Bannière Pc -->
-    <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
-      hidden-sm-and-up>
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-      </v-col>
-    </v-row>
-    <v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
-      hidden-sm-and-up>
-    </v-row>
-
-    <!-- "Core (Menu / Center / Donation)" -->
-    <v-row>
-      <!-- "Menu" -->
-      <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
-        <v-col style="margin: 0;">
-          <v-row class="Hutopy-menu-sticky-mobile">
-            <v-spacer></v-spacer>
-            <v-col>
-              <v-container style=" overflow-y: hidden;">
-                <!-- Nav-Btn -->
-                <v-col cols="12" class="px-0">
-                  <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
-                    style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
-                  <v-list dense class="main-background">
-                    <v-list-item v-for="item in navigationItems" :key="item.link">
-                      <router-link :to="item.link">
-                        <v-btn text class="d-flex align-start align-center main-background" elevation="0"
-                          outlined="false">
-                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                          {{ item.text }}
-                        </v-btn>
-
-                      </router-link>
-                    </v-list-item>
-
-                  </v-list>
-                </v-col>
-              </v-container>
-            </v-col>
-          </v-row>
-          <v-row style="height: 1800px;"></v-row>
-        </v-col>
-      </v-col>
-
-      <!-- Profile Info Picture name title & description -->
-      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
-        <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
-          <v-container>
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-            <!-- User informations Name & title  -->
-            <v-container class="background-profile-container" style="margin-top: -8%;">
-              <v-row>
-                <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
-                  <h1 class="name-info">{{ name }}</h1>
-                </v-col>
-                <v-col></v-col>
-              </v-row>
-              <v-row>
-                <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
-                  <h1 class="occupation-info">{{ title }}</h1>
-                </v-col>
-                <v-col></v-col>
-              </v-row>
-
-              <!-- User Social Network Links -->
-              <v-row>
-                <v-spacer></v-spacer>
-                <v-col cols="10" style="margin-top: 1%; margin-bottom: -2%;">
-                  <v-row>
-                    <a href="https://www.facebook.com/arps.company">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png" alt="Facebook">
-                    </a>
-                    <a href="https://www.instagram.com/arps.co/">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png" alt="Instagram">
-                    </a>
-                    <a href="https://www.youtube.com/channel/UCgnT_psydUXohYm5Yz_wFUg">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/youtube.png" alt="Youtube">
-                    </a>
-                    <a href="https://www.tiktok.com/@arps.co"> <img class="socialicons"
-                        src="/images/hutopymedia/icons/black/tiktokblack.png" alt="tiktokblack">
-                    </a>
-                    <a href="https://www.linkedin.com/in/mickael-simard-96079a90/"> <img class="socialicons"
-                        src="/images/hutopymedia/icons/black/linkedinblack.png" alt="linkedin">
-                    </a>
-                    <a href="https://www.arps.ca//"> <img class="socialicons"
-                        src="/images/hutopymedia/icons/black/arpsblack.png" alt="ARPS">
-                    </a>
-                  </v-row>
-                </v-col>
-                <v-col background-color="primary"></v-col>
-              </v-row>
-
-              <!-- Description  -->
-              <v-row>
-                <v-container
+            <!-- Description  -->
+            <v-row>
+              <v-container
                   style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
 
-                  <v-expansion-panels style="min-width: 320px;">
-                    <v-col cols="12" offset="-1">
-                      <v-expansion-panel class="background-pink text-justify"
-                        style="border-bottom-left-radius:0px; border-bottom-right-radius: 0px; color: white;" text="
+                <v-expansion-panels style="min-width: 320px;">
+                  <v-col cols="12" offset="-1">
+                    <v-expansion-panel class="background-pink text-justify"
+                                       style="border-bottom-left-radius:0px; border-bottom-right-radius: 0px; color: white;"
+                                       text="
                       Une agence créative spécialisée en production audiovisuelle, création de contenu et stratégie marketing située à Saint-Hyacinthe qui accompagne les PME, les entrepreneurs ainsi que les artistes afin d'affiner leur notoriété par le biais d'images à la hauteur de leur travail.
 " title="Qui sommes-nous ?">
-                      </v-expansion-panel>
-                      <v-expansion-panel class="background-pink text-justify"
-                        style="border-top-left-radius: 0px; border-top-right-radius: 0px; color: white;" text="
+                    </v-expansion-panel>
+                    <v-expansion-panel class="background-pink text-justify"
+                                       style="border-top-left-radius: 0px; border-top-right-radius: 0px; color: white;"
+                                       text="
                         Originairement une marque de vêtements fondée en 2012 en Montérégie par Mickael Simard, ARPS s'est fait connaître dans le milieu de la mode urbaine, de la musique et de l'art. Au travers les années, l'entreprise à su développer une expertise au niveau du développement d'un branding efficace. Aujourd’hui, nous sommes là pour raconter VOTRE histoire tout en partageant nos idées.
 
 " title="Notre histoire">
-                      </v-expansion-panel>
-                    </v-col>
-                  </v-expansion-panels>
-                </v-container>
+                    </v-expansion-panel>
+                  </v-col>
+                </v-expansion-panels>
+              </v-container>
+            </v-row>
+          </v-container>
+        </v-container>
+      </v-container>
+
+      <!-- Création du studio -->
+      <v-container>
+        <v-card class="flow-menu m-0 youtube-card">
+
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+            <v-container style="margin-top: -15px;">
+              <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                      src="https://www.youtube.com/embed/VRMlRv9IrY0?si=cLyduREv81I-NDx5" title="Guillaumem"
+                      frameborder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowfullscreen></iframe>
+
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
+                    27-05-2024
+                  </h1>
+                </v-col>
               </v-row>
-            </v-container>
-          </v-container>
-        </v-container>
 
-        <!-- Création du studio -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-              <v-container style="margin-top: -15px;">
-                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                  src="https://www.youtube.com/embed/VRMlRv9IrY0?si=cLyduREv81I-NDx5" title="Guillaumem" frameborder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  allowfullscreen></iframe>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
-                      27-05-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
-                  ARPS | Podcast EP. 2 - La beauté du filmmaking (Avec Simon Bélanger)
-                </p>
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
+                ARPS | Podcast EP. 2 - La beauté du filmmaking (Avec Simon Bélanger)
+              </p>
 
 
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
                   style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
+              </div>
+              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
 
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-
-        <!-- Création du studio -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-              <v-container style="margin-top: -15px;">
-                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                  src="https://www.youtube.com/embed/d9FXGyQgL5A?si=u2oTh_E2wZx9r9Y7" title="Guillaumem" frameborder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  allowfullscreen></iframe>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
-                      26-05-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
-                  Regardez les coulisses qui vous montrent notre projet de création de studio de podcast, le premier à
-                  Saint-Hyacinthe.
-                </p>
-
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-
-        <!-- Demo Reel -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-              <v-container style="margin-top: -15px;">
-                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                  src="https://www.youtube.com/embed/XUeikVgYXwc?si=CxfP7MRcQvOMfaIl" title="Guillaumem" frameborder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  allowfullscreen></iframe>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
-                      25-05-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
-                  Nous vous présentons notre démo-reel d'ARPS. Comme le disait Albert Einstein : "La créativité est
-                  l'intelligence qui s'amuse."
-                </p>
-
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-
-      </v-col>
-
-      <!-- "Large-Monitor-RightCol" Donation -->
-      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
-        <v-row>
-          <v-col>
-            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
-              <!-- Donnation -->
-              <v-card style="border-radius: 20px;">
-                <v-container>
-                  <v-row class="mb-0"
-                    style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                      JE SOUTIENS!
-                    </v-card-title>
-                  </v-row>
-                  <StripePayment creator-id="755a5669-5dbb-43d3-bd38-3c3fe5c24a80"></StripePayment>
-                </v-container>
-              </v-card>
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
             </v-container>
-            <v-container style="height: 1800px;">
+          </div>
+        </v-card>
+      </v-container>
+
+      <!-- Création du studio -->
+      <v-container>
+        <v-card class="flow-menu m-0 youtube-card">
+
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+            <v-container style="margin-top: -15px;">
+              <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                      src="https://www.youtube.com/embed/d9FXGyQgL5A?si=u2oTh_E2wZx9r9Y7" title="Guillaumem"
+                      frameborder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowfullscreen></iframe>
+
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
+                    26-05-2024
+                  </h1>
+                </v-col>
+              </v-row>
+
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
+                Regardez les coulisses qui vous montrent notre projet de création de studio de podcast, le premier à
+                Saint-Hyacinthe.
+              </p>
+
+
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
             </v-container>
-          </v-col>
-          <v-spacer>
-          </v-spacer>
-        </v-row>
-      </v-col>
-    </v-row>
+          </div>
+        </v-card>
+      </v-container>
 
-    <!-- "Mobile" Donation -->
-    <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
-      style="background-color: #6b0065; margin-top: 30px; text-align: center;">
+      <!-- Demo Reel -->
+      <v-container>
+        <v-card class="flow-menu m-0 youtube-card">
+
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+            <v-container style="margin-top: -15px;">
+              <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                      src="https://www.youtube.com/embed/XUeikVgYXwc?si=CxfP7MRcQvOMfaIl" title="Guillaumem"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowfullscreen></iframe>
+
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
+                    25-05-2024
+                  </h1>
+                </v-col>
+              </v-row>
+
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
+                Nous vous présentons notre démo-reel d'ARPS. Comme le disait Albert Einstein : "La créativité est
+                l'intelligence qui s'amuse."
+              </p>
+
+
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+            </v-container>
+          </div>
+        </v-card>
+      </v-container>
 
-      <!-- Barre cliquable pour ouvrir le drawer -->
-      <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
-        style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
-        JE SOUTIENS
-      </v-btn>
     </v-col>
+  </v-row>
 
-    <!-- Drawer du bas -->
-    <template>
-      <div>
-        <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
-          <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
-            <h1 class="text-soutiens">JE SOUTIENS</h1>
-            <StripePayment creator-id="755a5669-5dbb-43d3-bd38-3c3fe5c24a80"></StripePayment>
-          </v-container>
-        </v-bottom-sheet>
-
-      </div>
-    </template>
-
-    <FooterLayout></FooterLayout>
-  </div>
 </template>
 
 <script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-import { ref } from 'vue';
-import StripePayment from '../StripePayment.vue';
+
 let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
 let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
 let name = 'ARPS'
 let title = 'Agence créative'
-let drawerbottom = ref(false)
 
-let navigationItems = [
-  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-  { icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
-  { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
-  //{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
-];
 </script>
 
 <style scoped>
-.invert-color {
-  filter: invert(1);
-}
-
-
-
-.Comments-font {
-  font-size: .1rem;
-}
-
-
-.Hutopy-menu-sticky-mobile {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: -40px;
-}
-
-.sticky-bottom-label {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: 20px;
-}
-
-.sticky-top-label {
-  position: sticky;
-  bottom: 0;
-  right: 10%;
-  width: 100%;
-  z-index: 1000;
-}
-
-.text-soutiens {
-  margin-bottom: 15px;
-  color: white;
-  font-size: 1.5rem;
-  letter-spacing: 7px;
-  text-align: center;
-}
 
 .name-info {
   margin-top: -10px;
@@ -495,24 +243,10 @@ let navigationItems = [
   font-size: large;
 }
 
-.name-info-mobile {
-  margin-left: 22px;
-  font-size: 1.3rem
-}
-
-.main-background {
-  background-color: #f4f4f4;
-}
-
 .profile-container {
   margin-top: -16%;
 }
 
-.btn-custom {
-  width: 100%;
-  background-color: transparent;
-}
-
 .background-profile-container {
   background-color: #ececec;
   color: white;
@@ -530,16 +264,6 @@ let navigationItems = [
   font-weight: 400;
 }
 
-.label-text {
-  font-weight: 400;
-  margin-left: 3%;
-  font-size: 1rem;
-}
-
-.profile-name {
-  margin-top: -15%;
-}
-
 .socialicons {
   width: 35px;
   max-width: 100px;
@@ -547,13 +271,6 @@ let navigationItems = [
   margin-left: 40px;
 }
 
-.socialicons-mobile {
-  width: 35px;
-  max-width: 100px;
-  margin-top: 27px;
-  margin-left: 20px;
-}
-
 .youtube-card {
   margin-left: 2%;
   margin-right: 2%;
@@ -562,11 +279,6 @@ let navigationItems = [
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
 }
 
-.card-title {
-  font-size: 1.4rem;
-  margin-top: 10px;
-}
-
 .card-date {
   margin-left: 10px;
   margin-top: -18px;
@@ -591,39 +303,6 @@ let navigationItems = [
   color: white;
 }
 
-.social-container-mobile {
-  background-color: #a35026;
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: white;
-  z-index: 1000;
-  margin: auto;
-  text-align: center;
-}
-
-.social-container2-mobile {
-  background-color: #0baab2;
-  z-index: 1000;
-  font-size: 1.2rem;
-  font-weight: 500;
-  color: white;
-}
-
-.social-icon-group-mobile {
-  background-color: #272526;
-}
-
-.mini-profile-picture {
-  border-radius: 100px;
-}
-
-.btn-card-options {
-  background-color: #f4f4f4;
-  width: 50px;
-  margin-left: -12px;
-  margin-top: 10px;
-}
-
 .mobile-profile-picture-creator {
   border-radius: 100px;
   height: 150px;
@@ -634,387 +313,9 @@ let navigationItems = [
   z-index: 1000;
 }
 
-.mobile-header {
-  height: 50px;
-  margin-left: -13%;
-  margin-top: 6%;
-}
-
-.h1-navigation {
-  text-align: center;
-  font-weight: 600;
-  margin-bottom: 10%;
-}
-
-.mobile-profile-picture {
-  height: 40px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  border: 2px solid #a30e79;
-  margin-right: 10px
-}
-
 .profile-banner {
   margin-top: 25px;
   min-height: 200px
 }
 
-.v-navigation-drawer {
-  max-height: 100vh;
-}
-
-@media (min-width: 150px) and (max-width: 474px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(-30%) translateX(0%);
-  }
-
-  .socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 0px;
-    margin-left: 20px;
-  }
-}
-
-
-@media (min-width: 475px) and (max-width: 599px) {
-  .socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 0px;
-    margin-left: px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(-30%) translateX(0%);
-  }
-
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -112px;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 250px;
-  }
-
-  .name-info-mobile {
-    font-size: 1.6rem;
-  }
-}
-
-@media (min-width: 599px) and (max-width: 749px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(25%) translateX(0%);
-  }
-
-  .profile-container {
-
-    width: 110%;
-    margin-left: -3%;
-  }
-
-  .profile-container-mobile {
-
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 330px;
-  }
-}
-
-@media (min-width: 750px) and (max-width: 960px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.8) translateY(25%) translateX(0%);
-  }
-
-  .profile-container {
-    width: 110%;
-    margin-left: -3%;
-  }
-
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 425px;
-  }
-}
-
-@media (min-width: 960px) and (max-width: 1280px) {
-  .middle-col {
-    margin-left: -30px;
-  }
-
-  .text-soutiens {
-    font-size: 1.2rem;
-    letter-spacing: 5px;
-  }
-
-  .profile-container {
-    margin-top: -185px;
-    min-width: 480px
-  }
-
-  .card-youtube {
-    min-height: 270px;
-  }
-
-  .Je-soutien-container {
-    min-width: 325px;
-    margin-left: -35px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25%) translateX(-50px);
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-    margin-left: 20px;
-    margin-top: -6px
-  }
-
-  .occupation-info {
-    margin-left: 40px;
-    margin-top: -8px
-  }
-
-  .social-container {
-    margin-left: 80px;
-    min-width: 270px;
-    max-height: 40px
-  }
-
-  .social-container2 {
-    margin-left: 50px;
-    min-width: 250px;
-    max-height: 35px
-  }
-
-  .socialicons {
-    width: 34px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 25px;
-  }
-}
-
-@media (min-width: 1280px) and (max-width: 1600px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-    letter-spacing: 8px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25%) translateX(-50px);
-  }
-
-  .profile-container {
-    margin-top: -180px;
-  }
-
-  .card-youtube {
-    min-height: 290px;
-  }
-
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 350px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-    margin-left: 20px;
-    margin-top: -6px
-  }
-
-  .social-container {
-    margin-left: 90px;
-    min-width: 350;
-    max-height: 40px
-  }
-
-  .occupation-info {
-    margin-left: 70px;
-    margin-top: -8px
-  }
-
-  .social-container2 {
-
-    margin-left: 40px;
-    min-width: 290px;
-    max-height: 35px
-  }
-
-  .socialicons {
-    width: 34px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 25px;
-  }
-}
-
-@media (min-width: 1600px) and (max-width: 1919px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.4) translateY(25%) translateX(-40px);
-  }
-
-  .profile-container {
-    margin-top: -171px;
-  }
-
-  .card-youtube {
-    min-height: 355px;
-  }
-
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
-  .name-info {
-    font-size: 1.5rem;
-    margin-top: -4px;
-    margin-left: 35px;
-  }
-
-  .occupation-info {
-    font-size: 1.3rem;
-    margin-left: 75px;
-    margin-top: -2px
-  }
-
-  .social-container2 {
-    margin-left: 70px;
-    min-width: 300px;
-  }
-}
-
-@media (min-width: 1920px) and (max-width: 2559px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-  }
-
-  .profile-container {
-    margin-top: -160px;
-  }
-
-  .card-youtube {
-    min-height: 380px;
-  }
-
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.4) translateY(25%) translateX(-40px);
-  }
-
-  .name-info {
-    font-size: 1.5rem;
-    margin-left: 35px;
-    margin-top: -4px;
-  }
-
-  .social-container {
-    margin-left: 100px;
-  }
-
-  .occupation-info {
-    font-size: 1.3rem;
-    margin-left: 110px;
-    margin-top: -4px
-  }
-
-  .social-container2 {
-    margin-left: 30px;
-    min-width: 360px;
-  }
-
-  .socialicons {
-    width: 38px;
-    max-width: 100px;
-    margin-top: 13px;
-    margin-left: 40px;
-  }
-}
-
-@media (min-width: 2560px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(25%) translateX(-20px);
-  }
-
-  .card-youtube {
-    min-height: 380px;
-  }
-
-  .text-soutiens {
-    font-size: 1.5rem;
-  }
-
-  .name-info {
-    font-size: 2rem;
-
-  }
-
-  .social-container {
-    margin-left: 140px;
-  }
-
-  .social-container2 {
-    margin-left: 130px;
-  }
-
-  .occupation-info {
-    font-size: 1.5rem;
-    margin-left: 65px;
-    margin-top: -6px
-  }
-
-  .socialicons {
-    width: 45px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 40px;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/manualusers/ChloeProfile.vue b/src/views/manualusers/ChloeProfile.vue
index 64c32f2..8f188be 100644
--- a/src/views/manualusers/ChloeProfile.vue
+++ b/src/views/manualusers/ChloeProfile.vue
@@ -1,411 +1,274 @@
 <template>
-  <div style="background-color: #f4f4f4;">
-    <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
 
-    <!-- "Mobile -->
-    <v-row class="fluid hidden-md-and-up social-mobile-container"
-      style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+  <!-- "Mobile -->
+  <v-row class="fluid hidden-md-and-up social-mobile-container"
+         style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
+    <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
+      <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
+             style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+    </v-col>
+  </v-row>
+
+  <!-- "PurpleLine" -->
+  <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
+  </v-row>
+
+  <!-- "Mobile-Profile" -->
+  <!-- "Profile picture" -->
+  <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
+    <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+  </v-row>
+
+  <!-- User Social Network Links -->
+  <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
+               hidden-md-and-down>
+
+    <!-- Facebook -->
+    <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
+      <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
+        <a href="https://www.facebook.com/chloegestionmedias">
+          <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
+                 alt="Facebook"></v-img>
+        </a>
+      </v-col>
+
+      <!-- Profile picture - Small -->
+      <v-col cols="4" sm="4" xs="0" class="hidden-xs">
+        <v-row class="d-flex justify-center align-center">
+          <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+        </v-row>
+      </v-col>
+
+      <!-- Instagram -->
+      <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
+        <a href="https://www.instagram.com/chloe.photo_gms">
+          <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
+                 alt="Instagram"></v-img>
+        </a>
       </v-col>
     </v-row>
 
-    <!-- "PurpleLine" -->
-    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-    </v-row>
-
-    <!-- "Mobile-Profile" -->
-    <!-- "Profile picture" -->
-    <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
-      <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-    </v-row>
-
-    <!-- User Social Network Links -->
-    <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
-      hidden-md-and-down>
-
-      <!-- Facebook -->
-      <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.facebook.com/chloegestionmedias">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
-              alt="Facebook"></v-img>
-          </a>
-        </v-col>
-
-        <!-- Profile picture - Small -->
-        <v-col cols="4" sm="4" xs="0" class="hidden-xs">
-          <v-row class="d-flex justify-center align-center">
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-          </v-row>
-        </v-col>
-
-        <!-- Instagram -->
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.instagram.com/chloe.photo_gms">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
-              alt="Instagram"></v-img>
-          </a>
-        </v-col>
-      </v-row>
-
-      <!-- User informations Name title and description  -->
-      <v-row class="social-container-mobile">
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row class="d-flex justify-center">
-            {{ name }}
-          </v-row>
-        </v-col>
-        <v-spacer xs="12" sm="4"></v-spacer>
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row class="d-flex justify-center">
-            {{ title }}
-          </v-row>
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
-          class="social-icon-group-mobile">
-          <v-expansion-panels style="min-width: 320px;">
-            <v-col cols="12" offset="-1">
-              <v-expansion-panel class="background-pink text-justify" style="color: white;" text="
-                      
-                      Axé sur l’être humain et le désir de performer, j’ai trouvé mon X avec les médias sociaux → Mon but est d’aider les entreprises à communiquer et à prospérer en renforçant leur image de marque à travers leur communauté! 
-Chaque collaboration est une aventure marketing inspirante!
-
-
-Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et surtout, j’ai hâte de travailler avec vous!
-" title="À propos de moi.">
-              </v-expansion-panel>
-            </v-col>
-          </v-expansion-panels>
-        </v-container>
-      </v-row>
-    </v-container>
-
-    <!-- Bannière Pc -->
-    <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
-      hidden-sm-and-up>
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+    <!-- User informations Name title and description  -->
+    <v-row class="social-container-mobile">
+      <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
+        <v-row class="d-flex justify-center">
+          {{ name }}
+        </v-row>
       </v-col>
-    </v-row>
-    <v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
-      hidden-sm-and-up>
-    </v-row>
-
-    <!-- "Core (Menu / Center / Donation)" -->
-    <v-row>
-      <!-- "Menu" -->
-      <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
-        <v-col style="margin: 0;">
-          <v-row class="Hutopy-menu-sticky-mobile">
-            <v-spacer></v-spacer>
-            <v-col>
-              <v-container style=" overflow-y: hidden;">
-                <!-- Nav-Btn -->
-                <v-col cols="12" class="px-0">
-                  <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
-                    style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
-                  <v-list dense class="main-background">
-                    <v-list-item v-for="item in navigationItems" :key="item.link">
-                      <router-link :to="item.link">
-                        <v-btn text class="d-flex align-start align-center main-background" elevation="0"
-                          outlined="false">
-                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                          {{ item.text }}
-                        </v-btn>
-                      </router-link>
-                    </v-list-item>
-                  </v-list>
-                </v-col>
-              </v-container>
-            </v-col>
-          </v-row>
-          <v-row style="height: 3000px;"></v-row>
-        </v-col>
-      </v-col>
-
-      <!-- Profile Info Picture name title & description -->
-      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
-        <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
-          <v-container>
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-            <!-- User informations Name & title  -->
-            <v-container class="background-profile-container" style="margin-top: -8%;">
-              <v-row>
-                <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
-                  <h1 class="name-info">{{ name }}</h1>
-                </v-col>
-                <v-col></v-col>
-              </v-row>
-              <v-row>
-                <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
-                  <h1 class="occupation-info">{{ title }}</h1>
-                </v-col>
-                <v-col></v-col>
-              </v-row>
-
-              <!-- User Social Network Links -->
-              <v-row>
-                <v-spacer></v-spacer>
-                <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
-                  <v-row>
-                    <a href="https://www.facebook.com/chloegestionmedias">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
-                        alt="Description image 2">
-                    </a>
-                    <a href="https://www.instagram.com/chloe.photo_gms">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
-                        alt="Description image 2">
-                    </a>
-                  </v-row>
-                </v-col>
-                <v-col background-color="primary"></v-col>
-              </v-row>
-
-              <!-- Description  -->
-              <v-row>
-                <v-container
-                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
-                  <v-expansion-panels style="min-width: 320px;">
-                    <v-col cols="12" offset="-1">
-                      <v-expansion-panel class="background-pink text-justify" style="color: white;" text="
-                      
-                      Axé sur l’être humain et le désir de performer, j’ai trouvé mon X avec les médias sociaux → Mon but est d’aider les entreprises à communiquer et à prospérer en renforçant leur image de marque à travers leur communauté! 
-Chaque collaboration est une aventure marketing inspirante!
-
-
-Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et surtout, j’ai hâte de travailler avec vous!
-" title="À propos de moi.">
-                      </v-expansion-panel>
-                    </v-col>
-                  </v-expansion-panels>
-                </v-container>
-              </v-row>
-            </v-container>
-          </v-container>
-        </v-container>
-
-        <!--   <PostContentMenu style="margin-top: -30px;"></PostContentMenu>  Post   -->
-        <!-- Card nouvelle boutique -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-              <v-container style="margin-top: -15px;">
-                <v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand01.png"
-                  title="Savoir faire"></v-img>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
-                      23-04-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Quand on observe des gens
-                  réaliser un
-                  Rubik’s Cube ça a l’air si facile pour eux qu’on est vraiment impressionnés et peut-être même
-                  découragés…<br><br>
-
-                  Mais saviez-vous que pour résoudre ce casse-tête, il suffit d’une série de mouvements exécutés à
-                  répétitions
-                  dans le même ordre jusqu’à la fin?<br><br>
-
-                  La gestion de médias sociaux peut donner l’impression d’être un vrai casse-tête!
-
-                  La clé c’est de comprendre chaque élément individuellement et ensuite en faire un tout.
-                </p>
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px" class="Comments-font"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-
-
-        <!-- Card nouvelle boutique -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-              <v-container style="margin-top: -15px;">
-                <v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand02.png"
-                  title="Guillaumem"></v-img>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
-                      23-04-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
-                  Que ce soit pour un portrait créatif, la gestion totales de tes médias sociaux où pour devenir
-                  autonome à
-                  les gérer par toi-même → Je suis là pour ça!
-                  <br><br>
-
-                  Je te promets qu’on passera un bon moment ET que tu auras des résultats à la hauteur de tes attentes
-                  <v-icon icon="    mdi-emoticon"></v-icon>
-                </p>
-
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-      </v-col>
-
-      <!-- "Large-Monitor-RightCol" Donation -->
-      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
-        <v-row>
-          <v-col>
-            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
-              <!-- Donnation -->
-              <v-card style="border-radius: 20px;">
-                <v-container>
-                  <v-row class="mb-0"
-                    style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                      JE SOUTIENS!
-                    </v-card-title>
-                  </v-row>
-                  <StripePayment creator-id="27e5321d-2bcc-42b0-9548-33802431e8f3"></StripePayment>
-                </v-container>
-              </v-card>
-            </v-container>
-            <v-container style="height: 3000px;">
-            </v-container>
-          </v-col>
-          <v-spacer>
-          </v-spacer>
+      <v-spacer xs="12" sm="4"></v-spacer>
+      <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
+        <v-row class="d-flex justify-center">
+          {{ title }}
         </v-row>
       </v-col>
     </v-row>
+    <v-row>
+      <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
+                   class="social-icon-group-mobile">
+        <v-expansion-panels style="min-width: 320px;">
+          <v-col cols="12" offset="-1">
+            <v-expansion-panel class="background-pink text-justify" style="color: white;" text="
+                      
+                      Axé sur l’être humain et le désir de performer, j’ai trouvé mon X avec les médias sociaux → Mon but est d’aider les entreprises à communiquer et à prospérer en renforçant leur image de marque à travers leur communauté! 
+Chaque collaboration est une aventure marketing inspirante!
 
-    <!-- "Mobile" Donation -->
-    <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
-      style="background-color: #6b0065; margin-top: 30px; text-align: center;">
 
-      <!-- Barre cliquable pour ouvrir le drawer -->
-      <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
-        style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
-        JE SOUTIENS
-      </v-btn>
+Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et surtout, j’ai hâte de travailler avec vous!
+" title="À propos de moi.">
+            </v-expansion-panel>
+          </v-col>
+        </v-expansion-panels>
+      </v-container>
+    </v-row>
+  </v-container>
+
+  <!-- Bannière Pc -->
+  <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
+         hidden-sm-and-up>
+    <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
+      <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
+             style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
     </v-col>
+  </v-row>
+  <v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
+         hidden-sm-and-up>
+  </v-row>
 
-    <!-- Drawer du bas -->
-    <template>
-      <div>
-        <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
-          <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
-            <h1 class="text-soutiens">JE SOUTIENS</h1>
-            <StripePayment creator-id="27e5321d-2bcc-42b0-9548-33802431e8f3"></StripePayment>
+  <!-- "Core (Menu / Center / Donation)" -->
+  <v-row>
+
+    <!-- Profile Info Picture name title & description -->
+    <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
+      <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
+        <v-container>
+          <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+          <!-- User informations Name & title  -->
+          <v-container class="background-profile-container" style="margin-top: -8%;">
+            <v-row>
+              <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
+                <h1 class="name-info">{{ name }}</h1>
+              </v-col>
+              <v-col></v-col>
+            </v-row>
+            <v-row>
+              <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
+                <h1 class="occupation-info">{{ title }}</h1>
+              </v-col>
+              <v-col></v-col>
+            </v-row>
+
+            <!-- User Social Network Links -->
+            <v-row>
+              <v-spacer></v-spacer>
+              <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
+                <v-row>
+                  <a href="https://www.facebook.com/chloegestionmedias">
+                    <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
+                         alt="Description image 2">
+                  </a>
+                  <a href="https://www.instagram.com/chloe.photo_gms">
+                    <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
+                         alt="Description image 2">
+                  </a>
+                </v-row>
+              </v-col>
+              <v-col background-color="primary"></v-col>
+            </v-row>
+
+            <!-- Description  -->
+            <v-row>
+              <v-container
+                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
+                <v-expansion-panels style="min-width: 320px;">
+                  <v-col cols="12" offset="-1">
+                    <v-expansion-panel class="background-pink text-justify" style="color: white;" text="
+                      
+                      Axé sur l’être humain et le désir de performer, j’ai trouvé mon X avec les médias sociaux → Mon but est d’aider les entreprises à communiquer et à prospérer en renforçant leur image de marque à travers leur communauté! 
+Chaque collaboration est une aventure marketing inspirante!
+
+
+Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et surtout, j’ai hâte de travailler avec vous!
+" title="À propos de moi.">
+                    </v-expansion-panel>
+                  </v-col>
+                </v-expansion-panels>
+              </v-container>
+            </v-row>
           </v-container>
-        </v-bottom-sheet>
+        </v-container>
+      </v-container>
 
-      </div>
-    </template>
+      <!-- Card nouvelle boutique -->
+      <v-container>
+        <v-card class="flow-menu m-0 youtube-card">
+
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+            <v-container style="margin-top: -15px;">
+              <v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand01.png"
+                     title="Savoir faire"></v-img>
+
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
+                    23-04-2024
+                  </h1>
+                </v-col>
+              </v-row>
+
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Quand on observe des gens
+                réaliser un
+                Rubik’s Cube ça a l’air si facile pour eux qu’on est vraiment impressionnés et peut-être même
+                découragés…<br><br>
+
+                Mais saviez-vous que pour résoudre ce casse-tête, il suffit d’une série de mouvements exécutés à
+                répétitions
+                dans le même ordre jusqu’à la fin?<br><br>
+
+                La gestion de médias sociaux peut donner l’impression d’être un vrai casse-tête!
+
+                La clé c’est de comprendre chaque élément individuellement et ensuite en faire un tout.
+              </p>
+
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px" class="Comments-font"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+            </v-container>
+          </div>
+        </v-card>
+      </v-container>
+
+
+      <!-- Card nouvelle boutique -->
+      <v-container>
+        <v-card class="flow-menu m-0 youtube-card">
+
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+            <v-container style="margin-top: -15px;">
+              <v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand02.png"
+                     title="Guillaumem"></v-img>
+
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
+                    23-04-2024
+                  </h1>
+                </v-col>
+              </v-row>
+
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
+                Que ce soit pour un portrait créatif, la gestion totales de tes médias sociaux où pour devenir
+                autonome à
+                les gérer par toi-même → Je suis là pour ça!
+                <br><br>
+
+                Je te promets qu’on passera un bon moment ET que tu auras des résultats à la hauteur de tes attentes
+                <v-icon icon="    mdi-emoticon"></v-icon>
+              </p>
+
+
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+            </v-container>
+          </div>
+        </v-card>
+      </v-container>
+    </v-col>
+  </v-row>
 
-    <FooterLayout></FooterLayout>
-  </div>
 </template>
 
 <script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-import { ref } from 'vue';
-import StripePayment from '../StripePayment.vue';
 let imageSrc = '/images/usersmedia/chloebeaugrand/banners/bannerChloeBeaugrand01.png';
 let profilePicture = '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png';
 let name = 'Chloé Beaugrand'
 let title = 'Spécialiste en média'
-let drawerbottom = ref(false)
-
-let navigationItems = [
-  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-  { icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
-  { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
-];
 </script>
 
 <style scoped>
-.invert-color {
-  filter: invert(1);
-}
-
-
 
 .Comments-font {
   font-size: .1rem;
 }
 
-
-.Hutopy-menu-sticky-mobile {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: -40px;
-}
-
-.sticky-bottom-label {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: 20px;
-}
-
-.sticky-top-label {
-  position: sticky;
-  bottom: 0;
-  right: 10%;
-  width: 100%;
-  z-index: 1000;
-}
-
-.text-soutiens {
-  margin-bottom: 15px;
-  color: white;
-  font-size: 1.5rem;
-  letter-spacing: 7px;
-  text-align: center;
-}
-
 .name-info {
   margin-top: -10px;
   margin-left: 15%;
@@ -416,24 +279,10 @@ let navigationItems = [
   font-size: large;
 }
 
-.name-info-mobile {
-  margin-left: 22px;
-  font-size: 1.3rem
-}
-
-.main-background {
-  background-color: #f4f4f4;
-}
-
 .profile-container {
   margin-top: -16%;
 }
 
-.btn-custom {
-  width: 100%;
-  background-color: transparent;
-}
-
 .background-profile-container {
   background-color: #ececec;
   color: white;
@@ -451,16 +300,6 @@ let navigationItems = [
   font-weight: 400;
 }
 
-.label-text {
-  font-weight: 400;
-  margin-left: 3%;
-  font-size: 1rem;
-}
-
-.profile-name {
-  margin-top: -15%;
-}
-
 .socialicons {
   width: 35px;
   max-width: 100px;
@@ -483,11 +322,6 @@ let navigationItems = [
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
 }
 
-.card-title {
-  font-size: 1.4rem;
-  margin-top: 10px;
-}
-
 .card-date {
   margin-left: 10px;
   margin-top: -18px;
@@ -522,29 +356,10 @@ let navigationItems = [
   text-align: center;
 }
 
-.social-container2-mobile {
-  background-color: #0baab2;
-  z-index: 1000;
-  font-size: 1.2rem;
-  font-weight: 500;
-  color: white;
-}
-
 .social-icon-group-mobile {
   background-color: #272526;
 }
 
-.mini-profile-picture {
-  border-radius: 100px;
-}
-
-.btn-card-options {
-  background-color: #f4f4f4;
-  width: 50px;
-  margin-left: -12px;
-  margin-top: 10px;
-}
-
 .mobile-profile-picture-creator {
   border-radius: 100px;
   height: 150px;
@@ -555,387 +370,9 @@ let navigationItems = [
   z-index: 1000;
 }
 
-.mobile-header {
-  height: 50px;
-  margin-left: -13%;
-  margin-top: 6%;
-}
-
-.h1-navigation {
-  text-align: center;
-  font-weight: 600;
-  margin-bottom: 10%;
-}
-
-.mobile-profile-picture {
-  height: 40px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  border: 2px solid #a30e79;
-  margin-right: 10px
-}
-
 .profile-banner {
   margin-top: 25px;
   min-height: 200px
 }
 
-.v-navigation-drawer {
-  max-height: 100vh;
-}
-
-@media (min-width: 150px) and (max-width: 474px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(-30%) translateX(0%);
-  }
-
-  .socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 0px;
-    margin-left: 20px;
-  }
-}
-
-
-@media (min-width: 475px) and (max-width: 599px) {
-  .socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 0px;
-    margin-left: px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(-30%) translateX(0%);
-  }
-
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -112px;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 250px;
-  }
-
-  .name-info-mobile {
-    font-size: 1.6rem;
-  }
-}
-
-@media (min-width: 599px) and (max-width: 749px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(25%) translateX(0%);
-  }
-
-  .profile-container {
-
-    width: 110%;
-    margin-left: -3%;
-  }
-
-  .profile-container-mobile {
-
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 330px;
-  }
-}
-
-@media (min-width: 750px) and (max-width: 960px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.8) translateY(25%) translateX(0%);
-  }
-
-  .profile-container {
-    width: 110%;
-    margin-left: -3%;
-  }
-
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 425px;
-  }
-}
-
-@media (min-width: 960px) and (max-width: 1280px) {
-  .middle-col {
-    margin-left: -30px;
-  }
-
-  .text-soutiens {
-    font-size: 1.2rem;
-    letter-spacing: 5px;
-  }
-
-  .profile-container {
-    margin-top: -185px;
-    min-width: 480px
-  }
-
-  .card-youtube {
-    min-height: 270px;
-  }
-
-  .Je-soutien-container {
-    min-width: 325px;
-    margin-left: -35px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25%) translateX(-50px);
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-    margin-left: 20px;
-    margin-top: -6px
-  }
-
-  .occupation-info {
-    margin-left: 40px;
-    margin-top: -8px
-  }
-
-  .social-container {
-    margin-left: 80px;
-    min-width: 270px;
-    max-height: 40px
-  }
-
-  .social-container2 {
-    margin-left: 50px;
-    min-width: 250px;
-    max-height: 35px
-  }
-
-  .socialicons {
-    width: 34px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 25px;
-  }
-}
-
-@media (min-width: 1280px) and (max-width: 1600px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-    letter-spacing: 8px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25%) translateX(-50px);
-  }
-
-  .profile-container {
-    margin-top: -180px;
-  }
-
-  .card-youtube {
-    min-height: 290px;
-  }
-
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 350px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-    margin-left: 20px;
-    margin-top: -6px
-  }
-
-  .social-container {
-    margin-left: 90px;
-    min-width: 350;
-    max-height: 40px
-  }
-
-  .occupation-info {
-    margin-left: 70px;
-    margin-top: -8px
-  }
-
-  .social-container2 {
-
-    margin-left: 40px;
-    min-width: 290px;
-    max-height: 35px
-  }
-
-  .socialicons {
-    width: 34px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 25px;
-  }
-}
-
-@media (min-width: 1600px) and (max-width: 1919px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.4) translateY(25%) translateX(-40px);
-  }
-
-  .profile-container {
-    margin-top: -171px;
-  }
-
-  .card-youtube {
-    min-height: 355px;
-  }
-
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
-  .name-info {
-    font-size: 1.5rem;
-    margin-top: -4px;
-    margin-left: 35px;
-  }
-
-  .occupation-info {
-    font-size: 1.3rem;
-    margin-left: 75px;
-    margin-top: -2px
-  }
-
-  .social-container2 {
-    margin-left: 70px;
-    min-width: 300px;
-  }
-}
-
-@media (min-width: 1920px) and (max-width: 2559px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-  }
-
-  .profile-container {
-    margin-top: -160px;
-  }
-
-  .card-youtube {
-    min-height: 380px;
-  }
-
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.4) translateY(25%) translateX(-40px);
-  }
-
-  .name-info {
-    font-size: 1.5rem;
-    margin-left: 35px;
-    margin-top: -4px;
-  }
-
-  .social-container {
-    margin-left: 100px;
-  }
-
-  .occupation-info {
-    font-size: 1.3rem;
-    margin-left: 110px;
-    margin-top: -4px
-  }
-
-  .social-container2 {
-    margin-left: 30px;
-    min-width: 360px;
-  }
-
-  .socialicons {
-    width: 38px;
-    max-width: 100px;
-    margin-top: 13px;
-    margin-left: 40px;
-  }
-}
-
-@media (min-width: 2560px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(25%) translateX(-20px);
-  }
-
-  .card-youtube {
-    min-height: 380px;
-  }
-
-  .text-soutiens {
-    font-size: 1.5rem;
-  }
-
-  .name-info {
-    font-size: 2rem;
-
-  }
-
-  .social-container {
-    margin-left: 140px;
-  }
-
-  .social-container2 {
-    margin-left: 130px;
-  }
-
-  .occupation-info {
-    font-size: 1.5rem;
-    margin-left: 65px;
-    margin-top: -6px
-  }
-
-  .socialicons {
-    width: 45px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 40px;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/manualusers/GuillaumeAime.vue b/src/views/manualusers/GuillaumeAime.vue
index 14fd0f4..4d8497f 100644
--- a/src/views/manualusers/GuillaumeAime.vue
+++ b/src/views/manualusers/GuillaumeAime.vue
@@ -1,475 +1,253 @@
 <template>
-  <div style="background-color: #f4f4f4;">
-    <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
-
-    <!-- "Mobile -->
-    <v-row class="fluid hidden-md-and-up social-mobile-container"
-      style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-      </v-col>
-    </v-row>
-
-    <!-- "PurpleLine" -->
-    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-    </v-row>
-
-    <!-- "Mobile-Profile" -->
-    <!-- "Profile picture" -->
-    <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
-      <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-    </v-row>
-
-    <!-- User Social Network Links -->
-    <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
-      hidden-md-and-down>
-
-      <!-- Facebook -->
-      <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.facebook.com/GuillaumeMousseau222">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
-              alt="Facebook"></v-img>
-          </a>
-        </v-col>
-        <!-- Instagram -->
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.instagram.com/guillaumeaime/">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
-              alt="Instagram"></v-img>
-          </a>
-        </v-col>
-        <!-- Profile picture - Small -->
-        <v-col cols="4" sm="4" xs="0" class="hidden-xs">
-          <v-row class="d-flex justify-center align-center">
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-          </v-row>
-        </v-col>
-
-        <!-- TikTok -->
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.tiktok.com/@guillaumeaime">
-            <v-img class="socialicons-mobile invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
-              alt="TikTok"></v-img>
-          </a>
-        </v-col>
-
-
-
-
-        <v-spacer class="hidden-xs"> </v-spacer>
-
-
-      </v-row>
-
-      <!-- User informations Name title and description  -->
-      <v-row class="social-container-mobile">
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row class="d-flex justify-center">
-            {{ name }}
-          </v-row>
-        </v-col>
-        <v-spacer xs="12" sm="4"></v-spacer>
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row class="d-flex justify-center">
-            {{ title }}
-          </v-row>
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
-          class="social-icon-group-mobile">
-          <v-expansion-panels style="min-width: 320px;">
-            <v-col cols="12" offset="-1">
-              <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
-                title="À propos : Ma mission est claire :">
-
-
-              </v-expansion-panel>
-            </v-col>
-          </v-expansion-panels>
-        </v-container>
-      </v-row>
-    </v-container>
-
-    <!-- Bannière Pc -->
-    <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
-      hidden-sm-and-up>
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-      </v-col>
-    </v-row>
-    <v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
-      hidden-sm-and-up>
-    </v-row>
-
-    <!-- "Core (Menu / Center / Donation)" -->
-    <v-row>
-      <!-- "Menu" -->
-      <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
-        <v-col style="margin: 0;">
-          <v-row class="Hutopy-menu-sticky-mobile">
-            <v-spacer></v-spacer>
-            <v-col>
-              <v-container style=" overflow-y: hidden;">
-                <!-- Nav-Btn -->
-                <v-col cols="12" class="px-0">
-                  <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
-                    style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
-                  <v-list dense class="main-background">
-                    <v-list-item v-for="item in navigationItems" :key="item.link">
-                      <router-link :to="item.link">
-                        <v-btn text class="d-flex align-start align-center main-background" elevation="0"
-                          outlined="false">
-                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                          {{ item.text }}
-                        </v-btn>
-                      </router-link>
-                    </v-list-item>
-                  </v-list>
-                </v-col>
-              </v-container>
-            </v-col>
-          </v-row>
-          <v-row style="height: 3000px;"></v-row>
-        </v-col>
-      </v-col>
-
-      <!-- Profile Info Picture name title & description -->
-      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
-        <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
-          <v-container>
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-            <!-- User informations Name & title  -->
-            <v-container class="background-profile-container" style="margin-top: -8%;">
-              <v-row>
-                <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
-                  <h1 class="name-info">{{ name }}</h1>
-                </v-col>
-                <v-col></v-col>
-              </v-row>
-              <v-row>
-                <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
-                  <h1 class="occupation-info">{{ title }}</h1>
-                </v-col>
-                <v-col></v-col>
-              </v-row>
-
-              <!-- User Social Network Links -->
-              <v-row>
-                <v-spacer></v-spacer>
-                <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
-                  <v-row>
-                    <a href="https://www.facebook.com/GuillaumeMousseau222">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
-                        alt="Description image 2">
-                    </a>
-                    <a href="https://www.instagram.com/p/C2f-3UnNdfX/">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
-                        alt="Description image 2">
-                    </a>
-
-                    <a href="https://www.tiktok.com/@guillaumeaime">
-                      <img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
-                        alt="Description image 2">
-                    </a>
-                  </v-row>
-                </v-col>
-                <v-col background-color="primary"></v-col>
-              </v-row>
-
-              <!-- Description  -->
-              <v-row>
-                <v-container
-                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
-                  <v-expansion-panels style="min-width: 320px;">
-                    <v-col cols="12" offset="-1">
-                      <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                        text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
-                        title="À propos : Ma mission est claire :">
-                      </v-expansion-panel>
-                    </v-col>
-                  </v-expansion-panels>
-                </v-container>
-              </v-row>
-            </v-container>
-          </v-container>
-        </v-container>
-
-
-        <!--   <PostContentMenu style="margin-top: -30px;"></PostContentMenu> -->
-
-
-        <!-- Card youtube balado -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-            <!-- Title, date and btn -->
-            <v-col>
-              <v-row>
-                <v-col class="text-center">
-                  <h1 class="card-title">
-                    MON PREMIER BALADO</h1>
-                </v-col>
-
-                <!--<v-col class="text-right">
-<v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                  </v-btn>          (a intégrer)
-                </v-col> -->
-              </v-row>
-
-            </v-col>
-
-            <!-- Card core Video/image & text -->
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
-              <v-container>
-                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                  src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  allowfullscreen></iframe>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
-                      24-04-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-
-                <p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous
-                  présenter
-                  mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
-                  particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la suite, je
-                  partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à travers
-                  le
-                  Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de mon
-                  agence
-                  créative, Alliés. Enfin, je vous invite à découvrir un autre aspect de ma vie à travers ma page
-                  personnelle,
-                  "Guillaume aime", où je partage tout ce qui me passionne.</p>
-
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-
-
-        <!-- Card nouvelle boutique -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-            <!-- Title, date and btn -->
-            <v-col>
-              <v-row>
-                <v-col class="text-center">
-                  <h1 class="card-title">
-                    NOUVELLE BOUTIQUE À SAINT-HYACINTHE</h1>
-                </v-col>
-
-                <!--<v-col class="text-right">
-<v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                  </v-btn>          (a intégrer)
-                </v-col> -->
-              </v-row>
-
-            </v-col>
-
-            <!-- Card core Video/image & text -->
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
-              <v-container>
-                <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
-                  title="Guillaumem"></v-img>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
-                      24-04-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">J’ai découvert une nouvelle
-                  boutique
-                  à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
-                  le
-                  savoir-faire québécois !
-
-                  J’y ai croisé Carl Vaillancourt, copropriétaire de l’entreprise Espace Karibou au Centre-ville
-                  Saint-Hyacinthe ainsi que mon ami Marc-Olivier Hébert de la Fondation L'effet.
-
-                  Je vous invite à découvrir cette boutique sur la rue Cascade à St-Hyacinthe. Bravo à Karianne Hamel et
-                  Carl
-                  pour ce projet!</p>
-
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-
-        <!-- Card nouvelle boutique -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-            <!-- Title, date and btn -->
-            <v-col>
-              <v-row>
-                <v-col class="text-center">
-                  <h1 class="card-title">
-                    C'EST PARTI POUR 2024!</h1>
-                </v-col>
-                <!--
-                <v-col class="text-right">
-                 <v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                  </v-btn>          (a intégrer)
-                </v-col>  -->
-              </v-row>
-
-            </v-col>
-
-            <!-- Card core Video/image & text -->
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
-              <v-container>
-                <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/cestparti.jpg"
-                  title="Guillaumem"></v-img>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
-                      22-04-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">C'est parti pour 2024 ! De
-                  retour au
-                  travail officiellement ce matin afin d'aider les entreprises de la région à rayonner ! Mettre en
-                  lumière les
-                  entrepreneurs et leur unicité, c'est ma passion ! Si jamais tu as besoin d'aide dans ce domaine,
-                  n'hésite
-                  pas à me contacter.</p>
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-
-
-      </v-col>
-
-      <!-- "Large-Monitor-RightCol" Donation -->
-      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
-        <v-row>
-          <v-col>
-            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
-              <!-- Donnation -->
-              <v-card style="border-radius: 20px;">
-                <v-container>
-                  <v-row class="mb-0"
-                    style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                      JE SOUTIENS!
-                    </v-card-title>
-                  </v-row>
-                  <StripePayment creator-id="d022276f-0865-4d01-8100-c088f9bf85ab"></StripePayment>
-                </v-container>
-              </v-card>
-            </v-container>
-            <v-container style="height: 3000px;">
-            </v-container>
-          </v-col>
-          <v-spacer>
-          </v-spacer>
-        </v-row>
-      </v-col>
-    </v-row>
-
-    <!-- "Mobile" Donation -->
-    <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
-      style="background-color: #6b0065; margin-top: 30px; text-align: center;">
-
-      <!-- Barre cliquable pour ouvrir le drawer -->
-      <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
-        style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
-        JE SOUTIENS
-      </v-btn>
+  <!-- Bannière Pc -->
+  <v-row class="fluid" style="margin-top: -65px; position: relative; z-index: 0;">
+    <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
+      <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
+             style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
     </v-col>
+  </v-row>
 
-    <!-- Drawer du bas -->
-    <template>
-      <div>
-        <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
-          <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
-            <h1 class="text-soutiens">JE SOUTIENS</h1>
-            <StripePayment creator-id="d022276f-0865-4d01-8100-c088f9bf85ab"></StripePayment>
+  <!-- "Core (Menu / Center / Donation)" -->
+  <v-row>
+
+    <!-- Profile Info Picture name title & description -->
+    <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
+      <v-container class="profile-container">
+        <v-container>
+          <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+          <!-- User informations Name & title  -->
+          <v-container class="background-profile-container" style="margin-top: -8%;">
+            <v-row>
+              <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
+                <h1 class="name-info">{{ name }}</h1>
+              </v-col>
+              <v-col></v-col>
+            </v-row>
+            <v-row>
+              <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
+                <h1 class="occupation-info">{{ title }}</h1>
+              </v-col>
+              <v-col></v-col>
+            </v-row>
+
+            <!-- User Social Network Links -->
+            <v-row>
+              <v-spacer></v-spacer>
+              <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
+                <v-row>
+                  <a href="https://www.facebook.com/GuillaumeMousseau222">
+                    <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
+                         alt="Description image 2">
+                  </a>
+                  <a href="https://www.instagram.com/p/C2f-3UnNdfX/">
+                    <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
+                         alt="Description image 2">
+                  </a>
+
+                  <a href="https://www.tiktok.com/@guillaumeaime">
+                    <img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
+                         alt="Description image 2">
+                  </a>
+                </v-row>
+              </v-col>
+              <v-col background-color="primary"></v-col>
+            </v-row>
+
+            <!-- Description  -->
+            <v-row>
+              <v-container
+                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
+                <v-expansion-panels style="min-width: 320px;">
+                  <v-col cols="12" offset="-1">
+                    <v-expansion-panel class="background-pink text-justify" style="color: white;"
+                                       text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
+                                       title="À propos : Ma mission est claire :">
+                    </v-expansion-panel>
+                  </v-col>
+                </v-expansion-panels>
+              </v-container>
+            </v-row>
           </v-container>
-        </v-bottom-sheet>
+        </v-container>
+      </v-container>
 
-      </div>
-    </template>
+      <!-- Card youtube balado -->
+      <v-container>
+        <v-card class="flow-menu m-0 youtube-card">
+          <!-- Title, date and btn -->
+          <v-col>
+            <v-row>
+              <v-col class="text-center">
+                <h1 class="card-title">
+                  MON PREMIER BALADO</h1>
+              </v-col>
+            </v-row>
 
-    <FooterLayout></FooterLayout>
-  </div>
+          </v-col>
+
+          <!-- Card core Video/image & text -->
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
+            <v-container>
+              <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                      src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowfullscreen></iframe>
+
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
+                    24-04-2024
+                  </h1>
+                </v-col>
+              </v-row>
+
+
+              <p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous
+                présenter
+                mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
+                particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la suite, je
+                partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à travers
+                le
+                Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de mon
+                agence
+                créative, Alliés. Enfin, je vous invite à découvrir un autre aspect de ma vie à travers ma page
+                personnelle,
+                "Guillaume aime", où je partage tout ce qui me passionne.</p>
+
+
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+            </v-container>
+          </div>
+        </v-card>
+      </v-container>
+
+
+      <!-- Card nouvelle boutique -->
+      <v-container>
+        <v-card class="flow-menu m-0 youtube-card">
+          <!-- Title, date and btn -->
+          <v-col>
+            <v-row>
+              <v-col class="text-center">
+                <h1 class="card-title">
+                  NOUVELLE BOUTIQUE À SAINT-HYACINTHE</h1>
+              </v-col>
+
+            </v-row>
+
+          </v-col>
+
+          <!-- Card core Video/image & text -->
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
+            <v-container>
+              <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
+                     title="Guillaumem"></v-img>
+
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
+                    24-04-2024
+                  </h1>
+                </v-col>
+              </v-row>
+
+
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">J’ai découvert une nouvelle
+                boutique
+                à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
+                le
+                savoir-faire québécois !
+
+                J’y ai croisé Carl Vaillancourt, copropriétaire de l’entreprise Espace Karibou au Centre-ville
+                Saint-Hyacinthe ainsi que mon ami Marc-Olivier Hébert de la Fondation L'effet.
+
+                Je vous invite à découvrir cette boutique sur la rue Cascade à St-Hyacinthe. Bravo à Karianne Hamel et
+                Carl
+                pour ce projet!</p>
+
+
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+            </v-container>
+          </div>
+        </v-card>
+      </v-container>
+
+      <!-- Card nouvelle boutique -->
+      <v-container>
+        <v-card class="flow-menu m-0 youtube-card">
+          <!-- Title, date and btn -->
+          <v-col>
+            <v-row>
+              <v-col class="text-center">
+                <h1 class="card-title">
+                  C'EST PARTI POUR 2024!</h1>
+              </v-col>
+            </v-row>
+
+          </v-col>
+
+          <!-- Card core Video/image & text -->
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
+            <v-container>
+              <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/cestparti.jpg"
+                     title="Guillaumem"></v-img>
+
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
+                    22-04-2024
+                  </h1>
+                </v-col>
+              </v-row>
+
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">C'est parti pour 2024 ! De
+                retour au
+                travail officiellement ce matin afin d'aider les entreprises de la région à rayonner ! Mettre en
+                lumière les
+                entrepreneurs et leur unicité, c'est ma passion ! Si jamais tu as besoin d'aide dans ce domaine,
+                n'hésite
+                pas à me contacter.</p>
+
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+            </v-container>
+          </div>
+        </v-card>
+      </v-container>
+    </v-col>
+  </v-row>
 </template>
 
 <script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-import { ref } from 'vue';
-import StripePayment from '../StripePayment.vue';
 let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
 let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
 let name = 'Guillaume Mousseau'
 let title = 'Créateur de contenus'
-let drawerbottom = ref(false)
 
-let navigationItems = [
-  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-  { icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
-  { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
-];
 </script>
 
 <style scoped>
@@ -477,43 +255,6 @@ let navigationItems = [
   filter: invert(1);
 }
 
-
-.Hutopy-menu-sticky-mobile {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: -40px;
-}
-
-.sticky-bottom-label {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: 20px;
-}
-
-.sticky-top-label {
-  position: sticky;
-  bottom: 0;
-  right: 10%;
-  width: 100%;
-  z-index: 1000;
-}
-
-.text-soutiens {
-  margin-bottom: 15px;
-  color: white;
-  font-size: 1.5rem;
-  letter-spacing: 7px;
-  text-align: center;
-}
-
 .name-info {
   margin-top: -10px;
   margin-left: 15%;
@@ -524,24 +265,10 @@ let navigationItems = [
   font-size: large;
 }
 
-.name-info-mobile {
-  margin-left: 22px;
-  font-size: 1.3rem
-}
-
-.main-background {
-  background-color: #f4f4f4;
-}
-
 .profile-container {
   margin-top: -16%;
 }
 
-.btn-custom {
-  width: 100%;
-  background-color: transparent;
-}
-
 .background-profile-container {
   background-color: #ececec;
   color: white;
@@ -559,16 +286,6 @@ let navigationItems = [
   font-weight: 400;
 }
 
-.label-text {
-  font-weight: 400;
-  margin-left: 3%;
-  font-size: 1rem;
-}
-
-.profile-name {
-  margin-top: -15%;
-}
-
 .socialicons {
   width: 35px;
   max-width: 100px;
@@ -603,8 +320,6 @@ let navigationItems = [
   font-size: .8rem;
 }
 
-
-
 .social-container {
   background-color: #006d77;
   border-top-right-radius: 30px;
@@ -632,56 +347,15 @@ let navigationItems = [
   text-align: center;
 }
 
-.social-container2-mobile {
-  background-color: #0baab2;
-  z-index: 1000;
-  font-size: 1.2rem;
-  font-weight: 500;
-  color: white;
-}
-
 .social-icon-group-mobile {
   background-color: #0baab2;
 }
 
-.mini-profile-picture {
-  border-radius: 100px;
-}
-
-.btn-card-options {
-  background-color: #f4f4f4;
-  width: 50px;
-  margin-left: -12px;
-  margin-top: 10px;
-}
-
 .mobile-profile-picture-creator {
-  border-radius: 100px;
+  @apply rounded-full border-4 border-white;
   height: 150px;
   width: 150px;
-  border-radius: 50%;
   max-width: 150px;
-  border: 4px solid white;
-  z-index: 1000;
-}
-
-.mobile-header {
-  height: 50px;
-  margin-left: -13%;
-  margin-top: 6%;
-}
-
-.h1-navigation {
-  text-align: center;
-  font-weight: 600;
-  margin-bottom: 10%;
-}
-
-.mobile-profile-picture {
-  height: 40px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  border: 2px solid #a30e79;
-  margin-right: 10px
 }
 
 .profile-banner {
@@ -689,366 +363,4 @@ let navigationItems = [
   min-height: 200px
 }
 
-.v-navigation-drawer {
-  max-height: 100vh;
-}
-
-@media (min-width: 150px) and (max-width: 474px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(-30%) translateX(0%);
-  }
-
-  .socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 0px;
-    margin-left: 20px;
-  }
-}
-
-
-@media (min-width: 475px) and (max-width: 599px) {
-  .socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 0px;
-    margin-left: px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(-30%) translateX(0%);
-  }
-
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -112px;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 250px;
-  }
-
-  .name-info-mobile {
-    font-size: 1.6rem;
-  }
-}
-
-@media (min-width: 599px) and (max-width: 749px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(25%) translateX(0%);
-  }
-
-  .profile-container {
-
-    width: 110%;
-    margin-left: -3%;
-  }
-
-  .profile-container-mobile {
-
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 330px;
-  }
-}
-
-@media (min-width: 750px) and (max-width: 960px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.8) translateY(25%) translateX(0%);
-  }
-
-  .profile-container {
-    width: 110%;
-    margin-left: -3%;
-  }
-
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 425px;
-  }
-}
-
-@media (min-width: 960px) and (max-width: 1280px) {
-  .middle-col {
-    margin-left: -30px;
-  }
-
-  .text-soutiens {
-    font-size: 1.2rem;
-    letter-spacing: 5px;
-  }
-
-  .profile-container {
-    margin-top: -185px;
-    min-width: 480px
-  }
-
-  .card-youtube {
-    min-height: 270px;
-  }
-
-  .Je-soutien-container {
-    min-width: 325px;
-    margin-left: -35px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25%) translateX(-50px);
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-    margin-left: 20px;
-    margin-top: -6px
-  }
-
-  .occupation-info {
-    margin-left: 40px;
-    margin-top: -8px
-  }
-
-  .social-container {
-    margin-left: 80px;
-    min-width: 270px;
-    max-height: 40px
-  }
-
-  .social-container2 {
-    margin-left: 50px;
-    min-width: 250px;
-    max-height: 35px
-  }
-
-  .socialicons {
-    width: 34px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 25px;
-  }
-}
-
-@media (min-width: 1280px) and (max-width: 1600px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-    letter-spacing: 8px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25%) translateX(-50px);
-  }
-
-  .profile-container {
-    margin-top: -180px;
-  }
-
-  .card-youtube {
-    min-height: 290px;
-  }
-
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 350px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-    margin-left: 20px;
-    margin-top: -6px
-  }
-
-  .social-container {
-    margin-left: 90px;
-    min-width: 350;
-    max-height: 40px
-  }
-
-  .occupation-info {
-    margin-left: 70px;
-    margin-top: -8px
-  }
-
-  .social-container2 {
-
-    margin-left: 40px;
-    min-width: 290px;
-    max-height: 35px
-  }
-
-  .socialicons {
-    width: 34px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 25px;
-  }
-}
-
-@media (min-width: 1600px) and (max-width: 1919px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.4) translateY(25%) translateX(-40px);
-  }
-
-  .profile-container {
-    margin-top: -171px;
-  }
-
-  .card-youtube {
-    min-height: 355px;
-  }
-
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
-  .name-info {
-    font-size: 1.5rem;
-    margin-top: -4px;
-    margin-left: 35px;
-  }
-
-  .occupation-info {
-    font-size: 1.3rem;
-    margin-left: 75px;
-    margin-top: -2px
-  }
-
-  .social-container2 {
-    margin-left: 70px;
-    min-width: 300px;
-  }
-}
-
-@media (min-width: 1920px) and (max-width: 2559px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-  }
-
-  .profile-container {
-    margin-top: -160px;
-  }
-
-  .card-youtube {
-    min-height: 380px;
-  }
-
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.4) translateY(25%) translateX(-40px);
-  }
-
-  .name-info {
-    font-size: 1.5rem;
-    margin-left: 35px;
-    margin-top: -4px;
-  }
-
-  .social-container {
-    margin-left: 100px;
-  }
-
-  .occupation-info {
-    font-size: 1.3rem;
-    margin-left: 110px;
-    margin-top: -4px
-  }
-
-  .social-container2 {
-    margin-left: 30px;
-    min-width: 360px;
-  }
-
-  .socialicons {
-    width: 38px;
-    max-width: 100px;
-    margin-top: 13px;
-    margin-left: 40px;
-  }
-}
-
-@media (min-width: 2560px) {
-
-
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(25%) translateX(-20px);
-  }
-
-  .card-youtube {
-    min-height: 380px;
-  }
-
-  .text-soutiens {
-    font-size: 1.5rem;
-  }
-
-  .name-info {
-    font-size: 2rem;
-
-  }
-
-  .social-container {
-    margin-left: 140px;
-  }
-
-  .social-container2 {
-    margin-left: 130px;
-  }
-
-  .occupation-info {
-    font-size: 1.5rem;
-    margin-left: 65px;
-    margin-top: -6px
-  }
-
-  .socialicons {
-    width: 45px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 40px;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/manualusers/HutopyProfile.vue b/src/views/manualusers/HutopyProfile.vue
deleted file mode 100644
index 0ab9eb7..0000000
--- a/src/views/manualusers/HutopyProfile.vue
+++ /dev/null
@@ -1,936 +0,0 @@
-<template>
-  <div style="background-color: #f4f4f4;">
-    <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
-
-    <!-- "Mobile -->
-    <v-row class="fluid hidden-md-and-up social-mobile-container"
-      style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-      </v-col>
-    </v-row>
-
-    <!-- "PurpleLine" -->
-    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-    </v-row>
-
-    <!-- "Mobile-Profile" -->
-    <!-- "Profile picture" -->
-    <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
-      <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-    </v-row>
-
-    <!-- User Social Network Links -->
-    <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
-      hidden-md-and-down>
-
-      <!-- Facebook -->
-      <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.facebook.com/Hutopy">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
-              alt="Facebook"></v-img>
-          </a>
-        </v-col>
-        <!-- Instagram -->
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.instagram.com/hutopy.inc/">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
-              alt="Instagram"></v-img>
-          </a>
-        </v-col>
-        <!-- Profile picture - Small -->
-        <v-col cols="4" sm="4" xs="0" class="hidden-xs">
-          <v-row class="d-flex justify-center align-center">
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-          </v-row>
-        </v-col>
-
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://twitter.com/Hutopyinc">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png" alt="X"></v-img>
-          </a>
-        </v-col>
-
-        <v-spacer class="hidden-xs"> </v-spacer>
-
-
-
-      </v-row>
-
-      <!-- User informations Name title and description  -->
-      <v-row class="social-container-mobile">
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row class="d-flex justify-center">
-            {{ name }}
-          </v-row>
-        </v-col>
-        <v-spacer xs="12" sm="4"></v-spacer>
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row class="d-flex justify-center">
-            {{ title }}
-          </v-row>
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
-          class="social-icon-group-mobile">
-          <v-expansion-panels style="min-width: 320px;">
-            <v-col cols="12" offset="-1">
-              <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                text="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
-                title="À propos d'Hutopy :">
-
-
-              </v-expansion-panel>
-            </v-col>
-          </v-expansion-panels>
-        </v-container>
-      </v-row>
-    </v-container>
-
-    <!-- Bannière Pc -->
-    <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
-      hidden-sm-and-up>
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-      </v-col>
-    </v-row>
-    <v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
-      hidden-sm-and-up>
-    </v-row>
-
-    <!-- "Core (Menu / Center / Donation)" -->
-    <v-row>
-      <!-- "Menu" -->
-      <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
-        <v-col style="margin: 0;">
-          <v-row class="Hutopy-menu-sticky-mobile">
-            <v-spacer></v-spacer>
-            <v-col>
-              <v-container style=" overflow-y: hidden;">
-                <!-- Nav-Btn -->
-                <v-col cols="12" class="px-0">
-                  <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
-                    style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
-                  <v-list dense class="main-background">
-                    <v-list-item v-for="item in navigationItems" :key="item.link">
-                      <router-link :to="item.link">
-                        <v-btn text class="d-flex align-start align-center main-background" elevation="0"
-                          outlined="false">
-                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                          {{ item.text }}
-                        </v-btn>
-                      </router-link>
-                    </v-list-item>
-                  </v-list>
-                </v-col>
-              </v-container>
-            </v-col>
-          </v-row>
-          <v-row style="height: 1000px;"></v-row>
-        </v-col>
-      </v-col>
-
-      <!-- Profile Info Picture name title & description -->
-      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
-        <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
-          <v-container>
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-            <!-- User informations Name & title  -->
-            <v-container class="background-profile-container" style="margin-top: -8%;">
-              <v-row>
-                <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
-                  <h1 class="name-info">{{ name }}</h1>
-                </v-col>
-                <v-col></v-col>
-              </v-row>
-              <v-row>
-                <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
-                  <h1 class="occupation-info">{{ title }}</h1>
-                </v-col>
-                <v-col></v-col>
-              </v-row>
-
-              <!-- User Social Network Links -->
-              <v-row>
-                <v-spacer></v-spacer>
-                <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
-                  <v-row>
-                    <a href="https://www.facebook.com/Hutopy">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
-                        alt="Description image 2">
-                    </a>
-                    <a href="https://www.instagram.com/hutopy.inc/">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
-                        alt="Description image 2">
-                    </a>
-
-                    <a href="https://twitter.com/Hutopyinc">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/xblack.png"
-                        alt="Description image 2">
-                    </a>
-
-
-                  </v-row>
-                </v-col>
-                <v-col background-color="primary"></v-col>
-              </v-row>
-
-              <!-- Description  -->
-              <v-row>
-                <v-container
-                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
-                  <v-expansion-panels style="min-width: 320px;">
-                    <v-col cols="12" offset="-1">
-                      <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                        text="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
-                        title="À propos d'Hutopy :">
-                      </v-expansion-panel>
-                    </v-col>
-                  </v-expansion-panels>
-                </v-container>
-              </v-row>
-            </v-container>
-          </v-container>
-        </v-container>
-
-        <!--   <PostContentMenu style="margin-top: -30px;"></PostContentMenu>  Post   -->
-
-        <!-- Release v0.1 -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-            <!-- Title, date and btn -->
-            <v-col>
-              <v-row>
-                <v-col class="text-center">
-                  <h1 class="card-title">
-                    Déploiement de la version 0.10 d'Hutopy</h1>
-                </v-col>
-
-                <!--<v-col class="text-right">
-<v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                  </v-btn>          (a intégrer)
-                </v-col> -->
-              </v-row>
-
-            </v-col>
-
-            <!-- Card core Video/image & text -->
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
-              <v-container>
-                <v-img src="images/usersmedia/HutopyProfile/pictures/version.png" title="Release v0.1"></v-img>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
-                      24-04-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
-
-                  Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une
-                  aventure
-                  visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de
-                  fraîcheur en
-                  favorisant des interactions plus constructives entre les individus.
-
-                  Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur.
-                  Dans
-                  un futur
-                  proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites
-                  via
-                  l'onglet d'inscription et ont rempli quelques questions.
-
-                  Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La
-                  première
-                  consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire
-                  partie
-                  de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire
-                  progresser certaines fonctionnalités.
-
-                  Merci de visiter Hutopy.</p>
-
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-
-      </v-col>
-
-      <!-- "Large-Monitor-RightCol" Donation -->
-      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
-        <v-row>
-          <v-col>
-            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
-              <!-- Donnation -->
-              <v-card style="border-radius: 20px;">
-                <v-container>
-                  <v-row class="mb-0"
-                    style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                      JE SOUTIENS!
-                    </v-card-title>
-                  </v-row>
-                  <StripePayment creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
-                </v-container>
-              </v-card>
-            </v-container>
-            <v-container style="height: 1000px;">
-            </v-container>
-          </v-col>
-          <v-spacer>
-          </v-spacer>
-        </v-row>
-      </v-col>
-    </v-row>
-
-    <!-- "Mobile" Donation -->
-    <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
-      style="background-color: #6b0065; margin-top: 30px; text-align: center;">
-
-      <!-- Barre cliquable pour ouvrir le drawer -->
-      <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
-        style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
-        JE SOUTIENS
-      </v-btn>
-    </v-col>
-
-    <!-- Drawer du bas -->
-    <template>
-      <div>
-        <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
-          <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
-            <h1 class="text-soutiens">JE SOUTIENS</h1>
-            <StripePayment creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
-          </v-container>
-        </v-bottom-sheet>
-
-      </div>
-    </template>
-
-    <FooterLayout></FooterLayout>
-  </div>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-import { ref } from 'vue';
-import StripePayment from '../StripePayment.vue';
-let imageSrc = '/images/usersmedia/HutopyProfile/banners/banner01.png';
-let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
-let name = 'Hutopy'
-let title = 'Page officiel'
-let drawerbottom = ref(false)
-
-let navigationItems = [
-  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-  { icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
-  { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
-];
-</script>
-
-<style scoped>
-.invert-color {
-  filter: invert(1);
-}
-
-
-.Hutopy-menu-sticky-mobile {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: -40px;
-}
-
-.sticky-bottom-label {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: 20px;
-}
-
-.sticky-top-label {
-  position: sticky;
-  bottom: 0;
-  right: 10%;
-  width: 100%;
-  z-index: 1000;
-}
-
-.text-soutiens {
-  margin-bottom: 15px;
-  color: white;
-  font-size: 1.5rem;
-  letter-spacing: 7px;
-  text-align: center;
-}
-
-.name-info {
-  margin-top: -10px;
-  margin-left: 15%;
-}
-
-.occupation-info {
-  margin-left: 15%;
-  font-size: large;
-}
-
-.name-info-mobile {
-  margin-left: 22px;
-  font-size: 1.3rem
-}
-
-.main-background {
-  background-color: #f4f4f4;
-}
-
-.profile-container {
-  margin-top: -16%;
-}
-
-.btn-custom {
-  width: 100%;
-  background-color: transparent;
-}
-
-.background-profile-container {
-  background-color: #ececec;
-  color: white;
-  border-top: 3px solid #a30e79;
-  border-right: 3px solid #a30e79;
-  font-weight: 700;
-  font-size: 1.15rem;
-  border-radius: 25px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
-}
-
-.background-pink {
-  background-color: #23393b;
-  color: white;
-  font-weight: 400;
-}
-
-.label-text {
-  font-weight: 400;
-  margin-left: 3%;
-  font-size: 1rem;
-}
-
-.profile-name {
-  margin-top: -15%;
-}
-
-.socialicons {
-  width: 35px;
-  max-width: 100px;
-  margin-top: 3px;
-  margin-left: 40px;
-}
-
-.socialicons-mobile {
-  width: 35px;
-  max-width: 100px;
-  margin-top: 27px;
-  margin-left: 20px;
-}
-
-.youtube-card {
-  margin-left: 2%;
-  margin-right: 2%;
-  border-radius: 15px;
-  background-color: #f4f4f4;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
-}
-
-.card-title {
-  font-size: 1.4rem;
-  margin-top: 10px;
-}
-
-.card-date {
-  margin-left: 10px;
-  margin-top: -18px;
-  margin-bottom: -20px;
-  font-size: .8rem;
-}
-
-.social-container {
-  background-color: #6b0065;
-  border-top-right-radius: 30px;
-  border-bottom-right-radius: 30px;
-  font-size: 1.7rem;
-  font-weight: 600;
-  color: white;
-}
-
-.social-container2 {
-  background-color: #a30e79;
-  border-bottom-right-radius: 30px;
-  font-size: 1.4rem;
-  font-weight: 500;
-  color: white;
-}
-
-.social-container-mobile {
-  background-color: #a30e79;
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: white;
-  z-index: 1000;
-  margin: auto;
-  text-align: center;
-}
-
-.social-container2-mobile {
-  background-color: #0baab2;
-  z-index: 1000;
-  font-size: 1.2rem;
-  font-weight: 500;
-  color: white;
-}
-
-.social-icon-group-mobile {
-  background-color: #6b0065;
-}
-
-.mini-profile-picture {
-  border-radius: 100px;
-}
-
-.btn-card-options {
-  background-color: #f4f4f4;
-  width: 50px;
-  margin-left: -12px;
-  margin-top: 10px;
-}
-
-.mobile-profile-picture-creator {
-  border-radius: 100px;
-  height: 150px;
-  width: 150px;
-  border-radius: 50%;
-  max-width: 150px;
-  border: 4px solid white;
-  z-index: 1000;
-}
-
-.mobile-header {
-  height: 50px;
-  margin-left: -13%;
-  margin-top: 6%;
-}
-
-.h1-navigation {
-  text-align: center;
-  font-weight: 600;
-  margin-bottom: 10%;
-}
-
-.mobile-profile-picture {
-  height: 40px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  border: 2px solid #a30e79;
-  margin-right: 10px
-}
-
-.profile-banner {
-  margin-top: 25px;
-  min-height: 200px
-}
-
-.v-navigation-drawer {
-  max-height: 100vh;
-}
-
-@media (min-width: 150px) and (max-width: 474px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(-30%) translateX(0%);
-  }
-
-  .socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 0px;
-    margin-left: 20px;
-  }
-}
-
-
-@media (min-width: 475px) and (max-width: 599px) {
-  .socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 0px;
-    margin-left: px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(-30%) translateX(0%);
-  }
-
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -112px;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 250px;
-  }
-
-  .name-info-mobile {
-    font-size: 1.6rem;
-  }
-}
-
-@media (min-width: 599px) and (max-width: 749px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(25%) translateX(0%);
-  }
-
-  .profile-container {
-
-    width: 110%;
-    margin-left: -3%;
-  }
-
-  .profile-container-mobile {
-
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 330px;
-  }
-}
-
-@media (min-width: 750px) and (max-width: 960px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.8) translateY(25%) translateX(0%);
-  }
-
-  .profile-container {
-    width: 110%;
-    margin-left: -3%;
-  }
-
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-  }
-
-  .occupation-info {
-    font-size: 1rem;
-  }
-
-  .card-youtube {
-    min-height: 425px;
-  }
-}
-
-@media (min-width: 960px) and (max-width: 1280px) {
-  .middle-col {
-    margin-left: -30px;
-  }
-
-  .text-soutiens {
-    font-size: 1.2rem;
-    letter-spacing: 5px;
-  }
-
-  .profile-container {
-    margin-top: -185px;
-    min-width: 480px
-  }
-
-  .card-youtube {
-    min-height: 270px;
-  }
-
-  .Je-soutien-container {
-    min-width: 325px;
-    margin-left: -35px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25%) translateX(-50px);
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-    margin-left: 20px;
-    margin-top: -6px
-  }
-
-  .occupation-info {
-    margin-left: 40px;
-    margin-top: -8px
-  }
-
-  .social-container {
-    margin-left: 80px;
-    min-width: 270px;
-    max-height: 40px
-  }
-
-  .social-container2 {
-    margin-left: 50px;
-    min-width: 250px;
-    max-height: 35px
-  }
-
-  .socialicons {
-    width: 34px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 25px;
-  }
-}
-
-@media (min-width: 1280px) and (max-width: 1600px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-    letter-spacing: 8px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25%) translateX(-50px);
-  }
-
-  .profile-container {
-    margin-top: -180px;
-  }
-
-  .card-youtube {
-    min-height: 290px;
-  }
-
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 350px;
-  }
-
-  .name-info {
-    font-size: 1.2rem;
-    margin-left: 20px;
-    margin-top: -6px
-  }
-
-  .social-container {
-    margin-left: 90px;
-    min-width: 350;
-    max-height: 40px
-  }
-
-  .occupation-info {
-    margin-left: 70px;
-    margin-top: -8px
-  }
-
-  .social-container2 {
-
-    margin-left: 40px;
-    min-width: 290px;
-    max-height: 35px
-  }
-
-  .socialicons {
-    width: 34px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 25px;
-  }
-}
-
-@media (min-width: 1600px) and (max-width: 1919px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.4) translateY(25%) translateX(-40px);
-  }
-
-  .profile-container {
-    margin-top: -171px;
-  }
-
-  .card-youtube {
-    min-height: 355px;
-  }
-
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
-  .name-info {
-    font-size: 1.5rem;
-    margin-top: -4px;
-    margin-left: 35px;
-  }
-
-  .occupation-info {
-    font-size: 1.3rem;
-    margin-left: 75px;
-    margin-top: -2px
-  }
-
-  .social-container2 {
-    margin-left: 70px;
-    min-width: 300px;
-  }
-}
-
-@media (min-width: 1920px) and (max-width: 2559px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-  }
-
-  .profile-container {
-    margin-top: -160px;
-  }
-
-  .card-youtube {
-    min-height: 380px;
-  }
-
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
-  .mobile-profile-picture-creator {
-    transform: scale(1.4) translateY(25%) translateX(-40px);
-  }
-
-  .name-info {
-    font-size: 1.5rem;
-    margin-left: 35px;
-    margin-top: -4px;
-  }
-
-  .social-container {
-    margin-left: 100px;
-  }
-
-  .occupation-info {
-    font-size: 1.3rem;
-    margin-left: 110px;
-    margin-top: -4px
-  }
-
-  .social-container2 {
-    margin-left: 30px;
-    min-width: 360px;
-  }
-
-  .socialicons {
-    width: 38px;
-    max-width: 100px;
-    margin-top: 13px;
-    margin-left: 40px;
-  }
-}
-
-@media (min-width: 2560px) {
-  .mobile-profile-picture-creator {
-    transform: scale(1.5) translateY(25%) translateX(-20px);
-  }
-
-  .profile-container {
-    margin-top: -150px
-  }
-
-  .profile-banner {
-    margin-top: 25px;
-    min-height: 450px;
-  }
-
-  .card-youtube {
-    min-height: 380px;
-  }
-
-  .text-soutiens {
-    font-size: 1.5rem;
-  }
-
-  .name-info {
-    font-size: 2rem;
-
-  }
-
-  .social-container {
-    margin-left: 140px;
-  }
-
-  .social-container2 {
-    margin-left: 130px;
-  }
-
-  .occupation-info {
-    font-size: 1.5rem;
-    margin-left: 65px;
-    margin-top: -6px
-  }
-
-  .socialicons {
-    width: 45px;
-    max-width: 100px;
-    margin-top: 15px;
-    margin-left: 40px;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/manualusers/LeffetProfile.vue b/src/views/manualusers/LeffetProfile.vue
index 6792a38..d88b160 100644
--- a/src/views/manualusers/LeffetProfile.vue
+++ b/src/views/manualusers/LeffetProfile.vue
@@ -1,478 +1,264 @@
 <template>
-  <div style="background-color: #f4f4f4;">
-    <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
 
-    <!-- "Mobile -->
-    <v-row class="fluid hidden-md-and-up social-mobile-container"
-      style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-      </v-col>
-    </v-row>
-
-    <!-- "PurpleLine" -->
-    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-    </v-row>
-
-    <!-- "Mobile-Profile" -->
-    <!-- "Profile picture" -->
-    <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
-      <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-    </v-row>
-
-    <!-- User Social Network Links -->
-    <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
-      hidden-md-and-down>
-
-      <!-- Facebook -->
-      <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
-        <v-col cols="6" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.facebook.com/Hutopy">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
-              alt="Facebook"></v-img>
-          </a>
-        </v-col>
-
-        <!-- Profile picture - Small -->
-        <v-col cols="4" sm="4" xs="0" class="hidden-xs">
-          <v-row class="d-flex justify-center align-center">
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-          </v-row>
-        </v-col>
-
-        <!-- L'effet -->
-        <v-col cols="6" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://fondationleffet.ca/">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/leffetblack.png"
-              alt="Instagram"></v-img>
-          </a>
-        </v-col>
-      </v-row>
-
-      <!-- User informations Name title and description  -->
-      <v-row class="social-container-mobile">
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row class="d-flex justify-center" style="font-size: 2rem">
-            {{ name }}
-          </v-row>
-        </v-col>
-        <v-spacer xs="12" sm="4"></v-spacer>
-        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center ">
-          <v-row class="d-flex justify-center">
-            {{ title }}
-          </v-row>
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
-          class="social-icon-group-mobile">
-          <v-expansion-panels style="min-width: 320px;">
-            <v-col cols="12" offset="-1">
-              <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                text="La Fondation L'effet est un organisme de bienfaisance qui a trois fins principales, toutes pour prendre soin de son prochain. Notre principal objectif est de promouvoir l’éducation, en fournissant les ressources nécessaires et en donnant des conférences afin d’encourager la persévérance scolaire. Nous soulageons également les conditions des personnes atteintes d'un handicap en offrant des programmes récréatifs et d’autres services de soutien visant à appuyer leur mieux-être physique, mental et émotif afin qu’ils deviennent et demeurent des acteurs importants au sein de la collectivité. La Fondation L’effet encourage aussi les autres organismes et aide les initiatives individuelles ou corporatives à faire une différence positive dans leur communauté."
-                title="Notre mission">
-
-
-              </v-expansion-panel>
-            </v-col>
-          </v-expansion-panels>
-        </v-container>
-      </v-row>
-    </v-container>
-
-    <!-- Bannière Pc -->
-    <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
-      hidden-sm-and-up>
-      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-      </v-col>
-    </v-row>
-    <v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
-      hidden-sm-and-up>
-    </v-row>
-
-    <!-- "Core (Menu / Center / Donation)" -->
-    <v-row>
-      <!-- "Menu" -->
-      <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
-        <v-col style="margin: 0;">
-          <v-row class="Hutopy-menu-sticky-mobile">
-            <v-spacer></v-spacer>
-            <v-col>
-              <v-container style=" overflow-y: hidden;">
-                <!-- Nav-Btn -->
-                <v-col cols="12" class="px-0">
-                  <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
-                    style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
-                  <v-list dense class="main-background">
-                    <v-list-item v-for="item in navigationItems" :key="item.link">
-                      <router-link :to="item.link">
-                        <v-btn text class="d-flex align-start align-center main-background" elevation="0"
-                          outlined="false">
-                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                          {{ item.text }}
-                        </v-btn>
-                      </router-link>
-                    </v-list-item>
-                  </v-list>
-                </v-col>
-              </v-container>
-            </v-col>
-          </v-row>
-          <v-row style="height: 3000px;"></v-row>
-        </v-col>
-      </v-col>
-
-      <!-- Profile Info Picture name title & description -->
-      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
-        <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
-          <v-container>
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-            <!-- User informations Name & title  -->
-            <v-container class="background-profile-container" style="margin-top: -8%;">
-              <v-row>
-                <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
-                  <h1 class="name-info">{{ name }}</h1>
-                </v-col>
-                <v-col></v-col>
-              </v-row>
-              <v-row>
-                <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
-                  <h1 class="occupation-info">{{ title }}</h1>
-                </v-col>
-                <v-col></v-col>
-              </v-row>
-
-              <!-- User Social Network Links -->
-              <v-row>
-                <v-spacer></v-spacer>
-                <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
-                  <v-row>
-                    <a href="https://www.facebook.com/Hutopy">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
-                        alt="Description image 2">
-                    </a>
-                    <a href="https://fondationleffet.ca/">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/leffetblack.png"
-                        alt="Description image 2">
-                    </a>
-                  </v-row>
-                </v-col>
-                <v-col background-color="primary"></v-col>
-              </v-row>
-
-              <!-- Description  -->
-              <v-row>
-                <v-container
-                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
-                  <v-expansion-panels style="min-width: 320px;">
-                    <v-col cols="12" offset="-1">
-                      <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                        text="La Fondation L'effet est un organisme de bienfaisance qui a trois fins principales, toutes pour prendre soin de son prochain. Notre principal objectif est de promouvoir l’éducation, en fournissant les ressources nécessaires et en donnant des conférences afin d’encourager la persévérance scolaire. Nous soulageons également les conditions des personnes atteintes d'un handicap en offrant des programmes récréatifs et d’autres services de soutien visant à appuyer leur mieux-être physique, mental et émotif afin qu’ils deviennent et demeurent des acteurs importants au sein de la collectivité. La Fondation L’effet encourage aussi les autres organismes et aide les initiatives individuelles ou corporatives à faire une différence positive dans leur communauté."
-                        title="Notre mission">
-                      </v-expansion-panel>
-                    </v-col>
-                  </v-expansion-panels>
-                </v-container>
-              </v-row>
-            </v-container>
-          </v-container>
-        </v-container>
-        <v-container>
-        </v-container>
-
-        <v-container style="margin-top: -30px"> <v-card class="flow-menu m-0 youtube-card">
-            <!-- Title, date and btn -->
-            <v-col>
-              <v-row>
-                <v-col class="text-center">
-                  <h1 class="card-title">
-                    DOCU-PODCAST</h1>
-                </v-col>
-
-                <!--<v-col class="text-right">
-<v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                  </v-btn>          (a intégrer)
-                </v-col> -->
-              </v-row>
-
-            </v-col>
-
-            <!-- Card core Video/image & text -->
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-              <v-container>
-                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                  src="https://www.youtube.com/embed/3MqKVf1CEIQ?si=aV03Xq2ZNwlv1DWu" title="Guillaumem" frameborder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  allowfullscreen></iframe>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px">
-                      24-04-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
-
-                  C’est un honneur de vous
-                  En exclusivité : Voici l'Épisode 8 de la Saison 2 du Docu-Podcast de Cédieu Léveillé avec le Fondateur
-                  de la
-                  Fondation l'Effet, Marc-Olivier Hébert. Cette homme est un Ange sur 2 pattes et un Master de
-                  l'Introspection :
-                  '' Quand j'ai Compris que Mon Seul Obstacle Était Moi-même '' ! Merci de continuer à faire partie de
-                  cette
-                  AVENTURE et à être les PIONNIERS de mon Docu-Podcast. Seuls vous, Fidèles PIADINS avez le DROIT à
-                  l'ENTIÈRETÉ
-                  de ces images !!!
-                  Marc-Olivier
-                  Marc-Olivier Hébert
-                  Le nom de la Fondation vient de l'origine du phénomène que l’on nomme ‘’L’effet Papillon’’. Cette
-                  théorie
-                  implique que le battement d’ailes d’un papillon au Brésil peut provoquer une tempête au Texas.
-
-                  Selon l’expression, inventée par le météorologue Edward Lorenz, il suffit de modifier de façon infime
-                  un
-                  paramètre dans un modèle météo pour que celui-ci s’amplifie progressivement et provoque, à long terme,
-                  des
-                  changements colossaux. Cette notion ne concerne plus seulement la météo, mais s’applique également aux
-                  sciences humaines et à l’environnement. <br><br>
-
-                  L'effet papillon est matérialisé par une chaîne d'événements qui se suivent les uns les autres et dont
-                  le
-                  précédent influe sur le suivant. Ainsi, on part d'un événement minuscule au début de la chaîne pour
-                  arriver à
-                  une chose gigantesque.
-                  <br><br>
-
-                  Chaque action que nous entreprenons crée automatiquement un résultat. Il est à nous de choisir qu’il
-                  soit
-                  toujours positif.
-                  <br><br>
-
-                  Donc, voici toute l’essence de la nature de cette fondation. Que de petites actions et gestes positifs
-                  créeront automatiquement de grandes et merveilleuses différences positives dans la vie des
-                  participants
-                  et des
-                  bénéficiaires.
-                </p>
-
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card></v-container>
-
-        <!-- Le nom -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-            <!-- Title, date and btn -->
-            <v-col>
-              <v-row>
-                <v-col class="text-center">
-                  <h1 class="card-title">
-                    C'EST PARTI POUR 2024!</h1>
-                </v-col>
-                <!--
-                <v-col class="text-right">
-                 <v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                  </v-btn>          (a intégrer)
-                </v-col>  -->
-              </v-row>
-
-            </v-col>
-
-            <!-- Card core Video/image & text -->
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-              <v-container>
-                <v-img src="images/usersmedia/leffet/profilepictures/leffetProfile01.png" title="Guillaumem"></v-img>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px">
-                      22-04-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Le nom de la Fondation vient de
-                  l'origine du phénomène que l’on nomme ‘’L’effet Papillon’’. Cette théorie implique que le battement
-                  d’ailes d’un papillon au Brésil peut provoquer une tempête au Texas.<br><br>
-
-                  Selon l’expression, inventée par le météorologue Edward Lorenz, il suffit de modifier de façon infime
-                  un paramètre dans un modèle météo pour que celui-ci s’amplifie progressivement et provoque, à long
-                  terme,
-                  des changements colossaux. Cette notion ne concerne plus seulement la météo, mais s’applique également
-                  aux
-                  sciences humaines et à l’environnement.<br>
-                  <br>
-
-                  L'effet papillon est matérialisé par une chaîne d'événements qui se suivent les uns les autres et dont
-                  le précédent influe sur le suivant. Ainsi, on part d'un événement minuscule au début de la chaîne pour
-                  arriver à une chose gigantesque.<br>
-                  <br>
-
-
-                  Chaque action que nous entreprenons crée automatiquement un résultat. Il est à nous de choisir qu’il
-                  soit toujours positif.
-
-                  Donc, voici toute l’essence de la nature de cette fondation. Que de petites actions et gestes positifs
-                  créeront automatiquement de grandes et merveilleuses différences positives dans la vie des
-                  participants et
-                  des bénéficiaires.
-                </p>
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-
-
-      </v-col>
-
-      <!-- "Large-Monitor-RightCol" Donation -->
-      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
-        <v-row>
-          <v-col>
-            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
-              <!-- Donnation -->
-              <v-card style="border-radius: 20px;">
-                <v-container>
-                  <v-row class="mb-0"
-                    style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                      JE SOUTIENS!
-                    </v-card-title>
-                  </v-row>
-                  <StripePayment creator-id="1578f5ee-6cd0-42ac-9959-249cd10b6bfb"></StripePayment>
-                </v-container>
-              </v-card>
-            </v-container>
-            <v-container style="height: 3000px;">
-            </v-container>
-          </v-col>
-          <v-spacer>
-          </v-spacer>
-        </v-row>
-      </v-col>
-    </v-row>
-
-    <!-- "Mobile" Donation -->
-    <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
-      style="background-color: #6b0065; margin-top: 30px; text-align: center;">
-
-      <!-- Barre cliquable pour ouvrir le drawer -->
-      <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
-        style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
-        JE SOUTIENS
-      </v-btn>
+  <v-row class="fluid" style="margin-top: -65px; position: relative; z-index: 0; ">
+    <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
+      <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
+             style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
     </v-col>
+  </v-row>
+  <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
+  </v-row>
 
-    <!-- Drawer du bas -->
-    <template>
-      <div>
-        <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
-          <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
-            <h1 class="text-soutiens">JE SOUTIENS</h1>
-            <StripePayment creator-id="1578f5ee-6cd0-42ac-9959-249cd10b6bfb"></StripePayment>
+  <!-- "Core (Menu / Center / Donation)" -->
+  <v-row>
+
+    <!-- Profile Info Picture name title & description -->
+    <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
+      <v-container class="profile-container">
+        <v-container>
+          <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+          <!-- User informations Name & title  -->
+          <v-container class="background-profile-container" style="margin-top: -8%;">
+            <v-row>
+              <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
+                <h1 class="name-info">{{ name }}</h1>
+              </v-col>
+              <v-col></v-col>
+            </v-row>
+            <v-row>
+              <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
+                <h1 class="occupation-info">{{ title }}</h1>
+              </v-col>
+              <v-col></v-col>
+            </v-row>
+
+            <!-- User Social Network Links -->
+            <v-row>
+              <v-spacer></v-spacer>
+              <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
+                <v-row>
+                  <a href="https://www.facebook.com/Hutopy">
+                    <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
+                         alt="Description image 2">
+                  </a>
+                  <a href="https://fondationleffet.ca/">
+                    <img class="socialicons" src="/images/hutopymedia/icons/black/leffetblack.png"
+                         alt="Description image 2">
+                  </a>
+                </v-row>
+              </v-col>
+              <v-col background-color="primary"></v-col>
+            </v-row>
+
+            <!-- Description  -->
+            <v-row>
+              <v-container
+                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
+                <v-expansion-panels style="min-width: 320px;">
+                  <v-col cols="12" offset="-1">
+                    <v-expansion-panel class="background-pink text-justify" style="color: white;"
+                                       text="La Fondation L'effet est un organisme de bienfaisance qui a trois fins principales, toutes pour prendre soin de son prochain. Notre principal objectif est de promouvoir l’éducation, en fournissant les ressources nécessaires et en donnant des conférences afin d’encourager la persévérance scolaire. Nous soulageons également les conditions des personnes atteintes d'un handicap en offrant des programmes récréatifs et d’autres services de soutien visant à appuyer leur mieux-être physique, mental et émotif afin qu’ils deviennent et demeurent des acteurs importants au sein de la collectivité. La Fondation L’effet encourage aussi les autres organismes et aide les initiatives individuelles ou corporatives à faire une différence positive dans leur communauté."
+                                       title="Notre mission">
+                    </v-expansion-panel>
+                  </v-col>
+                </v-expansion-panels>
+              </v-container>
+            </v-row>
           </v-container>
-        </v-bottom-sheet>
+        </v-container>
+      </v-container>
+      <v-container>
+      </v-container>
 
-      </div>
-    </template>
+      <v-container style="margin-top: -30px">
+        <v-card class="flow-menu m-0 youtube-card">
+          <!-- Title, date and btn -->
+          <v-col>
+            <v-row>
+              <v-col class="text-center">
+                <h1 class="card-title">
+                  DOCU-PODCAST</h1>
+              </v-col>
 
-    <FooterLayout></FooterLayout>
-  </div>
+              <!--<v-col class="text-right">
+<v-btn class="btn-card-options" flat tile elevation="0">
+                  <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
+                </v-btn>          (a intégrer)
+              </v-col> -->
+            </v-row>
+
+          </v-col>
+
+          <!-- Card core Video/image & text -->
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+            <v-container>
+              <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                      src="https://www.youtube.com/embed/3MqKVf1CEIQ?si=aV03Xq2ZNwlv1DWu" title="Guillaumem"
+                      frameborder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowfullscreen></iframe>
+
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px">
+                    24-04-2024
+                  </h1>
+                </v-col>
+              </v-row>
+
+
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
+
+                C’est un honneur de vous
+                En exclusivité : Voici l'Épisode 8 de la Saison 2 du Docu-Podcast de Cédieu Léveillé avec le Fondateur
+                de la
+                Fondation l'Effet, Marc-Olivier Hébert. Cette homme est un Ange sur 2 pattes et un Master de
+                l'Introspection :
+                '' Quand j'ai Compris que Mon Seul Obstacle Était Moi-même '' ! Merci de continuer à faire partie de
+                cette
+                AVENTURE et à être les PIONNIERS de mon Docu-Podcast. Seuls vous, Fidèles PIADINS avez le DROIT à
+                l'ENTIÈRETÉ
+                de ces images !!!
+                Marc-Olivier
+                Marc-Olivier Hébert
+                Le nom de la Fondation vient de l'origine du phénomène que l’on nomme ‘’L’effet Papillon’’. Cette
+                théorie
+                implique que le battement d’ailes d’un papillon au Brésil peut provoquer une tempête au Texas.
+
+                Selon l’expression, inventée par le météorologue Edward Lorenz, il suffit de modifier de façon infime
+                un
+                paramètre dans un modèle météo pour que celui-ci s’amplifie progressivement et provoque, à long terme,
+                des
+                changements colossaux. Cette notion ne concerne plus seulement la météo, mais s’applique également aux
+                sciences humaines et à l’environnement. <br><br>
+
+                L'effet papillon est matérialisé par une chaîne d'événements qui se suivent les uns les autres et dont
+                le
+                précédent influe sur le suivant. Ainsi, on part d'un événement minuscule au début de la chaîne pour
+                arriver à
+                une chose gigantesque.
+                <br><br>
+
+                Chaque action que nous entreprenons crée automatiquement un résultat. Il est à nous de choisir qu’il
+                soit
+                toujours positif.
+                <br><br>
+
+                Donc, voici toute l’essence de la nature de cette fondation. Que de petites actions et gestes positifs
+                créeront automatiquement de grandes et merveilleuses différences positives dans la vie des
+                participants
+                et des
+                bénéficiaires.
+              </p>
+
+
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+            </v-container>
+          </div>
+        </v-card>
+      </v-container>
+
+      <!-- Le nom -->
+      <v-container>
+        <v-card class="flow-menu m-0 youtube-card">
+          <!-- Title, date and btn -->
+          <v-col>
+            <v-row>
+              <v-col class="text-center">
+                <h1 class="card-title">
+                  C'EST PARTI POUR 2024!</h1>
+              </v-col>
+              <!--
+              <v-col class="text-right">
+               <v-btn class="btn-card-options" flat tile elevation="0">
+                  <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
+                </v-btn>          (a intégrer)
+              </v-col>  -->
+            </v-row>
+
+          </v-col>
+
+          <!-- Card core Video/image & text -->
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+            <v-container>
+              <v-img src="images/usersmedia/leffet/profilepictures/leffetProfile01.png" title="Guillaumem"></v-img>
+
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px">
+                    22-04-2024
+                  </h1>
+                </v-col>
+              </v-row>
+
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Le nom de la Fondation vient de
+                l'origine du phénomène que l’on nomme ‘’L’effet Papillon’’. Cette théorie implique que le battement
+                d’ailes d’un papillon au Brésil peut provoquer une tempête au Texas.<br><br>
+
+                Selon l’expression, inventée par le météorologue Edward Lorenz, il suffit de modifier de façon infime
+                un paramètre dans un modèle météo pour que celui-ci s’amplifie progressivement et provoque, à long
+                terme,
+                des changements colossaux. Cette notion ne concerne plus seulement la météo, mais s’applique également
+                aux
+                sciences humaines et à l’environnement.<br>
+                <br>
+
+                L'effet papillon est matérialisé par une chaîne d'événements qui se suivent les uns les autres et dont
+                le précédent influe sur le suivant. Ainsi, on part d'un événement minuscule au début de la chaîne pour
+                arriver à une chose gigantesque.<br>
+                <br>
+
+
+                Chaque action que nous entreprenons crée automatiquement un résultat. Il est à nous de choisir qu’il
+                soit toujours positif.
+
+                Donc, voici toute l’essence de la nature de cette fondation. Que de petites actions et gestes positifs
+                créeront automatiquement de grandes et merveilleuses différences positives dans la vie des
+                participants et
+                des bénéficiaires.
+              </p>
+
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+            </v-container>
+          </div>
+        </v-card>
+      </v-container>
+
+    </v-col>
+  </v-row>
+  
 </template>
 
 <script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-import { ref } from 'vue';
-import StripePayment from '../StripePayment.vue';
 let imageSrc = '/images/usersmedia/leffet/banners/banner02.png';
 let profilePicture = '/images/usersmedia/leffet/profilepictures/leffetProfile01.png';
 let name = 'L\'EFFET'
 let title = 'Page officiel'
-let drawerbottom = ref(false)
-
-let navigationItems = [
-  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-  { icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
-  { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
-];
 </script>
 
 <style scoped>
-.invert-color {
-  filter: invert(1);
-}
-
-
-.Hutopy-menu-sticky-mobile {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: -40px;
-}
-
-.sticky-bottom-label {
-  position: sticky;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000;
-  margin-top: 20px;
-}
-
-.sticky-top-label {
-  position: sticky;
-  bottom: 0;
-  right: 10%;
-  width: 100%;
-  z-index: 1000;
-}
-
-.text-soutiens {
-  margin-bottom: 15px;
-  color: white;
-  font-size: 1.5rem;
-  letter-spacing: 7px;
-  text-align: center;
-}
 
 .name-info {
   margin-top: -10px;
@@ -484,24 +270,10 @@ let navigationItems = [
   font-size: large;
 }
 
-.name-info-mobile {
-  margin-left: 22px;
-  font-size: 1.3rem
-}
-
-.main-background {
-  background-color: #f4f4f4;
-}
-
 .profile-container {
   margin-top: -16%;
 }
 
-.btn-custom {
-  width: 100%;
-  background-color: transparent;
-}
-
 .background-profile-container {
   background-color: #ececec;
   color: white;
@@ -519,16 +291,6 @@ let navigationItems = [
   font-weight: 400;
 }
 
-.label-text {
-  font-weight: 400;
-  margin-left: 3%;
-  font-size: 1rem;
-}
-
-.profile-name {
-  margin-top: -15%;
-}
-
 .socialicons {
   width: 35px;
   max-width: 100px;
@@ -556,13 +318,6 @@ let navigationItems = [
   margin-top: 10px;
 }
 
-.card-date {
-  margin-left: 10px;
-  margin-top: -18px;
-  margin-bottom: -20px;
-  font-size: .8rem;
-}
-
 .social-container {
   background-color: #79cc02;
   border-top-right-radius: 30px;
@@ -590,29 +345,10 @@ let navigationItems = [
   text-align: center;
 }
 
-.social-container2-mobile {
-  background-color: #fcc602;
-  z-index: 1000;
-  font-size: 1.2rem;
-  font-weight: 500;
-  color: white;
-}
-
 .social-icon-group-mobile {
   background-color: #588801;
 }
 
-.mini-profile-picture {
-  border-radius: 100px;
-}
-
-.btn-card-options {
-  background-color: #f4f4f4;
-  width: 50px;
-  margin-left: -12px;
-  margin-top: 10px;
-}
-
 .mobile-profile-picture-creator {
   height: 150px;
   width: 150px;
@@ -622,34 +358,11 @@ let navigationItems = [
   z-index: 1000;
 }
 
-.mobile-header {
-  height: 50px;
-  margin-left: -13%;
-  margin-top: 6%;
-}
-
-.h1-navigation {
-  text-align: center;
-  font-weight: 600;
-  margin-bottom: 10%;
-}
-
-.mobile-profile-picture {
-  height: 40px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  border: 2px solid #a30e79;
-  margin-right: 10px
-}
-
 .profile-banner {
   margin-top: 25px;
   min-height: 200px
 }
 
-.v-navigation-drawer {
-  max-height: 100vh;
-}
-
 @media (min-width: 150px) and (max-width: 474px) {
   .mobile-profile-picture-creator {
     transform: scale(1.5) translateY(-30%) translateX(0%);
@@ -676,12 +389,6 @@ let navigationItems = [
     transform: scale(1.5) translateY(-30%) translateX(0%);
   }
 
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -112px;
-  }
-
   .occupation-info {
     font-size: 1rem;
   }
@@ -689,10 +396,6 @@ let navigationItems = [
   .card-youtube {
     min-height: 250px;
   }
-
-  .name-info-mobile {
-    font-size: 1.6rem;
-  }
 }
 
 @media (min-width: 599px) and (max-width: 749px) {
@@ -706,13 +409,6 @@ let navigationItems = [
     margin-left: -3%;
   }
 
-  .profile-container-mobile {
-
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
   .name-info {
     font-size: 1.2rem;
   }
@@ -736,12 +432,6 @@ let navigationItems = [
     margin-left: -3%;
   }
 
-  .profile-container-mobile {
-    width: 110%;
-    margin-left: -3%;
-    margin-top: -110px;
-  }
-
   .name-info {
     font-size: 1.2rem;
   }
@@ -760,11 +450,6 @@ let navigationItems = [
     margin-left: -30px;
   }
 
-  .text-soutiens {
-    font-size: 1.2rem;
-    letter-spacing: 5px;
-  }
-
   .profile-container {
     margin-top: -185px;
     min-width: 480px
@@ -774,11 +459,6 @@ let navigationItems = [
     min-height: 270px;
   }
 
-  .Je-soutien-container {
-    min-width: 325px;
-    margin-left: -35px;
-  }
-
   .mobile-profile-picture-creator {
     transform: scale(1.3) translateY(25%) translateX(-50px);
   }
@@ -815,10 +495,6 @@ let navigationItems = [
 }
 
 @media (min-width: 1280px) and (max-width: 1600px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-    letter-spacing: 8px;
-  }
 
   .mobile-profile-picture-creator {
     transform: scale(1.3) translateY(25%) translateX(-50px);
@@ -832,14 +508,6 @@ let navigationItems = [
     min-height: 290px;
   }
 
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 350px;
-  }
-
   .name-info {
     font-size: 1.2rem;
     margin-left: 20px;
@@ -848,7 +516,7 @@ let navigationItems = [
 
   .social-container {
     margin-left: 90px;
-    min-width: 350;
+    min-width: 350px;
     max-height: 40px
   }
 
@@ -873,11 +541,6 @@ let navigationItems = [
 }
 
 @media (min-width: 1600px) and (max-width: 1919px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-
-  }
-
   .mobile-profile-picture-creator {
     transform: scale(1.4) translateY(25%) translateX(-40px);
   }
@@ -890,14 +553,6 @@ let navigationItems = [
     min-height: 355px;
   }
 
-  .menu-col {
-    margin-left: -4%;
-  }
-
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
   .name-info {
     font-size: 1.5rem;
     margin-top: -4px;
@@ -917,9 +572,6 @@ let navigationItems = [
 }
 
 @media (min-width: 1920px) and (max-width: 2559px) {
-  .text-soutiens {
-    font-size: 1.3rem;
-  }
 
   .profile-container {
     margin-top: -160px;
@@ -929,10 +581,6 @@ let navigationItems = [
     min-height: 380px;
   }
 
-  .Je-soutien-container {
-    min-width: 400px;
-  }
-
   .mobile-profile-picture-creator {
     transform: scale(1.4) translateY(25%) translateX(-40px);
   }
@@ -979,10 +627,6 @@ let navigationItems = [
     min-height: 380px;
   }
 
-  .text-soutiens {
-    font-size: 1.5rem;
-  }
-
   .name-info {
     font-size: 2rem;
 
diff --git a/src/views/manualusers/MathieuCaron.vue b/src/views/manualusers/MathieuCaron.vue
index 1a7987a..4d45120 100644
--- a/src/views/manualusers/MathieuCaron.vue
+++ b/src/views/manualusers/MathieuCaron.vue
@@ -1,1072 +1,383 @@
 <template>
-    <div style="background-color: #f4f4f4;">
-        <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
 
-        <!-- "Mobile -->
-        <v-row class="fluid hidden-md-and-up social-mobile-container"
-            style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
-            <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-                    style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-            </v-col>
-        </v-row>
+  <v-row class="fluid" style="margin-top: -65px; position: relative; z-index: 0;">
+    <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
+      <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
+             style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+    </v-col>
+  </v-row>
 
-        <!-- "PurpleLine" -->
-        <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-        </v-row>
+  <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
+  </v-row>
 
-        <!-- "Mobile-Profile" -->
-        <!-- "Profile picture" -->
-        <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
-            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-        </v-row>
+  <!-- "Core (Menu / Center / Donation)" -->
+  <v-row>
 
-        <!-- User Social Network Links -->
-        <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
-            hidden-md-and-down>
-
-            <!-- Facebook -->
-            <v-row no-gutters class="d-flex justify-space-between align-center"
-                style="margin-left: 3%; margin-right: 3%;">
-                <v-col cols="6" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
-                    class="d-flex justify-center align-center">
-                    <a href="https://www.facebook.com/MathieuCaronPro/">
-                        <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
-                            alt="Facebook"></v-img>
-                    </a>
-                </v-col>
-
-                <!-- Profile picture - Small -->
-                <v-col cols="4" sm="4" xs="0" class="hidden-xs">
-                    <v-row class="d-flex justify-center align-center">
-                        <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-                    </v-row>
-                </v-col>
-
-                <!-- L'effet -->
-                <v-col cols="6" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
-                    class="d-flex justify-center align-center">
-                    <a href="https://www.youtube.com/@lesinterviewsatypiquesdema4692">
-                        <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/youtube.png"
-                            alt="Instagram"></v-img>
-                    </a>
-                </v-col>
-            </v-row>
-
-            <!-- User informations Name title and description  -->
-            <v-row class="social-container-mobile">
-                <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-                    <v-row class="d-flex justify-center" style="font-size: 2rem">
-                        {{ name }}
-                    </v-row>
-                </v-col>
-                <v-spacer xs="12" sm="4"></v-spacer>
-                <v-col cols="12" xs="12" sm="4" class="d-flex justify-center ">
-                    <v-row class="d-flex justify-center">
-                        {{ title }}
-                    </v-row>
-                </v-col>
+    <!-- Profile Info Picture name title & description -->
+    <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
+      <v-container class="profile-container">
+        <v-container>
+          <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+          <!-- User informations Name & title  -->
+          <v-container class="background-profile-container" style="margin-top: -8%;">
+            <v-row>
+              <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
+                <h1 class="name-info">{{ name }}</h1>
+              </v-col>
+              <v-col></v-col>
             </v-row>
             <v-row>
-                <v-container
-                    style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
-                    class="social-icon-group-mobile">
-                    <v-expansion-panels style="min-width: 320px;">
-                        <v-col cols="12" offset="-1">
-                            <v-expansion-panel class="background-pink text-justify" style="color: white;"
-                                text="Mathieu Caron est un intervieweur et un conférencier peu banal. Étant lui-même neuro-atypique, il concilie travail, entrevues et conférences avec l’objectif de démystifier le trouble de l’autisme ainsi que promouvoir la différence et le droit d’être atypique.
-
-Il réalise des allocutions et de nombreuses entrevues avec des personnalités du monde artistique, politique et des affaires. C’est sur les médias sociaux, dont Facebook et YouTube, qu’il diffuse ces communications et rencontres inusitées. Son engagement et le dépassement de soi dans ses réalisations lui permettent de contribuer à élargir l’acceptation sociale de la différence et de la singularité."
-                                title="À propos des Entrevues Atypiques :">
-
-
-                            </v-expansion-panel>
-                        </v-col>
-                    </v-expansion-panels>
-                </v-container>
+              <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
+                <h1 class="occupation-info">{{ title }}</h1>
+              </v-col>
+              <v-col></v-col>
             </v-row>
-        </v-container>
 
-        <!-- Bannière Pc -->
-        <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
-            hidden-sm-and-up>
-            <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-                    style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-            </v-col>
-        </v-row>
-        <v-row class="hidden-sm-and-down"
-            style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);" hidden-sm-and-up>
-        </v-row>
+            <!-- User Social Network Links -->
+            <v-row>
+              <v-spacer></v-spacer>
+              <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
+                <v-row>
+                  <a href="https://www.facebook.com/MathieuCaronPro/">
+                    <img class="socialicons"
+                         src="/images/hutopymedia/icons/black/facebookblack.png"
+                         alt="Description image 2">
+                  </a>
+                  <a href="https://www.youtube.com/@lesinterviewsatypiquesdema4692">
+                    <img class="socialicons" src="/images/hutopymedia/icons/black/youtube.png"
+                         alt="Description image 2">
+                  </a>
+                </v-row>
+              </v-col>
+              <v-col background-color="primary"></v-col>
+            </v-row>
 
-        <!-- "Core (Menu / Center / Donation)" -->
-        <v-row>
-            <!-- "Menu" -->
-            <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
-                <v-col style="margin: 0;">
-                    <v-row class="Hutopy-menu-sticky-mobile">
-                        <v-spacer></v-spacer>
-                        <v-col>
-                            <v-container style=" overflow-y: hidden;">
-                                <!-- Nav-Btn -->
-                                <v-col cols="12" class="px-0">
-                                    <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
-                                        style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
-                                    <v-list dense class="main-background">
-                                        <v-list-item v-for="item in navigationItems" :key="item.link">
-                                            <router-link :to="item.link">
-                                                <v-btn text class="d-flex align-start align-center main-background"
-                                                    elevation="0" outlined="false">
-                                                    <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                                                    {{ item.text }}
-                                                </v-btn>
-                                            </router-link>
-                                        </v-list-item>
-                                    </v-list>
-                                </v-col>
-                            </v-container>
-                        </v-col>
-                    </v-row>
-                    <v-row style="height: 3000px;"></v-row>
-                </v-col>
-            </v-col>
-
-            <!-- Profile Info Picture name title & description -->
-            <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
-                <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
-                    <v-container>
-                        <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-                        <!-- User informations Name & title  -->
-                        <v-container class="background-profile-container" style="margin-top: -8%;">
-                            <v-row>
-                                <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
-                                    <h1 class="name-info">{{ name }}</h1>
-                                </v-col>
-                                <v-col></v-col>
-                            </v-row>
-                            <v-row>
-                                <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
-                                    <h1 class="occupation-info">{{ title }}</h1>
-                                </v-col>
-                                <v-col></v-col>
-                            </v-row>
-
-                            <!-- User Social Network Links -->
-                            <v-row>
-                                <v-spacer></v-spacer>
-                                <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
-                                    <v-row>
-                                        <a href="https://www.facebook.com/MathieuCaronPro/">
-                                            <img class="socialicons"
-                                                src="/images/hutopymedia/icons/black/facebookblack.png"
-                                                alt="Description image 2">
-                                        </a>
-                                        <a href="https://www.youtube.com/@lesinterviewsatypiquesdema4692">
-                                            <img class="socialicons" src="/images/hutopymedia/icons/black/youtube.png"
-                                                alt="Description image 2">
-                                        </a>
-                                    </v-row>
-                                </v-col>
-                                <v-col background-color="primary"></v-col>
-                            </v-row>
-
-                            <!-- Description  -->
-                            <v-row>
-                                <v-container
-                                    style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
-                                    <v-expansion-panels style="min-width: 320px;">
-                                        <v-col cols="12" offset="-1">
-                                            <v-expansion-panel class="background-pink text-justify"
-                                                style="color: white;"
-                                                text="Mathieu Caron est un intervieweur et un conférencier peu banal. Étant lui-même neuro-atypique, il concilie travail, entrevues et conférences avec l’objectif de démystifier le trouble de l’autisme ainsi que promouvoir la différence et le droit d’être atypique.
+            <!-- Description  -->
+            <v-row>
+              <v-container
+                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
+                <v-expansion-panels style="min-width: 320px;">
+                  <v-col cols="12" offset="-1">
+                    <v-expansion-panel class="background-pink text-justify"
+                                       style="color: white;"
+                                       text="Mathieu Caron est un intervieweur et un conférencier peu banal. Étant lui-même neuro-atypique, il concilie travail, entrevues et conférences avec l’objectif de démystifier le trouble de l’autisme ainsi que promouvoir la différence et le droit d’être atypique.
 
 Il réalise des allocutions et de nombreuses entrevues avec des personnalités du monde artistique, politique et des affaires. C’est sur les médias sociaux, dont Facebook et YouTube, qu’il diffuse ces communications et rencontres inusitées. Son engagement et le dépassement de soi dans ses réalisations lui permettent de contribuer à élargir l’acceptation sociale de la différence et de la singularité."
-                                                title="À propos des Entrevues Atypiques:">
-                                            </v-expansion-panel>
-                                        </v-col>
-                                    </v-expansion-panels>
-                                </v-container>
-                            </v-row>
-                        </v-container>
-                    </v-container>
-                </v-container>
-                <v-container>
-                </v-container>
+                                       title="À propos des Entrevues Atypiques:">
+                    </v-expansion-panel>
+                  </v-col>
+                </v-expansion-panels>
+              </v-container>
+            </v-row>
+          </v-container>
+        </v-container>
+      </v-container>
+      <v-container>
+      </v-container>
 
-                <!-- LES DENIS DROLETS -->
-                <v-container style="margin-top: -30px"> <v-card class="flow-menu m-0 youtube-card">
-                        <!-- Title, date and btn -->
-                        <v-col>
-                            <v-row>
-                                <v-col class="text-center">
-                                    <h1 class="card-title">
-                                        ENTREVUE ATYPIQUE AVEC LES DENIS DROLETS</h1>
-                                </v-col>
+      <!-- LES DENIS DROLETS -->
+      <v-container style="margin-top: -30px">
+        <v-card class="flow-menu m-0 youtube-card">
+          <!-- Title, date and btn -->
+          <v-col>
+            <v-row>
+              <v-col class="text-center">
+                <h1 class="card-title">
+                  ENTREVUE ATYPIQUE AVEC LES DENIS DROLETS</h1>
+              </v-col>
 
-                                <!--<v-col class="text-right">
-  <v-btn class="btn-card-options" flat tile elevation="0">
-                      <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                    </v-btn>          (a intégrer)
-                  </v-col> -->
-                            </v-row>
+            </v-row>
 
-                        </v-col>
+          </v-col>
 
-                        <!-- Card core Video  LES DENIS DROLETS -->
-                        <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-                            <v-container>
-                                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                                    src="https://www.youtube.com/embed/bj4QTpzEO6E?si=9NrwEpsZ-f_KPsNo"
-                                    title="Guillaumem" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen></iframe>
+          <!-- Card core Video  LES DENIS DROLETS -->
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+            <v-container>
+              <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                      src="https://www.youtube.com/embed/bj4QTpzEO6E?si=9NrwEpsZ-f_KPsNo"
+                      title="Guillaumem" frameborder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowfullscreen></iframe>
 
-                                <!-- Date -->
-                                <v-row class="text-right">
-                                    <v-col>
-                                        <h1 style=" margin-right: 40px; margin-top: 10px">
-                                            16-05-2024
-                                        </h1>
-                                    </v-col>
-                                </v-row>
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px">
+                    16-05-2024
+                  </h1>
+                </v-col>
+              </v-row>
 
 
-                                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
 
-                                    Cette belle entrevue atypique est sans aucun doute un must dont j'en suis fiers !
-                                    Office des personnes handicapées du Québec, sans vous cette vidéo n'aurait pas été
-                                    possible.
-                                    <br> <br>
-                                    Merci aussi à Nissan et à J’achète Québécois, J’achète local ! JQJL !.
-                                    Vidéo et montage par Jacob Lacroix.
-                                </p>
+                Cette belle entrevue atypique est sans aucun doute un must dont j'en suis fiers !
+                Office des personnes handicapées du Québec, sans vous cette vidéo n'aurait pas été
+                possible.
+                <br> <br>
+                Merci aussi à Nissan et à J’achète Québécois, J’achète local ! JQJL !.
+                Vidéo et montage par Jacob Lacroix.
+              </p>
 
 
-                                <!-- Like dislike commment Section -->
-                                <div style="height: 20px;"></div>
-                                <div
-                                    style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                                </div>
-                                <div
-                                    style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                                </div>
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+              <div
+                  style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
 
-                                <!-- Comments -->
-                                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                                    placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-                            </v-container>
-                        </div>
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+            </v-container>
+          </div>
 
-                    </v-card></v-container>
+        </v-card>
+      </v-container>
 
-                <!-- Jocelyn Grégoire -->
-                <v-container> <v-card class="flow-menu m-0 youtube-card">
-                        <!-- Title, date and btn -->
-                        <v-col>
-                            <v-row>
-                                <v-col class="text-center">
-                                    <h1 class="card-title">
-                                        ENTREVUE ATYPIQUE AVEC JOCELYN GRÉGOIRE</h1>
-                                </v-col>
+      <!-- Jocelyn Grégoire -->
+      <v-container>
+        <v-card class="flow-menu m-0 youtube-card">
+          <!-- Title, date and btn -->
+          <v-col>
+            <v-row>
+              <v-col class="text-center">
+                <h1 class="card-title">
+                  ENTREVUE ATYPIQUE AVEC JOCELYN GRÉGOIRE</h1>
+              </v-col>
 
-                                <!--<v-col class="text-right">
-  <v-btn class="btn-card-options" flat tile elevation="0">
-                      <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                    </v-btn>          (a intégrer)
-                  </v-col> -->
-                            </v-row>
+            </v-row>
 
-                        </v-col>
+          </v-col>
 
-                        <!-- Card core Video  -->
-                        <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-                            <v-container>
-                                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                                    src="https://www.youtube.com/embed//61ZNNeuQV_Y?si=Yl1lzDvuNkaAFdPU"
-                                    title="Guillaumem" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen></iframe>
+          <!-- Card core Video  -->
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+            <v-container>
+              <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                      src="https://www.youtube.com/embed//61ZNNeuQV_Y?si=Yl1lzDvuNkaAFdPU"
+                      title="Guillaumem" frameborder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowfullscreen></iframe>
 
-                                <!-- Date -->
-                                <v-row class="text-right">
-                                    <v-col>
-                                        <h1 style=" margin-right: 40px; margin-top: 10px">
-                                            28-04-2024
-                                        </h1>
-                                    </v-col>
-                                </v-row>
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px">
+                    28-04-2024
+                  </h1>
+                </v-col>
+              </v-row>
 
 
-                                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
 
-                                    Le 14 mars dernier, j'organisais un marathon d'entrevues atypiques au profit de
-                                    Autisme Estrie,
-                                    un organisme de mon coin dans le garage de Luc Poirier Perso.
-                                    Ici, vous avez la dernière entrevue « atypique » réalisé avec Jocelyn Grégoire de
-                                    Mordus
-                                    d'immobilier
-                                    <br> <br>
-                                    Le montage de la vidéo a été réalisé par Marius Lome et le maquillage par Artiste
-                                    maquilleuse
-                                    Anick Bonhomme.
-                                    <br> <br>
-                                    Merci à mon assistant technique Éthienne Lafond-Lessard.
-                                    À mes ''petits'' sponsors :
-                                    Véronique Bibeau, Nicolas Jachète Québécois Beaudry, Nissan et Office des personnes
-                                    handicapées
-                                    du Québec.
-                                    Musique : Lydie Morneau.
-                                </p>
+                Le 14 mars dernier, j'organisais un marathon d'entrevues atypiques au profit de
+                Autisme Estrie,
+                un organisme de mon coin dans le garage de Luc Poirier Perso.
+                Ici, vous avez la dernière entrevue « atypique » réalisé avec Jocelyn Grégoire de
+                Mordus
+                d'immobilier
+                <br> <br>
+                Le montage de la vidéo a été réalisé par Marius Lome et le maquillage par Artiste
+                maquilleuse
+                Anick Bonhomme.
+                <br> <br>
+                Merci à mon assistant technique Éthienne Lafond-Lessard.
+                À mes ''petits'' sponsors :
+                Véronique Bibeau, Nicolas Jachète Québécois Beaudry, Nissan et Office des personnes
+                handicapées
+                du Québec.
+                Musique : Lydie Morneau.
+              </p>
 
 
-                                <!-- Like dislike commment Section -->
-                                <div style="height: 20px;"></div>
-                                <div
-                                    style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                                </div>
-                                <div
-                                    style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                                </div>
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+              <div
+                  style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
 
-                                <!-- Comments -->
-                                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                                    placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-                            </v-container>
-                        </div>
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+            </v-container>
+          </div>
 
-                    </v-card></v-container>
+        </v-card>
+      </v-container>
 
-                <!-- Virginie Roy -->
-                <v-container> <v-card class="flow-menu m-0 youtube-card">
-                        <!-- Title, date and btn -->
-                        <v-col>
-                            <v-row>
-                                <v-col class="text-center">
-                                    <h1 class="card-title">
-                                        ENTREVUE ATYPIQUE AVEC VIRGINIE ROY</h1>
-                                </v-col>
+      <!-- Virginie Roy -->
+      <v-container>
+        <v-card class="flow-menu m-0 youtube-card">
+          <!-- Title, date and btn -->
+          <v-col>
+            <v-row>
+              <v-col class="text-center">
+                <h1 class="card-title">
+                  ENTREVUE ATYPIQUE AVEC VIRGINIE ROY</h1>
+              </v-col>
 
-                                <!--<v-col class="text-right">
-  <v-btn class="btn-card-options" flat tile elevation="0">
-                      <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                    </v-btn>          (a intégrer)
-                  </v-col> -->
-                            </v-row>
+            </v-row>
 
-                        </v-col>
+          </v-col>
 
-                        <!-- Card core Video -->
-                        <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-                            <v-container>
-                                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                                    src="https://www.youtube.com/embed/dYZZCDVUcuQ?si=g_97RA0w9Vs5hl13"
-                                    title="Guillaumem" frameborder="0"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                    allowfullscreen></iframe>
+          <!-- Card core Video -->
+          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+            <v-container>
+              <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                      src="https://www.youtube.com/embed/dYZZCDVUcuQ?si=g_97RA0w9Vs5hl13"
+                      title="Guillaumem" frameborder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowfullscreen></iframe>
 
-                                <!-- Date -->
-                                <v-row class="text-right">
-                                    <v-col>
-                                        <h1 style=" margin-right: 40px; margin-top: 10px">
-                                            28-04-2024
-                                        </h1>
-                                    </v-col>
-                                </v-row>
+              <!-- Date -->
+              <v-row class="text-right">
+                <v-col>
+                  <h1 style=" margin-right: 40px; margin-top: 10px">
+                    28-04-2024
+                  </h1>
+                </v-col>
+              </v-row>
 
 
-                                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
+              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
 
-                                    Le 14 mars dernier, j'organisais un marathon d'entrevues atypiques au profit de
-                                    Autisme Estrie,
-                                    un organisme de mon coin dans le garage de Luc Poirier Perso.
-                                    Ici, vous avez la dernière entrevue « atypique » réalisé avec Jocelyn Grégoire de
-                                    Mordus
-                                    d'immobilier
-                                    <br> <br>
-                                    Le montage de la vidéo a été réalisé par Marius Lome et le maquillage par Artiste
-                                    maquilleuse
-                                    Anick Bonhomme.
-                                    <br> <br>
-                                    Merci à mon assistant technique Éthienne Lafond-Lessard.
-                                    À mes ''petits'' sponsors :
-                                    Véronique Bibeau, Nicolas Jachète Québécois Beaudry, Nissan et Office des personnes
-                                    handicapées
-                                    du Québec.
-                                    Musique : Lydie Morneau.
-                                </p>
+                Le 14 mars dernier, j'organisais un marathon d'entrevues atypiques au profit de
+                Autisme Estrie,
+                un organisme de mon coin dans le garage de Luc Poirier Perso.
+                Ici, vous avez la dernière entrevue « atypique » réalisé avec Jocelyn Grégoire de
+                Mordus
+                d'immobilier
+                <br> <br>
+                Le montage de la vidéo a été réalisé par Marius Lome et le maquillage par Artiste
+                maquilleuse
+                Anick Bonhomme.
+                <br> <br>
+                Merci à mon assistant technique Éthienne Lafond-Lessard.
+                À mes ''petits'' sponsors :
+                Véronique Bibeau, Nicolas Jachète Québécois Beaudry, Nissan et Office des personnes
+                handicapées
+                du Québec.
+                Musique : Lydie Morneau.
+              </p>
 
 
-                                <!-- Like dislike commment Section -->
-                                <div style="height: 20px;"></div>
-                                <div
-                                    style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                                </div>
-                                <div
-                                    style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                                </div>
+              <!-- Like dislike commment Section -->
+              <div style="height: 20px;"></div>
+              <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
+              <div
+                  style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+              </div>
 
-                                <!-- Comments -->
-                                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                                    placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-                            </v-container>
-                        </div>
+              <!-- Comments -->
+              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+            </v-container>
+          </div>
 
-                    </v-card></v-container>
-
-
-
-
-            </v-col>
-
-            <!-- "Large-Monitor-RightCol" Donation -->
-            <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
-                <v-row>
-                    <v-col>
-                        <v-container class="sticky-bottom-label Je-soutien-container"
-                            style="max-width: 400px ;  bottom: 0;">
-                            <!-- Donnation -->
-                            <v-card style="border-radius: 20px;">
-                                <v-container>
-                                    <v-row class="mb-0"
-                                        style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                                        <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                                            JE SOUTIENS!
-                                        </v-card-title>
-                                    </v-row>
-                                    <StripePayment creator-id="0bf16f10-f086-4fb5-9c09-9185f771bbe4"></StripePayment>
-                                </v-container>
-                            </v-card>
-                        </v-container>
-                        <v-container style="height: 3000px;">
-                        </v-container>
-                    </v-col>
-                    <v-spacer>
-                    </v-spacer>
-                </v-row>
-            </v-col>
-        </v-row>
-
-        <!-- "Mobile" Donation -->
-        <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
-            style="background-color: #6b0065; margin-top: 30px; text-align: center;">
-
-            <!-- Barre cliquable pour ouvrir le drawer -->
-            <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
-                style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
-                JE SOUTIENS
-            </v-btn>
-        </v-col>
-
-        <!-- Drawer du bas -->
-        <template>
-            <div>
-                <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
-                    <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
-                        <h1 class="text-soutiens">JE SOUTIENS</h1>
-                        <StripePayment creator-id="0bf16f10-f086-4fb5-9c09-9185f771bbe4"></StripePayment>
-                    </v-container>
-                </v-bottom-sheet>
-
-            </div>
-        </template>
-
-        <FooterLayout></FooterLayout>
-    </div>
+        </v-card>
+      </v-container>
+    </v-col>
+  </v-row>
 </template>
 
 <script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-import { ref } from 'vue';
-import StripePayment from '../StripePayment.vue';
 let imageSrc = '/images/usersmedia/mathieuCaron/banners/bannerMathieuCaron01.png';
 let profilePicture = '/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png';
 let name = 'Mathieu Caron'
 let title = 'Intervieweur'
-let drawerbottom = ref(false)
-
-let navigationItems = [
-    { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-    { icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
-    { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
-];
 </script>
 
 <style scoped>
-.invert-color {
-    filter: invert(1);
-}
-
-
-.Hutopy-menu-sticky-mobile {
-    position: sticky;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 1000;
-    margin-top: -40px;
-}
-
-.sticky-bottom-label {
-    position: sticky;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 1000;
-    margin-top: 20px;
-}
-
-.sticky-top-label {
-    position: sticky;
-    bottom: 0;
-    right: 10%;
-    width: 100%;
-    z-index: 1000;
-}
-
-.text-soutiens {
-    margin-bottom: 15px;
-    color: white;
-    font-size: 1.5rem;
-    letter-spacing: 7px;
-    text-align: center;
-}
 
 .name-info {
-    margin-top: -10px;
-    margin-left: 15%;
+  margin-top: -10px;
+  margin-left: 15%;
 }
 
 .occupation-info {
-    margin-left: 15%;
-    font-size: large;
-}
-
-.name-info-mobile {
-    margin-left: 22px;
-    font-size: 1.3rem
-}
-
-.main-background {
-    background-color: #f4f4f4;
+  margin-left: 15%;
+  font-size: large;
 }
 
 .profile-container {
-    margin-top: -16%;
-}
-
-.btn-custom {
-    width: 100%;
-    background-color: transparent;
+  margin-top: -16%;
 }
 
 .background-profile-container {
-    background-color: #ececec;
-    color: white;
-    border-top: 3px solid #a30e79;
-    border-right: 3px solid #a30e79;
-    font-weight: 700;
-    font-size: 1.15rem;
-    border-radius: 25px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
+  background-color: #ececec;
+  color: white;
+  border-top: 3px solid #a30e79;
+  border-right: 3px solid #a30e79;
+  font-weight: 700;
+  font-size: 1.15rem;
+  border-radius: 25px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
 }
 
 .background-pink {
-    background-color: #1d1d1b;
-    color: white;
-    font-weight: 400;
-}
-
-.label-text {
-    font-weight: 400;
-    margin-left: 3%;
-    font-size: 1rem;
-}
-
-.profile-name {
-    margin-top: -15%;
+  background-color: #1d1d1b;
+  color: white;
+  font-weight: 400;
 }
 
 .socialicons {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 3px;
-    margin-left: 40px;
-}
-
-.socialicons-mobile {
-    width: 35px;
-    max-width: 100px;
-    margin-top: 27px;
-    margin-left: 20px;
+  width: 35px;
+  max-width: 100px;
+  margin-top: 3px;
+  margin-left: 40px;
 }
 
 .youtube-card {
-    margin-left: 2%;
-    margin-right: 2%;
-    border-radius: 15px;
-    background-color: #f4f4f4;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
+  margin-left: 2%;
+  margin-right: 2%;
+  border-radius: 15px;
+  background-color: #f4f4f4;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
 }
 
 .card-title {
-    font-size: 1.4rem;
-    margin-top: 10px;
-}
-
-.card-date {
-    margin-left: 10px;
-    margin-top: -18px;
-    margin-bottom: -20px;
-    font-size: .8rem;
+  font-size: 1.4rem;
+  margin-top: 10px;
 }
 
 .social-container {
-    background-color: #101b49;
-    border-top-right-radius: 30px;
-    border-bottom-right-radius: 30px;
-    font-size: 1.7rem;
-    font-weight: 600;
-    color: white;
+  background-color: #101b49;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
+  font-size: 1.7rem;
+  font-weight: 600;
+  color: white;
 }
 
 .social-container2 {
-    background-color: #698fe7;
-    border-bottom-right-radius: 30px;
-    font-size: 1.4rem;
-    font-weight: 500;
-    color: white;
-}
-
-.social-container-mobile {
-    background-color: #101b49;
-    font-size: 1.4rem;
-    font-weight: 600;
-    color: white;
-    z-index: 1000;
-    margin: auto;
-    text-align: center;
-}
-
-.social-container2-mobile {
-    background-color: #698fe7;
-    z-index: 1000;
-    font-size: 1.2rem;
-    font-weight: 500;
-    color: white;
-}
-
-.social-icon-group-mobile {
-    background-color: #698fe7;
-}
-
-.mini-profile-picture {
-    border-radius: 100px;
-}
-
-.btn-card-options {
-    background-color: #f4f4f4;
-    width: 50px;
-    margin-left: -12px;
-    margin-top: 10px;
+  background-color: #698fe7;
+  border-bottom-right-radius: 30px;
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: white;
 }
 
 .mobile-profile-picture-creator {
-    height: 150px;
-    width: 150px;
-    border-radius: 50%;
-    max-width: 150px;
-    border: 6px solid white;
-    z-index: 1000;
-}
-
-.mobile-header {
-    height: 50px;
-    margin-left: -13%;
-    margin-top: 6%;
-}
-
-.h1-navigation {
-    text-align: center;
-    font-weight: 600;
-    margin-bottom: 10%;
-}
-
-.mobile-profile-picture {
-    height: 40px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-    border: 2px solid #a30e79;
-    margin-right: 10px
+  height: 150px;
+  width: 150px;
+  border-radius: 50%;
+  max-width: 150px;
+  border: 6px solid white;
+  z-index: 1000;
 }
 
 .profile-banner {
-    margin-top: 25px;
-    min-height: 200px
+  margin-top: 25px;
+  min-height: 200px
 }
 
-.v-navigation-drawer {
-    max-height: 100vh;
-}
-
-@media (min-width: 150px) and (max-width: 474px) {
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(-30%) translateX(0%);
-    }
-
-    .socialicons-mobile {
-        width: 35px;
-        max-width: 100px;
-        margin-top: 0px;
-        margin-left: 20px;
-    }
-}
-
-
-@media (min-width: 475px) and (max-width: 599px) {
-    .socialicons-mobile {
-        width: 35px;
-        max-width: 100px;
-        margin-top: 0px;
-        margin-left: px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(-30%) translateX(0%);
-    }
-
-    .profile-container-mobile {
-        width: 110%;
-        margin-left: -3%;
-        margin-top: -112px;
-    }
-
-    .occupation-info {
-        font-size: 1rem;
-    }
-
-    .card-youtube {
-        min-height: 250px;
-    }
-
-    .name-info-mobile {
-        font-size: 1.6rem;
-    }
-}
-
-@media (min-width: 599px) and (max-width: 749px) {
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(25%) translateX(0%);
-    }
-
-    .profile-container {
-
-        width: 110%;
-        margin-left: -3%;
-    }
-
-    .profile-container-mobile {
-
-        width: 110%;
-        margin-left: -3%;
-        margin-top: -110px;
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-    }
-
-    .occupation-info {
-        font-size: 1rem;
-    }
-
-    .card-youtube {
-        min-height: 330px;
-    }
-}
-
-@media (min-width: 750px) and (max-width: 960px) {
-    .mobile-profile-picture-creator {
-        transform: scale(1.8) translateY(25%) translateX(0%);
-    }
-
-    .profile-container {
-        width: 110%;
-        margin-left: -3%;
-    }
-
-    .profile-container-mobile {
-        width: 110%;
-        margin-left: -3%;
-        margin-top: -110px;
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-    }
-
-    .occupation-info {
-        font-size: 1rem;
-    }
-
-    .card-youtube {
-        min-height: 425px;
-    }
-}
-
-@media (min-width: 960px) and (max-width: 1280px) {
-    .middle-col {
-        margin-left: -30px;
-    }
-
-    .text-soutiens {
-        font-size: 1.2rem;
-        letter-spacing: 5px;
-    }
-
-    .profile-container {
-        margin-top: -185px;
-        min-width: 480px
-    }
-
-    .card-youtube {
-        min-height: 270px;
-    }
-
-    .Je-soutien-container {
-        min-width: 325px;
-        margin-left: -35px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.3) translateY(25%) translateX(-50px);
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-        margin-left: 20px;
-        margin-top: -6px
-    }
-
-    .occupation-info {
-        margin-left: 40px;
-        margin-top: -8px
-    }
-
-    .social-container {
-        margin-left: 80px;
-        min-width: 270px;
-        max-height: 40px
-    }
-
-    .social-container2 {
-        margin-left: 50px;
-        min-width: 250px;
-        max-height: 35px
-    }
-
-    .socialicons {
-        width: 34px;
-        max-width: 100px;
-        margin-top: 15px;
-        margin-left: 25px;
-    }
-}
-
-@media (min-width: 1280px) and (max-width: 1600px) {
-    .text-soutiens {
-        font-size: 1.3rem;
-        letter-spacing: 8px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.3) translateY(25%) translateX(-50px);
-    }
-
-    .profile-container {
-        margin-top: -180px;
-    }
-
-    .card-youtube {
-        min-height: 290px;
-    }
-
-    .menu-col {
-        margin-left: -4%;
-    }
-
-    .Je-soutien-container {
-        min-width: 350px;
-    }
-
-    .name-info {
-        font-size: 1.2rem;
-        margin-left: 20px;
-        margin-top: -6px
-    }
-
-    .social-container {
-        margin-left: 90px;
-        min-width: 350;
-        max-height: 40px
-    }
-
-    .occupation-info {
-        margin-left: 70px;
-        margin-top: -8px
-    }
-
-    .social-container2 {
-
-        margin-left: 40px;
-        min-width: 290px;
-        max-height: 35px
-    }
-
-    .socialicons {
-        width: 34px;
-        max-width: 100px;
-        margin-top: 15px;
-        margin-left: 25px;
-    }
-}
-
-@media (min-width: 1600px) and (max-width: 1919px) {
-    .text-soutiens {
-        font-size: 1.3rem;
-
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.4) translateY(25%) translateX(-40px);
-    }
-
-    .profile-container {
-        margin-top: -171px;
-    }
-
-    .card-youtube {
-        min-height: 355px;
-    }
-
-    .menu-col {
-        margin-left: -4%;
-    }
-
-    .Je-soutien-container {
-        min-width: 400px;
-    }
-
-    .name-info {
-        font-size: 1.5rem;
-        margin-top: -4px;
-        margin-left: 35px;
-    }
-
-    .occupation-info {
-        font-size: 1.3rem;
-        margin-left: 75px;
-        margin-top: -2px
-    }
-
-    .social-container2 {
-        margin-left: 70px;
-        min-width: 300px;
-    }
-}
-
-@media (min-width: 1920px) and (max-width: 2559px) {
-    .text-soutiens {
-        font-size: 1.3rem;
-    }
-
-    .profile-container {
-        margin-top: -160px;
-    }
-
-    .card-youtube {
-        min-height: 380px;
-    }
-
-    .Je-soutien-container {
-        min-width: 400px;
-    }
-
-    .mobile-profile-picture-creator {
-        transform: scale(1.4) translateY(25%) translateX(-40px);
-    }
-
-    .name-info {
-        font-size: 1.5rem;
-        margin-left: 35px;
-        margin-top: -4px;
-    }
-
-    .social-container {
-        margin-left: 100px;
-    }
-
-    .occupation-info {
-        font-size: 1.3rem;
-        margin-left: 110px;
-        margin-top: -4px
-    }
-
-    .social-container2 {
-        margin-left: 30px;
-        min-width: 360px;
-    }
-
-    .socialicons {
-        width: 38px;
-        max-width: 100px;
-        margin-top: 13px;
-        margin-left: 40px;
-    }
-}
-
-@media (min-width: 2560px) {
-    .mobile-profile-picture-creator {
-        transform: scale(1.5) translateY(25%) translateX(-20px);
-    }
-
-    .profile-container {
-        margin-top: -150px
-    }
-
-    .card-youtube {
-        min-height: 380px;
-    }
-
-    .text-soutiens {
-        font-size: 1.5rem;
-    }
-
-    .name-info {
-        font-size: 2rem;
-
-    }
-
-    .social-container {
-        margin-left: 140px;
-    }
-
-    .social-container2 {
-        margin-left: 130px;
-    }
-
-    .occupation-info {
-        font-size: 1.5rem;
-        margin-left: 65px;
-        margin-top: -6px
-    }
-
-    .socialicons {
-        width: 45px;
-        max-width: 100px;
-        margin-top: 15px;
-        margin-left: 40px;
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/pages/About.vue b/src/views/pages/About.vue
new file mode 100644
index 0000000..2c53397
--- /dev/null
+++ b/src/views/pages/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>
\ No newline at end of file
diff --git a/src/views/pages/ContentPolicy.vue b/src/views/pages/ContentPolicy.vue
new file mode 100644
index 0000000..085c4cc
--- /dev/null
+++ b/src/views/pages/ContentPolicy.vue
@@ -0,0 +1,324 @@
+<template>
+
+  <div class="document">
+
+    <h1>
+      Politique de Contenu
+    </h1>
+
+    <h2>
+      Introduction
+    </h2>
+
+    <p>
+      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
+      contenu autorisé sur notre plateforme. En utilisant Hutopy, vous acceptez de respecter cette
+      politique de contenu.
+    </p>
+
+    <h2>
+      Contenu Autorisé
+    </h2>
+
+    <ul>
+
+      <li>
+        Hutopy encourage la publication de contenu créatif, éducatif et inspirant dans divers
+        formats, y compris :
+      </li>
+
+      <li>Arts visuels et design : Illustrations, photographies, designs graphiques respectant le
+        droit d'auteur.
+      </li>
+
+      <li>Éducation et apprentissage : Tutoriels, cours en ligne, webinaires qui favorisent
+        l'apprentissage et le développement personnel.
+      </li>
+
+      <li>Contenu écrit : Articles, blogs, poésies qui enrichissent les discussions et partagent
+        des connaissances.
+      </li>
+
+      <li>Multimédia : Vidéos, podcasts et musique originales qui respectent les droits d'auteur
+        et encouragent l'expression créative.
+      </li>
+
+    </ul>
+
+    <h2>
+      Contenu Interdit
+    </h2>
+
+    <ul>
+
+      <li>
+        Pour protéger notre communauté, certains types de contenu ne sont pas autorisés sur Hutopy,
+        incluant mais non limité à :
+      </li>
+
+      <li>
+        Contenu illégal : Tout contenu promouvant des activités illégales ou fournissant des
+        instructions pour commettre des actes illégaux.
+      </li>
+
+      <li>
+        Harcèlement et discours de haine : Contenu visant à harceler, menacer, ou promouvoir la
+        haine contre des individus ou des groupes basés sur la race, l'ethnie, la religion, le
+        genre, l'orientation sexuelle, l'identité de genre ou tout autre caractéristique
+        distinctive.
+      </li>
+
+      <li>
+        Contenu pour adultes : Matériel pornographique ou explicitement sexuel.
+      </li>
+
+      <li>
+        Violence et contenu graphique : Images ou descriptions de violence excessive, gore ou
+        choquantes.
+      </li>
+
+      <li>
+        Publicité mensongère et spam : Contenu trompeur, frauduleux ou spammy.
+      </li>
+
+    </ul>
+
+    <h2>
+      Droits d'Auteur et Propriété Intellectuelle
+    </h2>
+
+    <p>
+      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>
+      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>
+      Modération et Signalement
+    </h2>
+
+    <p>
+      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>
+      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>
+      Conséquences des Violations
+    </h2>
+
+    <p>
+      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>
+      Révisions de la Politique
+    </h2>
+
+    <p>
+      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>
+      Dans le cas d’une non conformité aux politiques de contenus :
+    </h2>
+
+    <p>
+      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>
+      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>
+      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>
+      Section Anti-Exploitation d’Hutopy
+    </h2>
+
+    <h2 style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
+      Engagement d’Hutopy
+    </h2>
+
+    <p>
+      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
+      comportements et contenus exploitants. Notre mission est de créer un environnement où la
+      créativité et l'expression personnelle peuvent s'épanouir sans crainte d'exploitation ou
+      d'abus.
+    </p>
+
+    <h2>
+      Politique de Tolérance Zéro
+    </h2>
+
+    <p>
+      Nous appliquons une politique de tolérance zéro à l'égard de :
+    </p>
+
+    <ul>
+
+      <li>
+        Exploitation sexuelle : Cela inclut, mais n'est pas limité à, la pornographie infantile,
+        le trafic sexuel, et le harcèlement sexuel.
+      </li>
+
+      <li>
+        Travail forcé : Nous nous opposons à toute forme de travail forcé ou de servitude, y
+        compris le travail des enfants.
+      </li>
+
+      <li>
+        Exploitation financière : Cela comprend les arnaques, la fraude et tout autre type
+        d'exploitation financière.
+      </li>
+
+    </ul>
+
+    <h2>
+      Politique de Tolérance Zéro
+    </h2>
+
+    <p>
+      Signalement et Actions
+    </p>
+
+    <ul>
+
+      <li>Mécanismes de Signalement : Hutopy fournit des outils faciles à utiliser pour signaler
+        rapidement tout contenu ou comportement suspect d'exploitation. Nous encourageons
+        vivement les utilisateurs à utiliser ces outils s'ils rencontrent ou soupçonnent des cas
+        d'exploitation.
+      </li>
+
+      <li>Réponse Rapide : Notre équipe dédiée examine tous les signalements avec la plus grande
+        attention et prend des mesures immédiates pour adresser les problèmes signalés. Cela
+        peut inclure la suppression de contenu, la suspension de comptes, et, si nécessaire, le
+        signalement aux autorités compétentes.
+      </li>
+
+    </ul>
+
+    <h2>
+      Collaboration avec les Autorités
+    </h2>
+
+    <p>
+      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>
+      Engagements des Utilisateurs
+    </h2>
+
+    <p>
+      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>
+      Modération et Signalement
+    </h2>
+
+    <ul>
+
+      <li>
+        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.
+      </li>
+
+      <li>
+        Signalement : Les utilisateurs d’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.
+      </li>
+
+    </ul>
+
+    <h2>
+      Conséquences des Violations
+    </h2>
+
+    <p>
+      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>
+      Révisions de la Politique
+    </h2>
+
+    <p>
+      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>
+      Contact
+    </h2>
+
+    <p>
+      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>
+    </p>
+
+  </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/pages/CreatorGuide.vue b/src/views/pages/CreatorGuide.vue
new file mode 100644
index 0000000..999c8b5
--- /dev/null
+++ b/src/views/pages/CreatorGuide.vue
@@ -0,0 +1,108 @@
+<template>
+
+  <div class="document">
+
+    <h1>Guide pour les Créateurs</h1>
+
+    <h2>
+      Bienvenue dans la Communauté de Créateurs d’Hutopy
+    </h2>
+
+    <p>
+      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>
+      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
+        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>
+    </ul>
+
+    <h2>
+      2. Publication de Contenu :
+    </h2>
+
+    <ul>
+
+      <li>Diversifiez Votre Contenu : Explorez différents formats – vidéos, articles, podcasts –
+        pour captiver divers segments d'audience.
+      </li>
+
+      <li> Planification et Consistance : Publiez régulièrement pour garder votre audience
+        engagée. Utilisez l'outil de planification d’Hutopy pour organiser vos publications à
+        l'avance.
+      </li>
+
+    </ul>
+
+    <h2>
+      3. Engagement avec Votre Audience :
+    </h2>
+
+    <ul>
+
+      <li>Interagissez : Répondez aux commentaires, participez à des discussions et créez des
+        sondages pour encourager l'interaction.
+      </li>
+
+      <li> Analysez Vos Performances : Utilisez les outils d'analyse d’Hutopy pour comprendre ce
+        qui résonne avec votre audience et ajustez votre stratégie en conséquence.
+      </li>
+
+    </ul>
+
+    <h2>
+      4. Monétisation :
+    </h2>
+
+    <ul>
+      <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>
+      5. Croissance et Développement :
+    </h2>
+
+    <ul>
+      <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 )
+      </li>
+    </ul>
+
+  </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/pages/FAQ.vue b/src/views/pages/FAQ.vue
new file mode 100644
index 0000000..9b58f48
--- /dev/null
+++ b/src/views/pages/FAQ.vue
@@ -0,0 +1,193 @@
+<template>
+
+  <div class="content">
+
+    <h1>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>
+      Foire Aux Questions
+    </h2>
+
+    <p>
+      La section FAQ de Hutopy est votre ressource essentielle pour trouver des réponses rapides
+      aux questions les plus fréquemment posées sur notre plateforme. Explorez nos réponses
+      détaillées pour optimiser votre utilisation de Hutopy et résoudre vos problèmes en un
+      instant. Consultez régulièrement notre FAQ pour rester informé des dernières
+      fonctionnalités.
+    </p>
+
+    <h2>
+      1. Comment puis-je créer un compte sur Hutopy ?
+    </h2>
+
+    <p>
+      Créer un compte est
+      simple !
+      Visitez notre page
+      d'inscription, remplissez les
+      informations requises, et suivez les instructions pour confirmer votre adresse e-mail ou
+      vous connecter via les partenaires de connexion. Vous pourrez commencer à explorer et à
+      interagir avec la communauté Hutopy immédiatement après.
+    </p>
+
+    <h2>
+      2. Quels types de contenu puis-je publier sur Hutopy ?
+    </h2>
+
+    <p>
+      Hutopy accueille une
+      large
+      variété de contenus créatifs, incluant mais non limité à des vidéos, articles, podcasts, et
+      illustrations. Nous encourageons la diversité et l'originalité, tant que le contenu respecte
+      nos valeurs.
+    </p>
+
+    <h2>
+      3. Comment Hutopy rémunère-t-il les créateurs de contenu ?
+    </h2>
+
+    <p>
+      Les créateurs peuvent monétiser leur
+      contenu de plusieurs façons, notamment via des abonnements payants et des dons de la part
+      des utilisateurs.
+    </p>
+
+    <h2>
+      4. Comment puis-je modifier mon profil ?
+    </h2>
+
+    <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.
+    </p>
+
+    <h2>
+      5. Est-il possible de supprimer mon compte ?
+    </h2>
+
+    <p>
+      Oui, vous pouvez faire la suppression de
+      votre compte sur votre profil dans la section plus. Notez que cette action est irréversible.
+    </p>
+
+    <h2>
+      6. Que faire si j'oublie mon mot de passe ?
+    </h2>
+
+    <p>
+      Sur la page de connexion, cliquez sur "Mot
+      de passe oublié ?" et suivez les instructions pour réinitialiser votre mot de passe via
+      votre adresse courriel.
+    </p>
+
+    <h2>
+      7. Comment signaler un contenu inapproprié ?
+    </h2>
+
+    <p>
+      Si vous rencontrez du contenu qui viole nos
+      directives, cliquer sur les trois petits points en haut de la publication et cliqué sur le
+      bouton "Signaler" associé au contenu en question pour alerter notre équipe de modération.
+    </p>
+
+    <h2>
+      8. Comment puis-je contacter le support Hutopy ?
+    </h2>
+
+    <p>
+      Pour toute assistance, vous pouvez nous
+      contacter via notre formulaire en ligne ou par e-mail à support@hutopy.com, ou via nos
+      réseaux sociaux. Notre équipe s'efforce de répondre rapidement à toutes les demandes.
+    </p>
+
+    <h2>
+      9. Quels sont les frais pour les créateurs sur Hutopy ?
+    </h2>
+
+    <p>
+      Hutopy prélève une commission de 12% +
+      0,30$ sur chaque transaction réalisée sur la plateforme, que ce soit pour les abonnements,
+      les dons ou tout autre revenu généré par les créateurs. Cette commission nous aide à couvrir
+      les coûts de maintenance de la plateforme, de la bande passante, d'assistance utilisateur,
+      des frais de transaction de Stripe et le développement continu pour améliorer votre
+      expérience sur Hutopy.
+    </p>
+
+    <h2>
+      10. Y a-t-il des frais pour s'inscrire ou pour maintenir mon compte sur Hutopy ?
+    </h2>
+
+    <p>
+      Non, l'inscription sur Hutopy est gratuite,
+      et il n'y a pas de frais mensuels ou annuels pour maintenir votre compte. Vous pouvez
+      commencer à utiliser Hutopy et à partager votre contenu sans aucun coût initial.
+    </p>
+
+    <h2>
+      11. Les utilisateurs doivent-ils payer pour accéder au contenu sur Hutopy ?
+    </h2>
+
+    <p>
+      Hutopy offre à la fois du contenu gratuit
+      et du contenu premium. Les utilisateurs peuvent accéder gratuitement à une partie du contenu
+      sur la plateforme. Cependant, certains créateurs peuvent choisir de rendre leur contenu
+      accessible uniquement via un abonnement payant ou un achat unique pour soutenir leur
+      travail.
+    </p>
+
+    <h2>
+      12. Existe-t-il des frais pour retirer mes gains de la plateforme ?
+    </h2>
+
+    <p>
+      Les créateurs peuvent retirer leurs gains
+      sans frais supplémentaires de la part d’Hutopy. Cependant, les transactions bancaires ou les
+      transferts vers des portefeuilles électroniques peuvent être soumis aux frais standards
+      imposés par ces services ou institutions financières, mais pas par Hutopy.
+    </p>
+
+    <h2>
+      13. Les frais Hutopy sont-ils les mêmes pour tous les types de contenu ?
+    </h2>
+
+    <p>
+      Oui, les frais de commission d’Hutopy sont
+      uniformément appliqués à tous les types de contenu et de transactions sur la plateforme pour
+      maintenir la simplicité et la transparence et ce peut importe le montant.
+    </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
+}
+
+</style>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/pages/HelpAndContact.vue b/src/views/pages/HelpAndContact.vue
new file mode 100644
index 0000000..8914b2f
--- /dev/null
+++ b/src/views/pages/HelpAndContact.vue
@@ -0,0 +1,86 @@
+<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.
+    </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
+    </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>
+      - 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>
+    </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>
+    
+  </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/pages/Pricing.vue b/src/views/pages/Pricing.vue
new file mode 100644
index 0000000..6d7f12f
--- /dev/null
+++ b/src/views/pages/Pricing.vue
@@ -0,0 +1,68 @@
+<template>
+
+  <div class="document">
+
+    <h1>Frais</h1>
+
+    <h2>
+      Frais
+    </h2>
+
+    <p>
+      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
+      développer des fonctionnalités innovantes, maintenir une infrastructure technologique de
+      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>
+      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
+      démarrage aux conglomérats établis. Ce gage de sécurité est disponible pour une somme de 2,9
+      % plus un 0,30 $ par transaction, une petite contribution pour la tranquillité d'esprit et
+      la protection de vos revenus.
+    </p>
+
+    <p>
+      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>
+      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
+      succès, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une
+      aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre
+      allié dans la quête du succès.
+    </p>
+  </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/pages/TermsAndConditions.vue b/src/views/pages/TermsAndConditions.vue
new file mode 100644
index 0000000..3456413
--- /dev/null
+++ b/src/views/pages/TermsAndConditions.vue
@@ -0,0 +1,151 @@
+<template>
+
+  <div class="document">
+
+    <h1>Conditions générales</h1>
+
+    <h2>
+      Bienvenue sur Hutopy
+    </h2>
+
+    <p>
+      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 à
+      tous les visiteurs, utilisateurs et autres personnes qui accèdent ou utilisent le
+      service.
+    </p>
+
+    <h2>
+      Utilisation Acceptable
+    </h2>
+
+    <p>
+      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>
+      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>
+      Droits de Propriété Intellectuelle
+    </h2>
+
+    <p>
+      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>
+      Confidentialité
+    </h2>
+
+    <p>
+      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>
+      Limitation de Responsabilité
+    </h2>
+
+    <p>
+      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
+      négligence ou autre, découlant de ou en relation avec l'accès ou l'utilisation de la
+      plateforme Hutopy.
+    </p>
+
+    <h2>
+      Clause de Non-Poursuite
+    </h2>
+
+    <p>
+      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
+      exemplaires résultant de votre utilisation de la plateforme Hutopy. Par conséquent, vous
+      renoncez expressément à tout droit de poursuivre Hutopy et ses affiliés pour toute
+      réclamation liée à votre utilisation de la plateforme.
+    </p>
+
+    <h2>
+      Gestion du Contenu Inapproprié et Sanctions Financières
+    </h2>
+
+    <p>
+      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
+      est jugé inapproprié, offensant ou en violation avec nos Acceptation des Conditions<br>
+      <br>
+      Votre accès et votre utilisation continue de la plateforme Hutopy constituent votre
+      acceptation des présentes conditions générales et de toutes les modifications futures. Il
+      est de votre responsabilité de vous tenir informé des mises à jour de ces conditions. <br>
+      <br>
+      Nous vous encourageons à utiliser Hutopy de manière responsable et conforme à nos
+      directives, afin de contribuer à une communauté positive et enrichissante pour tous.
+    </p>
+
+    <h2>
+      Modifications des Conditions
+    </h2>
+
+    <p>
+      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>
+      Résiliation
+    </h2>
+
+    <p>
+      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>
+      Loi Applicable
+    </h2>
+
+    <p>
+      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>
+
+  </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/tos/About.vue b/src/views/tos/About.vue
deleted file mode 100644
index 40b39bf..0000000
--- a/src/views/tos/About.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-
-    <body style="background-color: #f4f4f4;">
-        <DefaultLayout></DefaultLayout>
-        <div>
-            <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
-                <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375"
-                        src="/images/hutopymedia/tospage/headerbackground.png" cover
-                        style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-                </v-col>
-            </v-row>
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" align="center" style="color:white; margin-top: -250px;"
-                    class="header-text-size">
-                    <v-typography class="headline text-center">À propos</v-typography>
-                </v-row>
-            </v-container>
-
-            <v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
-                <v-col cols="auto">
-                    <router-link :to="{ name: 'home' }">
-                        <v-btn flat style="background-color: #f4f4f4;">
-                            <v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
-                        </v-btn>
-                    </router-link>
-                </v-col>
-            </v-row>
-
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" align="center">
-                    <v-spacer></v-spacer>
-                    <v-col cols="7">
-                        <p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
-                            À propos
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Notre Histoire
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Notre Mission
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Notre Vision
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Notre Équipe
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-                        <br>
-
-
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                    </v-col>
-                    <v-spacer></v-spacer>
-                </v-row>
-            </v-container>
-        </div>
-
-
-
-        <FooterLayout></FooterLayout>
-
-    </body>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-
-</script>
-
-<style>
-.header-text-size {
-    font-size: 4rem;
-}
-
-.member-profile-picture {
-    width: 250px;
-    height: auto;
-}
-</style>
diff --git a/src/views/tos/ContentPolicy.vue b/src/views/tos/ContentPolicy.vue
deleted file mode 100644
index 94503d9..0000000
--- a/src/views/tos/ContentPolicy.vue
+++ /dev/null
@@ -1,336 +0,0 @@
-<template>
-
-    <body style="background-color: #f4f4f4;">
-        <DefaultLayout></DefaultLayout>
-        <div>
-            <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
-                <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375"
-                        src="/images/hutopymedia/tospage/headerbackground.png" cover
-                        style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-                </v-col>
-            </v-row>
-
-
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" align="center" style="color:white; margin-top: -250px;"
-                    class="header-text-size">
-                    <v-typography class="headline text-center">Politique de Contenu</v-typography>
-                </v-row>
-            </v-container>
-
-            <v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
-                <v-col cols="auto">
-                    <router-link :to="{ name: 'home' }">
-                        <v-btn flat style="background-color: #f4f4f4;">
-                            <v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
-                        </v-btn>
-                    </router-link>
-                </v-col>
-            </v-row>
-
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" align="center">
-                    <v-spacer></v-spacer>
-                    <v-col cols="7">
-                        <p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
-                            Politique de Contenu d’Hutopy
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Introduction
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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
-                            contenu autorisé sur notre plateforme. En utilisant Hutopy, vous acceptez de respecter cette
-                            politique de contenu.
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Contenu Autorisé
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            Hutopy encourage la publication de contenu créatif, éducatif et inspirant dans divers
-                            formats, y compris :<br>
-                            <br>
-                            <li>Arts visuels et design : Illustrations, photographies, designs graphiques respectant le
-                                droit d'auteur.</li>
-                            <br>
-                            <li>Éducation et apprentissage : Tutoriels, cours en ligne, webinaires qui favorisent
-                                l'apprentissage et le développement personnel.</li>
-                            <br>
-                            <li>Contenu écrit : Articles, blogs, poésies qui enrichissent les discussions et partagent
-                                des connaissances.</li>
-                            <br>
-                            <li>Multimédia : Vidéos, podcasts et musique originales qui respectent les droits d'auteur
-                                et encouragent l'expression créative.</li>
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Contenu Interdit
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            Pour protéger notre communauté, certains types de contenu ne sont pas autorisés sur Hutopy,
-                            incluant mais non limité à : <br>
-                            <br>
-                            <li>Contenu illégal : Tout contenu promouvant des activités illégales ou fournissant des
-                                instructions pour commettre des actes illégaux.</li>
-                            <br>
-                            <li>Harcèlement et discours de haine : Contenu visant à harceler, menacer, ou promouvoir la
-                                haine contre des individus ou des groupes basés sur la race, l'ethnie, la religion, le
-                                genre, l'orientation sexuelle, l'identité de genre ou tout autre caractéristique
-                                distinctive.
-                            </li>
-                            <br>
-                            <li>Contenu pour adultes : Matériel pornographique ou explicitement sexuel.
-                            </li>
-                            <br>
-                            <li>Violence et contenu graphique : Images ou descriptions de violence excessive, gore ou
-                                choquantes.</li>
-                            <br>
-                            <li>Publicité mensongère et spam : Contenu trompeur, frauduleux ou spammy.
-                            </li>
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Droits d'Auteur et Propriété Intellectuelle
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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 style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Modération et Signalement
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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 style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Conséquences des Violations
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Révisions de la Politique
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Dans le cas d’une non conformité aux politiques de contenus :
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            1. Suspension des Fonds : Les montants accumulés sur le compte de l'utilisateur en question
-                            seront suspendus temporairement le temps de l'évaluation.<br>
-                            <br>
-                            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 style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
-                            Section Anti-Exploitation d’Hutopy
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Engagement d’Hutopy
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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
-                            comportements et contenus exploitants. Notre mission est de créer un environnement où la
-                            créativité et l'expression personnelle peuvent s'épanouir sans crainte d'exploitation ou
-                            d'abus.
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Politique de Tolérance Zéro
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            Nous appliquons une politique de tolérance zéro à l'égard de :<br>
-                            <br>
-                            <li>Exploitation sexuelle : Cela inclut, mais n'est pas limité à, la pornographie infantile,
-                                le trafic sexuel, et le harcèlement sexuel.
-                            </li>
-                            <br>
-                            <li>Travail forcé : Nous nous opposons à toute forme de travail forcé ou de servitude, y
-                                compris le travail des enfants.
-                            </li>
-                            <br>
-                            <li>Exploitation financière : Cela comprend les arnaques, la fraude et tout autre type
-                                d'exploitation financière.</li>
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Politique de Tolérance Zéro
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            Signalement et Actions<br>
-                            <br>
-                            <li>Mécanismes de Signalement : Hutopy fournit des outils faciles à utiliser pour signaler
-                                rapidement tout contenu ou comportement suspect d'exploitation. Nous encourageons
-                                vivement les utilisateurs à utiliser ces outils s'ils rencontrent ou soupçonnent des cas
-                                d'exploitation.
-                            </li>
-                            <br>
-                            <li>Réponse Rapide : Notre équipe dédiée examine tous les signalements avec la plus grande
-                                attention et prend des mesures immédiates pour adresser les problèmes signalés. Cela
-                                peut inclure la suppression de contenu, la suspension de comptes, et, si nécessaire, le
-                                signalement aux autorités compétentes.
-                            </li>
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Collaboration avec les Autorités
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Engagements des Utilisateurs
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Modération et Signalement
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <li>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.</li>
-                            <br>
-                            <li>Signalement : Les utilisateurs d’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.</li>
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Conséquences des Violations
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Révisions de la Politique
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Contact
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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" style="color: #a30e79;">support@hutopy.com</a>
-                        </p>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                    </v-col>
-                    <v-spacer></v-spacer>
-                </v-row>
-            </v-container>
-        </div>
-
-
-
-        <FooterLayout></FooterLayout>
-
-    </body>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-
-</script>
-
-<style>
-.header-text-size {
-    font-size: 4rem;
-}
-</style>
diff --git a/src/views/tos/FAQ.vue b/src/views/tos/FAQ.vue
deleted file mode 100644
index c07d775..0000000
--- a/src/views/tos/FAQ.vue
+++ /dev/null
@@ -1,244 +0,0 @@
-<template>
-
-    <body style="background-color: #f4f4f4;">
-        <DefaultLayout></DefaultLayout>
-        <div>
-            <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;">
-                <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375"
-                        src="/images/hutopymedia/tospage/headerbackground.png" cover
-                        style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-                </v-col>
-            </v-row>
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" style="color:white;">
-                    <h1 class="header-text-size text-center">FAQ
-                    </h1>
-                </v-row>
-            </v-container>
-
-
-            <v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
-                <v-col cols="auto">
-                    <router-link :to="{ name: 'home' }">
-                        <v-btn flat style="background-color: #f4f4f4;">
-                            <v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
-                        </v-btn>
-                    </router-link>
-                </v-col>
-            </v-row>
-
-
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" align="center">
-                    <v-spacer></v-spacer>
-                    <v-col cols="7">
-                        <p style="font-weight: 600; font-size: 1rem; margin-bottom: 25px; color: red;">
-                            Certaines fonctionnalités ne sont pas encore implémentées, donc certains libellés sont
-                            prévus pour la v1.0.
-
-                        </p>
-                        <p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
-                            Foire Aux Questions
-                        </p>
-
-                        <p class="text-start text-left" style="margin-bottom: 25px;">
-                            La section FAQ de Hutopy est votre ressource essentielle pour trouver des réponses rapides
-                            aux questions les plus fréquemment posées sur notre plateforme. Explorez nos réponses
-                            détaillées pour optimiser votre utilisation de Hutopy et résoudre vos problèmes en un
-                            instant. Consultez régulièrement notre FAQ pour rester informé des dernières
-                            fonctionnalités.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            1. Comment puis-je créer un compte sur Hutopy ?
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Créer un compte est
-                            simple !
-                            Visitez notre page
-                            d'inscription, remplissez les
-                            informations requises, et suivez les instructions pour confirmer votre adresse e-mail ou
-                            vous connecter via les partenaires de connexion. Vous pourrez commencer à explorer et à
-                            interagir avec la communauté Hutopy immédiatement après.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            2. Quels types de contenu puis-je publier sur Hutopy ?
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Hutopy accueille une
-                            large
-                            variété de contenus créatifs, incluant mais non limité à des vidéos, articles, podcasts, et
-                            illustrations. Nous encourageons la diversité et l'originalité, tant que le contenu respecte
-                            nos valeurs.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            3. Comment Hutopy rémunère-t-il les créateurs de contenu ?
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Les créateurs peuvent monétiser leur
-                            contenu de plusieurs façons, notamment via des abonnements payants et des dons de la part
-                            des utilisateurs.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            4. Comment puis-je modifier mon profil ?
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> 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.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            5. Est-il possible de supprimer mon compte ?
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Oui, vous pouvez faire la suppression de
-                            votre compte sur votre profil dans la section plus. Notez que cette action est irréversible.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            6. Que faire si j'oublie mon mot de passe ?
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Sur la page de connexion, cliquez sur "Mot
-                            de passe oublié ?" et suivez les instructions pour réinitialiser votre mot de passe via
-                            votre adresse courriel.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            7. Comment signaler un contenu inapproprié ?
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Si vous rencontrez du contenu qui viole nos
-                            directives, cliquer sur les trois petits points en haut de la publication et cliqué sur le
-                            bouton "Signaler" associé au contenu en question pour alerter notre équipe de modération.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            8. Comment puis-je contacter le support Hutopy ?
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Pour toute assistance, vous pouvez nous
-                            contacter via notre formulaire en ligne ou par e-mail à support@hutopy.com, ou via nos
-                            réseaux sociaux. Notre équipe s'efforce de répondre rapidement à toutes les demandes.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            9. Quels sont les frais pour les créateurs sur Hutopy ?
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Hutopy prélève une commission de 12% +
-                            0,30$ sur chaque transaction réalisée sur la plateforme, que ce soit pour les abonnements,
-                            les dons ou tout autre revenu généré par les créateurs. Cette commission nous aide à couvrir
-                            les coûts de maintenance de la plateforme, de la bande passante, d'assistance utilisateur,
-                            des frais de transaction de Stripe et le développement continu pour améliorer votre
-                            expérience sur Hutopy.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            10. Y a-t-il des frais pour s'inscrire ou pour maintenir mon compte sur Hutopy ?
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Non, l'inscription sur Hutopy est gratuite,
-                            et il n'y a pas de frais mensuels ou annuels pour maintenir votre compte. Vous pouvez
-                            commencer à utiliser Hutopy et à partager votre contenu sans aucun coût initial.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            11. Les utilisateurs doivent-ils payer pour accéder au contenu sur Hutopy ?
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Hutopy offre à la fois du contenu gratuit
-                            et du contenu premium. Les utilisateurs peuvent accéder gratuitement à une partie du contenu
-                            sur la plateforme. Cependant, certains créateurs peuvent choisir de rendre leur contenu
-                            accessible uniquement via un abonnement payant ou un achat unique pour soutenir leur
-                            travail.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            12. Existe-t-il des frais pour retirer mes gains de la plateforme ?
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Les créateurs peuvent retirer leurs gains
-                            sans frais supplémentaires de la part d’Hutopy. Cependant, les transactions bancaires ou les
-                            transferts vers des portefeuilles électroniques peuvent être soumis aux frais standards
-                            imposés par ces services ou institutions financières, mais pas par Hutopy.
-                        </p>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            13. Les frais Hutopy sont-ils les mêmes pour tous les types de contenu ?
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <span style="font-weight: 600;">Réponse :</span> Oui, les frais de commission d’Hutopy sont
-                            uniformément appliqués à tous les types de contenu et de transactions sur la plateforme pour
-                            maintenir la simplicité et la transparence et ce peut importe le montant.
-                        </p>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                    </v-col>
-                    <v-spacer></v-spacer>
-                </v-row>
-            </v-container>
-        </div>
-        <FooterLayout></FooterLayout>
-
-    </body>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-
-</script>
-
-<style scoped>
-.header-text-size {
-    font-size: 4rem;
-    margin-top: -230px;
-}
-
-
-
-@media (min-width: 650px) and (max-width: 960px) {
-    .header-text-size {
-        margin-top: -200px;
-    }
-
-}
-
-@media (min-width: 100px) and (max-width: 649px) {
-    .header-text-size {
-        margin-top: -155px;
-    }
-
-}
-</style>
diff --git a/src/views/tos/Frais.vue b/src/views/tos/Frais.vue
deleted file mode 100644
index e4f1995..0000000
--- a/src/views/tos/Frais.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-
-    <body style="background-color: #f4f4f4;">
-        <DefaultLayout></DefaultLayout>
-        <div>
-            <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
-                <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375"
-                        src="/images/hutopymedia/tospage/headerbackground.png" cover
-                        style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-                </v-col>
-            </v-row>
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" align="center" style="color:white; margin-top: -250px;"
-                    class="header-text-size">
-                    <v-typography class="headline text-center">Frais</v-typography>
-                </v-row>
-            </v-container>
-
-            <v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
-                <v-col cols="auto">
-                    <router-link :to="{ name: 'home' }">
-                        <v-btn flat style="background-color: #f4f4f4;">
-                            <v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
-                        </v-btn>
-                    </router-link>
-                </v-col>
-            </v-row>
-
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" align="center">
-                    <v-spacer></v-spacer>
-                    <v-col cols="7">
-                        <p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
-                            Frais
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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
-                            développer des fonctionnalités innovantes, maintenir une infrastructure technologique de
-                            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 style="margin-top: 25px; margin-bottom: 25px;">
-                            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
-                            démarrage aux conglomérats établis. Ce gage de sécurité est disponible pour une somme de 2,9
-                            % plus un 0,30 $ par transaction, une petite contribution pour la tranquillité d'esprit et
-                            la protection de vos revenus.
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-
-                            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 style="margin-top: 25px; margin-bottom: 25px;">
-                            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
-                            succès, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une
-                            aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre
-                            allié dans la quête du succès.
-                        </p>
-
-                    </v-col>
-                    <v-spacer></v-spacer>
-                </v-row>
-            </v-container>
-        </div>
-
-
-
-        <FooterLayout></FooterLayout>
-
-    </body>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-
-</script>
-
-<style>
-.header-text-size {
-    font-size: 4rem;
-}
-
-.member-profile-picture {
-    width: 250px;
-    height: auto;
-}
-</style>
diff --git a/src/views/tos/GuideForCreators.vue b/src/views/tos/GuideForCreators.vue
deleted file mode 100644
index b701bc9..0000000
--- a/src/views/tos/GuideForCreators.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-
-    <body style="background-color: #f4f4f4;">
-        <DefaultLayout></DefaultLayout>
-        <div>
-            <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;">
-                <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375"
-                        src="/images/hutopymedia/tospage/headerbackground.png" cover
-                        style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-                </v-col>
-            </v-row>
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" style="color:white;">
-                    <h1 class="header-text-size text-center">Guide pour les Créateurs</h1>
-                </v-row>
-            </v-container>
-
-
-            <v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
-                <v-col cols="auto">
-                    <router-link :to="{ name: 'home' }">
-                        <v-btn flat style="background-color: #f4f4f4;">
-                            <v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
-                        </v-btn>
-                    </router-link>
-                </v-col>
-            </v-row>
-
-
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" align="center">
-                    <v-spacer></v-spacer>
-                    <v-col cols="7">
-                        <p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
-                            Guide pour les Créateurs sur Hutopy
-                        </p>
-                        <p class="text-start text-left" style="margin-bottom: 25px;">
-                            Bienvenue dans la Communauté de Créateurs d’Hutopy
-                        </p>
-                        <p style="margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            1. Création de Votre Profil de Créateur :
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <li>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> <br>
-                            <li> Liens et Contacts : Intégrez des liens vers vos autres plateformes sociales</li>
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            2. Publication de Contenu :
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px; ">
-                            <li>Diversifiez Votre Contenu : Explorez différents formats – vidéos, articles, podcasts –
-                                pour captiver divers segments d'audience.
-                            </li> <br>
-                            <li> Planification et Consistance : Publiez régulièrement pour garder votre audience
-                                engagée. Utilisez l'outil de planification d’Hutopy pour organiser vos publications à
-                                l'avance.</li>
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            3. Engagement avec Votre Audience :
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <li>Interagissez : Répondez aux commentaires, participez à des discussions et créez des
-                                sondages pour encourager l'interaction.
-                            </li> <br>
-                            <li> Analysez Vos Performances : Utilisez les outils d'analyse d’Hutopy pour comprendre ce
-                                qui résonne avec votre audience et ajustez votre stratégie en conséquence.</li>
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            4. Monétisation :
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <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>
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            5. Croissance et Développement :
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            <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 )
-                            </li> <br>
-                        </p>
-
-
-                    </v-col>
-                    <v-spacer></v-spacer>
-                </v-row>
-            </v-container>
-        </div>
-        <FooterLayout></FooterLayout>
-
-    </body>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-
-</script>
-
-<style scoped>
-.header-text-size {
-    font-size: 4rem;
-    margin-top: -230px;
-}
-
-
-
-@media (min-width: 650px) and (max-width: 960px) {
-    .header-text-size {
-        margin-top: -200px;
-        font-size: 3rem;
-    }
-
-}
-
-@media (min-width: 100px) and (max-width: 649px) {
-    .header-text-size {
-        margin-top: -135px;
-        font-size: 2.5rem;
-    }
-
-}
-</style>
diff --git a/src/views/tos/HelpAndContact.vue b/src/views/tos/HelpAndContact.vue
deleted file mode 100644
index 4134670..0000000
--- a/src/views/tos/HelpAndContact.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-
-    <body style="background-color: #f4f4f4;">
-        <DefaultLayout></DefaultLayout>
-        <div>
-            <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;">
-                <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375"
-                        src="/images/hutopymedia/tospage/headerbackground.png" cover
-                        style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-                </v-col>
-            </v-row>
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" style="color:white;">
-                    <h1 class="header-text-size text-center">Aide et Contact</h1>
-                </v-row>
-            </v-container>
-
-
-            <v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
-                <v-col cols="auto">
-                    <router-link :to="{ name: 'home' }">
-                        <v-btn flat style="background-color: #f4f4f4;">
-                            <v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
-                        </v-btn>
-                    </router-link>
-                </v-col>
-            </v-row>
-
-
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" align="center">
-                    <v-spacer></v-spacer>
-                    <v-col cols="7">
-                        <p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
-                            Aide et contact
-                        </p>
-
-                        <p class="text-start text-left" style="margin-bottom: 25px;">
-                            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>
-
-                        <p style="font-weight: 600; font-size: 1.4rem;">
-                            FAQ (Foire Aux Questions)
-                        </p>
-
-                        <p style="margin-top: 25px; ">
-                            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>
-
-                        <p style="margin-top: 25px; font-weight: 600; font-size: 1.4rem;">Contactez-Nous</p>
-
-                        <p style="margin-top: 25px;">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 style="margin-top: 25px; color: black;">
-                            - 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>
-
-                        <p style="margin-top: 25px; font-weight: 600; font-size: 1.4rem;">Assistance Technique</p>
-
-                        <p style="margin-top: 25px; color: black;">
-                            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>
-                        </p>
-
-
-                        <p style="margin-top: 25px;">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>
-                    </v-col>
-                    <v-spacer></v-spacer>
-                </v-row>
-            </v-container>
-        </div>
-        <FooterLayout></FooterLayout>
-
-    </body>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-
-</script>
-
-<style scoped>
-.header-text-size {
-    font-size: 4rem;
-    margin-top: -230px;
-}
-
-
-
-@media (min-width: 650px) and (max-width: 960px) {
-    .header-text-size {
-        margin-top: -200px;
-    }
-
-}
-
-@media (min-width: 100px) and (max-width: 649px) {
-    .header-text-size {
-        margin-top: -155px;
-    }
-
-}
-</style>
diff --git a/src/views/tos/TermsAndConditions.vue b/src/views/tos/TermsAndConditions.vue
deleted file mode 100644
index 9af1037..0000000
--- a/src/views/tos/TermsAndConditions.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-
-    <body style="background-color: #f4f4f4;">
-        <DefaultLayout></DefaultLayout>
-        <div>
-            <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
-                <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375"
-                        src="/images/hutopymedia/tospage/headerbackground.png" cover
-                        style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-                </v-col>
-            </v-row>
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" align="center" style="color:white; margin-top: -250px;"
-                    class="header-text-size">
-                    <v-typography class="headline text-center">Conditions générales</v-typography>
-                </v-row>
-            </v-container>
-
-            <v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
-                <v-col cols="auto">
-                    <router-link :to="{ name: 'home' }">
-                        <v-btn flat style="background-color: #f4f4f4;">
-                            <v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
-                        </v-btn>
-                    </router-link>
-                </v-col>
-            </v-row>
-
-
-            <v-container style="z-index: 100; position: relative;">
-                <v-row justify="center" align="center">
-                    <v-spacer></v-spacer>
-                    <v-col cols="7">
-                        <p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
-                            Conditions Générales d'Utilisation d’Hutopy
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Bienvenue sur Hutopy
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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 à
-                            tous les visiteurs, utilisateurs et autres personnes qui accèdent ou utilisent le
-                            service.
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Utilisation Acceptable
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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é.
-                            <br>
-                            <br>
-                            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.
-                            <br>
-
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Droits de Propriété Intellectuelle
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Confidentialité
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Limitation de Responsabilité
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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
-                            négligence ou autre, découlant de ou en relation avec l'accès ou l'utilisation de la
-                            plateforme Hutopy.
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Clause de Non-Poursuite
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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
-                            exemplaires résultant de votre utilisation de la plateforme Hutopy. Par conséquent, vous
-                            renoncez expressément à tout droit de poursuivre Hutopy et ses affiliés pour toute
-                            réclamation liée à votre utilisation de la plateforme.
-                        </p>
-
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Gestion du Contenu Inapproprié et Sanctions Financières
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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
-                            est jugé inapproprié, offensant ou en violation avec nos Acceptation des Conditions<br>
-                            <br>
-                            Votre accès et votre utilisation continue de la plateforme Hutopy constituent votre
-                            acceptation des présentes conditions générales et de toutes les modifications futures. Il
-                            est de votre responsabilité de vous tenir informé des mises à jour de ces conditions. <br>
-                            <br>
-                            Nous vous encourageons à utiliser Hutopy de manière responsable et conforme à nos
-                            directives, afin de contribuer à une communauté positive et enrichissante pour tous.
-                        </p>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Modifications des Conditions
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Résiliation
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
-                            Loi Applicable
-                        </p>
-                        <p style="margin-top: 25px; margin-bottom: 25px;">
-                            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>
-
-
-
-
-
-
-
-
-                    </v-col>
-                    <v-spacer></v-spacer>
-                </v-row>
-            </v-container>
-        </div>
-
-
-
-        <FooterLayout></FooterLayout>
-
-    </body>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-
-</script>
-
-<style>
-.header-text-size {
-    font-size: 4rem;
-}
-</style>