From 6960ab5576a7c7b026ef34d642017f8423de31fe Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 9 Dec 2024 23:56:57 -0500
Subject: [PATCH] Hide everything that is not necessary for the first release.

---
 .../profilepictures/hutopyLogoVector.svg      |   5 +
 src/App.vue                                   |  33 +-
 src/locales/en.json                           |   7 +-
 src/locales/fr.json                           |   8 +-
 src/views/LoginView.vue                       |  26 +-
 src/views/creators/BannerActions.vue          | 320 ++++++++++--------
 src/views/creators/CreatorBanner.vue          |  74 +++-
 src/views/creators/CreatorHome.vue            |  75 ++--
 src/views/creators/DonationButtonBanner.vue   |   5 +-
 src/views/main/Footer.vue                     |  28 +-
 src/views/main/SideBar.vue                    |  56 +--
 src/views/profile/ProfilePage.vue             | 170 +++++-----
 src/views/profile/account/AccountPage.vue     |  80 ++---
 13 files changed, 533 insertions(+), 354 deletions(-)
 create mode 100644 public/images/usersmedia/HutopyProfile/profilepictures/hutopyLogoVector.svg

diff --git a/public/images/usersmedia/HutopyProfile/profilepictures/hutopyLogoVector.svg b/public/images/usersmedia/HutopyProfile/profilepictures/hutopyLogoVector.svg
new file mode 100644
index 0000000..05b87b3
--- /dev/null
+++ b/public/images/usersmedia/HutopyProfile/profilepictures/hutopyLogoVector.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="540" height="540 ">
+<path d="M0 0 C2.69849689 0.0031451 5.39587704 -0.02033719 8.09423828 -0.0456543 C24.64095924 -0.10755047 40.6877731 1.83145667 56.59814453 6.50317383 C57.64365479 6.80505615 58.68916504 7.10693848 59.76635742 7.41796875 C92.79656028 17.21576522 120.14877162 34.84217931 145.09814453 58.31567383 C145.80712891 58.97051758 146.51611328 59.62536133 147.24658203 60.30004883 C156.43027452 69.07141226 164.10800524 79.75645166 171.09814453 90.31567383 C171.99726562 91.64985352 171.99726562 91.64985352 172.91455078 93.01098633 C202.24624509 138.40104257 210.21713133 193.46657021 199.45556641 245.92919922 C192.90962056 275.68852135 179.08829353 305.20779517 159.09814453 328.31567383 C158.12705075 329.46844293 157.15708766 330.62216508 156.18798828 331.77661133 C145.74534244 344.15953661 145.74534244 344.15953661 140.09814453 349.31567383 C139.43814453 349.31567383 138.77814453 349.31567383 138.09814453 349.31567383 C138.09814453 349.97567383 138.09814453 350.63567383 138.09814453 351.31567383 C125.46428062 363.48565937 109.61785837 373.30307857 94.09814453 381.31567383 C93.49325195 381.62843262 92.88835937 381.94119141 92.26513672 382.26342773 C64.72703152 396.27155233 34.49385055 402.76232703 3.72314453 402.69067383 C2.84274506 402.69013 1.96234558 402.68958618 1.05526733 402.68902588 C-13.25349056 402.64848426 -26.95433873 401.73425935 -40.90185547 398.31567383 C-42.23821045 397.99421387 -42.23821045 397.99421387 -43.6015625 397.66625977 C-72.07884569 390.61747809 -98.87807183 378.00655878 -121.53857422 359.26879883 C-124.98230298 356.422742 -128.53024689 353.7103623 -132.06591797 350.97973633 C-132.97470703 350.15602539 -132.97470703 350.15602539 -133.90185547 349.31567383 C-133.90185547 348.65567383 -133.90185547 347.99567383 -133.90185547 347.31567383 C-134.56185547 347.31567383 -135.22185547 347.31567383 -135.90185547 347.31567383 C-135.90185547 346.65567383 -135.90185547 345.99567383 -135.90185547 345.31567383 C-136.56185547 345.31567383 -137.22185547 345.31567383 -137.90185547 345.31567383 C-139.24169922 343.98754883 -139.24169922 343.98754883 -140.83935547 342.06567383 C-143.10188476 339.38611053 -145.39815773 336.76489417 -147.80810547 334.21801758 C-148.30834229 333.68660156 -148.8085791 333.15518555 -149.32397461 332.60766602 C-150.32555716 331.54718583 -151.33248849 330.49172924 -152.3449707 329.44165039 C-155.90185547 325.64913211 -155.90185547 325.64913211 -155.90185547 322.31567383 C-151.7526342 322.86293323 -149.09751951 325.32327358 -145.96435547 327.87817383 C-112.49996321 354.28872765 -70.28107399 364.92725762 -28.16088867 360.37231445 C11.7404784 355.37903429 50.51367105 333.83116901 75.28564453 302.00317383 C102.2073581 266.1942078 113.74287629 223.77918143 108.03564453 179.19067383 C103.36182966 146.79964046 88.57557441 116.98148746 66.09814453 93.31567383 C65.60604492 92.78570801 65.11394531 92.25574219 64.60693359 91.7097168 C40.8738918 66.25446714 8.58347239 50.05740641 -25.90185547 45.31567383 C-27.07103516 45.13391602 -28.24021484 44.9521582 -29.44482422 44.76489258 C-71.61533582 39.65438979 -112.89208728 51.7135382 -146.31201172 77.46020508 C-149.8276055 80.21952147 -153.19809546 83.10839876 -156.42138672 86.20629883 C-157.90185547 87.31567383 -157.90185547 87.31567383 -160.90185547 87.31567383 C-160.35570146 83.08040407 -157.80081795 80.22554824 -155.21435547 77.00317383 C-154.72813721 76.3936084 -154.24191895 75.78404297 -153.7409668 75.15600586 C-143.89916607 62.99985508 -133.13277345 52.06245136 -120.90185547 42.31567383 C-120.33450684 41.85741211 -119.7671582 41.39915039 -119.18261719 40.92700195 C-97.55281967 23.63297615 -71.10136924 11.56026197 -44.27685547 5.06567383 C-43.26478027 4.81954346 -42.25270508 4.57341309 -41.20996094 4.31982422 C-27.42871573 1.10789603 -14.10433559 -0.03420308 0 0 Z "  transform="translate(258.90185546875,69.684326171875)"/>
+<path d="M0 0 C23.93418963 20.21356155 38.18828481 47.87411238 43.30859375 78.609375 C43.72796962 83.82104607 43.79621346 89.00908218 43.74609375 94.234375 C43.7423877 94.93147583 43.73868164 95.62857666 43.73486328 96.34680176 C43.51079954 126.08447361 33.84943539 152.98108038 14.30859375 175.609375 C13.37273437 176.74439453 13.37273437 176.74439453 12.41796875 177.90234375 C7.3119221 183.93204517 1.58692987 188.83219983 -4.69140625 193.609375 C-5.65691406 194.351875 -6.62242187 195.094375 -7.6171875 195.859375 C-33.76277727 214.99515608 -66.44544142 222.27976227 -98.37890625 217.421875 C-129.2224086 212.211016 -156.10496998 196.18588064 -175.99609375 172.10546875 C-177.69140625 169.609375 -177.69140625 169.609375 -177.69140625 166.609375 C-176.37140625 166.939375 -175.05140625 167.269375 -173.69140625 167.609375 C-173.69140625 168.269375 -173.69140625 168.929375 -173.69140625 169.609375 C-172.85222656 170.00576172 -172.85222656 170.00576172 -171.99609375 170.41015625 C-169.47801141 171.72041265 -167.18096648 173.22649078 -164.81640625 174.796875 C-141.95286732 189.35191305 -116.13355444 194.94004479 -89.48388672 189.12792969 C-74.00965166 185.43003002 -61.09388018 178.62819028 -48.69140625 168.609375 C-48.05976563 168.14273438 -47.428125 167.67609375 -46.77734375 167.1953125 C-29.95140734 154.19707727 -19.18769244 130.97695501 -16.03515625 110.39453125 C-15.865 109.01587891 -15.865 109.01587891 -15.69140625 107.609375 C-15.55734375 106.55621094 -15.42328125 105.50304687 -15.28515625 104.41796875 C-12.8813248 80.40697048 -19.85309354 55.11934523 -34.69921875 36.02734375 C-35.35664063 35.22941406 -36.0140625 34.43148437 -36.69140625 33.609375 C-37.32820312 32.82175781 -37.965 32.03414062 -38.62109375 31.22265625 C-54.38763523 12.57508008 -77.98681734 0.98006353 -102.19970703 -1.04858398 C-115.33840527 -1.9297872 -128.14870541 -0.56547477 -140.69140625 3.609375 C-141.71621094 3.94710937 -142.74101562 4.28484375 -143.796875 4.6328125 C-155.05737548 8.64192736 -164.81345042 14.73678833 -173.984375 22.359375 C-175.69140625 23.609375 -175.69140625 23.609375 -177.69140625 23.609375 C-176.02661937 12.90007435 -162.17010016 2.50403181 -153.91601562 -3.73193359 C-107.16913616 -37.54750108 -44.81974776 -36.84949238 0 0 Z " fill="currentColor" transform="translate(291.69140625,175.390625)"/>
+</svg>
diff --git a/src/App.vue b/src/App.vue
index c1adfc8..8ffc351 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,22 @@
 <template>
   <v-app>
     <div class="flex flex-row">
