feat: canvas are now generic

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

@@ -0,0 +1,92 @@
+<template>
+  <div class="LeanCanvas">
+    <CanvasItem
+      v-for="(item, index) in items"
+      :key="index"
+      :title="item.title"
+      :description="item.description"
+      :class="item.class"
+    />
+  </div>
+</template>
+
+<script>
+import CanvasItem from "./CanvasItem.vue";
+
+export default {
+  components: {
+    CanvasItem
+  },
+  data() {
+    return {
+      items: [
+        { title: "1. Problème",
+          description: "3 problèmes essentiels à résoudre pour le client",
+          class: "Probleme"
+        },
+        { title: "2. Segments",
+          description: "Les segments de clientèle visés",
+          class: "Segments"
+        },
+        { title: "3. Valeur",
+          description: "La proposition de valeur",
+          class: "Valeur"
+        },
+        { title: "4. Solution",
+          description: "Les solutions proposées",
+          class: "Solution"
+        },
+        { title: "5. Avantage",
+          description: "Les avantages concurrentiels",
+          class: "Avantage"
+        },
+        { title: "6. Canaux",
+          description: "Les canaux de distribution",
+          class: "Canaux"
+        },
+        { title: "7. Indicateurs",
+          description: "Les indicateurs clés de performance",
+          class: "Indicateurs"
+        },
+        { title: "8. Coûts",
+          description: "Les coûts associés",
+          class: "Couts"
+        },
+        { title: "9. Revenus",
+          description: "Les sources de revenus",
+          class: "Revenus"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+.LeanCanvas {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  gap: 10px;
+  padding: 10px;
+  max-width: 1200px;
+  margin: 20px auto;
+  border: 2px dashed #d33;
+  background-color: #fff; 
+  position: relative;
+  height: 80vh;
+  overflow: auto;
+}
+
+.Probleme { grid-column: 1 / 3; grid-row: 1 / 5; }
+.Segments { grid-column: 9 / 11; grid-row: 1 / 5; }
+.Valeur { grid-column: 5 / 7; grid-row: 1 / 5; }
+.Solution { grid-column: 3 / 5; grid-row: 1 / 3; }
+.Avantage { grid-column: 7 / 9; grid-row: 1 / 3; }
+.Canaux { grid-column: 7 / 9; grid-row: 3 / 5; }
+.Indicateurs { grid-column: 3 / 5; grid-row: 3 / 5; }
+.Couts { grid-column: 1 / 6; grid-row: 5 / 7; }
+.Revenus { grid-column: 6 / 11; grid-row: 5 / 7; }
+
+</style>