2282 - Home page changes with new design

app/assets/error_pages/5xx.html

@@ -19,7 +19,7 @@
   <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
   <link rel="manifest" href="{{ asset_url('images/site.webmanifest') }}">
 
-  <link rel="stylesheet" media="screen" href="/static/stylesheets/main.css?d077f86473501ab244de0b30600536ee" />
+  <link rel="stylesheet" media="screen" href="/static/stylesheets/legacy/uk.css?d077f86473501ab244de0b30600536ee" />
   <link rel="stylesheet" media="print" href="/static/stylesheets/print.css?28010888ca5719dc83d7c2c80f6ed2b2" />
 
   <meta property="og:image" content="/static/images/notify-og-image.png">

app/assets/sass/uswds/_dashboard.scss

@@ -0,0 +1,186 @@
+@use "uswds-core" as *;
+
+.dashboard {
+    .big-number-with-status {
+      .big-number-smaller {
+        display: flex;
+        flex-direction: column;
+        .big-number-number {
+          font-size: units(5);
+          line-height: units(5);
+        }
+        .big-number-label {
+          font-size: units(2.5);
+        }
+      }
+      .big-number-status {
+        background: color('green-cool-40v');
+        display: flex;
+        padding: units(1) units(2);
+        &--failing {
+          padding: 0;
+          a.usa-link {
+            color: white;
+            background: color('red-warm-50v');
+            padding: units(1) units(2);
+            margin: 0;
+            width: 100%;
+            &:hover {
+              background: color('red-warm-60v');
+            }
+          }
+        }
+      }
+    }
+    .usa-table {
+      width: 100%;
+      caption {
+        margin-bottom: 0;
+      }
+      .table-field-center-aligned {
+        text-align: center;
+      }
+      .template-statistics-table-template-name {
+        padding-left: units(4);
+        display: inline-block;
+        background-repeat: no-repeat;
+        background-image: url(../img/material-icons/description.svg);
+      }
+    }
+    .get-started {
+      border: 1px solid color('gray-90');
+      padding: units(2);
+      margin-bottom: units(4);
+    }
+  }
+
+  .dashboard-table {
+    table {
+      width: 100%;
+    }
+    .file-list-filename {
+      font-weight: bold;
+    }
+    .file-list-hint {
+      margin: 0;
+      word-break: break-word;
+    }
+    .table-field,
+    .table-field-right-aligned {
+      width: 50%;
+    }
+    &.usage-table {
+      .table-field,
+      .table-field-left-aligned,
+      .table-field-right-aligned {
+        width: auto;
+      }
+    }
+  }
+
+  .job-status-table {
+    table-layout: fixed;
+
+    thead tr th {
+      border-bottom: 0;
+    }
+
+    thead,
+    tbody,
+    tr {
+      width: 100%;
+    }
+
+    th:first-child,
+    td:first-child {
+      width: 75%;
+    }
+
+    th:nth-child(2),
+    R td:nth-child(2) {
+      width: 25%;
+    }
+  }
+
+  .usage-table {
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .big-number-smallest {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .job-table {
+    width: 100%;
+    border-collapse: collapse;
+    td.file-name {
+      width: 25%;
+      overflow-wrap: anywhere;
+    }
+    td.jobid {
+      width: 5%;
+    }
+    td.template {
+      width: 25%;
+    }
+    td.time-sent {
+      width: 15%;
+    }
+    td.sender {
+      width: 20%;
+      overflow-wrap: break-word;
+    }
+    td.count-of-recipients {
+      width: 5%;
+    }
+    td.report {
+      width: 2%;
+      text-align: center;
+    }
+    td.delivered {
+      width: 2%;
+      text-align: center;
+    }
+    td.failed {
+      width: 2%;
+      text-align: center;
+    }
+    td.report img {
+      padding-top: 5px;
+    }
+    th {
+      padding: 0.5rem 1rem;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .usa-table-container--scrollable-mobile {
+      margin: 0;
+      overflow-y: hidden;
+    }
+  }
+
+  .usa-table th[data-sortable][aria-sort='ascending'],
+  .usa-table th[data-sortable][aria-sort='descending'] {
+    background-color: #a1d3ff;
+  }
+
+  #template-list {
+    max-height: 500px;
+    overflow-y: auto;
+    padding: units(1) 0 units(1) units(1);
+    margin: units(2) 0 units(5);
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+  }
+
+  .usa-prose > p.max-width-full {
+    max-width: 100%;
+  }

app/assets/sass/uswds/_do-dont.scss

@@ -0,0 +1,81 @@
+@use 'uswds-core' as *;
+
+$do-dont-color-do: 'green-cool-50v';
+$do-dont-color-dont: 'red-cool-50v';
+$do-dont-color-border: 'gray-cool-20';
+$do-dont-padding: 3;
+$do-dont-top-bar-width: 1;
+
+.do-dont {
+  display: flex;
+  height: 100%;
+  padding-top: units(2);
+}
+
+.do-dont__do,
+.do-dont__dont {
+  background-color: color('white');
+  border: 1px solid color($do-dont-color-border);
+  flex: 1 0 0;
+  height: 100%;
+  position: relative;
+}
+
+.do-dont__do {
+  padding: 0rem;
+}
+
+.do-dont__do:before,
+.do-dont__dont:before {
+  content: '';
+  position: absolute;
+  height: units($do-dont-top-bar-width);
+  width: calc(100% + 2px);
+  top: -1px;
+  left: -1px;
+}
+
+.do-dont__do:before {
+  background-color: color($do-dont-color-do);
+}
+
+.do-dont__dont:before {
+  background-color: color($do-dont-color-dont);
+}
+
+.do-dont__heading {
+  // @include typeset("lang", "lg", 2);
+  align-items: center;
+  border-bottom: 1px solid color($do-dont-color-border);
+  display: flex;
+  font-weight: fw('bold');
+  margin: 0;
+  padding: units(4) units($do-dont-padding) units($do-dont-padding);
+
+  .usa-icon {
+    @include u-square(3);
+    margin-right: units(0.5);
+  }
+}
+
+.do-dont__do .do-dont__heading {
+  color: color($do-dont-color-do);
+}
+
+.do-dont__dont .do-dont__heading {
+  color: color($do-dont-color-dont);
+}
+
+.do-dont__content {
+  padding: 0 units($do-dont-padding) units($do-dont-padding)
+    units($do-dont-padding);
+
+  ul {
+    margin-bottom: 0;
+    overflow-wrap: anywhere;
+  }
+
+  li + li {
+    margin-top: units(1);
+  }
+}

app/assets/sass/uswds/_home.scss

@@ -0,0 +1,62 @@
+@use "uswds-core" as *;
+@use "tokens" as vars;
+
+.usa-section--dark {
+    background-color: color('gray-90');
+    h1 {
+        font-family: family('sans');
+        font-size: units(7);
+        color: vars.$notify-light-blue;
+        @media (max-width: units('desktop')) {
+            font-size: units(5);
+        }
+    }
+}
+
+.usa-hero > .grid-container {
+    @media (max-width: units('desktop')) {
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+    }
+}
+
+.usa-section {
+    &__home {
+        h2 {
+            font-size: units(6);
+            line-height: 1.2;
+        }
+        p {
+            font-size: 20px;
+        }
+    }
+}
+
+.home-cards {
+    justify-content: space-between;
+    .usa-card__container {
+        align-items: center;
+        text-align: center;
+        overflow: hidden;
+        border: 0;
+        .img-container {
+            width: units('card');
+            height: units('card');
+            margin: units(3) 0;
+            border-radius: 50%;
+            background: color('gray-cool-10');
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+                width: units(10);
+                height: units(10);
+                filter: brightness(0) saturate(100%) invert(22%) sepia(98%) saturate(1829%) hue-rotate(187deg) brightness(88%) contrast(101%);
+            }
+        }
+        h3, p {
+            font-size: units(3);
+            line-height: 1.3;
+        }
+    }
+}

app/assets/sass/uswds/_tabs.scss

@@ -0,0 +1,35 @@
+@use "uswds-core" as *;
+
+// Tabs
+
+.tabs {
+    .pill {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        .pill-item__container {
+        border: 1px solid color('gray-cool-10');
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        font-size: units(2);
+        a {
+            padding: units(4);
+            .big-number-smaller {
+            font-size: units(5);
+            line-height: units(6);
+            }
+            .big-number-smallest {
+            font-size: units(3);
+            }
+            &:not(.pill-item--selected):hover {
+            background: color('blue-warm-70v');
+            }
+            &.pill-item--selected:hover {
+            color: color('blue-60v');
+            }
+        }
+        }
+    }
+}

app/assets/sass/uswds/_tokens.scss

@@ -0,0 +1,8 @@
+@use "uswds-core" as *;
+
+// Colors
+$notify-primary: color('blue-60v');
+$notify-secondary: color('red-warm-50v');
+$notify-light-blue: color('blue-40v');
+$notify-tertiary: color('gold-20v');
+$notify-text: color('ink');

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -1,25 +1,3 @@
-/*
-* * * * * ==============================
-* * * * * ==============================
-* * * * * ==============================
-* * * * * ==============================
-========================================
-========================================
-========================================
-----------------------------------------
-USWDS THEME CUSTOM STYLES
-----------------------------------------
-!! Copy this file to your project's
-   sass root. Don't edit the version
-   in node_modules.
-----------------------------------------
-Custom project SASS goes here.
-
-i.e.
-@include u-padding-right('05');
-----------------------------------------
-*/
-
 @use 'uswds-core' as *;
 
 iframe:focus,
@@ -56,7 +34,10 @@ button:not([disabled]):focus {
       }
     }
     @include at-media-max('desktop') {
-      padding: 0 units(2);
+      .usa-nav__secondary-links
+      {
+        padding-left: units(2);
+      }
       ul li {
         padding-bottom: units(1);
       }
@@ -160,9 +141,17 @@ td.table-empty-message {
   }
 }
 
