From c8644074b43b6e1ab2c156267df4e3822de01961 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 30 Jul 2023 19:16:36 +0200
Subject: [PATCH] add the setup part and now we can erase

---
 src/icons/EraserIcon.vue          | 17 +++++++++++++++
 src/modules/FlowArticle.vue       |  4 +++-
 src/modules/article/FlowSetup.vue | 36 +++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/icons/EraserIcon.vue
 create mode 100644 src/modules/article/FlowSetup.vue

diff --git a/src/icons/EraserIcon.vue b/src/icons/EraserIcon.vue
new file mode 100644
index 0000000..6335b4c
--- /dev/null
+++ b/src/icons/EraserIcon.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import BaseIcon from './BaseIcon.vue'
+
+withDefaults(defineProps<{ color?: string }>(), {
+  color: 'var(--primary-color)'
+})
+</script>
+
+<template>
+  <BaseIcon :color="color">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="M19 20h-10.5l-4.21 -4.3a1 1 0 0 1 0 -1.41l10 -10a1 1 0 0 1 1.41 0l5 5a1 1 0 0 1 0 1.41l-9.2 9.3"
+    />
+    <path d="M18 13.3l-6.3 -6.3" />
+  </BaseIcon>
+</template>
diff --git a/src/modules/FlowArticle.vue b/src/modules/FlowArticle.vue
index cb5fea7..1bace6c 100644
--- a/src/modules/FlowArticle.vue
+++ b/src/modules/FlowArticle.vue
@@ -2,6 +2,7 @@
 import SeparatorIcon from '@/icons/SeparatorIcon.vue'
 import FlowHypothesis from '@/modules/article/FlowHypothesis.vue'
 import FlowIntro from '@/modules/article/FlowIntro.vue'
+import FlowSetup from '@/modules/article/FlowSetup.vue'
 import FeatureSteps from '@/modules/feature/FeatureSteps.vue'
 import FlowDashboard from '@/modules/feature/FlowDashboard.vue'
 import SimulationControls from '@/modules/simulation/SimulationControls.vue'
@@ -14,6 +15,7 @@ import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue'
     <SeparatorIcon />
     <FlowHypothesis class="text" />
     <SeparatorIcon />
+    <FlowSetup class="text" />
     <FeatureSteps alias="introducing" />
     <FlowDashboard class="above" />
     <FeatureSteps alias="playground" />
@@ -35,7 +37,7 @@ import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue'
 
   .text {
     font-size: 16pt;
-    max-width: 800px;
+    max-width: 650px;
     margin: auto;
     text-align: justify;
   }
diff --git a/src/modules/article/FlowSetup.vue b/src/modules/article/FlowSetup.vue
new file mode 100644
index 0000000..8bf6aea
--- /dev/null
+++ b/src/modules/article/FlowSetup.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import ProblemSolvingIcon from '@/icons/ProblemSolvingIcon.vue'
+import PullSystemIcon from '@/icons/PullSystemIcon.vue'
+import PushSystemIcon from '@/icons/PushSystemIcon.vue'
+import FlowControls from '@/modules/feature/FlowControls.vue'
+</script>
+
+<template>
+  <div>
+    <p>
+      You're a Product Manager in a project who has just started, your goal is
+      to make a product as fast as you can. With you, you'll have the product
+      team, designers, developers and a release team.
+    </p>
+    <p>Each day, you can choose between 3 strategies:</p>
+    <ol>
+      <li>
+        Push system
+        <PushSystemIcon />
+      </li>
+      <li>
+        Pull system
+        <PullSystemIcon />
+      </li>
+      <li>
+        Problem solving
+        <ProblemSolvingIcon />
+      </li>
+    </ol>
+    <p>
+      In this article we'll focus on how these strategies are efficient and what
+      are the impact on the quality the teams produce.
+    </p>
+    <FlowControls />
+  </div>
+</template>