-      <div class="border-r-2 z-30">
+      <!-- Side Bar for larger screens -->
+      <div v-if="!smAndDown" class="border-r-2 z-30">
         <side-bar></side-bar>
       </div>
-      
-      <div :class="['w-full', sideBarStore.sidebarWidth]">
+
+      <!-- Mobile -->
+      <div v-if="smAndDown" class="mobile-container">
+        <div v-if="!brandingStore.loading"
+             class="min-h-screen justify-center items-center"
+             :style="{ backgroundColor: brandingStore.colors.background }">
+          <router-view></router-view>
+        </div>
+      </div>
+
+      <!-- PC -->
+      <div v-if="!smAndDown" :class="['w-full', sideBarStore.sidebarWidth]">
         <div v-if="!brandingStore.loading"
              class="min-h-screen justify-center items-center"
              :style="{ backgroundColor: brandingStore.colors.background }">
@@ -14,20 +25,26 @@
       </div>
     </div>
   </v-app>
-
-<!--  <size-indicator></size-indicator>-->
 </template>
 
 <script async setup>
 import SideBar from "@/views/main/SideBar.vue";
-import SizeIndicator from "@/views/tools/SizeIndicator.vue";
 import { useBrandingStore } from "@/stores/brandingStore.js";
 import { useSideBarStore } from "@/stores/sideBarStore.js";
+import { useDisplay } from "vuetify";
 
+const { smAndDown } = useDisplay();
 const brandingStore = useBrandingStore();
-const sideBarStore = useSideBarStore(); 
+const sideBarStore = useSideBarStore();
 </script>
 
 <style scoped>
+/* Ensure content does not overflow on mobile */
+.mobile-container {
+  width: 100%; /* Full width for mobile */
+  max-width: 100vw; /* Prevent overflow */
+  overflow-x: hidden; /* Hide horizontal overflow */
+  padding: 0; /* Remove extra padding */
+  box-sizing: border-box; /* Include padding in width/height calculation */
+}
 </style>