-.usa-button img {
+.login-button {
-  margin-left: 0.5rem;
+  margin-right: 0;
-  height: 1rem;
+    img {
+    height: 1rem;
+  }
+  @media (max-width: units('desktop')) {
+    img {
+      height: 14px;
+    }
+    font-size: 14px;
+  }
 }
 
 .usa-button.login-button.login-button--primary,
@@ -365,227 +354,6 @@ td.table-empty-message {
   }
 }
 
-// Dashboard
-
-.dashboard {
-  .big-number-with-status {
-    .big-number-smaller {
-      display: flex;
-      flex-direction: column;
-      .big-number-number {
-        font-size: units(5);
-        line-height: units(5);
-      }
-      .big-number-label {
-        font-size: units(2.5);
-      }
-    }
-    .big-number-status {
-      background: color('green-cool-40v');
-      display: flex;
-      padding: units(1) units(2);
-      &--failing {
-        padding: 0;
-        a.usa-link {
-          color: white;
-          background: color('red-warm-50v');
-          padding: units(1) units(2);
-          margin: 0;
-          width: 100%;
-          &:hover {
-            background: color('red-warm-60v');
-          }
-        }
-      }
-    }
-  }
-  .usa-table {
-    width: 100%;
-    caption {
-      margin-bottom: 0;
-    }
-    .table-field-center-aligned {
-      text-align: center;
-    }
-    .template-statistics-table-template-name {
-      padding-left: units(4);
-      display: inline-block;
-      background-repeat: no-repeat;
-      background-image: url(../img/material-icons/description.svg);
-    }
-  }
-  .get-started {
-    border: 1px solid color('gray-90');
-    padding: units(2);
-    margin-bottom: units(4);
-  }
-}
-
-.dashboard-table {
-  table {
-    width: 100%;
-  }
-  .file-list-filename {
-    font-weight: bold;
-  }
-  .file-list-hint {
-    margin: 0;
-    word-break: break-word;
-  }
-  .table-field,
-  .table-field-right-aligned {
-    width: 50%;
-  }
-  &.usage-table {
-    .table-field,
-    .table-field-left-aligned,
-    .table-field-right-aligned {
-      width: auto;
-    }
-  }
-}
-
-.job-status-table {
-  table-layout: fixed;
-
-  thead tr th {
-    border-bottom: 0;
-  }
-
-  thead,
-  tbody,
-  tr {
-    width: 100%;
-  }
-
-  th:first-child,
-  td:first-child {
-    width: 75%;
-  }
-
-  th:nth-child(2),
-  R td:nth-child(2) {
-    width: 25%;
-  }
-}
-
-.usage-table {
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  .big-number-smallest {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.job-table {
-  width: 100%;
-  border-collapse: collapse;
-  td.file-name {
-    width: 25%;
-    overflow-wrap: anywhere;
-  }
-  td.jobid {
-    width: 5%;
-  }
-  td.template {
-    width: 25%;
-  }
-  td.time-sent {
-    width: 15%;
-  }
-  td.sender {
-    width: 20%;
-    overflow-wrap: break-word;
-  }
-  td.count-of-recipients {
-    width: 5%;
-  }
-  td.report {
-    width: 2%;
-    text-align: center;
-  }
-  td.delivered {
-    width: 2%;
-    text-align: center;
-  }
-  td.failed {
-    width: 2%;
-    text-align: center;
-  }
-  td.report img {
-    padding-top: 5px;
-  }
-  th {
-    padding: 0.5rem 1rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .usa-table-container--scrollable-mobile {
-    margin: 0;
-    overflow-y: hidden;
-  }
-}
-
-.usa-table th[data-sortable][aria-sort='ascending'],
-.usa-table th[data-sortable][aria-sort='descending'] {
-  background-color: #a1d3ff;
-}
-
-#template-list {
-  max-height: 500px;
-  overflow-y: auto;
-  padding: units(1) 0 units(1) units(1);
-  margin: units(2) 0 units(5);
-  ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-}
-
-.usa-prose > p.max-width-full {
-  max-width: 100%;
-}
-
-// Tabs
-
-.tabs {
-  .pill {
-    display: flex;
-    list-style: none;
-    padding: 0;
-    .pill-item__container {
-      border: 1px solid color('gray-cool-10');
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      text-align: center;
-      font-size: units(2);
-      a {
-        padding: units(4);
-        .big-number-smaller {
-          font-size: units(5);
-          line-height: units(6);
-        }
-        .big-number-smallest {
-          font-size: units(3);
-        }
-        &:not(.pill-item--selected):hover {
-          background: color('blue-warm-70v');
-        }
-        &.pill-item--selected:hover {
-          color: color('blue-60v');
-        }
-      }
-    }
-  }
-}
-
 // Etc
 
 .email-brand,
@@ -747,86 +515,6 @@ div.guides {
   height: 400px;
 }
 
-$do-dont-color-do: 'green-cool-50v';
-$do-dont-color-dont: 'red-cool-50v';
-$do-dont-color-border: 'gray-cool-20';
-$do-dont-padding: 3;
-$do-dont-top-bar-width: 1;
-
-.do-dont {
-  display: flex;
-  height: 100%;
-  padding-top: units(2);
-}
-
-.do-dont__do,
-.do-dont__dont {
-  background-color: color('white');
-  border: 1px solid color($do-dont-color-border);
-  flex: 1 0 0;
-  height: 100%;
-  position: relative;
-}
-
-.do-dont__do {
-  padding: 0rem;
-}
-
-.do-dont__do:before,
-.do-dont__dont:before {
-  content: '';
-  position: absolute;
-  height: units($do-dont-top-bar-width);
-  width: calc(100% + 2px);
-  top: -1px;
-  left: -1px;
-}
-
-.do-dont__do:before {
-  background-color: color($do-dont-color-do);
-}
-
-.do-dont__dont:before {
-  background-color: color($do-dont-color-dont);
-}
-
-.do-dont__heading {
-  // @include typeset("lang", "lg", 2);
-  align-items: center;
-  border-bottom: 1px solid color($do-dont-color-border);
-  display: flex;
-  font-weight: fw('bold');
-  margin: 0;
-  padding: units(4) units($do-dont-padding) units($do-dont-padding);
-
-  .usa-icon {
-    @include u-square(3);
-    margin-right: units(0.5);
-  }
-}
-
-.do-dont__do .do-dont__heading {
-  color: color($do-dont-color-do);
-}
-
-.do-dont__dont .do-dont__heading {
-  color: color($do-dont-color-dont);
-}
-
-.do-dont__content {
-  padding: 0 units($do-dont-padding) units($do-dont-padding)
-    units($do-dont-padding);
-
-  ul {
-    margin-bottom: 0;
-    overflow-wrap: anywhere;
-  }
-
-  li + li {
-    margin-top: units(1);
-  }
-}
-
 .site-note {
   background-color: #dfe1e2;
   max-width: 72ex;
@@ -971,32 +659,6 @@ nav.nav {
   }
 }
 
-.home-cards {
-  justify-content: space-between;
-  .usa-card__container {
-    align-items: center;
-    text-align: center;
-    border-radius: 4px;
-    overflow: hidden;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    img {
-      margin: units(4) auto 0;
-      width: units(15);
-      height: units(15);
-    }
-    .usa-card__body {
-      margin-bottom: units(2);
-    }
-    .blue-bar {
-      background-color: #005eb8;
-      height: 1.3em;
-      width: 100%;
-      margin: 0;
-      border-radius: 0;
-    }
-  }
-}
-
 
 .contact-us-card {
   border: 2px solid color("ink");

app/assets/sass/uswds/styles.scss

@@ -1,5 +1,10 @@
 @forward "uswds-theme";
 @forward "uswds";
 @forward "uswds-theme-custom-styles";
+@use "tokens" as vars;
 @forward "legacy-styles";
+@forward "home";
+@forward "dashboard";
+@forward "tabs";
+@forward "do-dont";
 @forward "data-visualization";

app/assets/stylesheets/main.scss

@@ -1,90 +0,0 @@
-// Path to assets for use with file-url()
-$path: '/static/images/';
-
-// Dependencies from GOV.UK Frontend Toolkit
-// https://github.com/alphagov/govuk_frontend_toolkit/
-@import 'conditionals';
-@import 'shims';
-@import 'measurements';
-@import 'css3';
-@import 'colours';
-@import 'typography';
-@import 'grid_layout';
-@import 'helpers';
-
-// Dependencies from GOVU.UK Frontend Toolkit, rewritten for this application
-@import 'url-helpers';
-
-// Specific to this application, needs to go at the top of the cascade
-@import 'globals';
-
-// Dependencies from GOV.UK Elements
-// https://github.com/alphagov/govuk_elements
-@import 'elements/helpers';
-@import 'elements/reset';
-@import 'elements/details';
-@import 'elements/elements-typography';
-@import 'elements/forms';
-@import 'elements/forms/form-multiple-choice';
-@import 'elements/forms/form-validation';
-@import 'elements/lists';
-@import 'elements/panels';
-@import 'elements/tables';
-
-// Dependencies from GOV.UK Frontend, packaged to be specific to this application
-@import './govuk-frontend/all';
-
-// Custom overrides
-.govuk-link {
-    font-weight: bold;
-}
-
-// Specific to this application
-@import 'local/typography';
-@import 'grids';
-@import 'components/site-footer';
-@import 'components/placeholder';
-@import 'components/sms-message';
-@import 'components/page-footer';
-@import 'components/table';
-@import 'components/navigation';
-@import 'components/big-number';
-@import 'components/banner';
-@import 'components/textbox';
-@import 'components/file-upload';
-@import 'components/browse-list';
-@import 'components/email-message';
-@import 'components/copy-to-clipboard';
-@import 'components/vendor/previous-next-navigation';
-@import 'components/radios';
-@import 'components/checkboxes';
-@import 'components/pill';
-@import 'components/show-more';
-@import 'components/message';
-@import 'components/research-mode';
-@import 'components/tick-cross';
-@import 'components/list-entry';
-@import 'components/live-search';
-@import 'components/stick-at-top-when-scrolling';
-@import 'components/fullscreen-table';
-@import 'components/conditional-radios';
-@import 'components/vendor/breadcrumbs';
-@import 'components/vendor/responsive-embed';
-@import 'components/preview-pane';
-@import 'components/task-list';
-@import 'components/loading-indicator';
-@import 'components/area-list';
-@import 'components/content-metadata';
-
-@import 'views/dashboard';
-@import 'views/users';
-@import 'views/api';
-@import 'views/product-page';
-@import 'views/template';
-@import 'views/notification';
-@import 'views/send';
-@import 'views/get_started';
-@import 'views/history';
-
-// TODO: break this up
-@import 'app';

app/templates/components/header.html

@@ -39,12 +39,6 @@
 ] %}
 {% endif %}
 
-
-
-
-
-
-
 <header class="usa-header usa-header--extended">
   <div class="usa-nav-container">
     <div class="usa-navbar">
@@ -53,7 +47,7 @@
           <div class="logo-img display-flex">
             <a href="/">
               <span class="usa-sr-only">Notify.gov logo</span>
-              <img src="{{ (asset_path | default('/static')) + 'images/notify-logo.svg' }}" alt="Notify.gov logo"
+              <img src="{{ (asset_path | default('/static')) + 'images/notify-logo.svg' }}" alt=""
                 class="usa-flag-logo margin-right-1">
             </a>
           </div>
@@ -61,14 +55,6 @@
           <button type="button" class="usa-menu-btn">Menu</button>
           {% endif %}
         </div>
-        {% if not current_user.is_authenticated and is_information_section%}
-        <div class="usa-nav__login">
-          <a class="usa-button usa-button login-button login-button--primary margin-right-2"
-            href="{{ initial_signin_url }}">Sign
-            in with <img src="{{ asset_url('images/logo-login.svg') }}" alt="Login.gov logo">
-          </a>
-        </div>
-        {% endif %}
       </div>
 
     </div>
@@ -89,7 +75,11 @@
           {% endif %}
           {% endfor %}
         </ul>
+        {% if not current_user.is_authenticated %}
+        <div class="usa-nav__secondary margin-bottom-2">
+        {% else %}
         <div class="usa-nav__secondary margin-bottom-6">
+        {% endif %}
           <ul class="usa-nav__secondary-links">
             {% if secondaryNavigation %}
             {% for item in secondaryNavigation %}
@@ -104,8 +94,18 @@
             {% endfor %}
             {% endif %}
           </ul>
+          {% if not current_user.is_authenticated %}
+          <div class="usa-nav__login display-flex flex-align-center">
+            <span class="margin-right-2 display-none desktop:display-block">
+              If you are an existing partner
+            </span>
+            <a class="usa-button login-button login-button--primary desktop:padding-2 padding-1"
+              href="{{ initial_signin_url }}">Sign
+              in with <img src="{{ asset_url('images/logo-login.svg') }}" alt="Login.gov logo">
+            </a>
+          </div>
+          {% endif %}
         </div>
-
       </div>
     </nav>
   </div>

app/templates/views/signedout.html

@@ -9,70 +9,63 @@ import usaButton %} {% block meta %}
 
 <main id="main-content" role="main">
   {% block content %}
