#590 - Adapt homepage redesign changes (#597)

* - Change content
- Edit the homepage images #521
- Remove account creation option
- Remove navigation
- Remove links to Notify docs in footer

* Updated alt text, jinja comment consistency for the footer

app/templates/components/uk_components/footer/template.njk

@@ -1,4 +1,4 @@
-<!-- <footer class="usa-footer usa-footer--big {{ params.classes if params.classes }}" role="contentinfo"
+{# <footer class="usa-footer usa-footer--big {{ params.classes if params.classes }}" role="contentinfo"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="grid-container usa-footer__return-to-top">
     <a href="#">Return to top</a>
@@ -57,18 +57,18 @@
       </div>
     </div>
   </div>
-</footer> -->
+</footer>  #}
 
 
 <footer class="usa-footer usa-footer--big">
-  <div class="grid-container usa-footer__return-to-top">
+  {# <div class="grid-container usa-footer__return-to-top">
     <a href="#">Return to top</a>
-  </div>
+  </div> #}
   <div class="usa-footer__primary-section">
     <div class="grid-container">
       <div class="grid-row">
         <div class="grid-col">
-          {% if params.navigation %}
+          {# {% if params.navigation %}
           <nav class="usa-footer__nav" aria-label="Footer navigation,,">
             <div class="grid-row grid-gap-2">
               {% for nav in params.navigation %}
@@ -95,11 +95,12 @@
               {% endfor %}
             </div>
           </nav>
-          {% endif %}
+          {% endif %} #}
         </div>
       </div>
       <div class="govuk-footer__meta border-top border-gray-10">
-        <div class="govuk-footer__meta-item govuk-footer__meta-item--grow padding-top-2">
+        <div class="govuk-footer__meta-item govuk-footer__meta-item--grow padding-top-1 margin-bottom-1">
+
           {% if params.meta %}
           <h2 class="usa-sr-only">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
           {% if params.meta.items %}
@@ -135,7 +136,7 @@
             height="48">
         </a></div>
       <section class="usa-identifier__identity" aria-label="Agency description">
-        <p class="usa-identifier__identity-domain">notify.gov</p>
+        <p class="usa-identifier__identity-domain">beta.notify.gov</p>
         <p class="usa-identifier__identity-disclaimer">An official website of the <a href="https://gsa.gov">General
             Services Administration</a></p>
       </section>

app/templates/components/uk_components/header/template.njk

@@ -71,7 +71,7 @@
     </div>
     <button type="button" class="usa-menu-btn">Menu</button>
   </div>
-  <nav aria-label="Primary navigation" class="usa-nav">
+  {# <nav aria-label="Primary navigation" class="usa-nav">
     <div class="usa-nav__inner">
       <button type="button" class="usa-nav__close">
         <img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
@@ -117,5 +117,5 @@
         </section> -->
       </div>
     </div>
-  </nav>
+  </nav> #}
 </header>

app/templates/views/signedout.html

@@ -15,17 +15,18 @@ U.S. Notify
 <section aria-label="Introduction">
   <div class="grid-container usa-section usa-section--dark padding-y-4">
     <div class="grid-row grid-gap display-flex flex-align-center">
-      <div class="tablet:grid-col-8">
-        <h1 class="font-serif-2xl usa-hero__heading">Send text messages to your users</h1>
-        <p class="font-sans-lg margin-bottom-5">Try U.S. Notify now if you work in federal, state, or local government.
-        </p>
-        <div class="usa-button-group">
-          <a class="usa-button usa-button--big" href="{{ url_for('main.register' )}}">Create an account</a>
-          or <a class="usa__link margin-x-1" href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
-          it before
+      <div class="tablet:grid-col-7">
+        <h1 class="font-serif-2xl usa-hero__heading">Send text messages to your participants</h1>
+        <p class="font-sans-lg">U.S. Notify is a text messaging service that helps federal, state, local, tribal, and territorial governments more
+        effectively communicate with their program participants.</p>
+        <p class="font-sans-lg margin-bottom-5">Currently we are only working with select partners during a pilot period.</p>
+        <div class="usa-button-group margin-bottom-5">
+          <a class="usa-button usa-button--big margin-right-2" href="{{ url_for('main.sign_in' )}}">Sign in</a>
+          if you are an existing pilot partner
         </div>
+        <p class="font-sans-md">If you are interested in using U.S. Notify in the future, please contact <br><a href="mailto:tts-benefits-studio@gsa.gov">tts-benefits-studio@gsa.gov</a> to learn more.</p>
       </div>
-      <div class="tablet:grid-col-3 margin-x-5">
+      <div class="tablet:grid-col-4 margin-x-5">
         <img src="{{ asset_url('images/product/phone-text.png') }}"
           alt="An illustration of notifications to a phone.">
       </div>
@@ -60,7 +61,21 @@ U.S. Notify
     </div>
   </div>
 </section>
-<section class="grid-container usa-section border-top border-base-lighter">
+<section class="grid-container usa-section">
+  <div class="grid-row grid-gap">
+    <div class="tablet:grid-col-5 usa-prose">
+      <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
+        No technical integration needed
+      </h2>
+      <p>Upload a spreadsheet of phone numbers and U.S. Notify sends batches of messages for you.</p>
+    </div>
+    <div class="tablet:grid-col-6 grid-offset-1">
+      <img src="{{ asset_url('images/product/03-spreadsheet-no-chrome.svg') }}"
+        alt="A screenshot of a spreadsheet with phone numbers, names, and a reference number">
+    </div>
+  </div>
+</section>
+<!-- <section class="grid-container usa-section border-top border-base-lighter">
   <div class="grid-row grid-gap">
     <h2 class="font-heading-xl margin-top-0 margin-bottom-3 bold">
       Send messages manually or automatically
@@ -81,18 +96,18 @@ U.S. Notify
         alt="A screenshot of some computer code with a notify.send_email function">
     </div>
   </div>
-</section>
-<section id="whos-using-notify"
+</section> -->
+<!-- <section id="whos-using-notify"
   class="grid-container usa-section border-top border-base-lighter padding-top-4 padding-bottom-5">
   <div class="grid-row grid-gap flex-column">
     <h2 class="font-heading-xl display-flex flex-justify-center margin-top-0 margin-bottom-3 bold">
       Who’s using U.S. Notify
     </h2>
-    <!-- <p class="display-flex flex-justify-center font-body-sm margin-bottom-3">
+    <p class="display-flex flex-justify-center font-body-sm margin-bottom-3">
       See the
       <a class="usa-link margin-left-05" href="{{ url_for('main.performance') }}">list of services and
         organizations</a>.
-    </p> -->
+    </p>
   </div>
   <div class="grid-row">
     <div class="tablet:grid-col-6 display-flex flex-justify-center flex-align-center flex-column">
@@ -107,19 +122,25 @@ U.S. Notify
       <span class="usa-sr-only">using Notify.</span>
     </div>
   </div>
-</section>
+</section> -->
 <section class="grid-container usa-section border-top border-base-lighter usa-prose">
   <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
-    The team
+    About the product
   </h2>
   <p class="usa-body">
-    U.S. Notify is built and maintained by the Public Benefits Studio, within the General Services Administration's
-    Technology Transformation Services.
+    Keeping program participants updated on status changes, due dates, and appointments can be a huge challenge, and many
+    recipients fall through the cracks, ultimately losing their benefits. In the benefits space, data shows that sending
+    text messages helps decrease re-enrollment churn and save money for administering agencies.
   </p>
   <p class="usa-body">
-    <a class="usa-link" href="{{ url_for('main.support') }}">Contact us</a> if you have a
-    question or want
-    to give feedback.
+    U.S. Notify is an easy text messaging platform that helps government agencies provide program participants with one-way
+    reminders and updates. With minimal set-up and secure, personalized messaging, U.S. Notify helps agencies include text
+    messaging as part of their outreach program. Administering agencies can quickly assess the impact of text messaging for
+    their programs, after which they can build a case to expand their texting program if they choose to.
+  </p>
+  <p class="usa-body">
+    U.S. Notify is a new shared service currently being piloted by the Public Benefits Studio, within Technology
+    Transformation Services at the General Services Administration.
   </p>
 </section>
 

tests/app/main/views/test_index.py

@@ -16,24 +16,25 @@ def test_non_logged_in_user_can_see_homepage(
     page = client_request.get('main.index', _test_page_title=False)
 
     assert page.h1.text.strip() == (
-        'Send text messages to your users'
+        'Send text messages to your participants'
     )
 
     assert page.select_one('a.usa-button.usa-button--big')['href'] == url_for(
-        'main.register'
+        'main.sign_in',
     )
 
     assert page.select_one('meta[name=description]')['content'].strip() == (
-        'U.S. Notify lets you send text messages '
-        'to your users. Try it now if you work in federal, state, or local government.'
+        'U.S. Notify lets you send text messages to your users. '
+        'Try it now if you work in federal, state, or local government.'
     )
 
-    assert normalize_spaces(page.select_one('#whos-using-notify').text) == (
-        'Who’s using U.S. Notify '  # Hiding this next area for the pilot
-        # Hiding this next area for the pilot
-        # 'See the list of services and organizations. '
-        'There are 111 Organizations and 9,999 Services using Notify.'
-    )
+    # This area is hidden for the pilot
+    # assert normalize_spaces(page.select_one('#whos-using-notify').text) == (
+    #     'Who’s using U.S. Notify '  # Hiding this next area for the pilot
+    #     # Hiding this next area for the pilot
+    #     # 'See the list of services and organizations. '
+    #     'There are 111 Organizations and 9,999 Services using Notify.'
+    # )
 
     assert page.select_one('#whos-using-notify a') is None
 

tests/app/test_navigation.py

@@ -379,20 +379,21 @@ def test_a_page_should_nave_selected_navigation_item(
     assert len(selected_nav_items) == 1
     assert selected_nav_items[0].text.strip() == selected_nav_item
 
+# Hiding nav for the pilot, will uncomment after
 
-@pytest.mark.parametrize('endpoint, selected_nav_item', [
-    # ('main.documentation', 'Documentation'),
-    ('main.support', 'Contact us'),
-])
-def test_a_page_should_nave_selected_header_navigation_item(
-    client_request,
-    endpoint,
-    selected_nav_item,
-):
-    page = client_request.get(endpoint, service_id=SERVICE_ONE_ID)
-    selected_nav_items = page.select('nav.usa-nav a.usa-nav__link.usa-current')
-    assert len(selected_nav_items) == 1
-    assert selected_nav_items[0].text.strip() == selected_nav_item
+# @pytest.mark.parametrize('endpoint, selected_nav_item', [
+#     # ('main.documentation', 'Documentation'),
+#     ('main.support', 'Contact us'),
+# ])
+# def test_a_page_should_nave_selected_header_navigation_item(
+#     client_request,
+#     endpoint,
+#     selected_nav_item,
+# ):
+# page = client_request.get(endpoint, service_id=SERVICE_ONE_ID)
+# selected_nav_items = page.select('nav.usa-nav a.usa-nav__link.usa-current')
+# assert len(selected_nav_items) == 1
+# assert selected_nav_items[0].text.strip() == selected_nav_item
 
 
 @pytest.mark.parametrize('endpoint, selected_nav_item', [