-s
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index d9d39ce..a7bd8ad 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,4 +1,7 @@
 {
+  "language":{
+    "language": "En"
+  },
   "general": {
     "yes": "yes",
     "no": "no"
@@ -10,7 +13,9 @@
     "allRightsReserved": "All rights reserved"
   },
   "sidebar": {
-    "subscriptionTitle": "Subscription"
+    "subscriptionTitle": "Subscription",
+    "connection": "connection",
+    "Reduce": "Reduce"
   },
   "subscribebutton": {
     "subscribe": "Subscribe",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index e630f29..cb21f7c 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,4 +1,8 @@
 {
+ "language":{
+   "language": "Fr"
+ }, 
+  
   "general": {
     "yes": "oui",
     "no": "non"
@@ -10,7 +14,9 @@
     "allRightsReserved": "Tout droits réservés"
   },
   "sidebar": {
-    "subscriptionTitle": "Abonnements"
+    "subscriptionTitle": "Abonnements",
+    "connection": "connexion",
+    "Reduce": "réduire"
   },
   "subscribebutton": {
     "subscribe": "S'abonner",
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 64fd1a3..3922c27 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,5 +1,18 @@
 <template>
-  <div class="flex items-center justify-center">
+  <div v-if="isMobileView" class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6 text-center">
+    <!-- Image -->
+    <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" alt="Image" class="w-64 h-64 rounded-full mb-4 border" />
+
+    <!-- Message -->
+    <div class="text-lg text-gray-700 mt-8">
+      <p class="font-semibold mb-2">Pour vous connecter et modifier votre page, veuillez utiliser un appareil avec un écran plus large, comme un ordinateur.</p>
+      <p>Pour le moment, l'expérience sur téléphone n'est pas encore complétée.</p>
+      <p class="mt-4 font-bold">Désolé de l'inconvénient.</p>
+    </div>
+  </div>
+  
+  <div v-if="!isMobileView">
+  <div class="py-2 flex items-center justify-center">
   <div class="max-w-[600px] ">
     <img class="rounded-2xl"
          src="/images/hutopymedia/loginpage/loginhutopy.png"
@@ -8,8 +21,19 @@
     <login-form></login-form>    
   </div>
   </div>
+  </div>
 </template>
 
 <script setup>
 import LoginForm from "@/views/main/LoginForm.vue";
+import { useDisplay } from "vuetify";
+import {ref, watch} from "vue";
+
+const { smAndDown } = useDisplay();
+const isMobileView = ref(smAndDown.value);
+
+watch(smAndDown, (newVal) => {
+  isMobileView.value = newVal;
+});
+
 </script>
diff --git a/src/views/creators/BannerActions.vue b/src/views/creators/BannerActions.vue
index 56447eb..2295514 100644
--- a/src/views/creators/BannerActions.vue
+++ b/src/views/creators/BannerActions.vue
@@ -1,174 +1,86 @@
-<template>
-  <div class="flex flex-column w-full">
-
-    <div class="relative w-full shadow-xl rounded-2xl">
-
-      <div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
-           :style="{ backgroundColor: brandingStore.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
-
-        <div>
-          <div>
-
-            <!--Profile and info-->
-            <div class="absolute">
-              <div>
-                <img
-                    class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
-                    :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
-                    alt="Profile Picture"
-                    :style="{ borderColor: brandingStore.colors.secondary, height: '190px'}"
-                />
-              </div>
-              <div class="ml-64 text-white w-25 min-w-60">
-                <p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
-                <p class="capitalize text-xl mt-1">{{ brandingStore.value.title }}</p>
-                <div class="text-xs">
-                  105 Followers - {{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
-                </div>
-              </div>
-            </div>
-
-            <!--  Actions - follow register-->
-            <div class="flex flex-col items-center justify-center w-full min-h-24">
-              <!-- Social Media Icons -->
-              <div class="flex flex-row space-x-6 justify-center">
-                <a
-                    v-for="socialNetwork in GetSocialsUrls()"
-                    :href="socialNetwork.url"
-                    target="_blank"
-                    class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
-                  <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
-                  <img v-if="socialNetwork.icon.includes('tiktok')"
-                       :src="socialNetwork.icon"
-                       class="w-6 h-6 mt-0.5"
-                       alt="Tiktok">
-                  <img v-if="socialNetwork.icon.includes('websiteIcon')"
-                       :src="socialNetwork.icon"
-                       class="w-6 h-6 mt-0.5"
-                       alt="Website">
-                </a>
-              </div>
-              <!-- Follow and Subscribe Buttons -->
-              <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
-                <subscribe-button></subscribe-button>
-              </div>
-            </div>
-          </div>
-
-          <div class="absolute bottom-6 right-8 z-20 shadow-2xl rounded-md text-white w-64 h-28 flex justify-center align-center"
-               :style="{ backgroundColor: brandingStore.colors.secondary}">
-           
-            <donation-button-banner               
-                :creator-id="creatorId"
-                :creator-name="creatorName"
-                :on-success-url="successUrl"
-                :on-cancelled-url="cancelledUrl"></donation-button-banner>
-          </div>
-       
-
-
-        </div>
-      </div>
-    </div>
-
-    <div class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
-         :style="{ backgroundColor: brandingStore.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
-      <div class="flex justify-evenly mt-3 w-full">
-        <RouterLink class="nav-button"
-                    :to="`/@${brandingStore.value.name}`">
-          Présentation
-        </RouterLink>
-        <RouterLink class="nav-button text-white hover:bg-gray-700"
-                    :to="`/@${brandingStore.value.name}/content`">
-          Exclusivité
-        </RouterLink>
-      </div>
-    </div>
-
-  </div>
-
-</template>
-
-<style scoped>
-.nav-button {
-  @apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4
-}
-
-.nav-button:hover {
-  @apply bg-purple-800;
-}
-</style>
-
-<script setup>
-import {ref, onMounted} from 'vue';
-import SubscribeButton from "@/views/creators/SubscribeButton.vue";
-import {useBrandingStore} from "@/stores/brandingStore.js";
+<script setup>
+import {ref, onMounted, onBeforeUnmount} from 'vue';
 import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
-import DonationButton from "@/views/creators/DonationButton.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const brandingStore = useBrandingStore()
 
+const brandingStore = useBrandingStore();
+const isMobile = ref(false);
+
+
+function updateIsMobile() {
+  isMobile.value = window.innerWidth <= 640; // Taille mobile (sm)
+}
+
+// Récupération des URLs des réseaux sociaux
 function GetSocialsUrls() {
-
   const socials = [];
+  const brandingSocials = brandingStore.value.socials;
 
-  if (brandingStore.value.socials.facebookUrl !== null) {
+  if (brandingSocials.facebookUrl) {
     socials.push({
       icon: "mdi-facebook",
-      url: brandingStore.value.socials.facebookUrl
-    })
+      url: brandingSocials.facebookUrl,
+    });
   }
-  if (brandingStore.value.socials.instagramUrl !== null) {
+  if (brandingSocials.instagramUrl) {
     socials.push({
       icon: "mdi-instagram",
-      url: brandingStore.value.socials.instagramUrl
-    })
+      url: brandingSocials.instagramUrl,
+    });
   }
-  if (brandingStore.value.socials.xUrl !== null) {
+  if (brandingSocials.xUrl) {
     socials.push({
       icon: "mdi-twitter",
-      url: brandingStore.value.socials.xUrl
-    })
+      url: brandingSocials.xUrl,
+    });
   }
-  if (brandingStore.value.socials.linkedInUrl !== null) {
+  if (brandingSocials.linkedInUrl) {
     socials.push({
-      icon: 'mdi-linkedin',
-      url: brandingStore.value.socials.linkedInUrl
-    })
+      icon: "mdi-linkedin",
+      url: brandingSocials.linkedInUrl,
+    });
   }
-  if (brandingStore.value.socials.tikTokUrl !== null) {
+  if (brandingSocials.tikTokUrl) {
     socials.push({
-      icon: '/images/socials/tiktok-white.png',
-      url: brandingStore.value.socials.tikTokUrl
-    })
+      icon: "/images/socials/tiktok-white.png",
+      url: brandingSocials.tikTokUrl,
+    });
   }
-  if (brandingStore.value.socials.youtubeUrl !== null) {
+  if (brandingSocials.youtubeUrl) {
     socials.push({
-      icon: 'mdi-youtube',
-      url: brandingStore.value.socials.youtubeUrl
-    })
+      icon: "mdi-youtube",
+      url: brandingSocials.youtubeUrl,
+    });
   }
-  if (brandingStore.value.socials.redditUrl !== null) {
+  if (brandingSocials.redditUrl) {
     socials.push({
-      icon: 'mdi-reddit',
-      url: brandingStore.value.socials.redditUrl
-    })
+      icon: "mdi-reddit",
+      url: brandingSocials.redditUrl,
+    });
   }
