some minor changes on the main page

front/MyINPulse-front/src/App.vue

@@ -13,6 +13,7 @@ import ProjectComp from './components/Project-comp.vue';
         v-for="(project, index) in projects" 
         :key="index"
         :projectName="project.name"
+        :listName="project.members"
       />
     </div>
 </template>
@@ -33,12 +34,12 @@ export default {
         {
           name: 'Projet Alpha',
           //link: './project-alpha.html',
-          //members: ['Alice', 'Bob', 'Charlie'],
+          members: ['Alice', 'Bob', 'Charlie'],
         },
         {
           name: 'Projet Beta',
           //link: './project-beta.html',
-          //members: ['David', 'Eve', 'Frank'],
+          members: ['David', 'Eve', 'Frank'],
         },
       ],
     };

front/MyINPulse-front/src/components/Project-comp.vue

@@ -2,8 +2,16 @@
     <div class="project">
         <div class="project-header">
             <h2>{{ projectName }}</h2>
+            <div class="project-buttons">
+                    <button class="info-btn"><a href="./project-example.html">more infos</a></button>
+                    <button class="contact-btn">Contact</button>
+            </div>
+        </div>
+        <div class="project-body">   
+            <ul>
+                <li v-for="(name, index) in listName" :key="index">{{ name }}</li>
+            </ul>    
         </div>
-
     </div>
 </template>
 
@@ -13,6 +21,40 @@ export default {
     name: 'Project',
     props: {
         projectName: String,
+        listName: Array as() => String[], //something isn't working
     }
 }
 </script>
+
+<style scoped>
+.project {
+    background: linear-gradient(to right, #f4f4f4, #ffffff);
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    padding: 20px;
+    margin: 20px 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    font-family: Arial, sans-serif;
+  }
+  
+  /* Header Styling */
+  .project-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .project-header h2 {
+    font-size: 20px;
+    color: #333;
+    margin: 0;
+  }
+  
+  /* Button Container */
+  .project-buttons {
+    display: flex;
+    gap: 10px;
+  }
+
+
+</style>