Update product page to talk about letters

Letters is now a mature enough feature that we should:
- be raising awareness amongst our users that it’s a thing we offer
- not have letters be a surprise to anyone creating a Notify account for
  the first time

Shouldn’t be merged until:
- [ ] https://github.com/alphagov/notifications-api/pull/1600

app/assets/stylesheets/_grids.scss

@@ -95,6 +95,10 @@
   text-align: right;
 }
 
+.align-with-big-number-hint {
+  margin-top: $gutter / 0.6;
+}
+
 .global-cookie-message {
   p {
     @extend %site-width-container;

app/assets/stylesheets/views/product-page.scss

@@ -16,7 +16,7 @@
         background-image: file-url('product/proposition-illustration.png');
         background-size: 320px;
         background-repeat: no-repeat;
-        background-position: right -6px top 85px;
+        background-position: right -6px top 100px;
 
         @include ie-lte(8) {
           background-image: none;

app/templates/views/signedout.html

@@ -1,7 +1,7 @@
 {% extends "fullwidth_template.html" %}
 
 {% block meta %}
-  <meta name="description" content="GOV.UK Notify lets you send emails and text messages to your users. Try it now if you work in central government, a local authority, or the NHS.">
+  <meta name="description" content="GOV.UK Notify lets you send emails, text messages and letters to your users. Try it now if you work in central government, a local authority, or the NHS.">
 {% endblock %}
 
 {% block page_title %}
@@ -25,7 +25,7 @@
       <div class="grid-row">
         <div class="column-two-thirds">
           <h1>
-            Send emails and text messages to your users
+            Send emails, text messages and letters to your users
           </h1>
           <p>
             Try GOV.UK Notify now if you work in central government, a&nbsp;local authority, or the NHS.
@@ -49,8 +49,8 @@
           Control your content
         </h2>
         <p>
-          You don’t need any technical knowledge to create email and
+          You don’t need any technical knowledge to create email,
-          text&nbsp;message templates.
+          text&nbsp;message or letter templates.
         </p>
       </div>
       <div class="column-half">
@@ -147,14 +147,17 @@
         <div class="column-half">
           <h3 class="visually-hidden">Text messages</h3>
           <div class="product-page-big-number">250,000</div>
-          free text messages a year, then
+          free text messages a year,<br>
-          1.58 pence per message
+          then 1.58 pence per message
         </div>
-      </div>
+        <div class="column-half">
-      <div class="grid-row bottom-gutter">
+          <h3 class="visually-hidden">Letters</h3>
-        <div class="column-three-quarters">
+          <div class="product-page-big-number">30 pence</div>
-          <p>
+          to print and post a one page letter
-            There’s no monthly charge, no setup fee and no procurement process.
+        </div>
+        <div class="column-half">
+          <p class="align-with-big-number-hint">
+            There’s no monthly charge, no setup fee and no&nbsp;procurement process.
           </p>
         </div>
       </div>

tests/app/main/views/test_index.py

@@ -11,8 +11,14 @@ def test_non_logged_in_user_can_see_homepage(
 
     page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
 
-    assert page.select_one('meta[name=description]')['content'].startswith(
+    assert page.h1.text.strip() == (
-        'GOV.UK Notify lets you send emails and text messages'
+        'Send emails, text messages and letters to your users'
+    )
+
+    assert page.select_one('meta[name=description]')['content'].strip() == (
+        'GOV.UK Notify lets you send emails, text messages and letters '
+        'to your users. Try it now if you work in central government, a '
+        'local authority, or the NHS.'
     )