Modification de la searchbar

src/App.vue

@@ -42,10 +42,12 @@
 
         <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>
+             class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
+             style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white; ">
+          <v-icon class="text-2xl">mdi-gift-outline</v-icon>
         </div>
 
+
       </div>
 
     </div>

src/views/main/CreatorFeed.vue

@@ -0,0 +1,50 @@
+<template>
+
+  <div class="mt-28">
+    
+    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl mb-4">
+      <div class="md:flex">
+        <div class="md:flex-shrink-0">
+          <img class="h-48 w-full object-cover md:h-full md:w-48" src="/images/usersmedia/HutopyProfile/banners/banner01.png" alt="Image">
+        </div>
+        <div class="p-8">
+          <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Nom du réseau social</div>
+          <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
+          <p class="mt-2 text-gray-500">Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl mb-4">
+      <div class="md:flex">
+        <div class="md:flex-shrink-0">
+          <img class="h-48 w-full object-cover md:h-full md:w-48" src="/images/usersmedia/HutopyProfile/banners/banner01.png" alt="Image">
+        </div>
+        <div class="p-8">
+          <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Nom du réseau social</div>
+          <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
+          <p class="mt-2 text-gray-500">Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl mb-4">
+      <div class="md:flex">
+        <div class="md:flex-shrink-0">
+          <img class="h-48 w-full object-cover md:h-full md:w-48" src="/images/usersmedia/HutopyProfile/banners/banner01.png" alt="Image">
+        </div>
+        <div class="p-8">
+          <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Nom du réseau social</div>
+          <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
+          <p class="mt-2 text-gray-500">Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+  
+
+  
+</template>
+<script setup lang="ts">
+</script>

src/views/main/Header.vue

@@ -4,7 +4,7 @@
 
     <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"
+         class="bg-white shadow-md shadow-gray-700 top-14 left-0 absolute z-50 rounded-br-2xl border-t-2 border-gray-800"
          @mouseleave="handleMouseLeave"
          @mouseenter="handleMouseEnter">
       <SiteMenu></SiteMenu>
@@ -27,11 +27,14 @@
 
     <div class="flex items-center">
       <v-text-field
+          density=compact
+          rounded
+          variant="outlined"
           v-model="searchQuery"
           placeholder="Search"
           hide-details
           clearable
-          class="rounded-full mx-2 w-80"
+          class="rounded-full mx-2 w-80 "
           append-inner-icon="mdi-magnify"
           @click:append-inner="onSearch">
       </v-text-field>

src/views/manualusers/ARPS.vue

@@ -85,9 +85,19 @@
       </div>
     </div>
   </div>
+
+  <CreatorFeed></CreatorFeed>
+
+
+
+
+
+  
 </template>
 
 <script setup>
+
+import CreatorFeed from "@/views/main/CreatorFeed.vue";
 let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
 let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
 </script>