Change router links for documentation.

src/router/router.js

@@ -24,6 +24,7 @@ import CreatorContent from "@/views/creators/CreatorContent.vue";
 import CreatorHome from "@/views/creators/CreatorHome.vue";
 import CTA01 from "@/views/CTA01.vue";
 import SubscriptionMenu from "@/views/creators/SubscriptionMenu.vue";
+import Utilitylinks from "@/views/documentation/utilitylinks.vue";
 
 
 const routes = [
@@ -65,44 +66,51 @@ const routes = [
             },
         ]
     },
+    {
+        path: '/utilitylinks',
+        component: Utilitylinks,
+        children: [
+            {
+                path: '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: CreatorGuide
+            },
+            {
+                path: 'about',
+                name: 'about',
+                component: About
+            },
+            {
+                path: 'pricing',
+                name: 'pricing',
+                component: Pricing
+            },
+        ]
+    },
     {
         path: '/content/post',
         component: PostContent,
     },
-    {
-        path: '/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: CreatorGuide
-    },
-    {
-        path: '/about',
-        name: 'about',
-        component: About
-    },
-    {
-        path: '/pricing',
-        name: 'pricing',
-        component: Pricing
-    },
+  
     {
         path: '/join',
         name: 'join',

src/views/creators/CreatorLayout.vue

@@ -25,6 +25,5 @@
 import CreatorBanner from "@/views/creators/CreatorBanner.vue";
 import Footer from "@/views/main/Footer.vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";
-
 const brandingStore = useBrandingStore()
 </script>

src/views/documentation/About.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">À propos</h1>
+  <div>  
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">À propos</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">

src/views/documentation/ContentPolicy.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">Politique de Contenu</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Politique de Contenu</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -127,4 +126,6 @@
 
 <style>
 @import '@/cssstyle/tosstyle.css';
-</style>
+</style>
+<script setup lang="ts">
+</script>

src/views/documentation/CreatorGuide.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">Guide pour les Créateurs</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Guide pour les Créateurs</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -43,3 +42,5 @@
 <style>
 @import '@/cssstyle/tosstyle.css';
 </style>
+<script setup lang="ts">
+</script>

src/views/documentation/FAQ.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">FAQ</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">FAQ</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -89,3 +88,5 @@
   @apply m-2 text-red-500 my-4;
 }
 </style>
+<script setup lang="ts">
+</script>

src/views/documentation/HelpAndContact.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10"> 
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">Aide et Contact</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Aide et contact</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -38,4 +37,6 @@
 
 <style>
 @import '@/cssstyle/tosstyle.css';
-</style>
+</style>
+<script setup lang="ts">
+</script>

src/views/documentation/Pricing.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-6 absolute inset-0 flex items-center justify-center text-white uppercase">Frais</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Frais</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -20,8 +19,7 @@
     <p class="text-justify p-tos">
       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>
-  
+  </div>  
 </template>
 
 <style>

src/views/documentation/TermsAndConditions.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">Conditions générales</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Conditions générales</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -67,4 +66,6 @@
 
 <style>
 @import '@/cssstyle/tosstyle.css';
-</style>
+</style>
+<script setup lang="ts">
+</script>

src/views/documentation/utilitylinks.vue

@@ -0,0 +1,47 @@
+<script setup>
+import {useBrandingStore} from "@/stores/brandingStore.js";
+const brandingStore = useBrandingStore()
+import Footer from "@/views/main/Footer.vue";
+</script>
+
+<template>
+  <div>    
+  <div>
+    <img src="/images/hutopymedia/banners/hutopyul.png" class="max-w-[1000px] rounded-2xl shadow"  alt="">  
+  </div>
+
+    <div class="flex flex-row flex-wrap justify-center gap-6 py-2" >
+      <router-link to="helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
+        Aide & Contact
+      </router-link>
+      <router-link to="faq"  :style="{color: brandingStore.colors.onBackground}">
+        FAQ
+      </router-link>
+      <router-link to="guideforcreators"  :style="{color: brandingStore.colors.onBackground}">
+        Guide pour les créateurs
+      </router-link>
+      <router-link to="termsandconditions"  :style="{color: brandingStore.colors.onBackground}">
+        Termes et Conditions
+      </router-link>
+      <router-link to="contentpolicy"  :style="{color: brandingStore.colors.onBackground}">
+        Politique de Contenu
+      </router-link>
+      <router-link to="about"  :style="{color: brandingStore.colors.onBackground}">
+        À Propos
+      </router-link>
+      <router-link to="pricing"  :style="{color: brandingStore.colors.onBackground}">
+        Frais
+      </router-link>
+    </div>
+    
+  <div class="py-8 flex-grow">
+    <router-view></router-view>
+  </div>
+  <Footer></Footer>
+  </div>
+  
+</template>
+
+<style scoped>
+
+</style>

src/views/main/Footer.vue

@@ -28,25 +28,25 @@ const brandingStore = useBrandingStore()
     </div>
 
     <div class="flex flex-row flex-wrap justify-center gap-4" >
-      <router-link to="/helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
         Aide & Contact
       </router-link>
-      <router-link to="/faq"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="faq"  :style="{color: brandingStore.colors.onBackground}">
         FAQ
       </router-link>
-      <router-link to="/guideforcreators"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="guideforcreators"  :style="{color: brandingStore.colors.onBackground}">
         Guide pour les créateurs
       </router-link>
-      <router-link to="/termsandconditions"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="termsandconditions"  :style="{color: brandingStore.colors.onBackground}">
         Termes et Conditions
       </router-link>
-      <router-link to="/contentpolicy"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="contentpolicy"  :style="{color: brandingStore.colors.onBackground}">
         Politique de Contenu
       </router-link>
-      <router-link to="/about"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="about"  :style="{color: brandingStore.colors.onBackground}">
         À Propos
       </router-link>
-      <router-link to="/pricing"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="pricing"  :style="{color: brandingStore.colors.onBackground}">
         Frais
       </router-link>
     </div>