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;
+  }
+
+}