-  if (brandingStore.value.socials.websiteUrl !== null) {
+  if (brandingSocials.websiteUrl) {
     socials.push({
-      icon: 'mdi-web',
-      url: brandingStore.value.socials.websiteUrl
-    })
+      icon: "mdi-web",
+      url: brandingSocials.websiteUrl,
+    });
   }
 
   return socials;
 }
 
-// Calculer si l'utilisateur est abonné
+// Gestion du conteneur principal pour la stickiness
 const isSticky = ref(false);
 const mainContainer = ref(null);
 
 onMounted(() => {
+  // Mise à jour de l'état mobile lors du montage
+  updateIsMobile();
+
+  // Ajout d'un écouteur pour le redimensionnement de la fenêtre
+  window.addEventListener("resize", updateIsMobile);
+
+  // Intersection Observer pour gérer la stickiness
   const observer = new IntersectionObserver(
       ([entry]) => {
         isSticky.value = !entry.isIntersecting;
@@ -180,5 +92,137 @@ onMounted(() => {
     observer.observe(mainContainer.value);
   }
 });
+
+onBeforeUnmount(() => {
+  // Suppression de l'écouteur pour éviter les fuites de mémoire
+  window.removeEventListener("resize", updateIsMobile);
+});
 </script>
 
+<template>
+  <div class="flex flex-column w-full">
+    <!-- Container principal avec le profil -->
+    <div class="relative w-full shadow-xl rounded-2xl">
+      <div
+          ref="mainContainer"
+          class="rounded-b-2xl shadow-2xl"
+          :style="{ backgroundColor: brandingStore.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }"
+      >
+        <div>
+          <!-- Profile et Info -->
+          <div>
+            <!-- Version PC -->
+            <div v-show="!isMobile" class="  items-start">
+              <div>
+                <img
+                    class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10 "
+                    :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
+                    alt="Profile Picture"
+                    :style="{ borderColor: brandingStore.colors.secondary, height: '190px' }"
+                />
+              </div>
+              <div class="ml-64   w-25 min-w-60 flex flex-col" :style="{color: brandingStore.colors.onPrimary}">
+                <p class="capitalize text-3xl mt-4">{{ brandingStore.value.name }}</p>
+                <p class="capitalize text-lg -mb-14">{{ brandingStore.value.title }}</p>
+              </div>
+            </div>
+
+            <!-- Version Mobile -->
+            <div class="relative">
+              <div :style="{ borderColor: brandingStore.colors.secondary, height: '60px' }">
+                <div v-show="isMobile" class="absolute -top-7 left-0 px-3 flex flex-row items-center z-30">
+                  <div>
+                    <img
+                        class="shadow-2xl rounded-full border-solid z-20 max-w-[150px]"
+                        :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
+                        alt="Profile Picture"
+                        :style="{height: '135px'}"
+                    />
+                  </div>
+                  <div class=" ml-3 text-white w-full flex flex-col items-start">
+                    <p class="capitalize text-2xl">{{ brandingStore.value.name }}</p>
+                    <p class="capitalize text-md">{{ brandingStore.value.title }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+
+          <!-- Actions - Follow et Register -->
+          <div class="flex flex-col items-center justify-center w-full">
+            <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
+              <!-- Place pour un bouton Subscribe -->
+              <!--<subscribe-button></subscribe-button>-->
+            </div>
+          </div>
+        </div>
+
+        <!-- Bouton Support -->      
+          <div
+              class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center"
+              :class="{
+            'absolute bottom-6 right-8 w-64 h-28 ': !isMobile,
+            'fixed bottom-0 left-0 right-0 w-full h-16': isMobile
+          }"
+              :style="{ backgroundColor: brandingStore.colors.secondary }"
+          >        
+            <donation-button-banner
+                :creator-id="creatorId"
+                :creator-name="creatorName"
+                :on-success-url="successUrl"
+                :on-cancelled-url="cancelledUrl"
+            ></donation-button-banner>
+            </div>        
+        </div>     
+    </div>
+
+    <!-- Section pour les icônes de réseaux sociaux -->
+    <div
+        class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
+        :style="{ backgroundColor: brandingStore.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }"
+    >
+      <div class="flex justify-evenly mt-3 w-full">
+        <div class="flex flex-row space-x-6 justify-center">
+          <a
+              v-for="socialNetwork in GetSocialsUrls()"
+              :key="socialNetwork.url"
+              :href="socialNetwork.url"
+              target="_blank"
+              class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500"
+          >
+            <v-icon v-if="socialNetwork.icon.includes('mdi')">
+              {{ socialNetwork.icon }}
+            </v-icon>
+            <img
+                v-else
+                :src="socialNetwork.icon"
+                class="w-6 h-6 mt-0.5"
+                :alt="socialNetwork.url"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.nav-button {
+  @apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4
+}
+
+.nav-button:hover {
+  @apply bg-purple-800;
+}
+
+/* Transition CSS */
+.transition-all {
+  transition: all 0.3s ease-in-out;
+}
+</style>
+
+
+
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 9acbab7..b7746ef 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>
-    <div class="shadow-lg rounded-2xl mt-2 ">
+  <!-- PC -->
+  <div v-if="!isMobile" >
+    <div class="shadow-lg rounded-2xl mt-2">
       <div class="relative z-20">
-        <div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.colors.primary}"></div>
-        <!--Banner-->
+        <div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.colors.primary }"></div>
+        <!-- Banner -->
         <div class="relative">
           <div>
             <img
@@ -15,16 +16,77 @@
           </div>
         </div>
       </div>
-      <!--actions - Lowerpart-->
+      <!-- Actions - Lower Part -->
+      <banner-actions></banner-actions>
+    </div>
+  </div>
+
+  <!-- Mobile -->
+  <div v-if="isMobile">
+    <div class="shadow-lg rounded-2xl ">
+      <div class="relative z-20">
+        <div class="min-h-8 shadow-lg flex items-center px-4 py-2 "
+             :style="{ backgroundColor: branding.colors.primary, color: branding.colors.onPrimary }">
+          <!-- Logo et texte Hutopy -->
+          <router-link to="/">
+          <div class="flex items-center gap-2">         
+
+            <div class="text-xl font-bold">Hutopy</div>
+          </div>
+          </router-link>
+
+          <!-- Espace vide au centre -->
+          <div class="flex-1"></div>
+
+          <!-- Bouton Hamburger (visible uniquement sur mobile) -->
+          <router-link to="/login">  
+          <button class="lg:hidden flex items-center justify-center mr-4">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                 :stroke="branding.colors.onPrimary" class="w-8 h-8">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          </router-link>
+        </div>
+        
+        <!-- Banner -->
+        <div class="relative">
+          <div>
+            <img
+                class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
+                :src="branding.value.images.banner ? branding.value.images.banner : '/images/placeholders/banner.png'"
+                alt="Profile Banner"
+                style="max-height: 425px"
+            >
+          </div>
+        </div>
+      </div>
+      <!-- Actions - Lower Part -->
       <banner-actions></banner-actions>
     </div>
   </div>
 </template>
 
+
 <script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import BannerActions from "@/views/creators/BannerActions.vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const branding = useBrandingStore()
+const branding = useBrandingStore();
+const isMobile = ref(false);
+
+function updateIsMobile() {
+  isMobile.value = window.innerWidth <= 640; 
+}
+
+onMounted(() => {
+  updateIsMobile(); 
+  window.addEventListener("resize", updateIsMobile); 
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateIsMobile);
+});
 
 </script>
