Add event component and dates to landing page

landing/_layouts/home.html

@@ -34,6 +34,43 @@ <h1 class="hero-title black">{{ page.catchphrase.baseline }}</h1>
     </div>
   </div>
 
+  <div class="timeline row justc-center pdv-l">
+    <div class="timeline-wrapper">
+      <div class="mx-auto feature-card">
+        <div class="row alitems-center">
+          <div class="timeline-icon -start-3">
+            <img class="fill-current text-blue-500" src="assets/imgs/calendar.svg" alt="icon">
+          </div>
+          <div class="flex-1 ml-4">
+            <h2 class="text-3xl font-bold pb-8" style="color: rgb(11,29,55)">Next Events</h2>
+          </div>
+        </div>
+        <div class="mx-auto alitems-center mt-8">
+          <ol class="relative border-s border-gray-200 ">
+        {% for event in page.timeline.events %}
+              <li class="mb-6 ms-4">
+                  <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -start-3 ring-8 ring-white">
+                    <svg class="w-2.5 h-2.5 text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                      <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
+                    </svg>
+                  </span>
+                  <h3 class="flex items-center mb-1 text-lg font-semibold" style="color: rgb(11,29,55)">{{ event.title }}
+                  {% if forloop.first == true %}
+                    <span class="bg-blue-100 text-blue-600 text-sm font-medium me-2 px-2.5 py-0.5 rounded ms-3">Next</span>
+                  {% endif %}
+                  </h3>
+                  <time class="block mb-1 text-base font-normal leading-none text-gray-700">{{ event.time }}</time>
+                  <p class="block mb-2 text-base font-normal leading-none text-gray-700">{{ event.location}}</p>
+                  {% if event.details %} <p class="mb-1 text-base font-normal text-gray-500">{{ event.details }}</p> {% endif %}
+                  <a class="block no-underline text-blue-600 text-sm font-normal" href="{{ event.url }}">Details →</a>
+              </li>
+        {% endfor %}
+            </ol>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="features row justc-center pdv-l">
     <div class="content-wrapper column alitems-stretch">
       <div class="feature-card column mgb-s alitems-start">

landing/_layouts/landing.html

@@ -15,5 +15,4 @@
     <script src="{{site.baseurl}}/assets/js/mobile-menu.js"></script>
 
   </body>
-
-</html>
+</html>

landing/_sass/styles/_home-page.scss

@@ -126,7 +126,38 @@
 }
 
 
+.timeline {
+  background-color: $grey-color-light;
 
+  .content-wrapper {
+    width: 90%;
+
+    @include media-query($laptop) {
+      width: 100%;
+    }
+  }
+}
+
+.timeline-wrapper {
+  width: 50%;
+
+  @include media-query($tablet) {
+    width: 100%;
+  }
+}
+
+.timeline-icon {
+  width: 80px;
+
+  @include media-query($laptop) {
+    width: 60px;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+  }
+}
 
 .features {
   background-color: $grey-color-light;
@@ -421,4 +452,4 @@
       }
     }
   }
-}
+}

landing/assets/main.scss

@@ -2,4 +2,9 @@
 # Only the main Sass file needs front matter (the dashes are enough)
 ---
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import "theme";
+

landing/content/pages/home.md

@@ -17,6 +17,29 @@ hero:
   call_to_action:
     text: Start your journey 
     url: /docs/start-your-journey/start-your-journey.html
+timeline:
+  events:
+    - title: "Continuous Architecture as a Product"
+      time: "26th January / 1pm-2pm"
+      location: Online
+      url: https://continuous-architecture.org/
+      details: 
+    - title: Workshop Domain-Driven Design 
+      time: "30 January / 10am-12pm"
+      location: Online
+      url: https://continuous-architecture.org/
+    - title: Continuous Architecture and Complexity
+      time: February - Exact date to-be-defined
+      location: Online
+      url: https://continuous-architecture.org/
+    - title: Experience Report - URSAFF Proteine
+      time: "March - Exact date to-be-defined"
+      location: Online
+      url: https://continuous-architecture.org/
+    - title: Continuous Architecture Kata Day
+      time: "20th March / 9am-5pm"
+      location: La Grande Fabrique - Montreuil
+      url: https://continuous-architecture.org/
 features:
   top:
     title: "Problem Discovery"
@@ -99,4 +122,4 @@ value_proposition:
   call_to_action:
     text:
     url: 
----
+---

