header for the site, and making the 1st layout for the components, still trying to figure out the framework

front/MyINPulse-front/src/App.vue

@@ -1,11 +1,48 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
+import Header from './components/Header.vue';
+import ProjectComp from './components/Project-comp.vue';
 </script>
 
 <template>
   <RouterView />
+  <Header />
+  <div id="main">
+      <ProjectComp 
+        v-for="(project, index) in projects" 
+        :key="index"
+        :projectName="project.name"
+      />
+    </div>
 </template>
 
 <style scoped>
 </style>
+
+<script lang="ts">
+export default {
+  name: 'App',
+  components: {
+    Header,
+    ProjectComp,
+  },
+  data() {
+    return {
+      projects: [
+        {
+          name: 'Projet Alpha',
+          //link: './project-alpha.html',
+          //members: ['Alice', 'Bob', 'Charlie'],
+        },
+        {
+          name: 'Projet Beta',
+          //link: './project-beta.html',
+          //members: ['David', 'Eve', 'Frank'],
+        },
+      ],
+    };
+  },
+};
+
+</script>

front/MyINPulse-front/src/components/Header.vue

@@ -0,0 +1,26 @@
+<template>
+    <header>
+      <img src="./icons/logo inpulse.png" alt="INPulse" />
+    </header>
+  </template>
+  
+  <script lang="ts">
+  export default {
+    name: 'Header',
+  };
+  </script>
+  
+  <style scoped>
+  header img {
+    width: 100px;
+  }
+
+  header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #fff;
+    border-bottom: 2px solid #ddd;
+  }
+  </style>

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

@@ -0,0 +1,18 @@
+<template>
+    <div class="project">
+        <div class="project-header">
+            <h2>{{ projectName }}</h2>
+        </div>
+
+    </div>
+</template>
+
+
+<script lang="ts">
+export default {
+    name: 'Project',
+    props: {
+        projectName: String,
+    }
+}
+</script>

front/MyINPulse-front/src/main.ts

@@ -25,6 +25,7 @@ keycloakService.CallInit(() => {
 
 })
 
+createApp(App).mount('#app');
 
 // TODO: fix the comment
 /*