-  <section class="usa-section--dark usa-hero" aria-label="Introduction">
+  <section class="usa-section--dark usa-hero padding-y-2" aria-label="Introduction">
     <div class="grid-container padding-y-4">
       <div class="grid-row grid-gap display-flex flex-align-center">
         <div class="desktop:grid-col-8 tablet:grid-col-12">
-          <h1 class="font-sans-2xl usa-hero__heading">
+          <h1 class="usa-hero__heading">
             Reach people where they are with government-powered text messages
           </h1>
-          <p class="font-sans-lg">
+          <p class="desktop:font-sans-lg font-sans-md">
             Notify.gov is a text messaging service that helps federal, state,
             local, tribal and territorial governments more effectively
             communicate with the people they serve.
           </p>
-          <div class="usa-button-group margin-bottom-5 flex-align-center">
-            <a
-              class="usa-button usa-button login-button login-button--primary margin-right-2"
-              href="{{ initial_signin_url }}"
-              >Sign in with
-              <img
-                src="{{ asset_url('images/logo-login.svg') }}"
-                alt="Login.gov logo"
-              />
-            </a>
-            if you are an existing partner
-          </div>
         </div>
         <div
-          class="desktop:grid-col-3 grid-offset-1 desktop:display-block display-none margin-x-5"
+          class="desktop:grid-col-4 desktop:display-block display-none"
         >
           <img
