Calls to action and links on the landing page (#120)

* This commit:
- adds action links to landing page
- adds primary CTA buttons to landing page
- adds button-reverse component for white buttons on dark backgrounds
- adds links to 1. Write your messages on the landing page

* fix(home): remove bottom margin from buttons on home page

- Add nhsnotify-home-page class to home layout for page-specific styling
- Add CSS override to remove margin-bottom from nhsuk-button class within home page
- Ensures buttons on home page have no bottom margin while preserving styling on other pages

---------

Co-authored-by: afernandez-nhs <[email protected]>

Author: jakecosgrove

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

@@ -1,10 +1,10 @@
 - heading: Write your messages
   description: |
     Create reusable templates or free-text messages for each message channel:
-    - NHS App messages and notifications
-    - emails
-    - text messages (SMS)
-    - letters
+    - [NHS App messages and notifications](https://notify.nhs.uk/features/nhs-app-messages)
+    - [emails](https://notify.nhs.uk/features/emails)
+    - [text messages (SMS)](https://notify.nhs.uk/features/text-messages-sms)
+    - [letters](https://notify.nhs.uk/features/letters)
   image: 1-write-your-message.svg
   image_alt: ""
 
@@ -19,6 +19,7 @@
     Set up routing plans to decide how your messages will be sent to recipients.
   image: 3-plan-your-messages.svg
   image_alt: ""
+  number: 3
 
 - heading: See how your messages perform
   description: |

docs/_includes/components/button-reverse.html

@@ -0,0 +1,5 @@
+<a href="{{ include.url }}" target="_blank">
+  <button class="nhsuk-button nhsuk-button--reverse">
+    {{ include.text }}
+  </button>
+</a>

docs/_includes/components/styled-list.html

@@ -3,17 +3,23 @@
   {% for item in include.data %}
   <div class="nhsuk-grid-row nhsnotify-list__item">
     <div class="nhsuk-grid-column-one-half">
-        <h3 class="nhsnotify-list__item-header">
-          <div class="nhsnotify-list__item-header-number">
-            {{ i }}
-          </div>
-          <div class="nhsnotify-list__item-header-title">
-              {{ item.heading }}
-          </div>
-        </h3>
-        <div class="nhsnotify-list__item-description">
-            {{ item.description | markdownify }}
+      <h3 class="nhsnotify-list__item-header">
+        <div class="nhsnotify-list__item-header-number">
+          {{ i }}
         </div>
+        <div class="nhsnotify-list__item-header-title">
+          {{ item.heading }}
+        </div>
+      </h3>
+      <div class="nhsnotify-list__item-description">
+        {{ item.description | markdownify }}
+        {% if item.number == 3 %}
+        {% include components/action-link.html
+        url='/using-nhs-notify/routing-plans'
+        text='Learn more about routing plans'
+        %}
+        {% endif %}
+      </div>
     </div>
     <div class="nhsuk-grid-column-one-half">
       {% include components/image.html src=item.image alt=item.image_alt class="nhsnotify-image" %}

docs/_layouts/home.html

@@ -1,6 +1,6 @@
 ---
 layout: default
 ---
-<main id="maincontent" role="main">
+<main id="maincontent" role="main" class="nhsnotify-home-page">
   {{ content }}
 </main>

docs/_sass/_nhsnotify.scss

@@ -206,6 +206,11 @@
   }
 }
 
+// Home page button margin override
+.nhsnotify-home-page .nhsuk-button {
+  margin-bottom: 0;
+}
+
 .nhsuk-breadcrumb__item {
 
   &:not(:last-child)::after {

docs/pages/index.md

@@ -5,6 +5,7 @@ site_title: NHS Notify CMS
 nav_order: 1
 permalink: /
 ---
+
 <!-- HEADING -->
 <div id="heading" class="nhsnotify-banner--blue">
   <div class="nhsuk-main-wrapper nhsuk-width-container">
@@ -14,6 +15,10 @@ permalink: /
         <p>
           {{ site.data.home.heading.description }}
         </p>
+        {% include components/button-reverse.html
+          text="Get started"
+          url="https://notify.nhs.uk/get-started/"
+        %}
       </div>
       <div class="nhsuk-grid-column-one-half">
         {% include components/image.html src=site.data.home.heading.image alt=site.data.home.heading.image_alt class="nhsnotify-image" %}
@@ -76,6 +81,10 @@ permalink: /
         <p>
           {{ site.data.home.find-out-more.description }}
         </p>
+        {% include components/button-reverse.html
+          text="Get started"
+          url="https://notify.nhs.uk/get-started/"
+        %}
       </div>
       <div class="nhsuk-grid-column-one-half">
         {% include components/image.html src=site.data.home.find-out-more.image alt=site.data.home.find-out-more.image_alt class="nhsnotify-image" %}