Add mission patch page

app/_components/_all.scss

@@ -1,3 +1,4 @@
 @import "email/email";
+@import "gallery/gallery";
 @import "header/header";
 @import "screenshots/screenshots";

app/_components/gallery/_gallery.scss

@@ -0,0 +1,43 @@
+.app-gallery {
+  padding: 0;
+  list-style: none;
+}
+
+.app-gallery--layout-thumbnails {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-gap: govuk-spacing(6);
+
+  figure {
+    @include govuk-responsive-margin(2, "bottom");
+
+    > a {
+      display: block;
+    }
+
+    > img {
+      object-fit: cover;
+      object-position: top;
+    }
+  }
+}
+
+.app-prose-scope .app-gallery--mission-patches {
+
+  figure {
+    // Remove styling that figures get by default
+    background-color: inherit;
+    border-bottom: none;
+    @include govuk-font(19);
+    padding: 20px 0 0 0;
+    img {
+      outline: none;
+    }
+  }
+
+  figcaption {
+    @include govuk-font(19);
+    padding: 20px 0 0 0;
+    color: #4c6272;
+  }
+}

app/_components/gallery/macro.njk

@@ -0,0 +1,3 @@
+{% macro appGallery(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/_components/gallery/template.njk

@@ -0,0 +1,15 @@
+<ul class="app-gallery{% if params.classes %} {{ params.classes }} {% endif %}{% if params.layout != false %} app-gallery--layout-{{ params.layout or "thumbnails" }}{% endif %}">
+{%- for item in params.items %}
+  {%- set id = item.id or (item.text | slugify) -%}
+  {%- set file = item.src or (id + ".png") -%}
+  {%- set alt = item.alt or ("Screenshot of " + item.text) -%}
+  <li class="app-gallery__item" id="{{ id }}">
+    <figure>
+      <a href="{{ file }}"><img src="{{ file }}" alt="{{ alt }}"></a>
+      {%- if item.caption or item.text %}
+        <figcaption>{{ item.caption or item.text | markdown | safe }}</figcaption>
+      {%- endif %}
+    </figure>
+  </li>
+{%- endfor %}
+</ul>

app/_layouts/product.njk

@@ -91,18 +91,32 @@
     {% endfor %}
 
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-full">
-        <hr class="govuk-section-break govuk-section-break--xl govuk-section-break--visible">
+      <div class="govuk-grid-column-two-thirds">
+        <h2 class="govuk-heading-l">
+          Reference
+        </h2>
+      </div>
+    </div>
+
+    <div class="govuk-grid-row">
 
-        {% for item in collections.all | eleventyNavigation(options.homeKey) %}
-          {% if ("Guide" == item.title)  %}
+      {% for item in collections.all | eleventyNavigation(options.homeKey) %}
+        {% if (item.title == "Guide")  %}
+          <section class="govuk-grid-column-one-half govuk-!-margin-bottom-6">
             <h3 class="govuk-heading-m govuk-!-margin-bottom-1">
               <a href="{{ item.url | pretty }}">{{ item.title }}</a>
             </h3>
             <p class="govuk-body">{{ item.excerpt }}</p>
-          {% endif %}
-        {% endfor %}
-      </div>
+          </section>
+        {% endif %}
+      {% endfor %}
+      <section class="govuk-grid-column-one-half govuk-!-margin-bottom-6">
+        <h3 class="govuk-heading-m govuk-!-margin-bottom-1">
+          <a href="./mission-patches">Mission patches</a>
+        </h3>
+        <p class="govuk-body">Archive of patches created to celebrate milestones in the development of our different services.</p>
+      </section>
+
     </div>
 
   {% endif %}

app/mission-patches.md

@@ -0,0 +1,80 @@
+---
+layout: page
+title: Mission patches
+description: Archive of patches created to celebrate milestones in the development of our different services.
+eleventyNavigation:
+  key: "{{ title }}"
+  excerpt: "{{ description }}"
+  parent: Home
+---
+
+
+{% from "gallery/macro.njk" import appGallery with context %}
+
+We use mission patches to celebrate the achievements and milestones of our work.
+
+## Manage vaccinations in schools
+
+We chose a polar bear as the team’s mascot because:
+
+* they’re big on protecting cubs
+* they live in hostile environments
+* they’re highly adaptive
+* they’re great at conserving energy
+
+That, and everyone on the team seems to love [The Bear](https://www.imdb.com/title/tt14452776/).
+
+{{ appGallery({
+  classes: "app-gallery--mission-patches",
+  items: [
+  {
+    text: "Mavis pilot mission patch",
+    caption: "The mission patch for our pilot features Mavis the polar bear protecting her 2 cubs. To celebrate completion of the pilot, our first mission patch features the northern lights, reflecting the colours of the teams involved with its development, while the 3 stars represent the 3 SAIS teams we piloted with."
+  },
+  {
+    text: "Mavis HPV private beta mission patch",
+    caption: "The mission patch for the HPV private beta features Mavis watching the sun rise over the horizon, and represents the launch of our new service."
+  },
+  {
+    text: "Mavis ‘doubles’ mission patch",
+    caption: "The mission patch for the release supporting ‘doubles’ (co-administered MenACWY and Td/IPV vaccinations) features Mavis meeting her double."
+  }]
+}) }}
+
+## Record a vaccination
+
+We chose a hare as the team’s mascot because they are able to make big leaps forward.
+
+{{ appGallery({
+  classes: "app-gallery--mission-patches",
+  items: [
+  {
+    text: "RAVS pilot mission patch",
+    caption: "This mission patch celebrated the launch of the pilot in June 2024. The 4 hearts represent the locations of the organisations that took part."
+  },
+  {
+    text: "RAVS 1 million jabs mission patch",
+    caption: "This mission patch celebrated the 1 millionth vaccination recorded by the service in January 2025. The background text contains the vaccine product names."
+  }]
+}) }}
+
+## Vaccinations
+
+These mission patches celebrate work which spans multiple vaccination services and teams.
+
+{{ appGallery({
+  classes: "app-gallery--mission-patches",
+  items: [
+  {
+    text: "Autumn/Winter 2022 mission patch",
+    caption: "This mission patch celebrated the work of the digital services supporting the Autumn/Winter 2022 seasonal vaccinations."
+  },
+  {
+    text: "Autumn/Winter 2024 mission patch",
+    caption: "This mission patch celebrated the work of the digital services supporting the Autumn/Winter 2024 seasonal vaccinations."
+  },
+  {
+    text: "RSV mission patch",
+    caption: "This sparkly mission patch celebrated the launch of a brand new RSV vaccination, which was enabled by multiple teams including Select & Invite, Book a vaccination, Record a vaccination, and Capture & Flow."
+  }]
+}) }}