\ No newline at end of file
diff --git a/src/views/creators/CreatorHome.vue b/src/views/creators/CreatorHome.vue
index 7c311f1..fe0d24f 100644
--- a/src/views/creators/CreatorHome.vue
+++ b/src/views/creators/CreatorHome.vue
@@ -1,5 +1,5 @@
-<template>
-  <div class="flex flex-col space-y-8 px-6 rounded-2xl py-8"
+<template>  
+  <div class="flex flex-col space-y-8 px-6 rounded-2xl py-8 shadow-2xl"
        :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
 
     <!-- Boutons pour Éditer/Enregistrer et Annuler -->
@@ -120,78 +120,79 @@
     <!-- 4 images côte à côte -->
 
     <div>
-      <div v-if="isEditMode" class="text-2xl py-2"> Images</div>
-      <div class="flex justify-center space-x-4">
+      <div v-if="isEditMode" class="text-2xl py-2">Images</div>
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
         <!-- Première image -->
-        <div v-if="image1Url || isEditMode" :class="image1Url" class="relative w-1/2">
+        <div v-if="image1Url || isEditMode" class="relative">
           <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image1Url', $event)" class="hidden"/>
+            <input type="file" @change="updateImage('image1Url', $event)" class="hidden" />
             <img :src="image1Url || fallbackImage"
                  alt="Image 1"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+                 class="rounded-md max-w-full h-auto cursor-pointer" />
           </label>
           <img v-else-if="image1Url" :src="image1Url"
                alt="Image 1"
-               class="rounded-md max-w-full h-auto"/>
+               class="rounded-md max-w-full h-auto" />
           <button v-if="isEditMode" @click="deleteImage('image1Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
             X
           </button>
         </div>
 
         <!-- Deuxième image -->
-        <div v-if="image2Url || isEditMode" :class="image1Url" class="relative w-1/2">
+        <div v-if="image2Url || isEditMode" class="relative">
           <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image2Url', $event)" class="hidden"/>
+            <input type="file" @change="updateImage('image2Url', $event)" class="hidden" />
             <img :src="image2Url || fallbackImage"
                  alt="Image 2"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+                 class="rounded-md max-w-full h-auto cursor-pointer" />
           </label>
           <img v-else-if="image2Url" :src="image2Url"
                alt="Image 2"
-               class="rounded-md max-w-full h-auto"/>
+               class="rounded-md max-w-full h-auto" />
           <button v-if="isEditMode" @click="deleteImage('image2Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
             X
           </button>
         </div>
 
         <!-- Troisième image -->
-        <div v-if="image3Url || isEditMode" :class="image3Url" class="relative w-1/2">
+        <div v-if="image3Url || isEditMode" class="relative">
           <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image3Url', $event)" class="hidden"/>
+            <input type="file" @change="updateImage('image3Url', $event)" class="hidden" />
             <img :src="image3Url || fallbackImage"
-                 alt="Image 2"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+                 alt="Image 3"
+                 class="rounded-md max-w-full h-auto cursor-pointer" />
           </label>
           <img v-else-if="image3Url" :src="image3Url"
-               alt="Image 2"
-               class="rounded-md max-w-full h-auto"/>
+               alt="Image 3"
+               class="rounded-md max-w-full h-auto" />
           <button v-if="isEditMode" @click="deleteImage('image3Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
             X
           </button>
         </div>
 
         <!-- Quatrième image -->
-        <div v-if="image4Url || isEditMode" :class="image4Url " class="relative w-1/2">
+        <div v-if="image4Url || isEditMode" class="relative">
           <label v-if="isEditMode">
-            <input type="file" @change="updateImage('image4Url', $event)" class="hidden"/>
+            <input type="file" @change="updateImage('image4Url', $event)" class="hidden" />
             <img :src="image4Url || fallbackImage"
-                 alt="Image 2"
-                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+                 alt="Image 4"
+                 class="rounded-md max-w-full h-auto cursor-pointer" />
           </label>
           <img v-else-if="image4Url" :src="image4Url"
-               alt="Image 2"
-               class="rounded-md max-w-full h-auto"/>
+               alt="Image 4"
+               class="rounded-md max-w-full h-auto" />
           <button v-if="isEditMode" @click="deleteImage('image4Url')"
-                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
             X
           </button>
         </div>
       </div>
     </div>
 
+
     <!-- Texte sous les deux images -->
     <div v-if="isEditMode">
       <div class="text-2xl py-2"> Images</div>
@@ -252,7 +253,6 @@
       <div v-if="isEditMode" class="flex flex-col space-y-2">
         <!-- Édition du téléphone -->
         <div>
-
           <label class="text-lg">Numéro de téléphone</label>
           <input
               v-model="editablePhoneNumber"
@@ -274,11 +274,7 @@
       </div>
       <div
           v-else
-          :class="{
-      'flex justify-center items-center': phoneNumber || email,
-      'flex justify-center': !(phoneNumber && email),
-    }"
-          class="space-x-64"
+          class="flex flex-col sm:flex-row sm:space-x-64 space-y-4 sm:space-y-0 justify-center items-center"
       >
         <!-- Affichage du téléphone -->
         <div v-if="editablePhoneNumber" class="flex items-center space-x-2">
@@ -295,10 +291,10 @@
             {{ editableEmail }}
           </a>
         </div>
-
       </div>
     </div>
 
+
   </div>
 
 </template>
@@ -310,6 +306,11 @@ import { useClient } from "@/plugins/api.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useAuthStore} from "@/stores/authStore.js";
 import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
+import { useDisplay } from "vuetify";
+import { watch} from "vue";
+
+const { smAndDown } = useDisplay();
+const isMobileView = ref(smAndDown.value);
 
 
 const creatorProfileStore = useCreatorProfileStore();
