Make it clearer what Notify is for from homepage

Uses some graphic design to communicate what Notify is:

- for sending messages to lots of people
- messages can be personalised

app/assets/stylesheets/components/banner.scss

@@ -109,13 +109,65 @@
 
 }
 
+.banner-intro {
+
+  margin: $gutter 0 -90px 0;
+  padding: $gutter-half $gutter;
+  background: $govuk-blue;
+  color: $white;
+  overflow: hidden;
+
+  .heading-medium {
+    @include core-24;
+  }
+
+  a {
+    &:link,
+    &:visited {
+      color: $white;
+    }
+
+    &:hover,
+    &:active {
+      color: $light-blue-25;
+    }
+  }
+
+  .button-block {
+    line-height: 3.68em;
+  }
+
+  .button {
+
+    @include core-19;
+    background: $white;
+    padding: 0.3684210526em 0.8421052632em 0.2105263158em 0.7421052632em;
+    display: inline-block;
+    margin-top: $gutter-half;
+    margin-right: 0.3em;
+    box-shadow: 0 2px 0 mix($govuk-blue, $text-colour);
+
+    &:link,
+    &:visited,
+    &:hover {
+      color: $govuk-blue;
+    }
+
+    &:hover {
+      background: $light-blue-25;
+      outline: none;
+    }
+
+  }
+
+}
+
 .banner-tour {
 
   @extend %banner;
   background: $govuk-blue;
   color: $white;
   margin-top: $gutter;
-  margin-bottom: $gutter * -3;
   padding: $gutter;
   height: 475px;
   overflow: hidden;
@@ -166,17 +218,4 @@
 
   }
 
-  th {
-    padding: inherit 5px;
-    background: $grey-3;
-    border-left: 5px solid $grey-3;
-    border-right: 5px solid $grey-3;
-  }
-
-  tr:last-child {
-    td {
-      border: none;
-    }
-  }
-
 }

app/assets/stylesheets/components/phone.scss

@@ -0,0 +1,40 @@
+.phone {
+
+  background: $black;
+  border-radius: 15px;
+  padding: 15px;
+
+  &-speaker {
+    margin: 5px auto 20px;
+    border-radius: 5px;
+    width: 30px;
+    height: 7px;
+    background: rgba($white, 0.2);
+  }
+
+  &-screen {
+    background: $white;
+    color: $black;
+    min-height: 377px;
+    border-radius: 1px;
+  }
+
+  &-recipient {
+    @include core-16($tabular-numbers: true);
+    margin: 0 0 5px 7px;
+    padding-top: 10px;
+    color: $secondary-text-colour;
+  }
+
+  &-sms {
+    padding: 10px;
+    margin: 10px;
+    background: $panel-colour;
+    border-radius: 5px;
+  }
+
+}
+
+.phone-container {
+  margin-bottom: -200px;
+}

app/assets/stylesheets/main.scss

@@ -52,6 +52,7 @@ $path: '/static/images/';
 @import 'components/secondary-button';
 @import 'components/show-more';
 @import 'components/message';
+@import 'components/phone';
 
 @import 'views/job';
 @import 'views/edit-template';

app/templates/components/phone.html

@@ -0,0 +1,16 @@
+{% macro phone(recipient, message) %}
+  <div class="phone">
+    <div class="phone-speaker"></div>
+    <div class="phone-screen">
+      <h2 class="phone-recipient">
+        <span class="visually-hidden">
+          Example text message
+        </span>
+        To: {{recipient}}
+      </h2>
+      <div class="phone-sms">
+        {{ message }}
+      </div>
+    </div>
+  </div>
+{% endmacro %}

app/templates/views/register.html

@@ -11,9 +11,6 @@ Create an account – GOV.UK Notify
 <div class="grid-row">
   <div class="column-two-thirds">
     <h1 class="heading-large">Create an account</h1>
-
-    <p>If you’ve used GOV.UK Notify before, <a href="{{ url_for('.sign_in') }}">sign in to your account</a></p>
-
     <form method="post" autocomplete="nope">
       {{ textbox(form.name, width='3-4') }}
       {{ textbox(form.email_address, hint="Must be from a central government organisation", width='3-4', safe_error_message=True) }}

app/templates/views/signedout.html

@@ -1,3 +1,6 @@
+{% from "components/banner.html" import banner_wrapper %}
+{% from "components/phone.html" import phone %}
+
 {% extends "withoutnav_template.html" %}
 
 {% block page_title %}
@@ -6,23 +9,51 @@
 
 {% block maincolumn_content %}
 
-<div class="grid-row">
+  {% call banner_wrapper(type='intro') %}
-  <div class="column-two-thirds">
+    <h1 class="heading-medium">
-    <h1 class="heading-xlarge">GOV.UK Notify</h1>
+      GOV.UK Notify makes it easy to send text messages and emails to
-    <p>
+      your users.
-      Making it easy to send text messages and emails to your users.
+    </h1>
+    <p class="heading-medium">
+      If you work for a UK government department or agency you can try
+      it now.
     </p>
-    <p>
+    <p class="button-block">
-      If you work for a UK government department or agency you can try it now.
+      <a class="button button-start" href='{{ url_for('.register' )}}'>
+        Create an account
+      </a>
+      or <a href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
+      it before
     </p>
-    <p>
+    <div class="grid-row phone-container">
-      <a class="button" href="{{ url_for('.register' )}}" role="button">Set up an account</a>
+      <div class="column-one-third">
-    </p>
+        {{ phone(
-    <p>
+          "07900911111",
-      If you’ve used GOV.UK Notify before, <a href="{{ url_for('.sign_in' )}}">sign in to your account</a>.
+          """
-    </p>
+            Joshua, we’ve started processing your application.
-
+            You should hear back from us within two weeks.
-  </div>
+          """
-</div>
+        ) }}
+      </div>
+      <div class="column-one-third">
+        {{ phone(
+          "07900922222",
+          """
+            Amala, we’ve started processing your application.
+            You should hear back from us within two weeks.
+          """
+        ) }}
+      </div>
+      <div class="column-one-third">
+        {{ phone(
+          "07900933333",
+          """
+            Roman, we’ve started processing your application.
+            You should hear back from us within two weeks.
+          """
+        ) }}
+      </div>
+    </div>
+  {% endcall %}
 
 {% endblock %}