Fix left and right image styling

_includes/call-to-action.html

@@ -2,30 +2,19 @@
   <h2>{{ include.title }}</h2>
 {% endif %}
 
-<div class="cta-wrapper">
+<div class="cta-wrapper {% if include.align == "center" %}align-center{% endif %}">
   {% if include.text %}
     <p class="cta-text">{{ include.text }}</p>
   {% endif %}
 
   {% if include.url and include.button_text %}
-    {% if include.align == "center" %}
-    <center>
-    {% endif %}
     <a href="{{ include.url }}" class="btn btn--primary">{{ include.button_text }}</a>
-    {% if include.align == "center" %}
-    </center>
-    {% endif %}
+  {% endif %}
+  {% if include.secondary_url and include.secondary_button_text %}
+    {{include.secondary_button_prefix}}
+    <a href="{{ include.secondary_url }}" class="btn btn--inverse">{{ include.secondary_button_text }}</a>
+  {% endif %}
+  {% if include.postfix_text %}
+    {{include.postfix_text}}
   {% endif %}
 </div>
-
-<style>
-  .cta-wrapper {
-    margin: 1em 0;
-    border-radius: 4px;
-  }
-
-  .cta-text {
-    font-size: 1.2em;
-    margin-bottom: 1.5em;
-  }
-</style>

_includes/section-image-left.html

@@ -0,0 +1,11 @@
+<div class="section">
+    <div class="container">
+        <div class="left-half">
+          <img src="{{ include.image_path }}" alt="">
+        </div>
+        <div class="right-half">
+          <h2>{{ include.title }}</h2>
+          {{ include.description | markdownify }}
+        </div>
+    </div>
+</div>

_includes/section-image-right.html

@@ -0,0 +1,11 @@
+<div class="section">
+    <div class="container">
+        <div class="left-half">
+          <h2>{{ include.title }}</h2>
+          {{ include.description | markdownify }}
+        </div>
+          <div class="right-half">
+          <img src="{{ include.image_path }}" alt="">
+        </div>
+    </div>
+</div>

_pages/docs/examples/passenger-case-study.md

@@ -8,6 +8,11 @@ toc: true
 toc_sticky: true
 sidebar:
   nav: docs