-            src="{{ asset_url('images/product/phone-text.png') }}"
+            src="{{ asset_url('images/product/hero-icons.svg') }}"
-            alt="Illustration of a mobile phone displaying a text message and number on its screen, with a speech bubble coming out from outside the phone, symbolizing communication or notification."
+            alt=""
           />
         </div>
       </div>
     </div>
   </section>
-  <section
+  <section class="grid-container usa-section usa-section__home border-top border-base-lighter usa-prose padding-bottom-4">
-    class="grid-container usa-section usa-section__home border-top border-base-lighter usa-prose padding-bottom-1"
+    <div class="grid-row flex-align-center flex-justify-center">
-  >
+      <div class="tablet:grid-col-4 mobile-lg:grid-col-12">
-    <h2 class="font-body-xl margin-top-0 margin-bottom-3">
+        <img src="{{ asset_url('images/product/people-with-phone.png') }}" alt="A couple smiling and looking at a cell phone together"/>
-      Government texting made easy
+      </div>
-    </h2>
+      <div class="tablet:grid-col-6 tablet:margin-left-6 mobile-lg:grid-col-12">
-    <p class="usa-body">
+        <h2 class="font-body-xl margin-top-0 margin-bottom-3">
-      Notify.gov is a text messaging platform built for government agencies.
+          Government texting made easy
-      With minimal set-up and secure, personalized messaging, you can make
+        </h2>
-      one-way texting a part of your outreach program.
+        <p class="usa-body margin-bottom-5">
-    </p>
+          Notify.gov is a text messaging platform built for government agencies.
+          With minimal set-up and secure, personalized messaging, you can make
+          one-way texting a part of your outreach program.
+        </p>
+        <a class="usa-button usa-button--big" href="/about">Learn more about Notify.gov</a>
+      </div>
+    </div>
   </section>
 
