docs: add masthead to home page

Create a specific "home" layout so that we can insert content above main and
after the page title. Move
all HTML into here to so that the `index.md` file only contains markdown/prose
content.

Reuse the `app-masthead` class, redesigning it to match the new style and add a
background image in MOJ style.

.github/workflows/tag-staging.yml

@@ -15,6 +15,7 @@ jobs:
     permissions:
       id-token: write
       contents: read
+      pull-requests: write
     if: ${{ github.event.label.name == 'staging:request' }}
     steps:
       - uses: actions/checkout@v4

assets/sass/components/masthead.scss

@@ -1,76 +1,35 @@
 /* ==========================================================================
    #MASTHEAD
-   // Ideal line length (https://pearsonified.com/typography)
    ========================================================================== */
 
+$brand-colour: #220051;
+
 .app-masthead {
-  @include govuk-responsive-padding(6, "top");
-  @include govuk-responsive-padding(6, "bottom");
-  background-color: govuk-colour("blue");
+  padding-top: govuk-spacing(7);
+  padding-bottom: govuk-spacing(7);
+  background-color: $brand-colour;
   color: govuk-colour("white");
-  margin-top: -1px; // Covers the navigation border bottom
-}
-
-.app-masthead__title {
-  @include govuk-responsive-margin(6, "bottom");
-  color: govuk-colour("white") !important;
-  max-width: 1057px; // Desired CPL 50 (headings) chars at a font size of 48px
 }
 