landing/docs/practices/jot-to-be-done.adoc

@@ -0,0 +1,74 @@
+=== Job-to-be-Done, some conceptual background
+
+⚠️ Caution: this is content about the JTBD concept and the process to have it eventually.
+
+> A job to be done is the instantiation of an unmet need or want (in response to a trigger). Ash Maurya, Leanstack
+
+The "Job-to-be-Done" practice is at the heart of the “Client-centric” approach, making it possible to truly understand Value.
+We're located in the problem space.
+
+==== Description
+The term “job to be done” (*) refers to what a person actually seeks to accomplish in given circumstances, as well as what motivates and determines their behavior in their search for, or not, a solution. 
+
+A JTBD is a goal or objective that is independent of the solution. It is described by a statement that takes the following form: Situation + Verb + Outcome. Crossing the Loire estuary daily to find work.
+
+The approach by the JTBD is complementary to the constitution of the Personas because it is more Lean, more oriented towards the effects, the result (the Outcome) and therefore the Value. (The Concept of Value is at the heart of the Lean and the Agile)
+
+xref:../docs/glossary/value-stream.adoc[Value Streams]: can be optimized around JTDBs and experiences during a journey. JTBDs are useful for value-based prioritization (User Stories, Features, Epics). This is a useful aid in the practice of the WSJF.
+
+The real innovation is to bridge the gap between satisfaction with the current situation and expectations (having achieved the JTBD, solved your problem, reduced your frustration). The JTBD opens the field of possibilities and allows differentiation.
+Analyzing and grouping JTBDs by affinity, resemblance, produces a map of the Invariants that will structure the entire system.With the Event Storming, this Agile Architecture Practice is one of the most powerful and efficient available. (systemic splitting, Domain identification)
+
+**Needs versus Wants**
+* Needs are functional. Wants are emotional.
+* Needs have utility. Wants have energy.
+* Needs favor existing solutions. Wants favor new solutions.
+
+All jobs start with a trigger.
+We encounter triggering events throughout the day, which means we encounter jobs to be done throughout the day.
+Value proposition: in the solution space.
+
+==== Context for success
+
+* Proactive context (problem solving at source) and focus on Value, Outcomes
+* Product Mode (Project  Product  “Experience” Mode) 
+* Context open to innovation
+* Be surrounded by social, psychological, UX skills
+
+==== Unsuitable Context 
+
+* Inside-Out approach (industrialization/optimization of internal resources and skills)
+* No direct access to clients/users; no direct exchange or feedback without a proxy.
+* Responsiveness and tactics first (treating symptoms in an emergency)
+
+== Getting started?
+
+Pre-requisites
+User Research report
+The JTBD is the result of structuring the observations
+Voir Value Proposition Design pour le process (concept de test card et Value Proposition Canvas)
+
+Tools
+5-Why 
+Customer-Forces canvas
+
+**From**:
+As a ... I want to ... in order to ...
+Persona  Action        Expected Outcome
+[too many assumptions]
+**To**:
+When ... I want to ... so I can ... 
+Situation Motivation   Expected Outcome
+
+TODO structurer avec les 7P
+7P pour organiser le workshop
+Créé par James Macanufo (l’un des 3 auteurs de Gamestorming), les 7P vous permettent d’aller à l’essentiel, de bien cadrer votre workshop, bref de ne rien oublier…
+Purpose : Quels sont les objectifs du workshop (le point de départ) ? Pourquoi nous réunissons-nous ?
+* People : Qui va participer ? Quel rôle les personnes vont-elles jouer ? Eventuellement quelle est la cible finale ?
+* Product : Qu’est ce qui est attendu en sortie du workshop ?
+* Process : Issus des 3 éléments précédents, l’item process se concrétise au travers d’un Agenda et d’une série d’activités et d’exercices ? Qu’allons-nous devoir mettre en œuvre pour répondre aux objectifs, compte tenu des participants et de l’output attendu ?
+* Preparation : Avons-nous besoin d’un travail de préparation au préalable de la part des participants ? Doivent-ils rassembler ou imprimer certaines pièces ? (oui par exemple pour du Show and tell ou de la rétrospective de projet)
+* Practical concerns : Quels sont les éléments de logistique dont nous aurons besoin ? (réservation et agencement de la salle, horaires, déjeuner, barco, postit, paperboard, whiteboard, marqueurs…)
+* Pitfalls : En gros quels sont les risques associés et comment les gérer ?
+
+