-  <section
+  <section class="grid-container usa-section usa-section__home usa-prose padding-bottom-4">
-    class="grid-container usa-section usa-section__home usa-prose padding-bottom-1"
+    <h2 class="text-center margin-top-0">Key features</h2>
-  >
-    <h2 class="font-sans-xl margin-top-0">Key features</h2>
     <div class="home-cards margin-top-5">
       <ul class="usa-card-group display-flex margin-bottom-4">
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
-            <div class="blue-bar"></div>
+            <div class="img-container">
-            <img
+              <img
-              src="{{ asset_url('images/internet.svg') }}"
+                src="{{ asset_url('images/internet.svg') }}"
-              alt="Globe on top of a web browser"
+                alt=""
-            />
+              />
-            <div class="usa-card__header">
+            </div>
-              <h3 class="font-heading-md">Web-based</h3>
+            <div class="usa-card__header padding-bottom-0">
+              <h3>Web-based</h3>
             </div>
             <div class="usa-card__body">
               <p>Nothing to download or install</p>
@@ -81,13 +74,14 @@ import usaButton %} {% block meta %}
         </li>
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
-            <div class="blue-bar"></div>
+            <div class="img-container">
-            <img
+              <img
-              src="{{ asset_url('images/fast.svg') }}"
+                src="{{ asset_url('images/fast.svg') }}"
-              alt="Stopwatch with a notification speech bubble with a star inside"
+                alt=""
-            />
+              />
-            <div class="usa-card__header">
+            </div>
-              <h3 class="font-heading-md">Fast and easy</h3>
+            <div class="usa-card__header padding-bottom-0">
+              <h3>Fast and easy</h3>
             </div>
             <div class="usa-card__body">
               <p>No technical expertise required</p>