+header:
+  overlay_color: "#0EA2F1"
+  overlay_filter: rgba(14,162,241,0.6)
+  overlay_image: /assets/images/passenger-person-on-bus.jpg
+  og_image: /assets/images/passenger-person-on-bus.jpg
 ---
 
 [Passenger](https://passenger.tech), a mobile ticketing company, used User Needs Mapping to transform their team structure, reduce dependencies, and deliver value more effectively.

_pages/home.md

@@ -17,48 +17,32 @@ excerpt: >
 ## When product and engineering teams don’t align, progress slows.
 {: style="border: none; text-align:center" }
 
-### User Needs Mapping helps you bridge the gap, <br>so your teams can collaborate effectively and deliver faster.
-{: style="border: none; text-align:center;margin-bottom: 3em;" class="grey" }
-
-![The business and tech bridge problem](/assets/images/business-tech-bridge.png){: .align-right}
-
-**The 'Why is it taking so long?' Problem**  
-You’ve seen it before: product wants new features yesterday, engineering feels stretched too thin, and users are stuck waiting. Misalignment between product and tech silos creates bottlenecks, delays, and frustration.
-
-At the heart of this challenge is a lack of clarity about user needs, team ownership, and how work flows across your organization.
-
-&nbsp;
-{: style="margin-bottom: 3em" }
-
-![People, Process and Technology](/assets/images/people-process-tech.png){: .align-left style="width: 45%; margin-right: 2em" }
-
-## The result of accidental complexity
-
-Your organization is made up of **people, processes, and technology** (a socio-technical system). As your organization grows, it becomes more complex. The technical systems become larger and we introduce more processes to try to manage dependencies between the systems but we don't pay enough attention to the people part of the overall system.
-
-How teams are organized will have a direct impact on the flow of value and technical solutions that can be created. If we don't consider the interactions between the people (the teams) then we will **observe bottlenecks and delays** because our focus is on trying **manage dependecies** rather than **unblocking the flow of value**.
-
-&nbsp;
-{: style="margin-bottom: 3em" }
-
-![Organizing around value streams](/assets/images/aligning-teams-for-value.png){: .align-right style="width: 45%; margin-left: 2em"}
-
-## Organizing for constant change
-
-Your **Customer, Market and Technology** are the three main drivers of value in your organization. They are continuously evolving and the rate of change is only increasing. Organizations need to be able to respond to these changes quickly and effectively. This means being able to sense when to change i.e. **spot the signals** and then act quickly to respond.
-
-When adjusting how our teams are organized we need to consider whether our current team structure is satisfying the needs of the users we are trying to serve via **effective value streams**. This can be tricky to achieve when our tech teams are decoupled from the business and product teams.
-
-&nbsp;
-{: style="margin-bottom: 1em" }
-
-![Example of a user needs map drawn with Excalidraw](/assets/images/Movie-goer-full-user-needs-map.png){: .align-left style="width: 45%; margin-top: 1em; margin-right: 2em"}
-
-## The Journey to Success
-
-User Needs Mapping is a technique that helps you to align your teams around the needs of your users. It is a practical, accessible, and scalable approach that can be used by teams of any size, with or without prior experience in advanced frameworks such as Wardley Mapping or Domain-Driven Design.
-
-We seek to start a conversation between product and engineering teams to align around the needs of the users we are trying to serve. We do this via visualizing the value chain which helps us to understand the flow of value through the organization.
+User Needs Mapping helps bridge the gap, <br>so your teams can **collaborate more effectively** and **deliver faster**.
+{: style="border: none; text-align:center;margin-bottom: 3em;margin-top: 0;color: #666;" }
+
+{% include section-image-right.html
+    title="The business and tech bridge problem"
+    description="You’ve seen it before: product wants new features yesterday, engineering feels stretched too thin, and users are stuck waiting. Misalignment between product and tech silos creates bottlenecks, delays, and frustration."
+    image_path="/assets/images/business-tech-bridge.png"
+%}
+
+{% include section-image-left.html
+    title="The result of accidental complexity"
+    description="Your organization is made up of **people, processes, and technology** (a socio-technical system). As the organization grows, it becomes more complex. The technical systems become larger and more processes are introduced to try to manage dependencies between the systems but we often don't pay enough attention to the people part of the overall system."
+    image_path="/assets/images/people-process-tech.png"
+%}
+
+{% include section-image-right.html
+    title="Organizing for constant change"
+    description="Your **Customer, Market and Technology** are the three main drivers of value in your organization. They are continuously evolving and the rate of change is only increasing. Organizations need to be able to respond to these changes quickly and effectively. This means being able to sense when to change i.e. **spot the signals** and then act quickly to respond."
+    image_path="/assets/images/aligning-teams-for-value.png"
+%}
+
+{% include section-image-left.html
+    title="The Journey to Success"
+    description="User Needs Mapping is a technique that helps you to align your teams around the needs of your users. It is a practical, accessible, and scalable approach that can be used by teams of any size, with or without prior experience in advanced frameworks such as Wardley Mapping or Domain-Driven Design.<br> We seek to start a conversation between product and engineering teams to align around the needs of the users we are trying to serve. We do this via visualizing the value chain which helps us to understand the flow of value through the organization."
+    image_path="/assets/images/Movie-goer-full-user-needs-map.png"
+%}
 
 ## Real-World Results
 
@@ -78,7 +62,7 @@ The following talk was given at the [Fast Flow Conf 2023](https://fastflowconf.c
 If you are interested in learning more, take a look at the resources:
 
 - [Step-by-step guide to User Needs Mapping](/docs/introduction-to-user-needs-mapping/)
-- [Common challenges and how to overcome them](/docs/challenges-overview)
+- [Common challenges and how to overcome them](/docs/challenges)
 - [Key takeaways for success](/articles/2025-01-02-unm07-key-takeaways-user-needs-mapping/)
 
 ---
@@ -97,6 +81,13 @@ User Needs Mapping is more than a technique, it’s a mindset. Join a growing co
 
 Ready to transform your teams and deliver real value? User Needs Mapping is your first step.
 
-[Start Mapping Now](/quick-start-guide) or [Get in touch](/contact) if you need some help.
+{% include call-to-action.html
+    button_text="Start Mapping Now"
+    url="/quick-start-guide"
+    secondary_button_prefix="or"
+    secondary_button_text="Get in touch"
+    secondary_url="/contact"
+    postfix_text="if you need some help."
+  %}
 
 ---

_pages/how-can-we-help.md

@@ -37,7 +37,7 @@ Jumpstart your User Needs Mapping journey with workshops that are interactive, p
 - *Getting started with User Needs Mapping*  
 - *Finding and defining team boundaries for fast flow*
 
-[Discover our workshops.](/workshops)
+{% include call-to-action.html button_text="Discover our workshops" url="/workshops" %}
 
 ---
 
@@ -57,7 +57,7 @@ Our enablement programs embed User Needs Mapping into your teams’ workflows, e
 - On-site enablement tailored to your team’s dynamics.  
 - Virtual programs for distributed organizations.  
 
-[Explore enablement options.](/enablement)
+{% include call-to-action.html button_text="Explore enablement options" url="/enablement" %}
 
 ---
 
@@ -72,7 +72,7 @@ From restructuring teams to scaling operations, our consultancy services offer t
   - Guidance on team structures and cognitive load optimization.  
   - Strategic integration with other methodologies for deeper impact.
 
-[See how consultancy can transform your organization.](/consultancy)
+{% include call-to-action.html button_text="See how consultancy can transform your organization" url="/consultancy" %}
 
 ---
 
@@ -93,4 +93,4 @@ With a proven track record in User Needs Mapping and related methodologies, we b
 **Empower your teams today.**  
 Take the first step toward transforming how your organization works and delivers value.
 
-[Contact us to discuss your needs.](/contact)
+{% include call-to-action.html button_text="Contact us to discuss your needs" url="/contact" %}

_pages/workshops.md

@@ -1,12 +1,10 @@
 ---
 permalink: /workshops
 title: "Workshops"
-layout: splash
+layout: single
 description: "Practical, hands-on workshops to master User Needs Mapping and transform your teams."
 ---
 
-# Workshops
-
 **Practical learning to unlock the power of User Needs Mapping.**
 
 Our workshops are interactive, engaging, and designed to deliver real results. Whether you’re new to User Needs Mapping or looking to refine your approach, our sessions provide the tools and techniques you need to succeed.

assets/css/main.scss

@@ -7,5 +7,36 @@ search: false
 
 $primary-color: #0EA2F1;
 
+  div.section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .container {
+    display: flex;
+  }
+
+  .left-half {
+    flex: 1;
+    padding: 1rem;
+  }
+
+  .right-half {
+    flex: 1;
+    padding: 1rem;
+  }
+
+
+.cta-wrapper {
+  margin: 1em 0;
+  border-radius: 4px;
+}
+
+.cta-text {
+  font-size: 1.2em;
+  margin-bottom: 1.5em;
+}
+
 @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
 @import "minimal-mistakes"; // main partials