Merge pull request #715 from alphagov/fancy-homepage

Make it clearer what Notify is for from homepage

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