@@ -96,13 +90,14 @@ import usaButton %} {% block meta %}
         </li>
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
-            <div class="blue-bar"></div>
+            <div class="img-container">
-            <img
+              <img
-              src="{{ asset_url('images/status.svg') }}"
+                src="{{ asset_url('images/status.svg') }}"
-              alt="3 status messages, 2 successes and one failure"
+                alt=""
-            />
+              />
-            <div class="usa-card__header">
+            </div>
-              <h3 class="font-heading-md">Track message delivery</h3>
+            <div class="usa-card__header padding-bottom-0">
+              <h3>Track message delivery</h3>
             </div>
             <div class="usa-card__body">
               <p>See which messages were received</p>
@@ -113,15 +108,14 @@ import usaButton %} {% block meta %}
       <ul class="usa-card-group">
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
-            <div class="blue-bar"></div>
+            <div class="img-container">
-            <img
+              <img
-              src="{{ asset_url('images/translation.svg') }}"
+                src="{{ asset_url('images/translation.svg') }}"
-              alt="Speech bubbles with the letter A and the Chinese character for language"
+                alt=""
-            />
+              />
-            <div class="usa-card__header">
+            </div>
-              <h3 class="font-heading-md">
+            <div class="usa-card__header padding-bottom-0">
-                Send in recipients' preferred language
+              <h3>Send in recipients' preferred language</h3>
-              </h3>
             </div>
             <div class="usa-card__body">
               <p>Notify.gov has support for more than 30 character sets</p>
