some comments added

src/components/home_components/contacts.vue

@@ -15,10 +15,10 @@ const contacts =[
       <ul class="space-y-1">
         <li v-for="(contact) in contacts" :key="contact" class="flex rounded-lg">
           <!--CONTACT-->
-          <img src="../../assets/default_pp.png" alt="" class="w-12 h-12 mr-2">
+          <img src="../../assets/default_pp.png" alt="" class="w-12 h-12 mr-2"> <!--PROFILBILD-->
           <div class="">
-            <label class=" font-bold m-1 text-weiss">{{ contact.display_name }}</label><br>
-            <p class="text-base m-1 text-grau2 underline-offset-3">@{{ contact.username }}</p>
+            <label class=" font-bold m-1 text-weiss">{{ contact.display_name }}</label><br> <!-- display name-->
+            <p class="text-base m-1 text-grau2 underline-offset-3">@{{ contact.username }}</p> <!-- username-->
           </div>
         </li>
       </ul>

src/components/home_components/feed.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
   import { ref } from "vue";
   // import {valueOf} from "tailwindcss";
+
+  // PLACEHOLDER
   const post = ref([
     {id: 1,
       profile_picture: "../../assets/default_pp.png",

src/components/home_components/navigationbar.vue

@@ -2,6 +2,7 @@
 <script setup lang="ts">
 // Funktionen um die Seiten zu öffnen
 // home -> app.vue
+// PLACEHOLDER
 import router from "../../router";
 
 const sb_home = () => {
@@ -28,10 +29,10 @@ const sb_settings = () => {
 
 <template>
   <div class="pt-4 border-b-2 border-b-grau2">
-    <div class="items-center flex justify-center">
+    <div class="items-center flex justify-center"><!-- BILD-->
       <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto" @click="sb_home">
     </div>
-    <div class="align-middle space-y-3 pt-3 pl-3 pb-4 font-bold text-xl">
+    <div class="align-middle space-y-3 pt-3 pl-3 pb-4 font-bold text-xl"> <!-- Icons (Bild) und Text -->
       <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="sb_home"><img  class="pr-2" src="../../assets/icons/home.png" alt=""> Home</label>
       <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="sb_search"><img class="pr-2" src="../../assets/icons/lupe.png" alt="">Search</label>
       <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="sb_notifications"><img class="pr-2" src="../../assets/icons/glocke.png" alt="">Notifications</label>

src/components/home_components/trending.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-
+//  PLACEHOLDER
 const hashtags = [
   {id: 1,name: "xbox", nr_posts: 553,category: "Gaming" } ,
   {id: 2,name: "lol" , nr_posts: 16422, category: "Gaming"},