Merge pull request #1035 from alphagov/new-product-page

New product page part 1

app/assets/stylesheets/app.scss

@@ -4,7 +4,8 @@
   background-color: $govuk-blue;
 }
 
-#global-header {
+#global-header,
+#global-header.with-proposition {
 
   #logo {
 
@@ -18,19 +19,39 @@
 
   }
 
+  .header-wrapper {
+    .header-global {
+      .header-logo {
+
+        @include media(desktop) {
+          width: auto;
+        }
+
+        &:after {
+          display: none;
+        }
+
+      }
+    }
+  }
+
   .header-proposition {
     #proposition-links {
       li {
         padding: 0 0 0 15px;
       }
     }
-    #proposition-menu {
-      margin-top: 9px;
-    }
   }
 
 }
 
+.beta-badge {
+  @include phase-tag(beta);
+  background: $govuk-blue;
+  margin: 10px 0 0 0;
+}
+
+
 @include media(desktop) {
   #proposition-menu {
     float: right;

app/assets/stylesheets/components/banner.scss

@@ -111,59 +111,6 @@
 
 }
 
-.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;

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,98 @@
+.product-page {
+
+  &-intro {
+
+    margin: -10px 0 $gutter * 1.5 0;
+    padding: $gutter * 2 0 $gutter * 2 0;
+    background: $govuk-blue;
+    color: $white;
+
+    &-wrapper {
+
+      @extend %site-width-container;
+
+      @include media(desktop) {
+        background-image: file-url('product/proposition-illustration.png');
+        background-size: 320px;
+        background-repeat: no-repeat;
+        background-position: right -14px top -10px;
+      }
+
+    }
+
+    h1 {
+      @include bold-48;
+      margin: 0 0 $gutter 0;
+    }
+
+    p {
+      @include core-24;
+      margin: $gutter-half 0 $gutter;
+    }
+
+    .button-container {
+      line-height: 45px;
+    }
+
+    .button {
+
+      background: $white;
+      margin-right: 15px;
+
+      &: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-half;
+
+    h2 {
+      @include bold-24;
+      margin: $gutter-half 0 10px 0;
+    }
+
+    h2 {
+      @include bold-36;
+      margin: 0 0 $gutter;
+    }
+
+    .with-keyline {
+      border-top: 1px solid $border-colour;
+      padding: $gutter * 1.5 0 0 0;
+    }
+
+    img {
+      max-width: 100%;
+      margin: 0 0 $gutter * 1.5 0;
+    }
+
+  }
+
+}

app/templates/admin_template.html

@@ -31,6 +31,7 @@
 {% endblock %}
 
 {% block inside_header %}
+  <strong class='beta-badge'>Beta</strong>
 {% endblock %}
 {% block header_class %}with-proposition{% endblock %}
 {% block proposition_header %}
@@ -39,6 +40,7 @@
       <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
       <nav id="proposition-menu">
         <ul id="proposition-links">
+          <li><a href="{{ url_for('main.feedback') }}">Support and feedback</a></li>
           {% if current_user.is_authenticated %}
             <li>
               <a href="{{ url_for('main.user_profile') }}">{{ current_user.name }}</a>
@@ -56,7 +58,7 @@
             </li>
           {% else %}
             <li>
-              <a href="{{ url_for('main.sign_in' )}}">Sign in to your account</a>
+              <a href="{{ url_for('main.sign_in' )}}">Sign in</a>
             </li>
           {% endif %}
         </ul>
@@ -71,9 +73,7 @@
 {% set homepage_url = url_for('main.show_all_services_or_dashboard') %}
 
 {% block content %}
-  <div id="content">
-    {% block fullwidth_content %}{% endblock %}
-  </div>
+  {% block fullwidth_content %}{% endblock %}
 {% endblock %}
 
 {% block footer_top %}

app/templates/fullwidth_template.html

@@ -0,0 +1,7 @@
+{% extends "admin_template.html" %}
+
+{% block fullwidth_content %}
+  <main role="main">
+    {% block maincolumn_content %}{% endblock %}
+  </main>
+{% endblock %}

app/templates/views/signedout.html

@@ -1,7 +1,8 @@
+{% from 'components/big-number.html' import big_number %}
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/phone.html" import phone %}
 
-{% extends "withoutnav_template.html" %}
+{% extends "fullwidth_template.html" %}
 
 {% block page_title %}
   GOV.UK Notify
@@ -9,58 +10,102 @@
 
 {% block maincolumn_content %}
 
-  <div class="phase-banner-beta">
-    <p>
-      <strong class="phase-tag">BETA</strong>
-      <span>This is a new service – your <a href="{{ url_for('main.feedback') }}">feedback</a> will help us to improve it.</span>
-    </p>
-  </div>
-
-  {% 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>
-    <div class="grid-row phone-container">
-      <div class="column-one-third">
-        {{ phone(
-          "07900911111",
-          """
-            Joshua, we’ve started processing your application.
-            Your reference number is 300312.
-          """
-        ) }}
-      </div>
-      <div class="column-one-third">
-        {{ phone(
-          "07900922222",
-          """
-            Amala, we’ve started processing your application.
-            Your reference number is 444250.
-          """
-        ) }}
-      </div>
-      <div class="column-one-third">
-        {{ phone(
-          "07900933333",
-          """
-            Roman, we’ve started processing your application.
-            Your reference number is 568821.
-          """
-        ) }}
+  <div class="product-page-intro">
+    <div class="product-page-intro-wrapper">
+      <div class="grid-row">
+        <div class="column-two-thirds">
+          <h1>
+            Send emails and text messages to your users
+          </h1>
+          <p>
+            Try GOV.UK Notify now if you work for a UK government
+            department or agency.
+          </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>
-  {% endcall %}
+  </div>
+
+  <div class="product-page-section">
+    <div class="grid-row">
+      <div class="column-half">
+        <h2>
+          Control your content
+        </h2>
+        <p>
+          You don’t need any technical knowledge to create email and
+          text&nbsp;message templates.
+        </p>
+      </div>
+      <div class="column-half">
+        <img src="/static/images/product/01-templates.svg">
+      </div>
+    </div>
+  </div>
+  <div class="product-page-section">
+    <div class="grid-row">
+      <div class="column-half">
+        <h2>
+          See how your messages perform
+        </h2>
+        <p>
+          Track how many messages you’ve sent and
+          find out which ones aren’t getting delivered.
+        </p>
+      </div>
+      <div class="column-half">
+        <img src="/static/images/product/02-reporting.svg">
+      </div>
+    </div>
+  </div>
+  <div class="product-page-section">
+    <h2 class="with-keyline">
+      Send messages manually or automatically
+    </h2>
+    <div class="grid-row">
+      <div class="column-half">
+        <p>
+          Upload a spreadsheet of email&nbsp;addresses or
+          phone&nbsp;numbers and Notify sends the messages.
+        </p>
+        <img src="/static/images/product/03-spreadsheet.svg">
+      </div>
+      <div class="column-half">
+        <p>
+          Integrate the GOV.UK Notify API with your web&nbsp;application or
+          back office system.
+        </p>
+        <img src="/static/images/product/04-api.svg">
+      </div>
+    </div>
+  </div>
+  <div class="product-page-section bottom-gutter-2">
+    <div class="grid-row">
+      <div class="column-half">
+        <h2 class="with-keyline">
+          The team
+        </h2>
+        <p>
+          GOV.UK Notify is built by the Government Digital Service
+          and is supported 24 hours a day, 7 days a week.
+        </p>
+        <p>
+          <a href="{{ url_for('main.feedback') }}">Contact the team</a> if you have a question or want
+          to give feedback.
+        </p>
+      </div>
+      <div class="column-half">
+        <img src="/static/images/product/team.jpg">
+      </div>
+    </div>
+  </div>
+
 
 {% endblock %}

app/templates/withnav_template.html

@@ -1,19 +1,21 @@
 {% extends "admin_template.html" %}
 
 {% block fullwidth_content %}
-  <div class="navigation-service">
-    <h2 class="navigation-service-name">
-      {{ current_service.name }}
-    </h2>
-    <a href="{{ url_for('main.choose_service') }}" class="navigation-service-switch">Switch service</a>
-  </div>
-  <div class="grid-row">
-    <div class="column-one-third">
-      {% include "main_nav.html" %}
+  <div id="content">
+    <div class="navigation-service">
+      <h2 class="navigation-service-name">
+        {{ current_service.name }}
+      </h2>
+      <a href="{{ url_for('main.choose_service') }}" class="navigation-service-switch">Switch service</a>
+    </div>
+    <div class="grid-row">
+      <div class="column-one-third">
+        {% include "main_nav.html" %}
+      </div>
+      <main role="main" class="column-two-thirds column-main">
+        {% include 'flash_messages.html' %}
+        {% block maincolumn_content %}{% endblock %}
+      </main>
     </div>
-    <main role="main" class="column-two-thirds column-main">
-      {% include 'flash_messages.html' %}
-      {% block maincolumn_content %}{% endblock %}
-    </main>
   </div>
 {% endblock %}

app/templates/withoutnav_template.html

@@ -1,8 +1,10 @@
 {% extends "admin_template.html" %}
 
 {% block fullwidth_content %}
-  <main role="main">
-    {% include 'flash_messages.html' %}
-    {% block maincolumn_content %}{% endblock %}
-  </main>
+  <div id="content">
+    <main role="main">
+      {% include 'flash_messages.html' %}
+      {% block maincolumn_content %}{% endblock %}
+    </main>
+  </div>
 {% endblock %}