@@ -130,13 +124,14 @@ import usaButton %} {% block meta %}
         </li>
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
-            <div class="blue-bar"></div>
+            <div class="img-container">
-            <img
+              <img
-              src="{{ asset_url('images/security.svg') }}"
+                src="{{ asset_url('images/security.svg') }}"
-              alt="Lock with code icon inside on top of a web browser"
+                alt=""
-            />
+              />
+            </div>
             <div class="usa-card__header">
-              <h3 class="font-heading-md">Security and privacy</h3>
+              <h3 class="padding-bottom-0">Security and privacy</h3>
             </div>
             <div class="usa-card__body">
               <p>
@@ -148,13 +143,14 @@ import usaButton %} {% block meta %}
         </li>
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
-            <div class="blue-bar"></div>
+            <div class="img-container">
-            <img
+              <img
-              src="{{ asset_url('images/send.svg') }}"
+                src="{{ asset_url('images/send.svg') }}"
-              alt="Paper airplane and a notification icon with the number 1 inside"
+                alt=""
-            />
+              />
+            </div>
             <div class="usa-card__header">
-              <h3 class="font-heading-md">
+              <h3 class="padding-bottom-0">
                 Send bulk, customized, one-way messages
               </h3>
             </div>
@@ -170,51 +166,29 @@ import usaButton %} {% block meta %}
     </div>
   </section>
 
