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') %}
+  <div class="product-page-intro">
-    <h1 class="heading-medium">
+    <div class="product-page-intro-wrapper">
-      GOV.UK Notify makes it easy to send text messages and emails to
+      <div class="grid-row">
-      your users.
+        <div class="column-two-thirds">
-    </h1>
+          <h1>
-    <p class="heading-medium">
+            Send text messages and emails to your users
-      If you work for a UK government department or agency you can try
+          </h1>
-      it now.
+          <p>
-    </p>
+            If you work for a UK government department or agency you can try
-    <p class="button-block">
+            it now.
-      <a class="button button-start" href='{{ url_for('.register' )}}'>
+          </p>
-        Create an account
+          <div class="button-container">
-      </a>
+            <a class="button button-start" href='{{ url_for('.register' )}}'>
-      or <a href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
+              Create an account
-      it before
+            </a>
-    </p>
+            or <a href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
-  {% endcall %}
+            it before
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="product-page-section">
+  </div>
 
 {% endblock %}