@@ -322,7 +323,9 @@ const isEditMode = ref(false);
 
 const authStore = useAuthStore();
 
-
+watch(smAndDown, (newVal) => {
+  isMobileView.value = newVal;
+});
 
 // Image de fallback pour l'éditeur
 const fallbackImage = "https://via.placeholder.com/300?text=Image+non+disponible";
diff --git a/src/views/creators/DonationButtonBanner.vue b/src/views/creators/DonationButtonBanner.vue
index 32921b0..89a7f49 100644
--- a/src/views/creators/DonationButtonBanner.vue
+++ b/src/views/creators/DonationButtonBanner.vue
@@ -1,6 +1,7 @@
 <template>
+  
   <v-btn variant="text" style="font-size: x-large; height: 100%" block   @click="openDonationDialog()">
-   Je supporte
+    Je Soutiens
   </v-btn>
 
 
@@ -8,7 +9,7 @@
     <v-form>
       <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
         <div class="py-4 text-2xl font-bold border-b mb-2">
-          Je Soutiens!
+          Je Soutiens
         </div>
 
         <div class="flex flex-row align-center px-3">
diff --git a/src/views/main/Footer.vue b/src/views/main/Footer.vue
index 4fd0ac6..3b5b2e0 100644
--- a/src/views/main/Footer.vue
+++ b/src/views/main/Footer.vue
@@ -10,7 +10,7 @@ const brandingStore = useBrandingStore()
 
   <footer class="py-8 flex flex-col gap-8" :style="{color: brandingStore.colors.onBackground}">
 
-    <div class="centered-text" :style="{color: brandingStore.colors.onBackground}" >Hutopy</div>
+    <div class="centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">Hutopy</div>
 
 
     <div class="flex flex-row justify-center gap-10">
@@ -27,7 +27,7 @@ const brandingStore = useBrandingStore()
       </a>
     </div>
 
-    <div class="flex flex-row flex-wrap justify-center gap-4" >
+    <div class="flex flex-row flex-wrap justify-center gap-4 px-4 "  >
       <router-link to="/documents/helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
         Aide & Contact
       </router-link>
@@ -51,7 +51,7 @@ const brandingStore = useBrandingStore()
       </router-link>
     </div>
 
-    <div class="flex justify-center base-text"  :style="{color: brandingStore.colors.onBackground}">
+    <div class="flex justify-center base-text mb-13"  :style="{color: brandingStore.colors.onBackground}">
       Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
     </div>
  
