canvas included in the main page, still shiting with vue

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>9. Avantage déloyal</h3>
+        <p>Ce qui ne peut pas être facilement copié ou acheté</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>5. Canaux</h3>
+        <p>Chemins d'accès aux clients</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>7. Structure des coûts</h3>
+        <p>Coûts d'acquisition, distribution, hébergement, employés...</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

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

@@ -0,0 +1,37 @@
+<template>
+    <header>
+      <img src="@/assets/logo-inpulse.png" alt="INPulse Logo">
+      <div class="header-buttons">
+        <div class="contact-menu">
+          <button class="contact-button" @click="toggleDropdown">Contact</button>
+          <div class="contact-dropdown" v-show="isDropdownOpen">
+            <button>Contact All</button>
+            <button>Contact Person 1</button>
+            <button>Contact Person 2</button>
+            <button>Contact Person 3</button>
+          </div>
+          <div class="return"><a href="/">return to list project</a></div>
+        </div>
+      </div>
+    </header>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        isDropdownOpen: false
+      };
+    },
+    methods: {
+      toggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>8. Indicateurs clés</h3>
+        <p>Activités clés que vous souhaitez évaluer</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

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

@@ -0,0 +1,42 @@
+<template>
+    <div class="canvas">
+      <div class="row">
+        <Probleme />
+        <Segments />
+      </div>
+      <div class="row">
+        <Solution />
+        <Valeur />
+        <Canaux />
+      </div>
+      <div class="row">
+        <Couts />
+        <Revenus />
+      </div>
+      <div class="row">
+        <Indicateurs />
+        <Avantage />
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import Probleme from "./Probleme.vue";
+  import Segments from "./Segments.vue";
+  import Solution from "./Solution.vue";
+  import Valeur from "./Valeur.vue";
+  import Canaux from "./Canaux.vue";
+  import Revenus from "./Revenus.vue";
+  import Couts from "./Couts.vue";
+  import Indicateurs from "./Indicateurs.vue";
+  import Avantage from "./Avantage.vue";
+  
+  export default {
+    components: { Probleme, Segments, Solution, Valeur, Canaux, Revenus, Couts, Indicateurs, Avantage }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+      <h3>1. Problème</h3>
+      <p>3 problèmes essentiels à résoudre pour le client</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>6. Sources de revenus</h3>
+        <p>Modèle de revenus, durée, revenus espérés, marge espérée</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>2. Segments de clients</h3>
+        <p>Clients cibles</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>4. Solution</h3>
+        <p>3 fonctionnalités essentielles pour le client</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>3. Proposition de valeur unique</h3>
+        <p>Message simple, clair et persuasif expliquant en quoi votre produit est différent et mérite d'être acheté</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/style-project.css

@@ -0,0 +1,184 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 10px;
+  }
+  
+  .canvas {
+    display: flex;
+    flex-direction: column;
+    max-width: 1200px;
+    margin: 20px auto;
+    border: 2px dashed #d33;
+    background: #fff;
+  }
+  
+  .row {
+    display: flex;
+  }
+  
+  .cell {
+    flex: 1;
+    border: 1px solid #ddd;
+    padding: 10px;
+    text-align: center;
+    background-color: #f1f1f1;
+  }
+  
+  .produit {
+    background-color: #f9e4e4;
+  }
+  
+  .marche {
+    background-color: #e4f1f9;
+  }
+  
+  .valeur {
+    background-color: #f9f4e4;
+  }
+  
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    color: #333;
+  }
+  
+  p {
+    margin: 5px 0 0;
+    font-size: 14px;
+  }
+  
+
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f9f9f9;
+  }
+
+  h1 img {
+    height: 80px;
+  }
+
+  .canvas {
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 20px;
+    border: 2px dashed #d33;
+    background-color: #fff;
+  }
+
+  .row {
+    display: flex;
+    margin-bottom: 10px;
+  }
+
+  .cell {
+    flex: 1;
+    border: 1px solid #ddd;
+    padding: 20px;
+    text-align: center;
+    background-color: #f1f1f1;
+  }
+
+  #ade {
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 20px;
+    text-align: center;
+    background-color: #e8f5e9;
+    border: 2px solid #4caf50;
+    border-radius: 10px;
+  }
+
+  #ade h3 {
+    color: #2e7d32;
+  }
+
+  #ade p {
+    margin: 10px 0;
+    font-size: 16px;
+    color: #333;
+  }
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #fff;
+    border-bottom: 2px solid #ddd;
+  }
+
+  header img {
+    height: 60px;
+  }
+
+  header .contact-menu {
+    position: relative;
+  }
+
+  .expanded {
+    transform: scale(1.2); /* L'élément reste agrandi */
+    transition: transform 0.3s ease; /* Animation fluide */
+  }
+
+  .contact-button, .return {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    background-color: #2196f3;
+    color: #fff;
+    cursor: pointer;
+  }
+
+ .contact-button:hover, .return:hover {
+    background-color: #1976d2;
+  }
+
+  /* Dropdown styling */
+  .contact-dropdown {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    display: none;
+    flex-direction: column;
+    gap: 10px;
+    padding: 15px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+  }
+
+  .contact-dropdown button {
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    background-color: #4caf50;
+    color: #fff;
+    cursor: pointer;
+  }
+
+  .contact-dropdown button:hover {
+    background-color: #388e3c;
+  }
+
+  .return {
+    background-color: #f44336;
+  }
+
+  .return:hover {
+    background-color: #d32f2f;
+  }
+
+  .header-buttons {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+
+  a{
+    color: white;
+  }