-  <section
+  <section class="grid-container usa-section usa-section__home usa-prose grid-container margin-bottom-15">
-    class="grid-container usa-section usa-section__home usa-prose grid-container padding-bottom-10"
+    <div class="grid-row flex-align-center flex-justify-center">
-  >
+      <div class="tablet:grid-col-6 mobile-lg:grid-col-12 margin-right-6 margin-bottom-6">
-    <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
+        <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
-      Who can use Notify.gov?
+          Who can use Notify.gov?
-    </h2>
+        </h2>
-    <p class="usa-body">
+        <p class="usa-body">
-      All <span class="text-bold">federal</span> agencies and programs are
+          All <span class="text-bold">federal</span> agencies and programs are
-      eligible to use Notify.gov.
+          eligible to use Notify.gov.
-    </p>
+        </p>
-    <p class="usa-body">
+        <p class="usa-body margin-bottom-5">
-      US
+          US
-      <span class="text-bold">state, local, territorial, or tribal</span>
+          <span class="text-bold">state, local, territorial, or tribal</span>
-      governments that administer or deliver federally-funded programs or
+          governments that administer or deliver federally-funded programs or
-      services may qualify to use Notify.gov to communicate with applicants and
+          services may qualify to use Notify.gov to communicate with applicants and
-      participants in these programs.
+          participants in these programs.
-    </p>
+        </p>
-    <div class="grid-container margin-top-4 padding-left-0 padding-right-0">
+        <a class="usa-button usa-button--big" href="/join-notify">Become a Notify.gov partner</a>
-      <div class="grid-row grid-gap-3">
+      </div>
-        <a
+      <div class="tablet:grid-col-4 mobile-lg:grid-col-12 display-flex flex-justify-center"">
-          class="text-no-underline tablet:grid-col-4 mobile-lg:grid-col-12"
+        <img src="{{ asset_url('images/product/who-can-use-notify.png') }}" alt="Woman smiling behind two computer screens"/>
-          href="mailto:tts-notify@gsa.gov"
-        >
-          <div class="contact-us-card">
-            <div class="grid-row flex-align-center grid-gap-2">
-              <div class="grid-col-auto">
-                <img
-                  src="{{ asset_url('images/contact.svg') }}"
-                  alt=""
-                  class="height-7 width-7"
-                />
-              </div>
-              <div class="grid-col">
-                <p class="margin-0">
-                  <strong>Contact us</strong><br />
-                  To learn more about becoming a partner!
-                </p>
-              </div>
-            </div>
-          </div>
-        </a>
       </div>
-    </div>
   </section>
-
   {% endblock %}
 </main>
 {% endblock %}

paas-failwhale/index.html

@@ -16,7 +16,7 @@
   <link rel="apple-touch-icon" sizes="180x180"
     href="/static_503/images/apple-touch-icon.png?a0f7e1b728a42016b247dc54ee40d055">
 
-  <link rel="stylesheet" media="screen" href="/static_503/stylesheets/main.css?d077f86473501ab244de0b30600536ee" />
+  <link rel="stylesheet" media="screen" href="/static_503/stylesheets/legacy/uk.css?d077f86473501ab244de0b30600536ee" />
   <link rel="stylesheet" media="print" href="/static_503/stylesheets/print.css?28010888ca5719dc83d7c2c80f6ed2b2" />
   <style>
     .govuk-header__container {