-.app-masthead__description {
-  @include govuk-font(24);
-  color: govuk-colour("white") !important;
-  margin-bottom: 0;
-  max-width: 793px; // Desired CPL 75 (paragraphs) chars at a font size of 24px
+.app-masthead p,
+.app-masthead h1 {
+  color: inherit;
 }
 
-/* ==========================================================================
-   #BUTTON
-   ========================================================================== */
-
-.app-masthead__button,
-.app-masthead__button:link,
-.app-masthead__button:visited {
-  @include govuk-font($size: 24, $weight: bold);
+.app-masthead .govuk-button--start {
+  color: $brand-colour !important;
   background-color: govuk-colour("white");
-  // background: govuk-colour("white") url("/public/images/app-icon-pointer.svg") no-repeat 100% 50%;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.5);
-  color: govuk-colour("blue");
-  display: block;
-  padding-bottom: govuk-spacing(2);
-  padding-left: govuk-spacing(3);
-  padding-right: govuk-spacing(3);
-  padding-top: govuk-spacing(2);
-  text-align: center;
-  text-decoration: none;
-
-  @include govuk-media-query($from: desktop) {
-    display: inline-block;
-  }
 }
 
-.app-masthead__button:focus {
-  background-color: $govuk-focus-colour;
-  color: $govuk-focus-text-colour;
-  box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
+.app-masthead .govuk-button--start:hover {
+  background-color: govuk-colour("mid-grey");
 }
 
-.app-masthead__button:hover {
-  color: govuk-colour("blue");
-  background-color: #e8f1f8;
-}
-
-.app-masthead__button__icon {
-  margin-left: govuk-spacing(1);
-
-  @include govuk-media-query($from: desktop) {
-    margin-left: govuk-spacing(2);
+@media (min-width: map-get($govuk-breakpoints, tablet)) {
+  .app-masthead__container {
+    background-image: url("/assets/images/moj-people.svg");
+    background-repeat: no-repeat;
+    background-position: bottom right;
+    background-size: 33% auto;
   }
-  vertical-align: middle;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
 }

docs/_includes/layouts/base.njk

@@ -17,7 +17,7 @@
 
     <!--[if lte IE 8]><link href="{{ '/assets/stylesheets/application-ie8.css' | url }}" rel="stylesheet"><![endif]-->
     <!--[if gt IE 8]><!--><link href="{{ '/assets/stylesheets/application.css' | url }}" rel="stylesheet"><!--<![endif]-->
-    <title>{{ title }} - MOJ Pattern Library</title>
+    <title>{% block title %}{{ title }} - MOJ Pattern Library{% endblock %}</title>
 
     <script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=G-VTGX4YLSVL" async></script>
     <script type="text/javascript" src="{{ '/assets/javascript/jquery.js' | url }}"></script>

docs/_includes/layouts/home.njk

@@ -0,0 +1,58 @@
+{% extends "./base.njk" %}
+
+{% block title %}MOJ Pattern Library{% endblock %}
+
+{% block content %}
+<main id="main-content" class="govuk-main-wrapper govuk-!-padding-top-0 app-prose-scope" role="main">
+
+  <div class="app-masthead govuk-!-margin-bottom-9">
+    <div class="govuk-width-container govuk-grid-row app-masthead__container">
+      <div class="govuk-grid-column-two-thirds">
+        <h1 class="govuk-heading-xl govuk-!-margin-bottom-4">
+          {{ title }}
+        </h1>
+        <p>
+          Use the MOJ Design System to learn from the work and experiences of others, contribute back into the design system to share your knowledge, and reuse as much as possible to avoid repeating what has already been done.
+        </p>
+        <a href="./get-started" class="govuk-button govuk-button--start govuk-!-margin-bottom-0" data-module="govuk-button">
+          Get started
+          <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
+            <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="govuk-width-container">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-one-half">
+        <article class="moj-ticket-panel">
+          <section class="moj-ticket-panel__content moj-ticket-panel__content--blue">
+            <h2 class="govuk-heading-l govuk-!-margin-bottom-3">Components</h2>
+            <p class="govuk-body">Save time with reusable, accessible components for forms, navigation, panels, tables and more.</p>
+            <p class="govuk-body">
+              <a href="/components" class="govuk-link"><strong>Find a component</strong></a>
+            </p>
+          </section>
+        </article>
+      </div>
+
+      <div class="govuk-grid-column-one-half">
+        <article class="moj-ticket-panel">
+          <section class="moj-ticket-panel__content moj-ticket-panel__content--blue">
+            <h2 class="govuk-heading-l govuk-!-margin-bottom-3">Patterns</h2>
+            <p class="govuk-body">Help users complete common tasks like uploading files, filtering lists, and getting help.</p>
+            <p class="govuk-body">
+              <a href="/patterns" class="govuk-link"><strong>Find a pattern</strong></a>
+            </p>
+          </section>
+        </article>
+      </div>
+    </div>
+
+    {{ content | safe }}
+  </div>
+
+</main>
+{% endblock %}

docs/index.md

@@ -1,74 +1,20 @@
 ---
-layout: layouts/plain.njk
+layout: layouts/home.njk
+title: Design, build, and deliver accessible and consistent services
 ---
 
-<div class="govuk-grid-row">
-
-  <div class="govuk-grid-column-two-thirds">
-
-      <h1 class="govuk-heading-xl" style="margin-bottom: 20px">
-        Design, build, and deliver accessible and consistent services
-      </h1>
-
-      <p class="govuk-body-l">Use the MOJ Design System to learn from the work and experiences of others, contribute back into the design system to share your knowledge, and reuse as much as possible to avoid repeating what has already been done.</p>
-
-      <p class="govuk-body">
-        <a href="/" class="govuk-link"><strong>Get started</strong></a>
-      </p>
-
-  </div>
-
-  <div class="govuk-grid-column-full">
-  <hr class="govuk-section-break govuk-section-break--l govuk-section-break--visible">
-  </div>
-
-    <div class="govuk-grid-column-one-half">
-          <article class="moj-ticket-panel">
-            <section class="moj-ticket-panel__content moj-ticket-panel__content--blue">
-              <h2 class="govuk-heading-l govuk-!-margin-bottom-3">Components</h2>
-              <p class="govuk-body">Save time with reusable, accessible components for forms, navigation, panels, tables and more.</p>
-              <p class="govuk-body">
-                <a href="/components" class="govuk-link"><strong>Find a component</strong></a>
-              </p>
-            </section>
-          </article>
-        </div>
+---
 
-        <div class="govuk-grid-column-one-half">
-          <article class="moj-ticket-panel">
-            <section class="moj-ticket-panel__content moj-ticket-panel__content--blue">
-              <h2 class="govuk-heading-l govuk-!-margin-bottom-3">Patterns</h2>
-              <p class="govuk-body">Help users complete common tasks like uploading files, filtering lists, and getting help.</p>
-              <p class="govuk-body">
-                <a href="/patterns" class="govuk-link"><strong>Find a pattern</strong></a>
-              </p>
-            </section>
-          </article>
-        </div>
+## Contribute to the MOJ Design System
 
+Anyone can contribute to the MOJ Design System by proposing a new style, component, or pattern - or by suggesting a change.
 
-    <div class="govuk-grid-column-full">
-    <hr class="govuk-section-break govuk-section-break--l govuk-section-break--visible">
-    </div>
+[Propose a contribution](./community/contribute)
 
-    <div class="govuk-grid-column-two-thirds">
-      <h2 class="govuk-heading-l govuk-!-margin-bottom-4">
-        Contribute to the MOJ Design System
-      </h2>
-      <p class="govuk-body">Anyone can contribute to the MOJ Design System by proposing a new style, component, or pattern - or by suggesting a change.</p>
-      <p class="govuk-body"><a href="/community/contribute/">Propose a contribution</a></p>
-    </div>
+---
 
-    <div class="govuk-grid-column-full">
-    <hr class="govuk-section-break govuk-section-break--l govuk-section-break--visible">
-    </div>
+## Roadmap and latest updates
 
-    <div class="govuk-grid-column-two-thirds">
-      <h2 class="govuk-heading-l govuk-!-margin-bottom-4">
-        Roadmap and latest updates
-      </h2>
-      <p class="govuk-body">Find out what the plans are for the MOJ Design System over the coming months, as well as updates on the latest changes and improvements.</p>
-      <p class="govuk-body"><a href="/community/roadmap">View the roadmap</a></p>
-    </div>
+Find out what the plans are for the MOJ Design System over the coming months, as well as updates on the latest changes and improvements.
 
-</div>
+[View the roadmap](./community/roadmap)