front/MyINPulse-front/src/App.vue

@@ -16,6 +16,7 @@ import ErrorWrapper from "@/views/errorWrapper.vue";
         :key="index"
         :projectName="project.name"
         :listName="project.members"
+        :projectLink="project.link"
       />
     </div>
   <div id="canvas">
@@ -59,12 +60,12 @@ export default {
       projects: [
         {
           name: 'Projet Alpha',
-          //link: './project-alpha.html',
+          link: '/project-alpha.html',//to test
           members: ['Alice', 'Bob', 'Charlie'],
         },
         {
           name: 'Projet Beta',
-          //link: './project-beta.html',
+          link: './project-beta.html', //to test
           members: ['David', 'Eve', 'Frank'],
         },
       ],

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

@@ -1,10 +1,9 @@
 <template>
     <div class="project">
         <div class="project-header">
-            <h2>{{ projectName }}</h2>
+            <h2 @click="goToLink">{{ 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>
-                    <button class="contact-btn">Contact</button>
             </div>
         </div>
         <div class="project-body">   
@@ -16,16 +15,24 @@
 </template>
 
 
-<script lang="ts">
+<script setup lang="ts">
-export default {
+import { defineProps } from "vue";
-    name: 'Project',
+
-    props: {
+
-        projectName: String,
+const props = defineProps<{
-        listName: Array as() => String[], //something isn't working
+    projectName: string;
+    listName: string[];
+    projectLink: string;
+}>();
+
+const goToLink = () => {
+    if (props.projectLink) {
+        window.location.href = props.projectLink;
     }
-}
+};
 </script>
 
+
 <style scoped>
 .project {
     background: linear-gradient(to right, #f4f4f4, #ffffff);
@@ -57,4 +64,52 @@ export default {
   }
 
 
+  .info-btn {
+    background-color: #4CAF50;
+    color: #fff;
+  }
+  
+  .info-btn:hover {
+    background-color: #45a049;
+    transform: scale(1.05);
+  }
+  
+  .contact-btn {
+    background-color: #007BFF;
+    color: #fff;
+  }
+  
+  .contact-btn:hover {
+    background-color: #0056b3;
+    transform: scale(1.05);
+  }
+  
+
+
+
+  .project-body {
+    margin-top: 15px;
+  }
+  
+  .project-body p {
+    font-size: 16px;
+    color: #555;
+    margin-bottom: 10px;
+  }
+  
+  .project-body ul {
+    list-style-type: disc;
+    margin: 0;
+    padding-left: 20px;
+  }
+  
+  .project-body ul li {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.6;
+  }
+
+
+
+
 </style>