Make the blue header on the home page full-width

This copies the style that Tim and Stephen have been developing for all
product pages.

It also pulls out the CSS for this into its own file, so that it could
potentially be reused.

app/assets/stylesheets/components/banner.scss

@@ -111,59 +111,6 @@
 
 }
 
-.banner-intro {
-
-  margin: -10px 0 0 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;

app/assets/stylesheets/main.scss

@@ -66,6 +66,7 @@ $path: '/static/images/';
 @import 'views/dashboard';
 @import 'views/users';
 @import 'views/api';
+@import 'views/product-page';
 
 // TODO: break this up
 @import 'app';

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

@@ -0,0 +1,66 @@
+.product-page {
+
+  &-intro {
+
+    margin: -10px 0 $gutter * 1.5 0;
+    padding: $gutter 0 $gutter * 1.5 0;
+    background: $govuk-blue;
+    color: $white;
+
+    &-wrapper {
+      @extend %site-width-container;
+    }
+
+    h1 {
+      @include bold-36;
+    }
+
+    p {
+      margin: $gutter-half 0 $gutter;
+    }
+
+    .button-container {
+      line-height: 35px;
+    }
+
+    .button {
+
+      @include button($white);
+      color: $govuk-blue;
+      margin-right: 5px;
+
+      &:link,
+      &:visited,
+      &:hover {
+        color: $govuk-blue;
+      }
+
+      &:hover {
+        background: $light-blue-25;
+        outline: none;
+      }
+
+    }
+
+    a {
+
+      &:link,
+      &:visited {
+        color: $white;
+      }
+
+      &:hover,
+      &:active {
+        color: $light-blue-25;
+      }
+
+    }
+
+  }
+
+  &-section {
+    @extend %site-width-container;
+    margin-bottom: $gutter * 1.5;
+  }
+
+}

app/templates/views/signedout.html

@@ -9,22 +9,30 @@
 
 {% block maincolumn_content %}
 
-  {% call banner_wrapper(type='intro') %}
-    <h1 class="heading-medium">
-      GOV.UK Notify makes 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 class="button-block">
-      <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>
-  {% endcall %}
+  <div class="product-page-intro">
+    <div class="product-page-intro-wrapper">
+      <div class="grid-row">
+        <div class="column-two-thirds">
+          <h1>
+            Send text messages and emails to your users
+          </h1>
+          <p>
+            If you work for a UK government department or agency you can try
+            it now.
+          </p>
+          <div class="button-container">
+            <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
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="product-page-section">
+  </div>
 
 {% endblock %}