From a4e5c4a3bcf75fd0565e9480e899cb8465ed17c4 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 14 Dec 2016 14:59:41 +0000
Subject: [PATCH] Add pricing to the product page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

‘How much does it cost’ is one of the user needs that we identifed for
the product page.

Cost is not the primary reason someone would use Notify (they’re more
likely to cite ease, or that it’s ‘official’). However if you _don’t_
mention cost then it looks like we’re hiding something or that there’s
a catch. So putting it on the page allays fears that people might have,
rather than pushing them towards using it.

Visually I’ve dropped the size of the `<h2>`s on this page so that
there’s enough difference between them and the big numbers. The idea of
the big numbers being big is to catch people’s attention as they scroll
down the page, by breaking up the rythmn.
---
 .../stylesheets/views/product-page.scss       |  7 ++++-
 app/templates/views/signedout.html            | 27 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/views/product-page.scss b/app/assets/stylesheets/views/product-page.scss
index 76061619e..9db7456e4 100644
--- a/app/assets/stylesheets/views/product-page.scss
+++ b/app/assets/stylesheets/views/product-page.scss
@@ -81,7 +81,7 @@
     margin-bottom: $gutter-half;
 
     h2 {
-      @include bold-36;
+      @include bold-27;
       margin: 0 0 $gutter;
     }
 
@@ -97,4 +97,9 @@
 
   }
 
+  &-big-number {
+    @include bold-48($tabular-numbers: true);
+    margin: 0 0 0 0;
+  }
+
 }
diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html
index cc97cc276..1e29fb68e 100644
--- a/app/templates/views/signedout.html
+++ b/app/templates/views/signedout.html
@@ -95,7 +95,32 @@
       </div>
     </div>
   </div>
-  <div class="product-page-section bottom-gutter-2">
+  <div class="product-page-section">
+    <div class="with-keyline bottom-gutter-2">
+      <h2>Pricing</h2>
+      <div class="grid-row bottom-gutter">
+        <div class="column-half">
+          <h3 class="visually-hidden">Emails</h3>
+          <div class="product-page-big-number">Unlimited</div>
+          free emails
+        </div>
+        <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
+          1.65 pence per message
+        </div>
+      </div>
+      <div class="grid-row bottom-gutter">
+        <div class="column-three-quarters">
+          <p>
+            There’s no monthly charge, no setup fee and no procurement process.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="product-page-section">
     <div class="grid-row">
       <div class="column-half">
         <h2 class="with-keyline">