feat: canvas are now generic

front/MyINPulse-front/src/components/canvas/CanvasItem.vue

@@ -0,0 +1,56 @@
+<template>
+    <div :class="['cell', { expanded }]" @click="toggleExpand">
+      <h3>{{ title }}</h3>
+      <p>{{ description }}</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      title: String,
+      description: String
+    },
+    data() {
+      return {
+        expanded: false
+      };
+    },
+    methods: {
+      toggleExpand() {
+        this.expanded = !this.expanded;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  
+	.cell {
+		display: flex;
+		flex-direction: column; /* Pour empiler le titre et la description */
+		align-items: center; /* Centre horizontalement */
+		justify-content: center; /* Centre verticalement */
+		text-align: center; /* Centre le texte */
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
+
+
+	.expanded {
+    position: fixed;
+  	top: 0;
+  	left: 0;
+  	width: 100%;
+  	height: 100%;
+  	background: white;
+  	z-index: 10;
+  	display: flex;
+  	align-items: center;
+  	justify-content: center;
+  	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+	}
+
+  </style>
+