Add homepage illustration

app/assets/sass/_timeline.scss

@@ -10,7 +10,7 @@
   height: 100%;
   top: 10px;
   left: 0;
-  background-color: govuk-colour("blue");
+  background-color: $govuk-brand-colour;
 }
 
 .app-timeline__item {
@@ -24,7 +24,7 @@
   height: 5px;
   top: 10px;
   left: -20px;
-  background-color: govuk-colour("blue");
+  background-color: $govuk-brand-colour;
 }
 
 .app-timeline__heading {

app/assets/sass/application.scss

@@ -3,6 +3,8 @@ $govuk-brand-colour: #28a;
 $govuk-link-colour: #006688;
 $govuk-link-hover-colour: #004466;
 $govuk-link-visited-colour: #333366;
+$govuk-page-width: 1100px;
+$govuk-new-typography-scale: true;
 
 @import "govuk-frontend/dist/govuk/all";
 @import "@x-govuk/govuk-prototype-components/x-govuk/components/masthead/masthead";

app/views/index.html

@@ -1,29 +1,28 @@
 {% extends "layout.html" %}
 {%- from "govuk/components/tag/macro.njk" import govukTag -%}
+{%- from "x-govuk/components/masthead/macro.njk" import xGovukMasthead -%}
 {% set section = "home" %}
 
 {% block pageTitle %}Government digital services{% endblock %}
 
 {% block main %}
-<div class="x-govuk-masthead">
-  <div class="govuk-width-container">
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds-from-desktop">
-        <h1 class="x-govuk-masthead__title">
-          A community-maintained list of digital services from the UK government
-        </h1>
-        <p class="x-govuk-masthead__description">
-          This list aims to help designers and developers discover and learn from other digital services.</p>
-        <a href="/topic" role="button" draggable="false" class="govuk-button govuk-button--inverse govuk-button--start" data-module="govuk-button">
-          Explore the list
-          <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>
+{{ xGovukMasthead({
+  classes: "x-govuk-masthead–large",
+  title: {
+    html: "A community-maintained list of digital services from the UK&nbsp;government"
+  },
+  description: {
+    text: "This list aims to help designers and developers discover and learn from other digital services."
+  },
+  startButton: {
+    href: "/topic",
+    text: "Explore the list"
+  },
+  image: {
+    src: "/images/homepage-illustration.svg"
+  }
+}) }}
+
 <div class="govuk-width-container app-width-container">
   <main class="govuk-main-wrapper app-main-class" id="main-content">
 

app/views/layout.html

@@ -1,8 +1,6 @@
 {% extends "govuk/template.njk" %}
 
-{% block headIcons %}
-  <link rel="shortcut icon" href="{{ asset_path }}images/unbranded.ico?0.18.3" type="image/x-icon" />
-{% endblock %}
+{% set opengraphImageUrl = "https://govuk-digital-services.herokuapp.com/images/opengraph-image.png" %}
 
 {% block head %}
   <link href="/application.css" rel="stylesheet">

start.js

@@ -198,8 +198,11 @@ app.use('/images', express.static(path.join(__dirname, 'app/assets/images')))
 
 app.use('/', express.static(path.join(__dirname, 'static')))
 
-var env = nunjucks.configure(['app/views/',
-    'node_modules/govuk-frontend/dist'], {
+var env = nunjucks.configure([
+  'app/views/',
+  'node_modules/govuk-frontend/dist',
+  'node_modules/@x-govuk/govuk-prototype-components'
+], {
     autoescape: true,
     express: app,
     watch: (process.env.ENV === 'development')