@@ -81,12 +81,26 @@ a:hover {
 .centered-text {
   display: flex;
   justify-content: center;
-  align-items: center; 
-  letter-spacing: 125px; 
-  font-size: 2rem; 
-  font-weight: bold; 
+  align-items: center;
+  letter-spacing: 125px;
+  font-size: 2rem;
+  font-weight: bold;
   margin-left: 7rem;
 }
 
+@media (max-width: 768px) {
+  .centered-text {
+    letter-spacing: 60px;
+    margin-left: 2rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .centered-text {
+    letter-spacing: 40px;
+    margin-left: 1rem;
+  }
+}
+
 
 </style>
\ No newline at end of file
diff --git a/src/views/main/SideBar.vue b/src/views/main/SideBar.vue
index e8b79fc..24adb78 100644
--- a/src/views/main/SideBar.vue
+++ b/src/views/main/SideBar.vue
@@ -62,26 +62,26 @@ initializeLocale();
     </div>
 
     
-    <div class="flex-grow mt-4" :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
-      <template v-if="authStore.isAuthenticated">  
-        <div class="font-bold" :class="{ 'text-center': !sideBarStore.isOpen }">
-          <span v-if="sideBarStore.isOpen">{{ $t('sidebar.subscriptionTitle') }}</span>
-          <span v-else>A</span>
-        </div>
-        <div
-            class="border-b border-gray-300 my-4 mx-auto"
-            :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"
-        ></div>
-        <subscription-list v-if="sideBarStore.isOpen"></subscription-list>
-      </template>
-    </div>
+<!--    <div class="flex-grow mt-4" :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">-->
+<!--      <template v-if="authStore.isAuthenticated">  -->
+<!--        <div class="font-bold" :class="{ 'text-center': !sideBarStore.isOpen }">-->
+<!--          <span v-if="sideBarStore.isOpen">{{ $t('sidebar.subscriptionTitle') }}</span>-->
+<!--          <span v-else>A</span>-->
+<!--        </div>-->
+<!--        <div-->
+<!--            class="border-b border-gray-300 my-4 mx-auto"-->
+<!--            :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"-->
+<!--        ></div>-->
+<!--        <subscription-list v-if="sideBarStore.isOpen"></subscription-list>-->
+<!--      </template>-->
+<!--    </div>-->
 
     <div
         class="border-b border-gray-300 my-4 mx-auto"
         :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"
     ></div>
 
-
+<div class="flex-grow"></div>
 
     <!-- SECTION UTILISATEUR -->
     <div :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
@@ -100,11 +100,11 @@ initializeLocale();
       </div>
 
       <div class="flex flex-col gap-4 mb-4">
-        <router-link v-if="creatorProfileStore.hasCreator" :to="`/content/editor`">
-          <v-btn class="w-full justify-start" prepend-icon="mdi-pencil" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-            <span v-if="sideBarStore.isOpen">Éditeur</span>
-          </v-btn>
-        </router-link>
+<!--        <router-link v-if="creatorProfileStore.hasCreator" :to="`/content/editor`">-->
+<!--          <v-btn class="w-full justify-start" prepend-icon="mdi-pencil" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">-->
+<!--            <span v-if="sideBarStore.isOpen">Éditeur</span>-->
+<!--          </v-btn>-->
+<!--        </router-link>-->
         
         <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
           <v-btn class="w-full justify-start" prepend-icon="mdi-home-account" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">
@@ -124,18 +124,22 @@ initializeLocale();
         </div>
 
         <v-btn variant="flat" class="w-full justify-start" prepend-icon="mdi-translate-variant" @click="toggleLanguage" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-          <span v-if="sideBarStore.isOpen">{{ selectedLanguage.value === 'fr' ? 'Fr' : 'En' }}</span>
+          <span v-if="sideBarStore.isOpen">{{ $t('language.language') }}</span>
         </v-btn>
 
-        <div>
-          <v-btn @click="toggleMenu"  variant="flat" class="w-full justify-start" :prepend-icon="sideBarStore.isOpen ? 'mdi-arrow-collapse-left' : 'mdi-arrow-collapse-right'" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-            <span v-if="sideBarStore.isOpen">{{ sideBarStore.isOpen ? 'Réduire' : '' }}</span>
-          </v-btn>
-        </div>
+        <v-btn
+            @click="toggleMenu"
+            variant="flat"
+            class="w-full justify-start"
+            :prepend-icon="sideBarStore.isOpen ? 'mdi-arrow-collapse-left' : 'mdi-arrow-collapse-right'"
+            :class="!sideBarStore.isOpen ? 'my-2' : ''"
+        >
+          <span v-if="sideBarStore.isOpen">{{ $t('sidebar.Reduce') }}</span>
+        </v-btn>
 
         <div v-if="!authStore.isAuthenticated">
           <v-btn to="/login" variant="flat" class="justify-start" prepend-icon="mdi-login" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-            <span v-if="sideBarStore.isOpen">Connexion</span>
+            <span v-if="sideBarStore.isOpen">{{ $t('sidebar.connection') }}</span>
           </v-btn>
         </div>
         <div v-else>
diff --git a/src/views/profile/ProfilePage.vue b/src/views/profile/ProfilePage.vue
index 0785d42..a6d7904 100644
--- a/src/views/profile/ProfilePage.vue
+++ b/src/views/profile/ProfilePage.vue
@@ -1,104 +1,99 @@
 <template>
-  <div class="flex flex-col md:flex-row bg-[#f4f4f4] h-full">
+  <!-- Mobile -->
+  <div v-if="isMobileView" class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6 text-center">
+    <!-- Image -->
+    <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" alt="Image" class="w-64 h-64 rounded-full mb-4 border" />
 
-    <!-- Left Menu -->
-    <div class=" z-20 w-full md:max-w-xs fixed md:sticky md:top-0 md:flex md:flex-col top-0">
-      <div class="sticky top-20 z-30">
-        <div class="flex flex-col items-center md:items-start md:pl-4 mt-16">
-          <h1 class="text-2xl py-4 font-bold text-center md:text-left">{{$t('profilemenu.manageyouraccount')}}</h1>
-
-          <div class="relative flex items-center md:mt-0 w-full">
-            <!-- Navigation buttons for small screens -->
-            <button @click="scrollLeftFunc"
-                    class="rounded p-1 absolute left-2 z-10 md:hidden text-fuchsia-800  text-2xl ">
-              <v-icon>mdi-chevron-left</v-icon>
-            </button>
-
-            <div
-                ref="scrollContainer"
-                class="flex md:flex-col space-x-2 space-y-0 md:space-x-0 md:space-y-2 p-4 items-center md:items-start overflow-x-scroll md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px] px-1"
-                @mousedown="mouseDown"
-                @mouseleave="mouseLeave"
-                @mouseup="mouseUp"
-                @mousemove="mouseMove">
-
-              <v-btn variant="text" @click="currentComponent = 'CreatorPage'">
-                <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
-                {{ $t('profilemenu.creator') }}
-              </v-btn>
-
-              <v-btn variant="text" @click="currentComponent = 'AccountPage'">
-                <v-icon class="mr-2">mdi-information</v-icon>
-                {{ $t('profilemenu.user') }}
-              </v-btn>
-
-            </div>
-            <button @click="scrollRightFunc"
-                    class="rounded p-1 absolute right-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl">
-              <v-icon>mdi-chevron-right</v-icon>
-            </button>
-          </div>
-
-        </div>
-      </div>
-    </div>
-
-    <!-- Mid Content -->
-    <div class="flex flex-col flex-1 align-center py-12 p-3 mt-28 md:mt-0">
-      <template v-if="currentComponent === 'CreatorPage'">
-        <creator-page></creator-page>
-      </template>
-      <template v-else-if="currentComponent === 'AccountPage'">
-        <account-page></account-page>
-      </template>
+    <!-- Message -->
+    <div class="text-lg text-gray-700 mt-8">
+      <p class="font-semibold mb-2">Pour vous connecter et modifier votre page, veuillez utiliser un appareil avec un écran plus large, comme un ordinateur.</p>
+      <p>Pour le moment, l'expérience sur téléphone n'est pas encore complétée.</p>
+      <p class="mt-4 font-bold">Désolé de l'inconvénient.</p>
     </div>
   </div>
 
+  <!-- PC -->
+  <div v-else>
+    <div class="flex flex-col md:flex-row bg-[#f4f4f4] h-full">
+      <!-- Left Menu -->
+      <div class=" z-20 w-full md:max-w-xs fixed md:sticky md:top-0 md:flex md:flex-col top-0">
+        <div class="sticky top-20 z-30">
+          <div class="flex flex-col items-center md:items-start md:pl-4 mt-16">
+            <h1 class="text-2xl py-4 font-bold text-center md:text-left">{{$t('profilemenu.manageyouraccount')}}</h1>
+
+            <div class="relative flex items-center md:mt-0 w-full">
+              <!-- Navigation buttons for small screens -->
+              <button @click="scrollLeftFunc"
+                      class="rounded p-1 absolute left-2 z-10 md:hidden text-fuchsia-800 text-2xl ">
+                <v-icon>mdi-chevron-left</v-icon>
+              </button>
+
+              <div
+                  ref="scrollContainer"
+                  class="flex md:flex-col space-x-2 space-y-0 md:space-x-0 md:space-y-2 p-4 items-center md:items-start overflow-x-scroll md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px] px-1"
+                  @mousedown="mouseDown"
+                  @mouseleave="mouseLeave"
+                  @mouseup="mouseUp"
+                  @mousemove="mouseMove">
+
+                <v-btn variant="text" @click="currentComponent = 'CreatorPage'">
+                  <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
+                  {{ $t('profilemenu.creator') }}
+                </v-btn>
+
+                <v-btn variant="text" @click="currentComponent = 'AccountPage'">
+                  <v-icon class="mr-2">mdi-information</v-icon>
+                  {{ $t('profilemenu.user') }}
+                </v-btn>
+
+              </div>
+              <button @click="scrollRightFunc"
+                      class="rounded p-1 absolute right-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl">
+                <v-icon>mdi-chevron-right</v-icon>
+              </button>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+      <!-- Mid Content -->
+      <div class="flex flex-col flex-1 align-center py-12 p-3 mt-28 md:mt-0">
+        <template v-if="currentComponent === 'CreatorPage'">
+          <creator-page></creator-page>
+        </template>
+        <template v-else-if="currentComponent === 'AccountPage'">
+          <account-page></account-page>
+        </template>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import {ref, onMounted} from "vue";
+import { ref, watch } from "vue";
 import CreatorPage from "@/views/profile/creators/CreatorPage.vue";
 import AccountPage from "@/views/profile/account/AccountPage.vue";
-import {useRoute} from "vue-router";
+import { useRoute } from "vue-router";
+import { useDisplay } from "vuetify";
 
+const { smAndDown } = useDisplay();
 
-const route = useRoute()
-const startingComponent = route.query.target || 'AccountPage'
-
+const route = useRoute();
+const startingComponent = route.query.target || 'CreatorPage';
 const currentComponent = ref(startingComponent);
+
+const isMobileView = ref(smAndDown.value);
+
+watch(smAndDown, (newVal) => {
+  isMobileView.value = newVal;
+});
+
+// Gestion du slider (scroll sur petit écran)
 const isDown = ref(false);
 const startX = ref(0);
 const scrollLeft = ref(0);
 
-onMounted(() => {
-  const slider = document.querySelector('.custom-scroll');
-  slider.addEventListener('mousedown', (e) => {
-    isDown.value = true;
-    slider.classList.add('active');
-    startX.value = e.pageX - slider.offsetLeft;
-    scrollLeft.value = slider.scrollLeft;
-  });
-
-  slider.addEventListener('mouseleave', () => {
-    isDown.value = false;
-    slider.classList.remove('active');
-  });
-
-  slider.addEventListener('mouseup', () => {
-    isDown.value = false;
-    slider.classList.remove('active');
-  });
-
-  slider.addEventListener('mousemove', (e) => {
-    if (!isDown.value) return;
-    e.preventDefault();
-    const x = e.pageX - slider.offsetLeft;
-    const walk = (x - startX.value) * 3; // scroll-fast
-    slider.scrollLeft = scrollLeft.value - walk;
-  });
-});
-
 const mouseDown = (e) => {
   const slider = document.querySelector('.custom-scroll');
   isDown.value = true;
@@ -130,17 +125,17 @@ const mouseMove = (e) => {
 
 const scrollLeftFunc = () => {
   const container = document.querySelector('.custom-scroll');
-  container.scrollBy({left: -100, behavior: 'smooth'});
+  container.scrollBy({ left: -100, behavior: 'smooth' });
 };
 
 const scrollRightFunc = () => {
   const container = document.querySelector('.custom-scroll');
-  container.scrollBy({left: 100, behavior: 'smooth'});
+  container.scrollBy({ left: 100, behavior: 'smooth' });
 };
 </script>
 
-<style scoped>
 
+<style scoped>
 .custom-scroll {
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
@@ -149,5 +144,4 @@ const scrollRightFunc = () => {
 .custom-scroll::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
-
 </style>
diff --git a/src/views/profile/account/AccountPage.vue b/src/views/profile/account/AccountPage.vue
index b6e8cb6..20d3fd8 100644
--- a/src/views/profile/account/AccountPage.vue
+++ b/src/views/profile/account/AccountPage.vue
@@ -11,20 +11,20 @@
         {{ $t('personnalinformation.informations') }}
       </v-card-title>
 
-      <button
-          class="editableValue"
-          @click="openEditPortrait">
-        <span class="label">{{ $t('personnalinformation.profilepicture') }}</span>
-        <span class="value">Un portrait vous permet de personnaliser votre profil</span>
-        <span>
-            <img
-                :src="userProfileStore.user.portraitUrl"
-                alt="Profile Image"
-                class="rounded-full"
-                width="48px"
-                height="48px"/>
-        </span>
-      </button>
+<!--      <button-->
+<!--          class="editableValue"-->
+<!--          @click="openEditPortrait">-->
+<!--        <span class="label">{{ $t('personnalinformation.profilepicture') }}</span>-->
+<!--        <span class="value">Un portrait vous permet de personnaliser votre profil</span>-->
+<!--        <span>-->
+<!--            <img-->
+<!--                :src="userProfileStore.user.portraitUrl"-->
+<!--                alt="Profile Image"-->
+<!--                class="rounded-full"-->
+<!--                width="48px"-->
+<!--                height="48px"/>-->
+<!--        </span>-->
+<!--      </button>-->
 
       <button
           class="editableValue"
@@ -42,13 +42,13 @@
         <span><v-icon>mdi-chevron-right</v-icon></span>
       </button>
 
-      <button
-          class="editableValue"
-          @click="openEditBirthday">
-        <span class="label">{{ $t('personnalinformation.dob') }}</span>
-        <span class="value">{{ userProfileStore.user.birthDate }}</span>
-        <span><v-icon>mdi-chevron-right</v-icon></span>
-      </button>
+<!--      <button-->
+<!--          class="editableValue"-->
+<!--          @click="openEditBirthday">-->
+<!--        <span class="label">{{ $t('personnalinformation.dob') }}</span>-->
+<!--        <span class="value">{{ userProfileStore.user.birthDate }}</span>-->
+<!--        <span><v-icon>mdi-chevron-right</v-icon></span>-->
+<!--      </button>-->
 
     </v-card>
 
@@ -66,29 +66,29 @@
         <span><v-icon>mdi-chevron-right</v-icon></span>
       </button>
 
-      <button
-          class="editableValue"
-          @click="openEditPhone">
-        <span class="label">{{ $t('personnalinformation.phone') }}</span>
-        <span class="value">{{ userProfileStore.user.phoneNumber }}</span>
-        <span><v-icon>mdi-chevron-right</v-icon></span>
-      </button>
+<!--      <button-->
+<!--          class="editableValue"-->
+<!--          @click="openEditPhone">-->
+<!--        <span class="label">{{ $t('personnalinformation.phone') }}</span>-->
+<!--        <span class="value">{{ userProfileStore.user.phoneNumber }}</span>-->
+<!--        <span><v-icon>mdi-chevron-right</v-icon></span>-->
+<!--      </button>-->
     </v-card>
 
     <!-- Address -->
-    <v-card class="w-full">
-      <v-card-title>
-        {{ $t('personnalinformation.addresses') }}
-      </v-card-title>
+<!--    <v-card class="w-full">-->
+<!--      <v-card-title>-->
+<!--        {{ $t('personnalinformation.addresses') }}-->
+<!--      </v-card-title>-->
 
-      <button
-          class="editableValue"
-          @click="openEditAddress">
-        <span class="label">{{ $t('personnalinformation.home') }}</span>
-        <span class="value">{{ userProfileStore.user.address }}</span>
-        <span><v-icon>mdi-chevron-right</v-icon></span>
-      </button>
-    </v-card>
+<!--      <button-->
+<!--          class="editableValue"-->
+<!--          @click="openEditAddress">-->
+<!--        <span class="label">{{ $t('personnalinformation.home') }}</span>-->
+<!--        <span class="value">{{ userProfileStore.user.address }}</span>-->
+<!--        <span><v-icon>mdi-chevron-right</v-icon></span>-->
+<!--      </button>-->
+<!--    </v-card>-->
   </div>
 
   <!-- Modal -->