CCM-5093: static landing page

docs/.gitignore

@@ -3,4 +3,6 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
+.bundle
+node_modules
 #Gemfile.lock

docs/README.md

@@ -1,3 +1,9 @@
 # Developer info for Public Website
 
 Document here.
+
+## Setup (Mac)
+
+Mac by default has ruby installed. However the default version is 2.2.x. For this project we need ruby version 3, so we can installed the 2.5.10 gem bundler.
+
+Run through the solution listed on this [StackOverflow](https://stackoverflow.com/questions/38194032/how-can-i-update-ruby-version-2-0-0-to-the-latest-version-in-mac-os-x-v10-10-yo) page

docs/_config.dev.yml

@@ -1,2 +1 @@
-
 baseurl: "" # the subpath of your site, e.g. /blog

docs/_config.yml

@@ -22,7 +22,7 @@ title: NHS Notify CMS
 # email: [email protected]
 description: >- # this means to ignore newlines until "baseurl:"
   NHS Notify Web CMS
-baseurl: "/nhs-notify-web-cms" # the subpath of your site, e.g. /blog
+baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://nhsdigital.github.io" # the base hostname & protocol for your site, e.g. http://example.com
 
 collections_dir: collections
@@ -33,7 +33,7 @@ collections:
     sort_by: order
 
 # Build settings
-theme: just-the-docs
+# theme: just-the-docs
 plugins:
   - jekyll-feed
 
@@ -68,6 +68,9 @@ callouts:
     title: Warning
     color: red
 
+sass:
+  style: compact # possible values: nested expanded compact compressed
+
 # Exclude from processing.
 # The following items will not be processed, by default.
 # Any item listed under the `exclude:` key here will be automatically added to

docs/_data/footer-navigation.yml

@@ -0,0 +1,2 @@
+# - title: Accessibility statement
+#   link: /

docs/_data/home/benefits.yml

@@ -0,0 +1,11 @@
+- heading: Lower your messaging costs
+  description: |
+    Pay less for messages with out competitive rates and never pay any service or integration fees.
+
+- heading: Increase your operating efficiency
+  description: |
+    Make procuring messages easier by using NHS Notify as a centralised all in one provider.
+
+- heading: Message your audiences more effectively
+  description: |
+    Use a range of channels and formats to message people in the ways that works best for them.

docs/_data/home/find-out-more.yml

@@ -0,0 +1,5 @@
+heading: Find out how you can start using NHS Notify
+description: |
+  NHS England organisations and services that support direct care can register their interest and get started with NHS Notify.
+image: CTA-register-your-interest.svg
+image_alt: A graphic of a laptop screen with a draft email open.

docs/_data/home/heading.yml

@@ -0,0 +1,7 @@
+heading: Send NHS App messages, emails, tests and letters to patients and the public
+description: |
+  You can use NHS Notify if you work in NHS England and support direct care
+image: landing-main-image.svg
+image_alt: |
+  A graphic representation of NHS Notify's message channels:
+  NHS App messages, emails, text messages and letters.

docs/_data/home/how-it-works.yml

@@ -0,0 +1,27 @@
+- heading: Write your messages
+  description: |
+    Create and edit reusable templates for each message channel:
+    - NHS App messages
+    - emails
+    - text messages (SMS)
+    - letters
+  image: 1-write-your-message.svg
+  image_alt: A screenshot showing how you write messages using NHS Notify's user interface.
+
+- heading: Choose your recipients
+  description: |
+    Provide the NHS numbers of the people you want to send messages to.
+  image: 2-choose-your-recipients.svg
+  image_alt: A screenshot of computer code showing how you choose your message recipients.
+
+- heading: Plan how your messages will be sent
+  description: |
+    Set up routing plans to decide how your messages will be sent to your recipients.
+  image: 3-plan-your-messages.svg
+  image_alt: A graphic of a phone, laptop and letter (numbered 1,2 and 3 in that order) to show that you can send messages with each message channel in a specific order.
+
+- heading: See how your messages perform
+  description: |
+    Track how many messages you've sent and find out which ones are not being delivered.
+  image: 4-see-message-performance.svg
+  image_alt: Track how many messages you've sent and find out which ones are not being delivered.

docs/_data/home/pricing.yml

@@ -0,0 +1,15 @@
+- heading: NHS App
+  description: unlimited messages
+  pricing: Free
+
+- heading: Emails
+  description: unlimited emails
+  pricing: Free
+
+- heading: Texts (SMS)
+  description: up to 30,000 free texts then
+  pricing: 2.27p
+
+- heading: Letters
+  description: A4, two sides, send 2nd class
+  pricing: 54p

docs/_data/primary-navigation.yml

@@ -0,0 +1,11 @@
+- title: Home
+  link: /
+
+- title: About
+  link: /about/
+
+- title: Features
+  link: /features/
+
+- title: Examples
+  link: /examples/

docs/_includes/components/action-link.html

@@ -0,0 +1,12 @@
+<div class="nhsuk-action-link">
+  <a class="nhsuk-action-link__link" href="{{ include.url }}">
+    <svg class="nhsuk-icon nhsuk-icon__arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+      aria-hidden="true" width="36" height="36">
+      <path d="M0 0h24v24H0z" fill="none"></path>
+      <path
+        d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z">
+      </path>
+    </svg>
+    <span class="nhsuk-action-link__text">{{ include.text }}</span>
+  </a>
+</div>

docs/_includes/components/banner.html

@@ -0,0 +1,9 @@
+<div class="nhsuk-grid-column-one-half">
+  <h2>{{ include.data.heading }}</h2>
+  <p>
+    {{ include.data.description }}
+  </p>
+</div>
+<div class="nhsuk-grid-column-one-half">
+  {% include components/image.html src=include.data.image alt=include.data.image_alt class="nhsnotify-image" %}
+</div>

docs/_includes/components/card-group.html

@@ -0,0 +1,11 @@
+<ul class="nhsuk-grid-row nhsuk-card-group">
+  {% for item in include.data %}
+  <li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
+    {% if item.pricing %}
+    {% include components/card-with-price.html heading=item.heading description=item.description pricing=item.pricing %}
+    {% else %}
+    {% include components/card.html heading=item.heading description=item.description %}
+    {% endif %}
+  </li>
+  {% endfor %}
+</ul>

docs/_includes/components/card-with-price.html

@@ -0,0 +1,13 @@
+<div class="nhsuk-card">
+  <div class="nhsuk-card__content">
+    <h3 class="nhsuk-card__heading">
+      {{ include.heading }}
+    </h3>
+    <div class="nhsuk-card__description">
+      {{ include.description }}
+    </div>
+    <div class="nhsuk-card__pricing">
+      {{ include.pricing }}
+    </div>
+  </div>
+</div>

docs/_includes/components/card.html

@@ -0,0 +1,10 @@
+<div class="nhsuk-card">
+  <div class="nhsuk-card__content">
+    <h3 class="nhsuk-card__heading">
+      {{ include.heading }}
+    </h3>
+    <p class="nhsuk-card__description">
+      {{ include.description }}
+    </p>
+  </div>
+</div>

docs/_includes/components/image.html

@@ -0,0 +1,13 @@
+<figure class="nhsuk-image {{ include.class }}">
+  {% assign src = 'assets/images/' | append: include.src %}
+  {% if include.src contains 'https://' %}
+  <img class="nhsuk-image__img" src='{{ include.src }}' alt='{{ include.alt }}' />
+  {% else %}
+  <img class="nhsuk-image__img" src='{{ src | absolute_url }}' alt='{{ include.alt }}' />
+  {% endif %}
+  {% if include.caption %}
+  <figcaption class="nhsuk-image__caption">
+    {{ include.caption }}
+  </figcaption>
+  {% endif %}
+</figure>

docs/_includes/components/styled-list.html

@@ -0,0 +1,26 @@
+<div class="nhsnotify-list">
+  {% assign i = 1 %}
+  {% for item in include.data %}
+  <div id="write-your-messages" class="nhsuk-grid-row nhsnotify-list__item">
+    <div class="nhsuk-grid-column-one-half">
+      <div class="nhsnotify-list__item-header">
+        <span class="nhsnotify-list__item-header-number">
+          <p>{{ i }}</p>
+        </span>
+        <span class="nhsnotify-list__item-header-title">
+          <h3 class="nhsuk-heading-m">
+            {{ item.heading }}
+          </h3>
+          <div markdown="1">
+            {{ item.description | markdownify }}
+          </div>
+        </span>
+      </div>
+    </div>
+    <div class="nhsuk-grid-column-one-half">
+      {% include components/image.html src=item.image alt=item.image_alt class="nhsnotify-image" %}
+    </div>
+  </div>
+  {% assign i = i | plus:1 %}
+  {% endfor %}
+</div>

docs/_includes/footer.html

@@ -0,0 +1,18 @@
+<footer role="contentinfo">
+  <div class="nhsuk-footer-container">
+    <div class="nhsuk-width-container">
+      <h2 class="nhsuk-u-visually-hidden">Support links</h2>
+      <div class="nhsuk-footer">
+        <ul class="nhsuk-footer__list">
+          {% for item in site.data.footer-navigation %}
+          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+            <a class="nhsuk-footer__list-item-link" href="{{ item.link }}">{{ item.title }}</a>
+          </li>
+          {% endfor %}
+          <div>
+            <p class="nhsuk-footer__copyright">&copy; NHS England</p>
+          </div>
+      </div>
+    </div>
+  </div>
+</footer>

docs/_includes/head.html

@@ -0,0 +1,24 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="TODO: ENTER DESCRIPTION">
+  <title>
+    NHS Notify - {{ page.title | default: site.title }}
+  </title>
+  <link href="/assets/css/main.css" rel="stylesheet">
+  <script src="/assets/js/nhsuk.min.js" defer="" nonce="{{ 'nonce' | random_string }}"></script>
+  <script src="/assets/js/nhsuk-8.1.1.min.js" defer="" nonce="{{ 'nonce' | random_string }}"></script>
+
+  <link rel="shortcut icon" href="/assets/favicons/favicon.ico" type="image/x-icon">
+  <link rel="apple-touch-icon" href="/assets/favicons/apple-touch-icon-180x180.png">
+  <link rel="mask-icon" href="{{ 'assets/favicons/favicon.svg }}" color="#005eb8">
+  <link rel="icon" sizes="192x192" href="{{ 'assets/favicons/favicon-192x192.png }}">
+
+  <meta name="msapplication-TileColor" content="#005eb8">
+  <meta name="msapplication-TileImage" content="/assets/favicons/mediumtile-144x144.png">
+  <meta name="msapplication-square70x70logo" content="/assets/favicons/smalltile-70x70.png">
+  <meta name="msapplication-square150x150logo" content="/assets/favicons/mediumtile-150x150.png">
+  <meta name="msapplication-wide310x150logo" content="/assets/favicons/widetile-310x150.png">
+  <meta name="msapplication-square310x310logo" content="/assets/favicons/largetile-310x310.png">
+</head>

docs/_includes/header.html

@@ -0,0 +1,20 @@
+<header class="nhsuk-header" role="banner">
+  <div class="nhsuk-header__container">
+    <div class="nhsuk-header__logo">
+      <a class="nhsuk-header__link nhsuk-header__link--service" href="/" aria-label="NHS homepage">
+        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
+          <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
+          <path class="nhsuk-logo__text" fill="#fff"
+            d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6">
+          </path>
+        </svg>
+        <span class="nhsuk-header__service-name">
+          Notify
+        </span>
+      </a>
+    </div>
+  </div>
+  <div class="nhsuk-navigation-container">
+    {%- include primary-navigation.html -%}
+  </div>
+</header>

docs/_includes/primary-navigation.html

@@ -0,0 +1,11 @@
+<nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+  <ul class="nhsuk-header__navigation-list">
+    {% for p in site.data.primary-navigation -%}
+    <li class="nhsuk-header__navigation-item">
+      <a href="{{ p.link }}" class="nhsuk-header__navigation-link">
+        {{ p.title }}
+      </a>
+    </li>
+    {% endfor -%}
+  </ul>
+</nav>

docs/_layouts/default.html

@@ -1,47 +1,21 @@
----
-layout: table_wrappers
----
-
 <!DOCTYPE html>
+<html lang="{{ site.lang | default: 'en' }}">
+{%- include head.html -%}
+
+<body class="wrap">
+  <script src="/assets/js/nhs-frontend-js-check.js" defer="" nonce="{{ 'nonce' | random_string }}"></script>
 
-<html lang="{{ site.lang | default: 'en-US' }}">
-{% include head.html %}
-<body>
-  <a class="skip-to-main" href="#main-content">Skip to main content</a>
-  {% include icons/icons.html %}
-  {% if page.nav_enabled == true %}
-    {% include components/sidebar.html %}
-  {% elsif layout.nav_enabled == true and page.nav_enabled == nil %}
-    {% include components/sidebar.html %}
-  {% elsif site.nav_enabled != false and layout.nav_enabled == nil and page.nav_enabled == nil %}
-    {% include components/sidebar.html %}
-  {% endif %}
-  <div class="main" id="top">
-    {% include components/header.html %}
-    <div class="main-content-wrap">
-      {% include components/breadcrumbs.html %}
-      <div id="main-content" class="main-content">
-        <main>
-          {% if site.heading_anchors != false %}
-            {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
-          {% else %}
-            {{ content }}
-          {% endif %}
+  <a class="nhsuk-skip-link" href="#maincontent">Skip to main content</a>
 
-          {% if page.has_children == true and page.has_toc != false %}
-            {% include components/children_nav.html %}
-          {% endif %}
-        </main>
-        {% include components/footer.html %}
-      </div>
-    </div>
-    {% if site.search_enabled != false %}
-      {% include components/search_footer.html %}
-    {% endif %}
+  {%- include header.html -%}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent" role="main">
+      {{- content -}}
+    </main>
   </div>
 
-  {% if site.mermaid %}
-    {% include components/mermaid.html %}
-  {% endif %}
+  {%- include footer.html -%}
 </body>
+
 </html>

docs/_layouts/home.html

@@ -1,7 +1,19 @@
----
-layout: default
----
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: 'en' }}">
+{%- include head.html -%}
 
-<h1>{{page.site_title}}</h1>
+<body class="wrap">
+  <script src="/assets/js/nhs-frontend-js-check.js" defer="" nonce="{{ 'nonce' | random_string }}"></script>
 
-{{ content }}
+  <a class="nhsuk-skip-link" href="#maincontent">Skip to main content</a>
+
+  {%- include header.html -%}
+
+  <main id="maincontent" role="main">
+    {{- content -}}
+  </main>
+
+  {%- include footer.html -%}
+</body>
+
+</html>