ugh

2227 - Adding Acceptable Use Policy page

.ds.baseline

@@ -133,7 +133,7 @@
         "filename": ".github/workflows/checks.yml",
         "hashed_secret": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
         "is_verified": false,
-        "line_number": 68,
+        "line_number": 71,
         "is_secret": false
       }
     ],
@@ -161,7 +161,7 @@
         "filename": "app/config.py",
         "hashed_secret": "577a4c667e4af8682ca431857214b3a920883efc",
         "is_verified": false,
-        "line_number": 118,
+        "line_number": 120,
         "is_secret": false
       }
     ],
@@ -425,7 +425,7 @@
         "filename": "deploy-config/sandbox.yml",
         "hashed_secret": "113151dd10316fcb0d5507b6215d78e2f3fe9e54",
         "is_verified": false,
-        "line_number": 8,
+        "line_number": 9,
         "is_secret": false
       }
     ],
@@ -555,7 +555,7 @@
         "filename": "tests/app/main/views/test_register.py",
         "hashed_secret": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
         "is_verified": false,
-        "line_number": 201,
+        "line_number": 199,
         "is_secret": false
       },
       {
@@ -563,7 +563,7 @@
         "filename": "tests/app/main/views/test_register.py",
         "hashed_secret": "bb5b7caa27d005d38039e3797c3ddb9bcd22c3c8",
         "is_verified": false,
-        "line_number": 274,
+        "line_number": 272,
         "is_secret": false
       }
     ],
@@ -684,5 +684,5 @@
       }
     ]
   },
-  "generated_at": "2024-10-07T20:44:40Z"
+  "generated_at": "2025-01-16T21:38:03Z"
 }

.github/actions/setup-project/action.yml

@@ -15,7 +15,7 @@ runs:
         python-version: "3.12.3"
     - name: Install poetry
       shell: bash
-      run: pip install poetry
+      run: pip install poetry==1.8.5
     - name: Install application dependencies
       shell: bash
       run: make bootstrap

.github/workflows/checks.yml

@@ -38,10 +38,13 @@ jobs:
           output: report-markdown
           annotations: failed-tests
           prnumber: ${{ steps.findPr.outputs.number }}
+      - name: Check imports alphabetized
+        run: poetry run isort ./app ./tests
+      - name: Check pep8
+        run: poetry run black ./app ./tests
       - name: Run style checks
         run: poetry run flake8 .
-      - name: Check imports alphabetized
-        run: poetry run isort --check-only ./app ./tests
+
       - name: Check dead code
         run: make dead-code
       - name: Run js tests
@@ -144,6 +147,7 @@ jobs:
           inputs: requirements.txt
           ignore-vulns: |
             PYSEC-2024-60
+            PYSEC-2022-43162
       - name: Run npm audit
         run: make npm-audit
 

.github/workflows/deploy-demo.yml

@@ -70,7 +70,7 @@ jobs:
           cf_password: ${{ secrets.CLOUDGOV_PASSWORD }}
           cf_org: gsa-tts-benefits-studio
           cf_space: notify-demo
-          push_arguments: >-
+          cf_command: >-
             push -f manifest.yml
             --vars-file deploy-config/demo.yml
             --var DANGEROUS_SALT="$DANGEROUS_SALT"

.github/workflows/deploy-prod.yml

@@ -70,7 +70,7 @@ jobs:
           cf_password: ${{ secrets.CLOUDGOV_PASSWORD }}
           cf_org: gsa-tts-benefits-studio
           cf_space: notify-production
-          push_arguments: >-
+          cf_command: >-
             push -f manifest.yml
             --vars-file deploy-config/production.yml
             --var DANGEROUS_SALT="$DANGEROUS_SALT"
@@ -107,5 +107,5 @@ jobs:
           CF_PASSWORD: ${{ secrets.CLOUDGOV_PASSWORD }}
         with:
           cf_org: gsa-tts-benefits-studio
-          cf_space: notify-prod
-          app: notify-admin-prod
+          cf_space: notify-production
+          app: notify-admin-production

.github/workflows/deploy.yml

@@ -69,7 +69,7 @@ jobs:
         LOGIN_DOT_GOV_LOGOUT_URL: "https://secure.login.gov/openid_connect/logout?client_id=urn:gov:gsa:openidconnect.profiles:sp:sso:gsa:notify-gov&post_logout_redirect_uri=https://notify-staging.app.cloud.gov/sign-out"
         LOGIN_DOT_GOV_BASE_LOGOUT_URL: "https://secure.login.gov/openid_connect/logout?"
         LOGIN_DOT_GOV_SIGNOUT_REDIRECT: "https://notify-staging.app.cloud.gov/sign-out"
-        LOGIN_DOT_GOV_INITIAL_SIGNIN_URL: "https://secure.login.gov/openid_connect/authorize?acr_values=http%3A%2F%2Fidmanagement.gov%2Fns%2Fassurance%2Fial%2F1&client_id=urn:gov:gsa:openidconnect.profiles:sp:sso:gsa:notify-gov&nonce=NONCE&prompt=select_account&redirect_uri=https://notify-staging.app.cloud.gov/sign-in&response_type=code&scope=openid+email&state=STATEE"
+        LOGIN_DOT_GOV_INITIAL_SIGNIN_URL: "https://secure.login.gov/openid_connect/authorize?acr_values=http%3A%2F%2Fidmanagement.gov%2Fns%2Fassurance%2Fial%2F1&client_id=urn:gov:gsa:openidconnect.profiles:sp:sso:gsa:notify-gov&nonce=NONCE&prompt=select_account&redirect_uri=https://notify-staging.app.cloud.gov/sign-in&response_type=code&scope=openid+email&state=STATE"
         LOGIN_DOT_GOV_CERTS_URL: "https://secure.login.gov/api/openid_connect/certs"
       with:
         cf_username: ${{ secrets.CLOUDGOV_USERNAME }}

.gitignore

@@ -14,6 +14,7 @@
 *.XLSX
 
 ## Non user files allowed to be commited
+!app/assets/pdf/tcpa_overview.pdf
 !tests/test_pdf_files/no_eof_marker.pdf
 !tests/test_pdf_files/multi_page_pdf.pdf
 !tests/test_pdf_files/big.pdf

Makefile

@@ -15,7 +15,6 @@ NVMSH := $(shell [ -f "$(HOME)/.nvm/nvm.sh" ] && echo "$(HOME)/.nvm/nvm.sh" || e
 
 .PHONY: bootstrap
 bootstrap: generate-version-file ## Set up everything to run the app
-	poetry self update
 	poetry self add poetry-dotenv-plugin
 	poetry lock --no-update
 	poetry install --sync --no-root

README.md

@@ -372,15 +372,9 @@ After you have completed all setup steps, you will be unable to log in, because
 will not be a user in the database to link to the login.gov account you are using. So
 you will need to create that user in your database using the 'create-test-user' command.
 
-Open two terminals pointing to the api project and then run these commands in the
-respective terminals.
+Open a terminal pointing to the api project and then run this command.
 
-(Server 1)
-env ALLOW_EXPIRED_API_TOKEN=1 make run-flask
-
-(Server 2)
-poetry run flask command create-admin-jwt | tail -n 1 | pbcopy
-poetry run flask command create-test-user --admin=True;
+```poetry run flask command create-test-user --admin=True```
 
 Supply your name, email address, mobile number, and password when prompted. Make sure the email address
 is the same one you are using in login.gov and make sure your phone number is in the format 5555555555.

app/.well-known/security.txt

@@ -0,0 +1,2 @@
+Contact: mailto:notify-support@gsa.gov
+Expires: 2035-10-15T23:59:59Z

app/__init__.py

@@ -1,8 +1,9 @@
 import os
 import pathlib
+import secrets
 from functools import partial
 from time import monotonic
-from urllib.parse import urlparse, urlunparse
+from urllib.parse import unquote, urlparse, urlunparse
 
 import jinja2
 from flask import (
@@ -114,6 +115,7 @@ from notifications_utils.formatters import (
     get_lines_with_normalised_whitespace,
 )
 from notifications_utils.recipients import format_phone_number_human_readable
+from notifications_utils.url_safe_token import generate_token
 
 login_manager = LoginManager()
 csrf = CSRFProtect()
@@ -139,6 +141,10 @@ def _csp(config):
     logo_domain = config["LOGO_CDN_DOMAIN"]
     return {
         "default-src": ["'self'", asset_domain],
+        "frame-src": [
+            "https://www.youtube.com",
+            "https://www.youtube-nocookie.com",
+        ],
         "frame-ancestors": "'none'",
         "form-action": "'self'",
         "script-src": [
@@ -162,6 +168,41 @@ def _csp(config):
 
 
 def create_app(application):
+    @application.context_processor
+    def inject_feature_flags():
+        feature_about_page_enabled = application.config.get(
+            "FEATURE_ABOUT_PAGE_ENABLED", False
+        )
+        return dict(
+            FEATURE_ABOUT_PAGE_ENABLED=feature_about_page_enabled,
+        )
+
+    @application.context_processor
+    def inject_initial_signin_url():
+        ttl = 24 * 60 * 60
+
+        # make and store the state
+        state = generate_token(
+            str(request.remote_addr),
+            current_app.config["SECRET_KEY"],
+            current_app.config["DANGEROUS_SALT"],
+        )
+
+        state_key = f"login-state-{unquote(state)}"
+        redis_client.set(state_key, state, ex=ttl)
+
+        # make and store the nonce
+        nonce = secrets.token_urlsafe()
+        nonce_key = f"login-nonce-{unquote(nonce)}"
+        redis_client.set(nonce_key, nonce, ex=ttl)
+
+        url = os.getenv("LOGIN_DOT_GOV_INITIAL_SIGNIN_URL")
+        if url is not None:
+            url = url.replace("NONCE", nonce)
+            url = url.replace("STATE", state)
+
+        return {"initial_signin_url": url}
+
     notify_environment = os.environ["NOTIFY_ENVIRONMENT"]
 
     application.config.from_object(configs[notify_environment])

app/assets/images/alert.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><g><path d="m377.64 347.666c-4.473 0-8.1 3.626-8.1 8.099s3.626 8.1 8.1 8.1c4.473 0 8.099-3.626 8.099-8.1s-3.626-8.099-8.099-8.099z"/><path d="m377.716 334.615c4.149 0 7.511-3.363 7.511-7.511v-67.172c0-4.148-3.362-7.511-7.511-7.511-4.148 0-7.511 3.363-7.511 7.511v67.172c0 4.148 3.362 7.511 7.511 7.511z"/><path d="m377.64 219.085c-7.974 0-15.716 1.011-23.105 2.912v-14.937c0-59.921-37.644-111.208-90.522-131.476 2.741-6.491 4.267-13.614 4.267-21.092 0-30.047-24.445-54.492-54.492-54.492s-54.491 24.445-54.491 54.491c0 7.469 1.522 14.586 4.256 21.071-16.063 6.135-30.994 15.219-44.006 26.957-3.081 2.778-3.325 7.528-.547 10.608 2.781 3.081 7.53 3.324 10.608.546 23.118-20.854 53.014-32.339 84.18-32.339 69.324 0 125.725 56.4 125.725 125.725v20.222c-32.217 14.573-54.688 47.021-54.688 84.618 0 11.997 2.288 23.47 6.45 34.005h-203.212v-138.845c0-24.475 7.036-48.196 20.346-68.599 2.267-3.474 1.288-8.128-2.187-10.394-3.474-2.266-8.129-1.288-10.394 2.186-14.907 22.851-22.787 49.41-22.787 76.807v143.829l-28.543 37.616c-1.903 2.506-2.952 5.62-2.952 8.768v27.183c0 7.996 6.505 14.501 14.501 14.501h94.92c-.468 3.102-.719 6.274-.719 9.504 0 35.036 28.504 63.541 63.541 63.541 35.036 0 63.541-28.504 63.541-63.541 0-3.232-.263-6.402-.735-9.504h29.487c4.149 0 7.511-3.363 7.511-7.511s-3.362-7.511-7.511-7.511h-249.514v-26.486l27.713-36.521h214.585c15.307 24.506 41.72 41.39 72.142 43.548v19.459h-29.946c-4.148 0-7.511 3.363-7.511 7.511s3.362 7.511 7.511 7.511h30.467c7.996 0 14.5-6.505 14.5-14.501v-20.125c47.261-4.255 84.425-44.082 84.425-92.431 0-51.178-41.636-92.814-92.814-92.814zm-127.992-148.137c-11.454-3.02-23.471-4.636-35.86-4.636-12.217 0-24.259 1.583-35.863 4.634-2.311-5.012-3.607-10.584-3.607-16.455 0-21.764 17.706-39.469 39.469-39.469s39.469 17.706 39.469 39.469c.002 5.873-1.295 11.445-3.608 16.457zm-83.427 368.007h95.144c.616 3.074.942 6.251.942 9.504 0 26.753-21.765 48.519-48.519 48.519s-48.519-21.766-48.519-48.519c.001-3.254.335-6.429.952-9.504zm211.419-49.263c-42.895 0-77.793-34.898-77.793-77.793s34.897-77.793 77.793-77.793 77.793 34.898 77.793 77.793c-.001 42.895-34.898 77.793-77.793 77.793z"/></g></g></g></svg>

app/assets/images/contact.svg

@@ -0,0 +1,17 @@
+<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6378_116)">
+<path d="M13.3517 3.77441H4.3344C3.40346 3.80666 3.40421 5.14865 4.3344 5.18053H13.3516C14.2826 5.14828 14.2819 3.80629 13.3517 3.77441Z" fill="black"/>
+<path d="M15.8219 10.6309H5.94759C4.67037 10.6309 3.63135 11.6699 3.63135 12.9471V13.9669C3.63135 15.2441 4.67037 16.2832 5.94759 16.2832H15.8219C17.0991 16.2832 18.1381 15.2441 18.1381 13.9669V12.9471C18.1381 11.67 17.0991 10.6309 15.8219 10.6309ZM16.732 13.9669C16.732 14.4688 16.3238 14.877 15.8219 14.877H5.94759C5.4457 14.877 5.03746 14.4688 5.03746 13.9669V12.9471C5.03746 12.4452 5.4457 12.037 5.94759 12.037H15.8219C16.3238 12.037 16.732 12.4452 16.732 12.9471V13.9669Z" fill="black"/>
+<path d="M10.2759 20.161V23.0556C10.2759 24.3328 11.3149 25.3718 12.5921 25.3718H22.4664C23.7436 25.3718 24.7826 24.3328 24.7826 23.0556V20.161C24.7826 18.8838 23.7436 17.8447 22.4664 17.8447H12.5921C11.3149 17.8446 10.2759 18.8838 10.2759 20.161ZM23.3765 20.161V23.0556C23.3765 23.5575 22.9683 23.9657 22.4664 23.9657H12.5921C12.0902 23.9657 11.682 23.5575 11.682 23.0556V20.161C11.682 19.6591 12.0902 19.2508 12.5921 19.2508H22.4664C22.9683 19.2507 23.3765 19.6591 23.3765 20.161Z" fill="black"/>
+<path d="M3.63135 32.1435C3.63135 33.4207 4.67037 34.4597 5.94759 34.4597H15.8219C17.0991 34.4597 18.1381 33.4207 18.1381 32.1435V29.2489C18.1381 27.9716 17.0991 26.9326 15.8219 26.9326H5.94759C4.67037 26.9326 3.63135 27.9716 3.63135 29.2489V32.1435ZM5.03746 29.2489C5.03746 28.747 5.4457 28.3387 5.94759 28.3387H15.8219C16.3238 28.3387 16.732 28.747 16.732 29.2489V32.1435C16.732 32.6454 16.3238 33.0536 15.8219 33.0536H5.94759C5.4457 33.0536 5.03746 32.6454 5.03746 32.1435V29.2489Z" fill="black"/>
+<path d="M38.1102 19.9331C33.5406 19.9331 29.6852 23.0494 28.5583 27.2682V3.4397C28.5583 1.81976 27.2404 0.501953 25.6205 0.501953H2.93784C1.3179 0.501953 0 1.81986 0 3.4397V20.0432C0 20.4314 0.314688 20.7462 0.703056 20.7462C1.09142 20.7462 1.40611 20.4314 1.40611 20.0432V8.45258H27.1521V28.8182C23.2126 29.346 20.0003 32.203 18.9507 35.9537H5.77819C4.52478 35.9537 3.50497 36.9735 3.50497 38.227C3.50497 39.4805 4.52478 40.5002 5.77819 40.5002H18.7678C18.9094 41.2299 19.1315 41.9311 19.4245 42.5943H2.93784C2.09323 42.5943 1.40611 41.9072 1.40611 41.0626V23.6671C1.40611 23.2788 1.09142 22.964 0.703056 22.964C0.314688 22.964 0 23.2788 0 23.6671V41.0626C0 42.6825 1.3179 44.0004 2.93784 44.0004H20.1877C22.6379 47.9355 28.1585 49.6822 32.5122 47.6362L34.4133 48.4393C34.9706 48.5729 35.2962 48.357 35.39 47.7917V45.6731C37.0359 44.0629 38.0518 41.9709 38.2985 39.6981C39.9145 39.6673 41.5059 39.2395 42.9126 38.4563C43.7068 38.0141 43.0228 36.7855 42.2286 37.2278C39.8606 38.5633 36.8283 38.6501 34.3934 37.4377C34.2107 37.3484 33.9984 37.3426 33.8112 37.4218L32.5984 37.9342V36.5738C32.5984 36.3771 32.516 36.1895 32.3712 36.0564C26.7203 30.87 30.4316 21.3351 38.1102 21.3392C45.1057 21.3061 49.1324 29.5318 44.8031 35.021C44.2444 35.738 45.3535 36.6024 45.9122 35.8853C50.961 29.4838 46.2654 19.8946 38.1102 19.9331ZM1.40611 7.04647V3.4397C1.40611 2.59509 2.09323 1.90807 2.93784 1.90807H25.6205C26.4651 1.90807 27.1522 2.59519 27.1522 3.4397V7.04647H1.40611ZM5.77819 39.0941C4.62902 39.0477 4.6277 37.4068 5.77819 37.3598H18.6662C18.5935 37.9316 18.5709 38.5182 18.5987 39.0941H5.77819ZM31.1924 36.8756V38.9945C31.2862 39.5598 31.6118 39.7757 32.169 39.6421L34.0701 38.839C34.9717 39.2439 35.9161 39.5072 36.8914 39.6264C36.6543 41.6316 35.7171 43.4683 34.211 44.8537C34.0663 44.9869 33.9839 45.1745 33.9839 45.3712V46.7316L32.7711 46.2192C32.5838 46.1401 32.3715 46.1458 32.1888 46.2351C26.6793 49.009 19.9179 44.7879 19.9931 38.6138C19.993 34.0203 23.6664 30.2683 28.2304 30.14C28.3143 32.6748 29.3798 35.0983 31.1924 36.8756Z" fill="black"/>
+<path d="M40.2727 27.1796C41.2036 27.1473 41.2028 25.8053 40.2727 25.7734H35.9479C35.017 25.8057 35.0177 27.1477 35.9479 27.1796H40.2727Z" fill="black"/>
+<path d="M42.9383 29.1133H33.2819C32.351 29.1455 32.3517 30.4875 33.2819 30.5194H42.9383C43.8692 30.4871 43.8685 29.1452 42.9383 29.1133Z" fill="black"/>
+<path d="M35.9479 32.4531C35.017 32.4854 35.0177 33.8274 35.9479 33.8592H40.2727C41.2036 33.827 41.2028 32.485 40.2727 32.4531H35.9479Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_6378_116">
+<rect width="48" height="48" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

app/assets/images/fast.svg

@@ -0,0 +1,22 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6311_9508)">
+<path d="M126.125 15.0417C127.161 15.0417 128 14.2022 128 13.1667V6.11825C128 2.74475 125.255 0 121.882 0H79.0155C75.6418 0 72.897 2.74475 72.897 6.11825V32.04C72.897 32.1707 72.8253 32.2905 72.71 32.3522L66.7345 35.552C65.5993 36.16 64.8943 37.3375 64.8943 38.625C64.8943 39.9125 65.5993 41.09 66.7345 41.698L72.71 44.8975C72.8255 44.9595 72.8973 45.079 72.8973 45.21V60.1317C72.8973 63.5055 75.642 66.25 79.0158 66.25H121.882C125.255 66.25 128 63.5052 128 60.1317V21.8333C128 20.7978 127.161 19.9583 126.125 19.9583C125.09 19.9583 124.25 20.7978 124.25 21.8333V60.1315C124.25 61.4375 123.188 62.4997 121.882 62.4997H79.0155C77.7095 62.4997 76.647 61.4373 76.647 60.1315V45.21C76.647 43.694 75.8168 42.3075 74.4803 41.5918L68.9398 38.625L74.4805 35.658C75.817 34.9422 76.6473 33.556 76.6473 32.04V6.11825C76.6473 4.81225 77.7098 3.75 79.0158 3.75H121.882C123.188 3.75 124.25 4.8125 124.25 6.11825V13.1665C124.25 14.2023 125.09 15.0417 126.125 15.0417Z" fill="black"/>
+<path d="M45 49.6535V46.1367C47.5645 45.614 49.5 43.3415 49.5 40.625C49.5 37.5233 46.9767 35 43.875 35H34.875C31.7733 35 29.25 37.5233 29.25 40.625C29.25 43.3415 31.1855 45.6142 33.75 46.1367V49.6535C14.6938 52.3915 0 68.8232 0 88.625C0 100.683 5.4325 111.92 14.9047 119.453C15.7153 120.098 16.8947 119.964 17.5392 119.153C18.184 118.342 18.0495 117.163 17.239 116.519C8.6665 109.701 3.75 99.5338 3.75 88.625C3.75 68.9813 19.7313 53 39.375 53C59.0187 53 75 68.9813 75 88.625C75 108.269 59.0187 124.25 39.375 124.25C34.1278 124.25 29.0715 123.131 24.3463 120.923C23.408 120.485 22.2922 120.89 21.8538 121.828C21.4153 122.766 21.8205 123.882 22.7588 124.32C27.9848 126.762 33.5752 128 39.375 128C61.0865 128 78.75 110.337 78.75 88.625C78.75 68.8232 64.0563 52.3915 45 49.6535ZM33 40.625C33 39.591 33.841 38.75 34.875 38.75H43.875C44.909 38.75 45.75 39.591 45.75 40.625C45.75 41.659 44.909 42.5 43.875 42.5H34.875C33.841 42.5 33 41.659 33 40.625ZM37.5 49.2957V46.25H41.25V49.2957C40.6285 49.2665 40.0037 49.25 39.375 49.25C38.7463 49.25 38.1215 49.2665 37.5 49.2957Z" fill="black"/>
+<path d="M71.25 88.625C71.25 71.049 56.951 56.75 39.375 56.75C21.799 56.75 7.5 71.049 7.5 88.625C7.5 106.201 21.799 120.5 39.375 120.5C56.951 120.5 71.25 106.201 71.25 88.625ZM11.25 88.625C11.25 73.1167 23.8667 60.5 39.375 60.5C54.8833 60.5 67.5 73.1167 67.5 88.625C67.5 104.133 54.8833 116.75 39.375 116.75C23.8667 116.75 11.25 104.133 11.25 88.625Z" fill="black"/>
+<path d="M114.771 35.4187C116.496 33.7365 117.106 31.268 116.361 28.9762C115.616 26.6845 113.672 25.0457 111.288 24.6992L108.759 24.3317C108.149 24.243 107.622 23.86 107.349 23.3072L106.219 21.0152C105.152 18.8542 102.993 17.5117 100.583 17.5117C98.1738 17.5117 96.0145 18.8542 94.9483 21.015L93.8175 23.3067C93.5448 23.8597 93.0175 24.243 92.4073 24.3317L89.879 24.6992C87.4945 25.0457 85.5508 26.6845 84.806 28.9762C84.0613 31.268 84.6705 33.7365 86.3958 35.4187L88.226 37.2032C88.6678 37.634 88.869 38.254 88.7648 38.862L88.3325 41.3825C87.9253 43.7575 88.8835 46.1122 90.8328 47.5285C91.9343 48.3287 93.2228 48.7352 94.52 48.7352C95.519 48.7352 96.523 48.4942 97.4508 48.0062L99.7123 46.817C100.258 46.5302 100.909 46.53 101.455 46.817L103.715 48.0055C105.848 49.1267 108.384 48.944 110.334 47.5277C112.284 46.1115 113.242 43.7562 112.834 41.381L112.402 38.862C112.298 38.254 112.5 37.634 112.941 37.2035L114.771 35.4187ZM112.153 32.7337L110.323 34.5182C108.998 35.8105 108.393 37.6715 108.706 39.4957L109.138 42.0147C109.305 42.9872 108.928 43.914 108.13 44.4937C107.332 45.0737 106.334 45.1457 105.46 44.6865L103.2 43.498C101.562 42.6365 99.6053 42.6367 97.9668 43.498L95.7053 44.6872C94.8323 45.1462 93.8348 45.0742 93.0368 44.4945C92.2388 43.9147 91.862 42.9885 92.0285 42.0162L92.4608 39.496C92.7738 37.6715 92.1693 35.8107 90.8438 34.5182L89.0135 32.7337C88.307 32.045 88.0673 31.0737 88.3723 30.1352C88.6773 29.197 89.442 28.5522 90.4183 28.4102L92.9465 28.0427C94.7785 27.7765 96.3613 26.6262 97.1803 24.9662L98.311 22.6745C98.7475 21.79 99.5968 21.262 100.583 21.262C101.57 21.262 102.419 21.79 102.855 22.6745L103.986 24.9665C104.805 26.6265 106.388 27.7765 108.22 28.0427L110.748 28.4102C111.725 28.5522 112.489 29.197 112.794 30.1352C113.099 31.0735 112.86 32.045 112.153 32.7337Z" fill="black"/>
+<path d="M39.375 69.328C40.4105 69.328 41.25 68.4885 41.25 67.453V66.625C41.25 65.5895 40.4105 64.75 39.375 64.75C38.3395 64.75 37.5 65.5895 37.5 66.625V67.453C37.5 68.4885 38.3395 69.328 39.375 69.328Z" fill="black"/>
+<path d="M41.25 110.625V109.797C41.25 108.761 40.4105 107.922 39.375 107.922C38.3395 107.922 37.5 108.761 37.5 109.797V110.625C37.5 111.66 38.3395 112.5 39.375 112.5C40.4105 112.5 41.25 111.66 41.25 110.625Z" fill="black"/>
+<path d="M55.6717 74.9795L56.2572 74.394C56.9895 73.6618 56.9895 72.4745 56.2572 71.7425C55.525 71.0103 54.3377 71.0103 53.6057 71.7425L53.0202 72.328C52.288 73.0603 52.2625 74.2738 53.0202 74.9795C53.802 75.708 55.0207 75.6248 55.6717 74.9795Z" fill="black"/>
+<path d="M23.0783 102.27L22.4928 102.855C21.7605 103.588 21.7605 104.775 22.4928 105.507C23.203 106.217 24.4155 106.236 25.1443 105.507L25.7298 104.921C26.462 104.189 26.462 103.002 25.7298 102.27C24.9978 101.538 23.8105 101.538 23.0783 102.27Z" fill="black"/>
+<path d="M60.5471 90.5H61.3751C62.4106 90.5 63.2501 89.6605 63.2501 88.625C63.2501 87.5895 62.4106 86.75 61.3751 86.75H60.5471C59.5116 86.75 58.6721 87.5895 58.6721 88.625C58.6721 89.6605 59.5116 90.5 60.5471 90.5Z" fill="black"/>
+<path d="M18.203 86.75H17.375C16.3395 86.75 15.5 87.5895 15.5 88.625C15.5 89.6605 16.3395 90.5 17.375 90.5H18.203C19.2385 90.5 20.078 89.6605 20.078 88.625C20.078 87.5895 19.2385 86.75 18.203 86.75Z" fill="black"/>
+<path d="M53.6054 105.507C54.3159 106.217 55.5276 106.236 56.2569 105.507C56.9891 104.775 56.9891 103.587 56.2569 102.855L55.6714 102.27C54.9391 101.538 53.7519 101.538 53.0199 102.27C52.2876 103.002 52.2876 104.189 53.0199 104.921L53.6054 105.507Z" fill="black"/>
+<path d="M25.1445 71.7425C24.4123 71.0103 23.225 71.0103 22.493 71.7425C21.7608 72.4748 21.7608 73.662 22.493 74.394C22.493 74.394 23.0778 74.9788 23.0785 74.9795C23.784 75.685 25.0075 75.702 25.73 74.9795C26.4623 74.2473 26.4623 73.06 25.73 72.328L25.1445 71.7425Z" fill="black"/>
+<path d="M42.5417 93.2714L49.2532 98.3992C49.593 98.6587 49.9932 98.7844 50.3902 98.7844C50.9545 98.7844 51.5125 98.5307 51.8815 98.0477C52.5102 97.2247 52.3527 96.0482 51.53 95.4194L44.7607 90.2474C44.9157 89.7337 45.0002 89.1892 45.0002 88.6254C45.0002 86.1809 43.4325 84.0969 41.2502 83.3229V74.9092C41.2502 73.8737 40.4107 73.0342 39.3752 73.0342C38.3397 73.0342 37.5002 73.8737 37.5002 74.9092V83.3229C35.318 84.0969 33.7502 86.1809 33.7502 88.6254C33.7502 91.7272 36.2735 94.2504 39.3752 94.2504C40.5487 94.2504 41.6392 93.8887 42.5417 93.2714ZM37.5 88.6254C37.5 87.5914 38.341 86.7504 39.375 86.7504C40.409 86.7504 41.25 87.5914 41.25 88.6254C41.25 89.6594 40.409 90.5004 39.375 90.5004C38.341 90.5004 37.5 89.6594 37.5 88.6254Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_6311_9508">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>

app/assets/images/internet.svg

@@ -0,0 +1,10 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M117.375 5.82422H27.1625C26.127 5.82422 25.2875 6.66347 25.2875 7.69922C25.2875 8.73497 26.127 9.57422 27.1625 9.57422H117.375C121.166 9.57422 124.25 12.6582 124.25 16.4492V29.1212H3.75V16.4492C3.75 12.6585 6.834 9.57422 10.625 9.57422H18.4125C19.448 9.57422 20.2875 8.73497 20.2875 7.69922C20.2875 6.66347 19.448 5.82422 18.4125 5.82422H10.625C4.76625 5.82422 0 10.5905 0 16.4492V107.668C0 113.527 4.76625 118.293 10.625 118.293H48.4953C53.1185 120.77 58.3983 122.176 64 122.176C69.6018 122.176 74.8815 120.77 79.5048 118.293H117.375C123.234 118.293 128 113.527 128 107.668V16.4492C128 10.5905 123.234 5.82422 117.375 5.82422ZM37.2557 77.5242H47.687C47.0868 80.5977 46.7183 83.9017 46.6203 87.3632H34.8717C35.0877 83.9435 35.8947 80.6245 37.2557 77.5242ZM73.674 116.778C76.1003 113.758 78.0847 109.612 79.4355 104.702H88.7452C85.26 110.259 79.956 114.565 73.674 116.778ZM73.3053 68.1122C74.1665 69.8347 74.909 71.7352 75.5245 73.774H65.875V60.3527C68.5888 61.2235 71.2215 63.945 73.3053 68.1122ZM76.4805 77.5242C77.1335 80.613 77.5238 83.9302 77.628 87.3632H65.875V77.5242H76.4805ZM77.6277 91.1132C77.5235 94.5462 77.1332 97.8635 76.4802 100.952H65.875V91.1132H77.6277ZM75.5242 104.702C74.9087 106.741 74.1663 108.642 73.305 110.364C71.2215 114.531 68.5887 117.253 65.8747 118.124V104.702H75.5242ZM62.125 100.952H51.5195C50.8665 97.8637 50.4763 94.5465 50.372 91.1135H62.125V100.952ZM62.125 104.702V118.124C59.4113 117.253 56.7785 114.531 54.6948 110.364C53.8335 108.642 53.0913 106.741 52.4757 104.702H62.125ZM90.733 100.952H80.313C80.9133 97.879 81.2818 94.575 81.3798 91.1135H93.128C92.9062 94.5922 92.0723 97.9077 90.733 100.952ZM81.3798 87.3632C81.2818 83.9015 80.9135 80.5977 80.313 77.5242H90.733C92.0725 80.569 92.9062 83.8842 93.128 87.3632H81.3798ZM79.4355 73.7742C78.0847 68.8642 76.1003 64.7182 73.674 61.6985C79.956 63.9117 85.26 68.2172 88.7452 73.7742H79.4355ZM62.125 60.353V73.7742H52.4757C53.0913 71.7355 53.8338 69.8347 54.6948 68.1125C56.7785 63.945 59.4113 61.2235 62.125 60.353ZM62.125 77.5242V87.3632H50.3722C50.4765 83.9302 50.8667 80.613 51.5197 77.5242H62.125ZM46.6203 91.1132C46.7183 94.575 47.0865 97.8787 47.687 100.952H37.267C35.9277 97.9075 35.0938 94.5922 34.872 91.1132H46.6203ZM48.5645 104.702C49.9152 109.612 51.8997 113.758 54.326 116.778C48.044 114.565 42.74 110.259 39.2547 104.702H48.5645ZM124.25 107.668C124.25 111.459 121.166 114.543 117.375 114.543H85.0622C92.3148 108.496 96.9375 99.397 96.9375 89.2382C96.9375 71.1897 82.282 56.3007 64 56.3007C56.5457 56.3007 49.2417 58.8607 43.4333 63.5095C42.6248 64.1565 42.494 65.3365 43.141 66.145C43.7878 66.9532 44.968 67.0847 45.7765 66.4372C48.3908 64.345 51.276 62.7467 54.347 61.6722C51.9113 64.694 49.9193 68.8497 48.5645 73.774H39.2405C39.506 73.35 39.783 72.932 40.0715 72.5197C40.6652 71.6712 40.4592 70.5022 39.6107 69.9085C38.7625 69.3142 37.5933 69.5202 36.9995 70.369C33.1152 75.917 31.0623 82.442 31.0623 89.2382C31.0623 99.397 35.6852 108.496 42.9375 114.543H10.625C6.834 114.543 3.75 111.459 3.75 107.668V48.4022H78.2968C79.3325 48.4022 80.1718 47.563 80.1718 46.5272C80.1718 45.4915 79.3325 44.6522 78.2968 44.6522H3.75V32.871H124.25V36.8865H104.122C102.787 36.8865 101.531 37.4065 100.587 38.3507L94.6523 44.2855C94.4157 44.5217 94.1017 44.652 93.768 44.652H87.2968C86.261 44.652 85.4218 45.4912 85.4218 46.527C85.4218 47.5627 86.261 48.402 87.2968 48.402H93.768C95.1032 48.402 96.3585 47.882 97.3037 46.9377L103.239 41.0027C103.475 40.7667 103.788 40.6365 104.122 40.6365H124.25V107.668Z" fill="black"/>
+<path d="M120.234 19.3476C120.234 16.1728 117.651 13.5898 114.477 13.5898C111.302 13.5898 108.719 16.1728 108.719 19.3476C108.719 22.5223 111.302 25.1053 114.477 25.1053C117.651 25.1053 120.234 22.5223 120.234 19.3476ZM112.469 19.3476C112.469 18.2403 113.369 17.3398 114.476 17.3398C115.583 17.3398 116.484 18.2406 116.484 19.3476C116.484 20.4546 115.583 21.3553 114.476 21.3553C113.369 21.3553 112.469 20.4546 112.469 19.3476Z" fill="black"/>
+<path d="M104.703 19.3476C104.703 16.1728 102.12 13.5898 98.9453 13.5898C95.7705 13.5898 93.1875 16.1726 93.1875 19.3476C93.1875 22.5226 95.7705 25.1053 98.9453 25.1053C102.12 25.1053 104.703 22.5223 104.703 19.3476ZM96.9375 19.3476C96.9375 18.2403 97.8383 17.3398 98.9453 17.3398C100.052 17.3398 100.953 18.2406 100.953 19.3476C100.953 20.4546 100.052 21.3553 98.9453 21.3553C97.8383 21.3553 96.9375 20.4546 96.9375 19.3476Z" fill="black"/>
+<path d="M89.172 19.3476C89.172 16.1728 86.589 13.5898 83.4142 13.5898C80.2395 13.5898 77.6565 16.1728 77.6565 19.3476C77.6565 22.5223 80.2395 25.1053 83.4142 25.1053C86.589 25.1053 89.172 22.5223 89.172 19.3476ZM81.4062 19.3476C81.4062 18.2403 82.307 17.3398 83.414 17.3398C84.521 17.3398 85.4217 18.2406 85.4217 19.3476C85.4217 20.4546 84.521 21.3553 83.414 21.3553C82.307 21.3553 81.4062 20.4546 81.4062 19.3476Z" fill="black"/>
+<path d="M7.76538 17.3398V21.3553C7.76538 23.4231 9.44763 25.1053 11.5154 25.1053H38.8279C40.8956 25.1053 42.5779 23.4231 42.5779 21.3553V17.3398C42.5779 15.2721 40.8956 13.5898 38.8279 13.5898H11.5154C9.44788 13.5898 7.76538 15.2721 7.76538 17.3398ZM38.8304 21.3556H11.5154V17.3398H38.8279L38.8304 21.3556Z" fill="black"/>
+<path d="M93.0546 38.7617C93.0546 37.726 92.2154 36.8867 91.1796 36.8867H25.1716C24.1361 36.8867 23.2966 37.726 23.2966 38.7617C23.2966 39.7975 24.1361 40.6367 25.1716 40.6367H91.1794C92.2151 40.6367 93.0546 39.7972 93.0546 38.7617Z" fill="black"/>
+<path d="M17.4062 40.6367C18.4418 40.6367 19.2812 39.7973 19.2812 38.7617C19.2812 37.7262 18.4418 36.8867 17.4062 36.8867C16.3707 36.8867 15.5312 37.7262 15.5312 38.7617C15.5312 39.7973 16.3707 40.6367 17.4062 40.6367Z" fill="black"/>
+<path d="M9.64038 40.6367C10.6759 40.6367 11.5154 39.7973 11.5154 38.7617C11.5154 37.7262 10.6759 36.8867 9.64038 36.8867C8.60485 36.8867 7.76538 37.7262 7.76538 38.7617C7.76538 39.7973 8.60485 40.6367 9.64038 40.6367Z" fill="black"/>
+</svg>

app/assets/images/phone_grey.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 563 670" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M553.831 334.751V335.974L555.03 335.731C555.104 335.716 555.181 335.708 555.262 335.708H557.846C558.483 335.708 559 336.224 559 336.862V418.708C559 419.345 558.483 419.862 557.846 419.862H555.262C555.181 419.862 555.104 419.853 555.03 419.838L553.831 419.595V420.818V955.446C553.831 970.12 547.528 991.015 535.312 1008.3C522.978 1025.76 503.794 1040.6 477.723 1040.6H82.2769C56.206 1040.6 37.022 1025.76 24.6885 1008.3C12.472 991.015 6.16923 970.12 6.16923 955.446V420.818V419.595L4.97026 419.838C4.89621 419.853 4.8188 419.862 4.73846 419.862H2.15385C1.51659 419.862 1 419.345 1 418.708V358.4C1 357.763 1.51659 357.246 2.15385 357.246H4.73846C4.8188 357.246 4.89621 357.254 4.97026 357.269L6.16923 357.513V356.289V347.588V346.364L4.97026 346.608C4.89621 346.623 4.8188 346.631 4.73846 346.631H2.15385C1.51659 346.631 1 346.114 1 345.477V285.169C1 284.532 1.51659 284.015 2.15385 284.015H4.73846C4.8188 284.015 4.89621 284.023 4.97026 284.038L6.16923 284.282V283.058V261.434V260.21L4.97026 260.454C4.89621 260.469 4.8188 260.477 4.73846 260.477H2.15385C1.51659 260.477 1 259.96 1 259.323V220.554C1 219.917 1.51659 219.4 2.15385 219.4H4.73846C4.8188 219.4 4.89624 219.408 4.97036 219.423L6.16923 219.666V218.443V86.1538C6.16923 71.4804 12.472 50.5848 24.6885 33.2974C37.022 15.8443 56.206 1 82.2769 1H477.723C503.794 1 522.978 15.8443 535.312 33.2974C547.528 50.5848 553.831 71.4804 553.831 86.1538V334.751ZM400.615 16.2308H399.615V17.2308V43.0769C399.615 49.6619 394.277 55 387.692 55H172.308C165.723 55 160.385 49.6619 160.385 43.0769V17.2308V16.2308H159.385H82.2769C62.6883 16.2308 47.6257 27.2304 37.1269 42.0872C26.5125 57.1076 21.4 74.9813 21.4 86.1538V955.446C21.4 966.619 26.5125 984.492 37.1269 999.513C47.6257 1014.37 62.6883 1025.37 82.2769 1025.37H477.723C497.312 1025.37 512.374 1014.37 522.873 999.513C533.487 984.492 538.6 966.619 538.6 955.446V86.1538C538.6 74.9813 533.488 57.1076 522.873 42.0872C512.374 27.2304 497.312 16.2308 477.723 16.2308H400.615Z" stroke="black" stroke-width="2"/>
+</svg>

app/assets/images/security.svg

@@ -0,0 +1,17 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6311_9575)">
+<path d="M13.1356 105.339H93.2878C94.3236 105.339 95.1628 104.5 95.1628 103.464C95.1628 102.428 94.3236 101.589 93.2878 101.589H13.1356C11.6753 101.589 10.4873 100.401 10.4873 98.9407V26.0474H44.2016C41.9081 29.6852 40.5788 33.9892 40.5788 38.5982V46.6989C37.1923 47.1732 34.5773 50.0874 34.5773 53.6027V86.9362C34.5773 90.7812 37.7053 93.9092 41.5503 93.9092H86.8113C90.6563 93.9092 93.7843 90.7812 93.7843 86.9362V53.6029C93.7843 50.0877 91.1693 47.1734 87.7826 46.6992V38.5984C87.7826 33.9892 86.4533 29.6854 84.1598 26.0477H119.138V98.9409C119.138 100.401 117.95 101.589 116.49 101.589H102.282C101.246 101.589 100.407 102.428 100.407 103.464C100.407 104.5 101.246 105.339 102.282 105.339H116.49C120.018 105.339 122.888 102.469 122.888 98.9409V14.1582C122.888 9.20744 118.86 5.17969 113.909 5.17969H38.9261C37.8903 5.17969 37.0511 6.01894 37.0511 7.05469C37.0511 8.09044 37.8903 8.92969 38.9261 8.92969H113.909C116.792 8.92969 119.138 11.2752 119.138 14.1582V22.2974H81.3611C81.3201 22.2974 81.2798 22.3009 81.2393 22.3034C76.9391 17.8034 70.8815 14.9962 64.1805 14.9962C57.4533 14.9962 51.3748 17.8257 47.0716 22.3564C46.9241 22.3192 10.4873 22.2972 10.4873 22.2972V14.1582C10.4873 11.2752 12.8328 8.92969 15.7158 8.92969H30.1583C31.1941 8.92969 32.0333 8.09044 32.0333 7.05469C32.0333 6.01894 31.1941 5.17969 30.1583 5.17969H15.7158C10.7651 5.17969 6.7373 9.20744 6.7373 14.1582V98.9409C6.7373 102.469 9.60755 105.339 13.1356 105.339ZM90.0343 53.6029V86.9364C90.0343 88.7134 88.5886 90.1594 86.8113 90.1594H41.5503C39.7733 90.1594 38.3273 88.7137 38.3273 86.9364V53.6029C38.3273 51.8259 39.7731 50.3799 41.5503 50.3799H86.8113C88.5886 50.3802 90.0343 51.8259 90.0343 53.6029ZM74.5733 46.6302H53.7881V38.5984C53.7881 32.8677 58.4501 28.2057 64.1805 28.2057C69.911 28.2057 74.5731 32.8677 74.5731 38.5984V46.6302H74.5733ZM64.1808 18.7464C75.1271 18.7464 84.0326 27.6519 84.0326 38.5982V46.6299H78.3233V38.5982C78.3233 30.7999 71.979 24.4554 64.1808 24.4554C56.3826 24.4554 50.0383 30.7999 50.0383 38.5982V46.6299H44.3291V38.5982C44.3288 27.6519 53.2346 18.7464 64.1808 18.7464Z" fill="black"/>
+<path d="M91.6201 17.4883C92.6558 17.4883 93.4951 16.649 93.4951 15.6133C93.4951 14.5775 92.6558 13.7383 91.6201 13.7383H89.5701C88.5343 13.7383 87.6951 14.5775 87.6951 15.6133C87.6951 16.649 88.5343 17.4883 89.5701 17.4883H91.6201Z" fill="black"/>
+<path d="M100.641 17.4883C101.676 17.4883 102.516 16.649 102.516 15.6133C102.516 14.5775 101.676 13.7383 100.641 13.7383H98.5906C97.5548 13.7383 96.7156 14.5775 96.7156 15.6133C96.7156 16.649 97.5548 17.4883 98.5906 17.4883H100.641Z" fill="black"/>
+<path d="M109.661 17.4883C110.697 17.4883 111.536 16.649 111.536 15.6133C111.536 14.5775 110.697 13.7383 109.661 13.7383H107.611C106.575 13.7383 105.736 14.5775 105.736 15.6133C105.736 16.649 106.575 17.4883 107.611 17.4883H109.661Z" fill="black"/>
+<path d="M126.125 113.899H105.969C105.146 110.921 102.414 108.728 99.1775 108.728C95.9412 108.728 93.2095 110.921 92.3863 113.899H35.6138C34.7905 110.921 32.0588 108.728 28.8228 108.728C25.5865 108.728 22.8547 110.921 22.0315 113.899H1.875C0.83925 113.899 0 114.738 0 115.774C0 116.81 0.83925 117.649 1.875 117.649H22.0315C22.8547 120.627 25.5865 122.82 28.8228 122.82C32.0588 122.82 34.7905 120.627 35.6138 117.649H92.3865C93.2097 120.627 95.9415 122.82 99.1777 122.82C102.414 122.82 105.146 120.627 105.969 117.649H126.125C127.161 117.649 128 116.81 128 115.774C128 114.738 127.161 113.899 126.125 113.899ZM28.8228 119.07C27.005 119.07 25.5263 117.591 25.5263 115.774C25.5263 113.956 27.005 112.477 28.8228 112.477C30.6402 112.477 32.119 113.956 32.119 115.774C32.119 117.591 30.6402 119.07 28.8228 119.07ZM99.1775 119.07C97.3597 119.07 95.881 117.591 95.881 115.774C95.881 113.956 97.3597 112.477 99.1775 112.477C100.995 112.477 102.474 113.956 102.474 115.774C102.474 117.591 100.995 119.07 99.1775 119.07Z" fill="black"/>
+<path d="M74.6482 63.1457C73.9162 62.4137 72.7289 62.4135 71.9967 63.146C71.2644 63.8782 71.2644 65.0655 71.9969 65.7975L76.4694 70.2697L71.9967 74.7422C71.2644 75.4747 71.2644 76.6617 71.9967 77.394C72.3629 77.76 72.8429 77.943 73.3227 77.943C73.8024 77.943 74.2824 77.76 74.6487 77.394L80.4469 71.5957C80.7984 71.244 80.9959 70.7672 80.9959 70.2697C80.9959 69.7722 80.7984 69.2957 80.4467 68.9437L74.6482 63.1457Z" fill="black"/>
+<path d="M51.8922 70.2697L56.3647 65.7974C57.0972 65.0652 57.0972 63.8779 56.365 63.1459C55.6327 62.4139 54.4455 62.4134 53.7135 63.1456L47.9152 68.9436C47.5635 69.2954 47.366 69.7722 47.366 70.2697C47.366 70.7672 47.5635 71.2436 47.915 71.5956L53.7132 77.3939C54.0795 77.7599 54.5595 77.9429 55.0392 77.9429C55.519 77.9429 55.999 77.7599 56.3652 77.3939C57.0975 76.6614 57.0975 75.4744 56.3652 74.7421L51.8922 70.2697Z" fill="black"/>
+<path d="M66.0639 62.6508C65.0587 62.4026 64.0422 63.0161 63.7937 64.0211L60.9274 75.6176C60.6792 76.6228 61.2927 77.6393 62.2977 77.8878C62.4487 77.9251 62.6002 77.9431 62.7492 77.9431C63.5912 77.9431 64.3569 77.3716 64.5679 76.5176L67.4342 64.9211C67.6824 63.9158 67.0689 62.8996 66.0639 62.6508Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_6311_9575">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>

app/assets/images/send.svg

@@ -0,0 +1,12 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6311_9539)">
+<path d="M107.26 81.0871C108.302 81.0871 109.145 80.2431 109.145 79.2021V61.7874C109.145 60.7464 108.302 59.9023 107.26 59.9023H103.538C102.497 59.9023 101.653 60.7464 101.653 61.7874C101.653 62.8285 102.497 63.6725 103.538 63.6725H105.375V79.2021C105.375 80.2431 106.219 81.0871 107.26 81.0871Z" fill="black"/>
+<path d="M105.03 95.3332C104.018 95.0871 102.999 95.7069 102.752 96.7186L97.7374 117.306C97.6188 117.793 97.2262 117.927 97.0625 117.963C96.8997 117.998 96.486 118.037 96.1776 117.642L59.5854 70.7809L122.95 13.8064L115.318 45.1362C115.072 46.1479 115.692 47.1676 116.703 47.4139C116.853 47.4503 117.003 47.4679 117.151 47.4679C118 47.4679 118.771 46.8901 118.981 46.0285L127.914 9.35889C128.13 8.46888 127.846 7.53061 127.173 6.91004C126.499 6.28972 125.541 6.08387 124.671 6.37267L34.2959 36.438C33.3079 36.7667 32.7735 37.8339 33.1023 38.8217C33.4308 39.8095 34.4985 40.3441 35.4858 40.0153L119.097 12.2011L56.5961 68.3984L5.56399 49.9696L27.7773 42.58C28.7653 42.2513 29.2997 41.1841 28.9709 40.1963C28.6424 39.2088 27.5755 38.6744 26.5874 39.0027L1.98209 47.1877C0.793983 47.5828 0.0163241 48.647 0.000238096 49.8989C-0.0153452 51.1506 0.735168 52.2342 1.91221 52.6592L37.0421 65.3453V98.9988C37.0421 100.55 37.8471 101.934 39.1953 102.701C39.8571 103.077 40.5798 103.265 41.3014 103.265C42.0504 103.265 42.7986 103.062 43.4772 102.659L51.7857 97.7167C52.6807 97.1843 52.9743 96.0276 52.4422 95.1328C51.9098 94.2378 50.7532 93.9442 49.8584 94.4763L41.5499 99.4185C41.3479 99.5386 41.1717 99.4871 41.0591 99.4233C40.9465 99.3592 40.8122 99.2335 40.8122 98.9988V66.7068L55.8657 72.1429L65.8687 84.9529L56.7635 90.3691C55.8685 90.9015 55.5749 92.0581 56.107 92.9529C56.4597 93.5456 57.0863 93.8746 57.729 93.8746C58.057 93.8746 58.3887 93.7891 58.6908 93.6094L68.2077 87.9484L93.2062 119.962C94.1045 121.113 95.4456 121.755 96.8595 121.755C97.1892 121.755 97.523 121.72 97.856 121.648C99.6162 121.27 100.974 119.948 101.401 118.198L106.416 97.6108C106.662 96.5994 106.042 95.5797 105.03 95.3332Z" fill="black"/>
+<path d="M126.484 72.7292C125.468 72.51 124.464 73.1573 124.244 74.1747C122.533 82.1121 115.391 87.873 107.26 87.873C97.6782 87.873 89.8825 80.0773 89.8825 70.495C89.8825 60.9128 97.6782 53.1171 107.26 53.1171C115.446 53.1171 122.599 58.9234 124.269 66.9232C124.482 67.9424 125.482 68.5969 126.5 68.3832C127.519 68.1703 128.173 67.1718 127.96 66.1526C125.927 56.4145 117.221 49.3467 107.261 49.3467C95.5995 49.3467 86.1125 58.8337 86.1125 70.4948C86.1125 82.1559 95.5995 91.6429 107.261 91.6429C112.123 91.6429 116.871 89.9511 120.63 86.8791C124.335 83.8517 126.927 79.6216 127.93 74.9685C128.149 73.9515 127.502 72.9484 126.484 72.7292Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_6311_9539">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>

app/assets/images/status.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><path d="m488.19 30.63h-48.55c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h48.551c4.857 0 8.81 3.952 8.81 8.811v39.835h-482.001v-39.836c0-4.858 3.952-8.811 8.81-8.811h380.83c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-380.83c-13.129.001-23.81 10.683-23.81 23.811v403.12c0 13.129 10.681 23.811 23.81 23.811h69c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-69c-4.857 0-8.81-3.952-8.81-8.811v-348.285h482v348.285c0 4.858-3.952 8.811-8.81 8.811h-360.38c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h360.38c13.129 0 23.81-10.682 23.81-23.811v-403.12c0-13.128-10.681-23.81-23.81-23.81z"/><path d="m185.41 134.28h-131.91c-7.444 0-13.5 6.056-13.5 13.5v66.13c0 7.444 6.056 13.5 13.5 13.5h405c7.444 0 13.5-6.056 13.5-13.5v-66.13c0-7.444-6.056-13.5-13.5-13.5h-238.09c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h236.59v63.13h-321.142v-63.13h49.552c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5zm-64.552 78.13h-65.858v-63.13h65.858z"/><path d="m67.935 188.478 11.756 9.094c1.321 1.021 2.937 1.567 4.589 1.567.329 0 .66-.021.989-.065 1.986-.265 3.783-1.312 4.992-2.909l18.666-24.671c2.499-3.304 1.847-8.007-1.456-10.507-3.304-2.499-8.006-1.847-10.507 1.456l-14.092 18.626-5.76-4.456c-3.275-2.533-7.985-1.934-10.521 1.344-2.534 3.275-1.933 7.985 1.344 10.521z"/><path d="m153.684 180.845c0 4.143 3.357 7.5 7.5 7.5h72.66c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-72.66c-4.143 0-7.5 3.357-7.5 7.5z"/><path d="m431.671 188.345c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-162.823c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5z"/><path d="m53.504 441.366h404.992c7.444 0 13.5-6.056 13.5-13.5v-66.132c0-7.444-6.056-13.5-13.5-13.5h-404.992c-7.444 0-13.5 6.056-13.5 13.5v66.132c0 7.445 6.056 13.5 13.5 13.5zm403.492-15h-321.138v-63.132h321.138zm-401.992-63.132h65.854v63.132h-65.854z"/><path d="m98.342 394.8 6.604-6.604c2.929-2.93 2.929-7.678 0-10.607-2.93-2.928-7.678-2.928-10.607 0l-6.604 6.604-6.604-6.604c-2.93-2.928-7.678-2.928-10.607 0-2.929 2.93-2.929 7.678 0 10.607l6.604 6.604-6.604 6.604c-2.929 2.93-2.929 7.678 0 10.607 1.465 1.464 3.385 2.196 5.304 2.196s3.839-.732 5.304-2.196l6.604-6.604 6.604 6.604c1.465 1.464 3.385 2.196 5.304 2.196s3.839-.732 5.304-2.196c2.929-2.93 2.929-7.678 0-10.607z"/><path d="m161.184 402.3h72.66c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-72.66c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5z"/><path d="m268.848 402.3h162.823c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-162.823c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5z"/><path d="m458.496 241.257h-404.992c-7.444 0-13.5 6.056-13.5 13.5v66.132c0 7.444 6.056 13.5 13.5 13.5h404.992c7.444 0 13.5-6.056 13.5-13.5v-66.132c0-7.445-6.056-13.5-13.5-13.5zm-403.492 15h65.854v63.132h-65.854zm401.992 63.132h-321.138v-63.132h321.138z"/><path d="m107.471 269.506c-3.304-2.499-8.006-1.847-10.507 1.456l-14.092 18.626-5.76-4.456c-3.275-2.534-7.985-1.933-10.521 1.344-2.534 3.276-1.933 7.986 1.344 10.521l11.756 9.094c1.321 1.021 2.937 1.567 4.589 1.567.329 0 .66-.021.989-.065 1.986-.265 3.783-1.312 4.992-2.909l18.666-24.671c2.499-3.304 1.846-8.007-1.456-10.507z"/><path d="m359.011 295.322h72.66c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-72.66c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5z"/><path d="m161.184 295.322h162.823c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-162.823c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5z"/><g><circle cx="42.069" cy="69.954" r="7.5"/><circle cx="76.192" cy="69.954" r="7.5"/><circle cx="110.31" cy="69.954" r="7.5"/></g></g><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>

app/assets/images/translation.svg

@@ -0,0 +1,12 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6311_9544)">
+<path d="M31.5182 96.3591C31.7232 97.3748 32.7129 98.0311 33.7269 97.8261C38.9609 96.7696 42.8322 94.7671 45.6829 92.5183C48.5337 94.7671 52.4049 96.7698 57.6389 97.8261C58.6529 98.0311 59.6429 97.3746 59.8477 96.3591C60.0524 95.3441 59.3957 94.3551 58.3807 94.1503C54.1179 93.2898 50.8949 91.7473 48.4574 89.9433C51.1487 87.0021 52.9734 83.4338 53.8114 79.8881H58.3314C59.3672 79.8881 60.2064 79.0486 60.2064 78.0131C60.2064 76.9776 59.3672 76.1381 58.3314 76.1381H47.5584V71.7363C47.5584 70.7008 46.7192 69.8613 45.6834 69.8613C44.6477 69.8613 43.8084 70.7008 43.8084 71.7363V76.1381H33.0344C31.9987 76.1381 31.1594 76.9776 31.1594 78.0131C31.1594 79.0486 31.9987 79.8881 33.0344 79.8881H37.5544C38.3907 83.4258 40.2092 86.9866 42.8907 89.9241C40.4537 91.7403 37.2347 93.2923 32.9852 94.1501C31.9699 94.3548 31.3132 95.3441 31.5182 96.3591ZM41.4162 79.8881H49.9329C49.3807 81.7618 48.1822 84.6693 45.6567 87.4271C43.1337 84.6718 41.9552 81.7671 41.4162 79.8881Z" fill="black"/>
+<path d="M82.3162 18.748C81.5372 18.748 80.839 19.23 80.5627 19.9585L71.3715 44.2103C71.0045 45.1785 71.492 46.261 72.4602 46.628C73.429 46.995 74.5112 46.5073 74.8782 45.5393L76.6965 40.7418C76.7585 40.748 76.8212 40.7513 76.885 40.7513H87.84C87.873 40.7513 87.905 40.748 87.9375 40.7463L89.754 45.539C90.1212 46.5075 91.2042 46.9945 92.172 46.6278C93.1402 46.2608 93.6277 45.1783 93.2607 44.21L84.0695 19.9583C83.7935 19.23 83.0955 18.748 82.3162 18.748ZM78.1142 37.0013L82.3162 25.9138L86.5182 37.0013H78.1142Z" fill="black"/>
+<path d="M11.7858 116.457H16.6226C18.1479 116.457 19.5237 117.42 20.0462 118.853L22.5182 125.628C23.0439 127.069 24.3747 128 25.9087 128C27.4427 128 28.7737 127.069 29.2997 125.628L31.7715 118.852C32.2943 117.42 33.67 116.457 35.195 116.457H53.6349C54.6707 116.457 55.5099 115.618 55.5099 114.582C55.5099 113.547 54.6707 112.707 53.6349 112.707H35.1953C32.1008 112.707 29.3092 114.66 28.2487 117.567L25.9092 123.98L23.5694 117.567C22.5089 114.66 19.7174 112.707 16.6229 112.707H11.7858C7.35481 112.707 3.75003 109.103 3.75003 104.672V62.0325C3.75003 57.6015 7.35481 53.9967 11.7858 53.9967H36.633V54.4249C36.633 60.9237 41.9201 66.2108 48.4189 66.2108H87.6172V104.672C87.6172 109.103 84.0122 112.708 79.5811 112.708H62.3852C61.3495 112.708 60.5102 113.547 60.5102 114.583C60.5102 115.618 61.3495 116.458 62.3852 116.458H79.5811C86.0799 116.458 91.3672 111.171 91.3672 104.672V66.2108H92.805C94.33 66.2108 95.706 67.1735 96.2285 68.606L98.7003 75.3813C99.2263 76.8226 100.558 77.7536 102.091 77.7536C103.626 77.7536 104.956 76.8221 105.482 75.3813L107.954 68.606C108.477 67.1735 109.852 66.2108 111.377 66.2108H116.214C122.713 66.2108 128 60.9237 128 54.4249V38.8768C128 37.8413 127.161 37.0018 126.125 37.0018C125.089 37.0018 124.25 37.8413 124.25 38.8768V54.4249C124.25 58.856 120.645 62.4607 116.214 62.4607H111.377C108.283 62.4607 105.491 64.4138 104.431 67.3205L102.091 73.7338L99.7515 67.3205C98.6908 64.4138 95.899 62.4607 92.805 62.4607C91.289 62.4607 50.0484 62.4607 48.4189 62.4607C43.9878 62.4607 40.3831 58.856 40.3831 54.4249C40.3831 52.6232 40.3831 14.9124 40.3831 11.7856C40.3831 7.35481 43.9878 3.75003 48.4186 3.75003H116.214C120.645 3.75003 124.25 7.35481 124.25 11.7858V30.1267C124.25 31.1622 125.089 32.0018 126.125 32.0018C127.161 32.0018 128 31.1622 128 30.1267V11.7858C128 5.28704 122.713 0 116.214 0H48.4186C41.9201 0 36.6328 5.28704 36.6328 11.7858V50.2466H11.7858C5.28729 50.2466 0 55.5337 0 62.0325V104.672C0 111.17 5.28729 116.457 11.7858 116.457Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_6311_9544">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>

app/assets/images/website.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><path d="m291.532 66.273c4.142 0 7.5-3.357 7.5-7.5v-.057c0-4.143-3.358-7.472-7.5-7.472s-7.5 3.386-7.5 7.528 3.358 7.501 7.5 7.501z"/><path d="m254.455 66.273c4.142 0 7.5-3.357 7.5-7.5v-.057c0-4.143-3.358-7.472-7.5-7.472s-7.5 3.386-7.5 7.528 3.358 7.501 7.5 7.501z"/><path d="m217.378 66.273c4.142 0 7.5-3.357 7.5-7.5v-.057c0-4.143-3.358-7.472-7.5-7.472s-7.5 3.386-7.5 7.528 3.358 7.501 7.5 7.501z"/><path d="m123.925 51.273-76.763-.057c-.002 0-.003 0-.005 0-4.14 0-7.497 3.354-7.5 7.494-.003 4.143 3.353 7.503 7.495 7.506l76.763.057h.005c4.14 0 7.497-3.354 7.5-7.494.002-4.142-3.353-7.503-7.495-7.506z"/><path d="m287.507 124.863h-111.062c-6.933 0-12.574 5.641-12.574 12.574v33.479c0 6.948 5.641 12.602 12.574 12.602h111.062c6.933 0 12.574-5.653 12.574-12.602v-33.479c0-6.933-5.641-12.574-12.574-12.574zm-2.426 43.655h-106.209v-28.654h106.209z"/><path d="m292.581 210.217h-121.209c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h121.209c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m189.882 245.736h-18.51c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h18.51c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m292.581 245.736h-62.05c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h62.05c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m444.802 450.744h-.255c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h.255c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m490.667 301.75h-59.114v-129.049c0-11.669-9.494-21.163-21.163-21.163h-71.7v-114.592c0-11.404-9.278-20.682-20.682-20.682h-297.327c-11.404.001-20.681 9.278-20.681 20.682v241.718c0 11.419 9.277 20.709 20.681 20.709h33.801v97.131c0 11.669 9.494 21.163 21.163 21.163h104.223l-8.866 29.646h-14.994c-13.342 0-24.196 10.867-24.196 24.226v11.707c0 6.887 5.603 12.489 12.489 12.489h197.434c6.887 0 12.489-5.603 12.489-12.489v-11.707c0-13.358-10.867-24.226-24.225-24.226h-14.991l-8.847-29.646h71.443v56.735c0 11.763 9.557 21.333 21.305 21.333h91.758c11.763 0 21.333-9.57 21.333-21.333v-151.346c0-11.748-9.57-21.306-21.333-21.306zm-475.667-23.086v-177.438h137.039c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-137.039v-49.28c0-3.133 2.548-5.682 5.681-5.682h297.327c3.133 0 5.682 2.549 5.682 5.682v49.279h-137.011c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h137.011v177.438c0 3.147-2.549 5.709-5.682 5.709h-297.327c-3.133.001-5.681-2.56-5.681-5.708zm303.008 20.709c11.404 0 20.682-9.29 20.682-20.709v-112.126h71.7c3.398 0 6.163 2.765 6.163 6.163v129.049h-17.644c-11.748 0-21.305 9.558-21.305 21.306v41.683h-308.122v-65.365h248.526zm21.215 172.166v9.196h-192.411v-9.196c0-5.087 4.125-9.226 9.196-9.226h173.991c5.086 0 9.224 4.139 9.224 9.226zm-79.014-68.872c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h30.298l8.847 29.646h-112.696l8.866-29.646h30.188c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-150.067c-3.398 0-6.163-2.765-6.163-6.163v-16.766h308.123v22.929zm236.791 71.735c0 3.492-2.841 6.333-6.333 6.333h-91.758c-3.477 0-6.305-2.841-6.305-6.333v-151.346c0-3.477 2.828-6.306 6.305-6.306h91.758c3.492 0 6.333 2.829 6.333 6.306z"/><path d="m127.661 124.863h-76.451c-6.949 0-12.603 5.641-12.603 12.574v110.696c0 6.949 5.653 12.603 12.603 12.603h76.451c6.949 0 12.602-5.653 12.602-12.603v-110.695c0-6.934-5.653-12.575-12.602-12.575zm-2.398 120.873h-71.655v-105.873h71.655z"/></g></g></svg>

app/assets/javascripts/activityChart.js

@@ -33,30 +33,43 @@
                     .attr('id', 'tooltip')
                     .style('display', 'none');
             }
-            // Create legend
+
+            // Calculate total messages
+            const totalMessages = d3.sum(deliveredData) + d3.sum(failedData);
+
+            // Create legend only if there are messages
             const legendContainer = d3.select('.chart-legend');
             legendContainer.selectAll('*').remove(); // Clear any existing legend
 
-            const legendData = [
-                { label: 'Delivered', color: COLORS.delivered },
-                { label: 'Failed', color: COLORS.failed }
-            ];
+            if (totalMessages > 0) {
+                // Show legend if there are messages
+                const legendData = [
+                    { label: 'Delivered', color: COLORS.delivered },
+                    { label: 'Failed', color: COLORS.failed }
+                ];
 
-            const legendItem = legendContainer.selectAll('.legend-item')
-                .data(legendData)
-                .enter()
-                .append('div')
-                .attr('class', 'legend-item');
+                const legendItem = legendContainer.selectAll('.legend-item')
+                    .data(legendData)
+                    .enter()
+                    .append('div')
+                    .attr('class', 'legend-item');
 
-            legendItem.append('div')
-                .attr('class', 'legend-rect')
-                .style('background-color', d => d.color)
-                .style('display', 'inline-block')
-                .style('margin-right', '5px');
+                legendItem.append('div')
+                    .attr('class', 'legend-rect')
+                    .style('background-color', d => d.color)
+                    .style('display', 'inline-block')
+                    .style('margin-right', '5px');
 
-            legendItem.append('span')
-                .attr('class', 'legend-label')
-                .text(d => d.label);
+                legendItem.append('span')
+                    .attr('class', 'legend-label')
+                    .text(d => d.label);
+
+                // Ensure the legend is shown
+                legendContainer.style('display', 'flex');
+            } else {
+                // Hide the legend if there are no messages
+                legendContainer.style('display', 'none');
+            }
 
             const x = d3.scaleBand()
                 .domain(labels)

app/assets/javascripts/sidenav.js

@@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const sidenavItems = document.querySelectorAll('.usa-sidenav__item > .parent-link');
+    let lastPath = window.location.pathname;
+    let debounceTimeout = null;
+
+    sidenavItems.forEach((link) => {
+      const parentItem = link.parentElement;
+      const sublist = parentItem.querySelector('.usa-sidenav__sublist');
+      const targetHref = link.getAttribute('href');
+
+      // initialize the menu to open the correct submenu based on the current route
+      if (window.location.pathname.startsWith(targetHref)) {
+        parentItem.classList.add('open');
+        link.setAttribute('aria-expanded', 'true');
+      }
+
+      link.addEventListener('click', (event) => {
+        const currentPath = window.location.pathname;
+
+        // prevent default behavior only if navigating to the same route
+        if (currentPath === targetHref) {
+          event.preventDefault();
+          return;
+        }
+
+        if (sublist && !parentItem.classList.contains('open')) {
+          // debounce the menu update to avoid flickering
+          clearTimeout(debounceTimeout);
+          debounceTimeout = setTimeout(() => {
+            parentItem.classList.add('open');
+            link.setAttribute('aria-expanded', 'true');
+          }, 50);
+        }
+      });
+    });
+
+    // handle browser back/forward navigation
+    window.addEventListener('popstate', () => {
+      const currentPath = window.location.pathname;
+
+      // sync menu state
+      sidenavItems.forEach((link) => {
+        const parentItem = link.parentElement;
+        const targetHref = link.getAttribute('href');
+
+        if (currentPath.startsWith(targetHref)) {
+          parentItem.classList.add('open');
+          link.setAttribute('aria-expanded', 'true');
+        } else {
+          parentItem.classList.remove('open');
+          link.setAttribute('aria-expanded', 'false');
+        }
+      });
+
+      lastPath = currentPath;
+    });
+  });

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

@@ -9,6 +9,10 @@ in the form $setting: value,
 
 @use "uswds-core" with (
    $theme-font-type-sans: "public-sans",
+   $theme-card-border-radius: 0,
+   $theme-card-gap: 4,
+   $theme-card-border-width: 2px,
+   $theme-card-border-color: "ink",
    $theme-show-notifications: false,
    $theme-banner-max-width: "desktop-lg",
    $theme-grid-container-max-width: "desktop-lg",

app/config.py

@@ -88,6 +88,8 @@ class Config(object):
         ],
     }
 
+    FEATURE_ABOUT_PAGE_ENABLED = getenv("FEATURE_ABOUT_PAGE_ENABLED", "false") == "true"
+
 
 def _s3_credentials_from_env(bucket_prefix):
     return {

app/main/validators.py

@@ -1,3 +1,5 @@
+import csv
+from io import StringIO
 import re
 from abc import ABC, abstractmethod
 
@@ -28,6 +30,16 @@ class CsvFileValidator:
         self.message = message
 
     def __call__(self, form, field):
+
+        data = Spreadsheet.from_file_form(form).as_dict
+        data = data["data"]
+        if data is not None and data != "":
+            csv_file = StringIO(data)
+            reader = csv.reader(csv_file)
+            first_line = next(reader, None)
+            if first_line is None or all(cell.strip() == "" for cell in first_line):
+                raise ValidationError(f"No headers on row 1 in {field.data.filename}")
+
         if not Spreadsheet.can_handle(field.data.filename):
             raise ValidationError(
                 "{} is not a spreadsheet that Notify can read".format(
@@ -41,14 +53,8 @@ class ValidGovEmail:
         if field.data == "":
             return
 
-        from flask import url_for
+        message = "Enter a public sector email address."
 
-        message = """
-            Enter a public sector email address or
-            <a class="usa-link" href="{}">find out who can use Notify</a>
-        """.format(
-            url_for("main.features")
-        )
         if not is_gov_user(field.data.lower()):
             raise ValidationError(message)
 

app/main/views/index.py

@@ -1,13 +1,10 @@
-import os
-import secrets
-
 from flask import (
     abort,
     current_app,
+    jsonify,
     redirect,
     render_template,
     request,
-    session,
     url_for,
 )
 from flask_login import current_user
@@ -16,34 +13,38 @@ from app import status_api_client
 from app.formatters import apply_html_class, convert_markdown_template
 from app.main import main
 from app.main.views.pricing import CURRENT_SMS_RATE
-from app.main.views.sub_navigation_dictionaries import features_nav, using_notify_nav
+from app.main.views.sub_navigation_dictionaries import (
+    about_notify_nav,
+    using_notify_nav,
+)
 from app.utils.user import user_is_logged_in
-from notifications_utils.url_safe_token import generate_token
+
+
+# Hook to check for feature flags
+@main.before_request
+def check_feature_flags():
+    if request.path.startswith("/about") and not current_app.config.get(
+        "FEATURE_ABOUT_PAGE_ENABLED", False
+    ):
+        abort(404)
+
+
+@main.route("/test/feature-flags")
+def test_feature_flags():
+    return jsonify(
+        {"FEATURE_ABOUT_PAGE_ENABLED": current_app.config["FEATURE_ABOUT_PAGE_ENABLED"]}
+    )
 
 
 @main.route("/")
 def index():
     if current_user and current_user.is_authenticated:
         return redirect(url_for("main.choose_account"))
-    token = generate_token(
-        str(request.remote_addr),
-        current_app.config["SECRET_KEY"],
-        current_app.config["DANGEROUS_SALT"],
-    )
-    url = os.getenv("LOGIN_DOT_GOV_INITIAL_SIGNIN_URL")
-    # handle unit tests
 
-    nonce = secrets.token_urlsafe()
-    session["nonce"] = nonce
-
-    if url is not None:
-        url = url.replace("NONCE", nonce)
-        url = url.replace("STATE", token)
     return render_template(
         "views/signedout.html",
         sms_rate=CURRENT_SMS_RATE,
         counts=status_api_client.get_count_of_live_services_and_organizations(),
-        initial_signin_url=url,
     )
 
 
@@ -99,44 +100,6 @@ def callbacks():
     return redirect(url_for("main.documentation"), 301)
 
 
-# --- Features page set --- #
-
-
-@main.route("/features")
-@user_is_logged_in
-def features():
-    return render_template("views/features.html", navigation_links=features_nav())
-
-
-@main.route("/features/roadmap", endpoint="roadmap")
-@user_is_logged_in
-def roadmap():
-    return render_template("views/roadmap.html", navigation_links=features_nav())
-
-
-@main.route("/features/sms")
-@user_is_logged_in
-def features_sms():
-    return render_template(
-        "views/features/text-messages.html", navigation_links=features_nav()
-    )
-
-
-@main.route("/features/security", endpoint="security")
-@user_is_logged_in
-def security():
-    return render_template("views/security.html", navigation_links=features_nav())
-
-
-@main.route("/features/using_notify")
-@user_is_logged_in
-def using_notify():
-    return (
-        render_template("views/using-notify.html", navigation_links=features_nav()),
-        410,
-    )
-
-
 @main.route("/using-notify/delivery-status")
 @user_is_logged_in
 def message_status():
@@ -191,6 +154,69 @@ def trial_mode_new():
     )
 
 
+@main.route("/using-notify/best-practices")
+@user_is_logged_in
+def best_practices():
+    return render_template(
+        "views/guides/best-practices.html",
+        navigation_links=using_notify_nav(),
+    )
+
+
+@main.route("/using-notify/best-practices/clear-goals")
+@user_is_logged_in
+def clear_goals():
+    return render_template(
+        "views/guides/clear-goals.html",
+        navigation_links=using_notify_nav(),
+    )
+
+
+@main.route("/using-notify/best-practices/rules-and-regulations")
+@user_is_logged_in
+def rules_and_regulations():
+    return render_template(
+        "views/guides/rules-and-regulations.html",
+        navigation_links=using_notify_nav(),
+    )
+
+
+@main.route("/using-notify/best-practices/establish-trust")
+@user_is_logged_in
+def establish_trust():
+    return render_template(
+        "views/guides/establish-trust.html",
+        navigation_links=using_notify_nav(),
+    )
+
+
+@main.route("/using-notify/best-practices/write-for-action")
+@user_is_logged_in
+def write_for_action():
+    return render_template(
+        "views/guides/write-for-action.html",
+        navigation_links=using_notify_nav(),
+    )
+
+
+@main.route("/using-notify/best-practices/multiple-languages")
+@user_is_logged_in
+def multiple_languages():
+    return render_template(
+        "views/guides/multiple-languages.html",
+        navigation_links=using_notify_nav(),
+    )
+
+
+@main.route("/using-notify/best-practices/benchmark-performance")
+@user_is_logged_in
+def benchmark_performance():
+    return render_template(
+        "views/guides/benchmark-performance.html",
+        navigation_links=using_notify_nav(),
+    )
+
+
 @main.route("/using-notify/guidance")
 @user_is_logged_in
 def guidance_index():
@@ -200,6 +226,46 @@ def guidance_index():
     )
 
 
+@main.route("/contact")
+def contact():
+    return render_template(
+        "views/contact.html",
+        navigation_links=about_notify_nav(),
+    )
+
+
+@main.route("/about")
+def about_notify():
+    return render_template(
+        "views/about/about.html",
+        navigation_links=about_notify_nav(),
+    )
+
+
+@main.route("/about/security")
+def about_security():
+    return render_template(
+        "views/about/security.html",
+        navigation_links=about_notify_nav(),
+    )
+
+
+@main.route("/about/why-text-messaging")
+def why_text_messaging():
+    return render_template(
+        "views/about/why-text-messaging.html",
+        navigation_links=about_notify_nav(),
+    )
+
+
+@main.route("/join-notify")
+def join_notify():
+    return render_template(
+        "views/join-notify.html",
+        navigation_links=about_notify_nav(),
+    )
+
+
 @main.route("/using-notify/guidance/create-and-send-messages")
 @user_is_logged_in
 def create_and_send_messages():
@@ -227,17 +293,29 @@ def send_files_by_email():
     )
 
 
+@main.route("/studio")
+def studio():
+    return render_template(
+        "views/studio.html",
+    )
+
+
+@main.route("/acceptable-use-policy")
+def acceptable_use_policy():
+    return render_template(
+        "views/acceptable-use-policy.html",
+    )
+
+
 # --- Redirects --- #
 
 
-@main.route("/roadmap", endpoint="old_roadmap")
 @main.route("/information-security", endpoint="information_security")
 @main.route("/using_notify", endpoint="old_using_notify")
 @main.route("/information-risk-management", endpoint="information_risk_management")
 @main.route("/integration_testing", endpoint="old_integration_testing")
 def old_page_redirects():
     redirects = {
-        "main.old_roadmap": "main.roadmap",
         "main.information_security": "main.using_notify",
         "main.old_using_notify": "main.using_notify",
         "main.information_risk_management": "main.security",

app/main/views/invites.py

@@ -17,14 +17,12 @@ def accept_invite(token):
         and current_user.email_address.lower() != invited_user.email_address.lower()
     ):
         message = Markup(
-            """
-            You’re signed in as {}.
+            f"""
+            You’re signed in as {current_user.email_address}.
             This invite is for another email address.
-            <a href={} class="usa-link">Sign out</a>
+            <a href={url_for("main.sign_out")} class="usa-link">Sign out</a>
             and click the link again to accept this invite.
-            """.format(
-                current_user.email_address, url_for("main.sign_out")
-            )
+            """
         )
 
         flash(message=message)

app/main/views/manage_users.py

@@ -77,6 +77,11 @@ def invite_user(service_id, user_id=None):
         form.login_authentication.data = "sms_auth"
 
     if form.validate_on_submit():
+        if not form.permissions or len(form.permissions) == 0:
+            return render_template(
+                "views/user-has-no-permissions.html",
+                user_to_invite=user_to_invite,
+            )
         email_address = form.email_address.data
         invited_user = InvitedUser.create(
             current_user.id,

app/main/views/register.py

@@ -1,7 +1,7 @@
-import base64
 import json
 import uuid
 from datetime import datetime, timedelta
+from urllib.parse import unquote
 
 from flask import (
     abort,
@@ -161,17 +161,29 @@ def set_up_your_profile():
     debug_msg(f"Enter set_up_your_profile with request.args {request.args}")
     code = request.args.get("code")
     state = request.args.get("state")
+
+    state_key = f"login-state-{unquote(state)}"
+    stored_state = unquote(redis_client.get(state_key).decode("utf8"))
+    if state != stored_state:
+        current_app.logger.error(f"State Error: {state} != {stored_state}")
+        abort(403)
+
     login_gov_error = request.args.get("error")
 
-    if redis_client.get(f"invitedata-{state}") is None:
-        access_token = sign_in._get_access_token(code, state)
+    user_email = redis_client.get(f"user_email-{state}")
+    user_uuid = redis_client.get(f"user_uuid-{state}")
+
+    new_user = user_email is None or user_uuid is None
+
+    if new_user:  # invite path
+        access_token = sign_in._get_access_token(code)
+
         debug_msg("Got the access token for login.gov")
         user_email, user_uuid = sign_in._get_user_email_and_uuid(access_token)
         debug_msg(
             f"Got the user_email {user_email} and user_uuid {user_uuid} from login.gov"
         )
-        invite_data = state.encode("utf8")
-        invite_data = base64.b64decode(invite_data)
+        invite_data = redis_client.get(f"invitedata-{state}")
         invite_data = json.loads(invite_data)
         debug_msg(f"final state {invite_data}")
         invited_user_id = invite_data["invited_user_id"]
@@ -193,10 +205,7 @@ def set_up_your_profile():
 
     form = SetupUserProfileForm()
 
-    if (
-        form.validate_on_submit()
-        and redis_client.get(f"invitedata-{state}") is not None
-    ):
+    if form.validate_on_submit() and not new_user:
         invite_data, user_email, user_uuid, invited_user_email_address = (
             get_invite_data_from_redis(state)
         )
@@ -221,6 +230,7 @@ def set_up_your_profile():
         activate_user(user["id"])
         debug_msg("activated user")
         usr = User.from_id(user["id"])
+
         usr.add_to_service(
             invite_data["service_id"],
             invite_data["permissions"],

app/main/views/security_policy.py

@@ -1,4 +1,4 @@
-from flask import redirect
+from flask import send_from_directory
 
 from app.main import main
 
@@ -6,6 +6,4 @@ from app.main import main
 @main.route("/.well-known/security.txt", methods=["GET"])
 @main.route("/security.txt", methods=["GET"])
 def security_policy():
-    # See GDS Way security policy which this implements
-    # https://gds-way.cloudapps.digital/standards/vulnerability-disclosure.html#vulnerability-disclosure-and-security-txt
-    return redirect("https://vdp.cabinetoffice.gov.uk/.well-known/security.txt")
+    return send_from_directory(".well-known", "security.txt")

app/main/views/send.py

@@ -132,6 +132,7 @@ def send_messages(service_id, template_id):
     form = CsvUploadForm()
     if form.validate_on_submit():
         try:
+
             upload_id = s3upload(
                 service_id,
                 Spreadsheet.from_file_form(form).as_dict,
@@ -483,6 +484,7 @@ def send_one_off_step(service_id, template_id, step_index):
         link_to_upload=(
             request.endpoint == "main.send_one_off_step" and step_index == 0
         ),
+        errors=form.errors if form.errors else None,
     )
 
 
@@ -739,7 +741,7 @@ def all_placeholders_in_session(placeholders):
 
 def get_send_test_page_title(template_type, entering_recipient, name=None):
     if entering_recipient:
-        return "Send ‘{}’".format(name)
+        return "Select recipients"
     return "Personalize this message"
 
 

app/main/views/sign_in.py

@@ -1,8 +1,8 @@
-import json
 import os
 import secrets
 import time
 import uuid
+from urllib.parse import unquote
 
 import jwt
 import requests
@@ -14,19 +14,19 @@ from flask import (
     redirect,
     render_template,
     request,
-    session,
     url_for,
 )
 from flask_login import current_user
 
-from app import login_manager, user_api_client
+from app import login_manager, redis_client, user_api_client
 from app.main import main
 from app.main.views.index import error
 from app.main.views.verify import activate_user
 from app.models.user import User
 from app.utils import hide_from_search_engines
-from app.utils.login import is_safe_redirect_url
-from app.utils.time import is_less_than_days_ago
+from app.utils.login import get_id_token, is_safe_redirect_url
+
+# from app.utils.time import is_less_than_days_ago
 from app.utils.user import is_gov_user
 from notifications_utils.url_safe_token import generate_token
 
@@ -40,10 +40,9 @@ def _reformat_keystring(orig):  # pragma: no cover
     return new_keystring
 
 
-def _get_access_token(code, state):  # pragma: no cover
+def _get_access_token(code):  # pragma: no cover
     client_id = os.getenv("LOGIN_DOT_GOV_CLIENT_ID")
     access_token_url = os.getenv("LOGIN_DOT_GOV_ACCESS_TOKEN_URL")
-    certs_url = os.getenv("LOGIN_DOT_GOV_CERTS_URL")
     keystring = os.getenv("LOGIN_PEM")
     if " " in keystring:
         keystring = _reformat_keystring(keystring)
@@ -66,32 +65,13 @@ def _get_access_token(code, state):  # pragma: no cover
     response = requests.post(url, headers=headers)
 
     response_json = response.json()
-    try:
-        encoded_id_token = response_json["id_token"]
-    except KeyError as e:
-        current_app.logger.exception(f"Error when getting id token {response_json}")
-        raise KeyError(f"'access_token' {response.json()}") from e
-
-    # Getting Login.gov signing keys for unpacking the id_token correctly.
-    jwks = requests.get(certs_url).json()
-    public_keys = {
-        jwk["kid"]: {
-            "key": jwt.algorithms.RSAAlgorithm.from_jwk(json.dumps(jwk)),
-            "algo": jwk["alg"],
-        }
-        for jwk in jwks["keys"]
-    }
-    kid = jwt.get_unverified_header(encoded_id_token)["kid"]
-    pub_key = public_keys[kid]["key"]
-    algo = public_keys[kid]["algo"]
-    id_token = jwt.decode(
-        encoded_id_token, pub_key, audience=client_id, algorithms=[algo]
-    )
-
+    id_token = get_id_token(response_json)
     nonce = id_token["nonce"]
-    saved_nonce = session.pop("nonce")
-    if nonce != saved_nonce:
-        current_app.logger.error(f"Nonce Error: {nonce} != {saved_nonce}")
+    nonce_key = f"login-nonce-{unquote(nonce)}"
+    stored_nonce = redis_client.get(nonce_key).decode("utf8")
+
+    if nonce != stored_nonce:
+        current_app.logger.error(f"Nonce Error: {nonce} != {stored_nonce}")
         abort(403)
 
     try:
@@ -120,6 +100,7 @@ def _do_login_dot_gov():  # $ pragma: no cover
     # start login.gov
     code = request.args.get("code")
     state = request.args.get("state")
+
     login_gov_error = request.args.get("error")
 
     if login_gov_error:
@@ -128,10 +109,19 @@ def _do_login_dot_gov():  # $ pragma: no cover
         )
         raise Exception(f"Could not login with login.gov {login_gov_error}")
     elif code and state:
+        verify_key = f"login-verify_email-{unquote(state)}"
+        verify_path = bool(redis_client.get(verify_key))
+
+        if not verify_path:
+            state_key = f"login-state-{unquote(state)}"
+            stored_state = unquote(redis_client.get(state_key).decode("utf8"))
+            if state != stored_state:
+                current_app.logger.error(f"State Error: {state} != {stored_state}")
+                abort(403)
 
         # activate the user
         try:
-            access_token = _get_access_token(code, state)
+            access_token = _get_access_token(code)
             user_email, user_uuid = _get_user_email_and_uuid(access_token)
             if not is_gov_user(user_email):
                 current_app.logger.error(
@@ -145,12 +135,17 @@ def _do_login_dot_gov():  # $ pragma: no cover
                 f"Retrieved user {user['id']} from db #notify-admin-1505"
             )
 
-            # Check if the email needs to be revalidated
-            is_fresh_email = is_less_than_days_ago(
-                user["email_access_validated_at"], 90
-            )
-            if not is_fresh_email:
-                return verify_email(user, redirect_url)
+            # Temporary disabling of this until we figure out what is happening.
+            # # Check if the email needs to be revalidated
+            # is_fresh_email = is_less_than_days_ago(
+            #     user["email_access_validated_at"], 90
+            # )
+            # if not is_fresh_email:
+            #     # send email verify
+            #     ttl = 24 * 60 * 60
+            #     verify_key = f"login-verify_email-{unquote(state)}"
+            #     redis_client.set(verify_key, state, ex=ttl)
+            #     return verify_email(user, redirect_url)
 
             usr = User.from_email_address(user["email_address"])
             current_app.logger.info(f"activating user {usr.id} #notify-admin-1505")
@@ -224,20 +219,25 @@ def sign_in():  # pragma: no cover
             return redirect(redirect_url)
         return redirect(url_for("main.show_accounts_or_dashboard"))
 
-    token = generate_token(
+    ttl = 24 * 60 * 60
+
+    state = generate_token(
         str(request.remote_addr),
         current_app.config["SECRET_KEY"],
         current_app.config["DANGEROUS_SALT"],
     )
-    url = os.getenv("LOGIN_DOT_GOV_INITIAL_SIGNIN_URL")
+    state_key = f"login-state-{unquote(state)}"
+    redis_client.set(state_key, state, ex=ttl)
 
     nonce = secrets.token_urlsafe()
-    session["nonce"] = nonce
+    nonce_key = f"login-nonce-{unquote(nonce)}"
+    redis_client.set(nonce_key, nonce, ex=ttl)
 
+    url = os.getenv("LOGIN_DOT_GOV_INITIAL_SIGNIN_URL")
     # handle unit tests
     if url is not None:
         url = url.replace("NONCE", nonce)
-        url = url.replace("STATE", token)
+        url = url.replace("STATE", state)
 
     return render_template(
         "views/signin.html",

app/main/views/sub_navigation_dictionaries.py

@@ -1,60 +1,67 @@
-def features_nav():
+def using_notify_nav():
+    nav_items = [
+        {"name": "Get started", "link": "main.get_started"},
+        {
+            "name": "Best Practices",
+            "link": "main.best_practices",
+            "sub_navigation_items": [
+                {
+                    "name": "Clear goals",
+                    "link": "main.clear_goals",
+                },
+                {
+                    "name": "Rules and regulations",
+                    "link": "main.rules_and_regulations",
+                },
+                {
+                    "name": "Establish trust",
+                    "link": "main.establish_trust",
+                },
+                {
+                    "name": "Write for action",
+                    "link": "main.write_for_action",
+                },
+                {
+                    "name": "Multiple languages",
+                    "link": "main.multiple_languages",
+                },
+                {
+                    "name": "Benchmark performance",
+                    "link": "main.benchmark_performance",
+                },
+            ],
+        },
+        {"name": "Trial mode", "link": "main.trial_mode_new"},
+        {"name": "Tracking usage", "link": "main.pricing"},
+        {"name": "Delivery Status", "link": "main.message_status"},
+        {"name": "Guidance", "link": "main.guidance_index"},
+    ]
+
+    return nav_items
+
+
+def about_notify_nav():
     return [
         {
-            "name": "Features",
-            "link": "main.features",
+            "name": "About Notify",
+            "link": "main.about_notify",
             "sub_navigation_items": [
-                # {
-                #     "name": "Text messages",
-                #     "link": "main.features_sms",
-                # },
+                {
+                    "name": "Why text messaging",
+                    "link": "main.why_text_messaging",
+                },
+                {
+                    "name": "Security",
+                    "link": "main.about_security",
+                },
             ],
         },
         {
-            "name": "Roadmap",
-            "link": "main.roadmap",
+            "name": "Join Notify",
+            "link": "main.join_notify",
         },
         {
-            "name": "Security",
-            "link": "main.security",
-        },
-    ]
-
-
-def using_notify_nav():
-    return [
-        {
-            "name": "Get started",
-            "link": "main.get_started",
-        },
-        {
-            "name": "Trial mode",
-            "link": "main.trial_mode_new",
-        },
-        {
-            "name": "Tracking usage",
-            "link": "main.pricing",
-        },
-        {
-            "name": "Delivery status",
-            "link": "main.message_status",
-        },
-        {
-            "name": "Guidance",
-            "link": "main.guidance_index",
-            # "sub_navigation_items": [
-            #     {
-            #         "name": "Formatting",
-            #         "link": "main.edit_and_format_messages",
-            #     },
-            #     {
-            #        "name": "Send files by email",
-            #        "link": "main.send_files_by_email",
-            #     },
-            # ]
-            # {
-            #   "name": "API documentation",
-            #   "link": "main.documentation",
-            # },
+            "name": "Contact us",
+            "link": "main.contact",
         },
     ]

app/models/spreadsheet.py

@@ -42,7 +42,8 @@ class Spreadsheet:
 
     @staticmethod
     def normalise_newlines(file_content):
-        return "\r\n".join(file_content.read().decode("utf-8").splitlines())
+        rows = file_content.read().decode("utf-8").splitlines()
+        return "\r\n".join(rows)
 
     @classmethod
     def from_rows(cls, rows, filename=""):

app/navigation.py

@@ -40,15 +40,17 @@ class HeaderNavigation(Navigation):
         "support": {
             "support",
         },
-        "features": {
-            "features",
-            "features_sms",
-            "roadmap",
-            "security",
+        "best_practices": {
+            "best_practices",
+            "clear_goals",
+            "rules_and_regulations",
+            "establish_trust",
+            "write_for_action",
+            "multiple_languages",
+            "benchmark_performance",
         },
         "using_notify": {
             "get_started",
-            "using_notify",
             "pricing",
             "trial_mode_new",
             "message_status",

app/notify_client/invite_api_client.py

@@ -1,8 +1,16 @@
+import json
+import secrets
+from urllib.parse import unquote
+
+from flask import current_app, request
+
+from app import redis_client
 from app.notify_client import NotifyAdminAPIClient, _attach_current_user, cache
 from app.utils.user_permissions import (
     all_ui_permissions,
     translate_permissions_from_ui_to_db,
 )
+from notifications_utils.url_safe_token import generate_token
 
 
 class InviteApiClient(NotifyAdminAPIClient):
@@ -32,8 +40,35 @@ class InviteApiClient(NotifyAdminAPIClient):
             "folder_permissions": folder_permissions,
         }
         data = _attach_current_user(data)
+
+        ttl = 24 * 60 * 60
+
+        # make and store the state
+        state = generate_token(
+            str(request.remote_addr),
+            current_app.config["SECRET_KEY"],
+            current_app.config["DANGEROUS_SALT"],
+        )
+        state_key = f"login-state-{unquote(state)}"
+        redis_client.set(state_key, state, ex=ttl)
+
+        # make and store the nonce
+        nonce = secrets.token_urlsafe()
+        nonce_key = f"login-nonce-{unquote(nonce)}"
+        redis_client.set(nonce_key, nonce, ex=ttl)  # save the nonce to redis.
+
+        data["nonce"] = nonce  # This is passed to api for the invite url.
+        data["state"] = state  # This is passed to api for the invite url.
+
         resp = self.post(url=f"/service/{service_id}/invite", data=data)
-        return resp["data"]
+
+        resp_data = resp["data"]
+        invite_data_key = f"invitedata-{unquote(state)}"
+        redis_invite_data = resp["invite"]
+        redis_invite_data = json.dumps(redis_invite_data)
+        redis_client.set(invite_data_key, redis_invite_data, ex=ttl)
+
+        return resp_data
 
     def get_invites_for_service(self, service_id):
         return self.get(f"/service/{service_id}/invite")["data"]
@@ -64,7 +99,34 @@ class InviteApiClient(NotifyAdminAPIClient):
         self.post(url=f"/service/{service_id}/invite/{invited_user_id}", data=data)
 
     def resend_invite(self, service_id, invited_user_id):
-        self.post(url=f"/service/{service_id}/invite/{invited_user_id}/resend", data={})
+        ttl = 24 * 60 * 60
+
+        # make and store the state
+        state = generate_token(
+            str(request.remote_addr),
+            current_app.config["SECRET_KEY"],
+            current_app.config["DANGEROUS_SALT"],
+        )
+        state_key = f"login-state-{unquote(state)}"
+        redis_client.set(state_key, state, ex=ttl)
+
+        # make and store the nonce
+        nonce = secrets.token_urlsafe()
+        nonce_key = f"login-nonce-{unquote(nonce)}"
+        redis_client.set(nonce_key, nonce, ex=ttl)
+
+        data = {
+            "nonce": nonce,
+            "state": state,
+        }
+        resp = self.post(
+            url=f"/service/{service_id}/invite/{invited_user_id}/resend", data=data
+        )
+
+        invite_data_key = f"invitedata-{unquote(state)}"
+        redis_invite_data = resp["invite"]
+        redis_invite_data = json.dumps(redis_invite_data)
+        redis_client.set(invite_data_key, redis_invite_data, ex=ttl)
 
     @cache.delete("service-{service_id}")
     @cache.delete("user-{invited_user_id}")

app/notify_client/user_api_client.py

@@ -116,7 +116,7 @@ class UserApiClient(NotifyAdminAPIClient):
             data["next"] = next_string
         if code_type == "email":
             data["email_auth_link_host"] = self.admin_url
-        endpoint = "/user/{0}/{1}-code".format(user_id, code_type)
+            endpoint = f"/user/{user_id}/{code_type}-code"
         current_app.logger.warn(hilite(f"Sending verify_code {code_type} to {user_id}"))
         self.post(endpoint, data=data)
 
@@ -168,7 +168,7 @@ class UserApiClient(NotifyAdminAPIClient):
     @cache.delete("user-{user_id}")
     def add_user_to_service(self, service_id, user_id, permissions, folder_permissions):
         # permissions passed in are the combined UI permissions, not DB permissions
-        endpoint = "/service/{}/users/{}".format(service_id, user_id)
+        endpoint = f"/service/{service_id}/users/{user_id}"
         data = {
             "permissions": [
                 {"permission": x}

app/templates/base.html

@@ -6,9 +6,7 @@
 <html lang="{{ htmlLang | default('en') }}" class="{{ htmlClasses }}">
   <head>
     <title>
-      {% block pageTitle %}
-        {% block per_page_title %}{% endblock %} – Notify.gov
-      {% endblock %}
+      {% block pageTitle %}{% block per_page_title %}{% endblock %} – Notify.gov{% endblock %}
     </title>
     {% include "components/head.html" %}
   </head>
@@ -53,9 +51,36 @@
               <div class="grid-row">
                 {% if navigation_links %}
                   <div class="tablet:grid-col-2 margin-bottom-4">
-                    {{ sub_navigation(navigation_links) }}
+                    <nav class="nav">
+                      <ul class="usa-sidenav">
+                        {% for item in navigation_links %}
+                          <li class="usa-sidenav__item">
+                            <a href="{{ url_for(item.link) }}"
+                               class="parent-link {% if request.endpoint.startswith(item['link']) or item.sub_navigation_items | selectattr('link', 'equalto', request.endpoint) | list | length > 0 %} usa-current {% endif %}"
+                               aria-haspopup="true"
+                               aria-expanded="{{ 'true' if request.endpoint.startswith(item['link']) else 'false' }}">
+                              {{ item.name }}
+                            </a>
+                            {% if item.sub_navigation_items %}
+                              <ul class="usa-sidenav__sublist" role="menu">
+                                {% for sub_item in item.sub_navigation_items %}
+                                  <li role="menuitem">
+                                    <a href="{{ url_for(sub_item.link.split('#')[0]) }}#{{ sub_item.link.split('#')[1] }}"
+                                       class="{% if request.endpoint == sub_item['link'] %}usa-current bold{% endif %}">
+                                      {{ sub_item.name }}
+                                    </a>
+                                  </li>
+                                {% endfor %}
+                              </ul>
+                            {% endif %}
+                          </li>
+                        {% endfor %}
+                      </ul>
+
+
+                    </nav>
                   </div>
-                  <div class="tablet:grid-col-10 padding-left-4 usa-prose site-prose">
+                  <div class="tablet:grid-col-10 tablet:padding-left-4 usa-prose site-prose">
                 {% else %}
                   <div class="tablet:grid-col-10">
                 {% endif %}
@@ -82,7 +107,7 @@
 
       {% if current_user.is_authenticated %}
         {% block sessionUserWarning %}
-        <dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timerWarning">
+        <dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timeLeft">
           <div class="usa-modal__content">
             <div class="usa-modal__main">
               <h2 class="usa-modal__heading" id="sessionTimerHeading">

app/templates/components/components/back-link/template.njk

@@ -1,4 +1,4 @@
 <nav class="usa-breadcrumb" aria-label="Breadcrumb">
-  <a href="{{ params.href or '#' }}" class="usa-link usa-back-link display-inline-flex {{ params.classes or '' }}"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}" {% endfor %}>{{ params.html | safe or params.text or 'Back' }}</a>
+  <a href="{{ params.href.url or params.href or '#' }}" class="usa-link usa-back-link display-inline-flex {{ params.classes or '' }}"
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}" {% endfor %}>{{ params.html | safe or params.href.text or 'Back' }}</a>
 </nav>

app/templates/components/folder-path.html

@@ -4,9 +4,9 @@
   template_type,
   current_user,
   link_current_item=False,
-  root_element='h1'
+  root_element='nav'
 ) %}
-  <{{ root_element }} class="font-body-lg folder-heading margin-bottom-0"{% if root_element == 'h1' %} id="page-header"{% endif %}>
+  <{{ root_element }} id="breadcrumb-template-folders" class="navigation-service usa-breadcrumb padding-top-0 padding-bottom-05" aria-label="Template folder path">
     {% for folder in folders %}
       {% if loop.last and not link_current_item %}
         {% if folder.template_type or not folder.id %}
@@ -22,7 +22,10 @@
             <span class="folder-heading-folder">{{ folder.name }}</span>
           {% endif %}
         {% else %}
-          <a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type) }}" title="Templates" class="usa-link {% if loop.length > 2 %}folder-heading-folder-root-truncated{% endif %}">Templates</a>
+          <a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type) }}" class="usa-link {% if loop.length > 2 %}folder-heading-folder-root-truncated{% endif %}">
+            <span class="usa-sr-only">Return to all</span>
+            Templates
+          </a>
         {% endif %}
         {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
       {% endif %}

app/templates/components/footer.html

@@ -32,6 +32,9 @@
           <li class="usa-identifier__required-links-item">
             <a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link">About GSA</a>
           </li>
+          <li class="usa-identifier__required-links-item">
+            <a href="/studio" class="usa-identifier__required-link">About the Public Benefits Studio</a>
+          </li>
           <li class="usa-identifier__required-links-item">
             <a href="https://www.gsa.gov/website-information/accessibility-aids"
               class="usa-identifier__required-link">Accessibility support</a>
@@ -51,6 +54,9 @@
             <a href="https://www.gsa.gov/reference/reports/budget-performance"
               class="usa-identifier__required-link">Performance reports</a>
           </li>
+          <li class="usa-identifier__required-links-item">
+            <a href="/acceptable-use-policy" class="usa-identifier__required-link">Acceptable use policy</a>
+          </li>
           <li class="usa-identifier__required-links-item">
             <a href="https://www.gsa.gov/website-information/website-policies"
               class="usa-identifier__required-link">Privacy policy</a>
@@ -58,16 +64,20 @@
         </ul>
       </div>
     </nav>
-    <section class="usa-identifier__section usa-identifier__section--usagov"
+    <section class="usa-identifier__section"
       aria-label="Github Repos">
       <div class="usa-identifier__container">
         <div class="usa-identifier__required-links-item">
           Find us on Github:
         </div>
-        <ul>
-          <li><a href="https://github.com/gsa/notifications-admin" class="usa-identifier__required-link">Notify.gov Admin repo</a></li>
-        <li><a href="https://github.com/gsa/notifications-api" class="usa-identifier__required-link">Notify.gov API repo</a></li>
-      </ul>
+        <ul class="usa-identifier__required-links-list">
+          <li class="usa-identifier__required-links-item">
+            <a href="https://github.com/gsa/notifications-admin" class="usa-identifier__required-link">Notify.gov Admin repo</a>
+          </li>
+          <li class="usa-identifier__required-links-item">
+            <a href="https://github.com/gsa/notifications-api" class="usa-identifier__required-link">Notify.gov API repo</a>
+          </li>
+        </ul>
 
       </div>
     </section>

app/templates/components/guides/cards.html

@@ -0,0 +1,44 @@
+<ul class="usa-card-group grid-row flex-row">
+  {% for item in card_contents %}
+  <li class="usa-card grid-col mobile-lg:grid-col-12 tablet:grid-col-6 desktop:grid-col-4 {% if item.link %}linked-card linked-content{% endif %}">
+    {% if item.link %}
+    <a href="{{ item.link }}">
+    {% endif %}
+    <div class="usa-card__container">
+      {% if item.card_heading %}
+      <div class="usa-card__header">
+          <h3
+            class="usa-card__heading {% if text_align != 'left' or text_align is not defined %}text-center{% else %}text-left{% endif %} {% if item.link %}linked-card{% endif %}">
+            {{ item.card_heading }}
+          </h3>
+          {% if item.link %}
+        {% endif %}
+      </div>
+      {% endif %}
+      {% if item.svg_src or item.image_src%}
+      <div class="usa-card__media usa-card__media--inset">
+        {% if item.svg_src %}
+        <svg aria-hidden="true" focusable="false" role="img" class="best-practices_card_img">
+          <use xlink:href="{{asset_url('images/best-practices-card-sprite.svg')}}#{{item.svg_src}}"></use>
+        </svg>
+        {% endif %}
+        {% if item.image_src %}
+        <img class="best-practices_card_img" src="{{item.image_src}}" alt="{{ item.alt_text }}" />
+        {% endif %}
+      </div>
+      {% endif %}
+      {% if item.p_text %}
+      <div class="usa-card__body">
+        <p
+          class="{% if text_align != 'left' or text_align is not defined %}text-center{% else %}text-left{% endif %} {% if item.link %}linked-card{% endif %}">
+          {{item.p_text|safe}}
+        </p>
+      </div>
+      {% endif %}
+    </div>
+    {% if item.link %}
+    </a>
+    {% endif %}
+  </li>
+  {% endfor %}
+</ul>

app/templates/components/guides/circle_number.html

@@ -0,0 +1,9 @@
+{% macro circle_number(number) %}
+<svg xmlns="http://www.w3.org/2000/svg" class="svg-circle-icon" width="24" height="24" viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="37" stroke="#005ea2" stroke-width="7" fill="none" />
+    <text x="50%" y="50%" text-anchor="middle" font-size="40" font-weight="bolder" fill="#005ea2" font-family="Arial"
+        dy=".35em">
+        {{ number }}
+    </text>
+</svg>
+{% endmacro %}

app/templates/components/header.html

@@ -1,49 +1,76 @@
+{% set is_about_page = request.path.startswith('/about') %}
+{% set is_join_notify_page = request.path.startswith('/join-notify') %}
+{% set is_contact_page = request.path.startswith('/contact') %}
+{% set is_information_section = is_about_page or is_join_notify_page or is_contact_page %}
+
 {% if current_user.is_authenticated %}
-  {% set navigation = [
-    {"href": url_for("main.show_accounts_or_dashboard"), "text": "Current service", "active": header_navigation.is_selected('accounts-or-dashboard')},
-    {"href": url_for('main.get_started'), "text": "Using Notify", "active": header_navigation.is_selected('using_notify')},
-    {"href": url_for('main.features'), "text": "Features", "active": header_navigation.is_selected('features')},
-    {"href": url_for('main.support'), "text": "Contact us", "active": header_navigation.is_selected('support')}
-  ] %}
+{% set navigation = [
+  {"href": url_for("main.show_accounts_or_dashboard"), "text": "Current service", "active": request.path.startswith('/accounts')},
+  {"href": url_for('main.get_started'), "text": "Using Notify", "active": request.path.startswith('/using-notify')},
+  {"href": url_for('main.support'), "text": "Contact us", "active": header_navigation.is_selected('support')}
+] %}
 
-  {% if current_user.platform_admin %}
-    {% set navigation = navigation + [{"href": url_for('main.platform_admin_splash_page'), "text": "Platform admin", "active": header_navigation.is_selected('platform-admin')}] %}
-  {% else %}
-    {% set navigation = navigation + [{"href": url_for('main.user_profile'), "text": "User profile", "active": header_navigation.is_selected('user-profile')}] %}
-  {% endif %}
-
-  {% if current_service %}
-    {% if current_user.has_permissions('manage_service') %}
-      {% set secondaryNavigation = [
-          {"href": url_for('main.service_settings', service_id=current_service.id), "text": "Settings", "active": secondary_navigation.is_selected('settings')},
-          {"href": url_for('main.sign_out'), "text": "Sign out"}
-      ] %}
-    {% else %}
-      {% set secondaryNavigation = [
-        {"href": url_for('main.sign_out'), "text": "Sign out"}
-      ] %}
-
-    {% endif %}
-  {% else %}
-    {% set secondaryNavigation = [{"href": url_for('main.sign_out'), "text": "Sign out"}] %}
-  {% endif %}
+{% if current_user.platform_admin %}
+{% set navigation = navigation + [{"href": url_for('main.platform_admin_splash_page'), "text": "Platform admin", "active": header_navigation.is_selected('platform-admin')}] %}
+{% else %}
+{% set navigation = navigation + [{"href": url_for('main.user_profile'), "text": "User profile", "active": header_navigation.is_selected('user-profile')}] %}
 {% endif %}
 
+{% if current_service %}
+{% if current_user.has_permissions('manage_service') %}
+{% set secondaryNavigation = [
+  {"href": url_for('main.service_settings', service_id=current_service.id), "text": "Settings", "active": secondary_navigation.is_selected('settings')},
+  {"href": url_for('main.sign_out'), "text": "Sign out"}
+] %}
+{% else %}
+{% set secondaryNavigation = [
+  {"href": url_for('main.sign_out'), "text": "Sign out"}
+] %}
+{% endif %}
+{% else %}
+{% set secondaryNavigation = [{"href": url_for('main.sign_out'), "text": "Sign out"}] %}
+{% endif %}
+
+{% else %}
+{% set navigation = [
+  {"href": url_for('main.about_notify'), "text": "About Notify", "active": is_about_page},
+  {"href": url_for('main.join_notify'), "text": "Join Notify", "active": is_join_notify_page},
+  {"href": url_for('main.contact'), "text": "Contact us", "active": is_contact_page}
+] %}
+{% endif %}
+
+
+
+
+
+
+
 <header class="usa-header usa-header--extended">
   <div class="usa-nav-container">
     <div class="usa-navbar">
-      <div class="usa-logo display-flex flex-align-center flex-justify" id="-logo">
-        <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" class="usa-flag-logo margin-right-1">
-
+      <div class="display-flex flex-align-center flex-justify width-full">
+        <div class="usa-logo display-flex flex-align-center flex-justify" id="-logo">
+          <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"
+                class="usa-flag-logo margin-right-1">
+            </a>
+          </div>
+          {% if navigation %}
+          <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>
-        {% if navigation %}
-          <button type="button" class="usa-menu-btn">Menu</button>
         {% endif %}
       </div>
+
     </div>
     <nav aria-label="Primary navigation" class="usa-nav">
       <div class="usa-nav__inner">
@@ -52,32 +79,33 @@
         </button>
         <ul class="usa-nav__primary usa-accordion margin-right-1">
           {% for item in navigation %}
-            {% if item.href and item.text %}
-            <li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
-              <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
-                item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
-                <span>{{ item.text }}</span>
-              </a>
-            </li>
-            {% endif %}
+          {% if item.href and item.text %}
+          <li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
+            <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value
+              in item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
+              <span>{{ item.text }}</span>
+            </a>
+          </li>
+          {% endif %}
           {% endfor %}
         </ul>
         <div class="usa-nav__secondary margin-bottom-6">
           <ul class="usa-nav__secondary-links">
             {% if secondaryNavigation %}
-              {% for item in secondaryNavigation %}
-                {% if item.href and item.text %}
-                  <li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
-                    <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
-                      item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
-                      <span>{{ item.text }}</span>
-                    </a>
-                  </li>
-                {% endif %}
-              {% endfor %}
+            {% for item in secondaryNavigation %}
+            {% if item.href and item.text %}
+            <li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
+              <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute,
+                value in item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
+                <span>{{ item.text }}</span>
+              </a>
+            </li>
+            {% endif %}
+            {% endfor %}
             {% endif %}
           </ul>
         </div>
+
       </div>
     </nav>
   </div>

app/templates/components/live-search.html

@@ -17,7 +17,7 @@
     {% endif %}
 
     {% if show %}
-        <div class="live-search js-header" data-module="live-search" data-targets="{{ target_selector }}">
+        <div class="live-search js-header margin-top-0" data-module="live-search" data-targets="{{ target_selector }}">
           {{ form.search(param_extensions=param_extensions) }}
           <div aria-live="polite" class="live-search__status usa-sr-only"></div>
         </div>

app/templates/components/nav_breadcrumb.html

@@ -0,0 +1,18 @@
+{% macro breadcrumb(title, parent_menu_title, url) %}
+<nav class="navigation-service usa-breadcrumb padding-top-0">
+  <ol class="usa-breadcrumb__list">
+    <li class="usa-breadcrumb__list-item">
+      <span class="usa-breadcrumb__label">
+        <a href="{{ url_for(url) }}" class="usa-link navigation-organization-link">
+          {{ parent_menu_title }}
+        </a>
+      </span>
+    </li>
+    {% if title %}
+    <li class="usa-breadcrumb__list-item">
+      <span class="usa-breadcrumb__label">{{ title }}</span>
+    </li>
+    {% endif %}
+  </ol>
+</nav>
+{% endmacro %}

app/templates/components/service_nav.html

@@ -6,12 +6,12 @@
       <a href="{{ url_for('.organization_dashboard', org_id=current_service.organization_id) }}" class="usa-link navigation-organization-link">{{ current_service.organization_name }}</a>
     {% endif %}
   {% endif %}
-  <div class="font-body-2xl text-bold">
+  <span>
     {{ current_service.name }}
     {% if not current_service.active %}
       <span class="navigation-service-name navigation-service-type--suspended">Suspended</span>
     {% endif %}
-  </div>
+  </span>
   <a href="{{ url_for('main.choose_account') }}" class="usa-link">Switch service</a>
 </div>
 </nav>

app/templates/partials/jobs/notifications.html

@@ -2,7 +2,7 @@
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
-<div class="ajax-block-container" aria-labelledby='pill-selected-item' role="region">
+<div class="ajax-block-container" role="region">
   {% if job.scheduled %}
 
     <p class="usa-body">

app/templates/partials/jobs/status.html

@@ -8,7 +8,7 @@
   <div>
     <ul class="usa-icon-list">
       <li class="usa-icon-list__item">
-        <img src="{{ url_for('static', filename='img/material-icons/description.svg') }}" alt="Description Icon">
+        <img src="{{ url_for('static', filename='img/material-icons/description.svg') }}" alt="">
         <div class="usa-icon-list__content">
           <h3>{{ job.original_file_name }}</h3>
         </div>

app/templates/views/about/about.html

@@ -0,0 +1,74 @@
+{% extends "base.html" %}
+
+{% set page_title = "About Notify" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p>Notify.gov is a text messaging service built by and for the government. We help agencies communicate more
+    effectively with the people they serve. With Notify.gov, federal and federally-funded programs can send customized
+    text messages that make it possible to:</p>
+  <ul>
+    <li>Meet people where they are</li>
+    <li>More effectively deliver program outcomes</li>
+    <li>Save administrative costs</li>
+    <li>Implement <a class="use-link usa-link--external"
+        href="https://digital.gov/resources/delivering-digital-first-public-experience/" target="_blank">21st Century
+        IDEA</a> and other directives</li>
+  </ul>
+  <p>Notify.gov is an easy-to-use, web-based platform. It requires no technical expertise or system integration — users
+    can create an account and get started within minutes. We take the security and privacy of messaging data seriously
+    by minimizing data retention and using modern encryption methods.</p>
+    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/fkcy_xbo0Bw?si=qNo94BwL4WCeusy5&amp;start=2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>  <h2 class="padding-bottom-3">Product Highlights</h2>
+  {% set product_highlights = [
+  {
+  "svg_src": "#send",
+  "card_heading": "Send customized one-way customized messages",
+  "p_text": "Upload a file with recipient phone numbers and Notify.gov sends customized messages",
+  },
+  {
+  "svg_src": "#translate",
+  "card_heading": "Send in recipients’ preferred language",
+  "p_text": "Notify.gov supports more than 30 character sets to send messages in almost any language",
+  },
+  {
+  "svg_src": "#trending_up",
+  "card_heading": "See how messages perform",
+  "p_text": "Track how many messages you’ve sent and monitor delivery rates",
+  },
+  {
+  "svg_src": "#add",
+  "card_heading": "Create and manage multiple services within a single organization",
+  "p_text": "Set up individual workspaces for different texting services, allowing multiple teams or programs to manage
+  day-to-day texting operations across an organization",
+  },
+  {
+  "svg_src": "#people",
+  "card_heading": "Manage team member and permissions on each service",
+  "p_text": "Administrators can add users and control what they can do in Notify.gov",
+  }
+  ] %}
+  <ul class="usa-icon-list">
+    {% for item in product_highlights %}
+    <li class="usa-icon-list__item">
+      <div class="usa-icon-list__content padding-left-0">
+        <div class="usa-icon-list__icon display-flex flex-align-start">
+          <svg aria-hidden="true" focusable="false" role="img" class="icon-list">
+            <use xlink:href="{{ asset_url('img/sprite.svg') }}{{ item.svg_src }}"></use>
+          </svg>
+          <b>{{item.card_heading}}</b>
+        </div>
+        <p class="indented-paragraph">{{item.p_text}}</p>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+  <p><a href="/join-notify">See if Notify is right for you</a></p>
+  <p>Notify.gov is a product of the <a href="/studio">Public Benefits Studio</a>, a product accelerator inside
+    the federal government. </p>
+</section>
+{% endblock %}

app/templates/views/about/security.html

@@ -0,0 +1,68 @@
+{% extends "base.html" %}
+{% import "components/nav_breadcrumb.html" as breadcrumbs %}
+
+{% set page_title = "Security" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+{{ breadcrumbs.breadcrumb(page_title, "About", "main.about_notify") }}
+
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p class="font-sans-lg text-base">Notify.gov is built for the needs of government agencies with fundamental system
+    security processes in place to:
+  </p>
+  <ul>
+    <li>protect user data</li>
+    <li>keep systems secure</li>
+    <li>manage risks around information</li>
+  </ul>
+  <p>
+    Notify.gov operates under a full three-year <a class="use-link usa-link--external"
+      href="https://digital.gov/resources/an-introduction-to-ato/" target="_blank">Authority-to-Operate (ATO)</a>. This
+    federal security authorization process leverages security
+    controls provided by National Institute of Standards and Technology (NIST).
+  </p>
+
+  <p>
+    Our infrastructure runs on <a class="use-link usa-link--external" href="https://www.cloud.gov/"
+      target="_blank">cloud.gov</a> and utilizes several
+    services through Amazon Web
+    Services (AWS), including <a class="use-link usa-link--external" href="https://aws.amazon.com/sns/" target="_blank">
+      AWS SNS </a> for sending SMS
+    messages.
+  </p>
+  <p>For more information about the Notify.gov infrastructure, contact us at <a
+      href="mailto:notify-support@gsa.gov">notify-support@gsa.gov</a>.</p>
+  <h2>Data</h2>
+  <p>
+    On Notify.gov, data is encrypted both in transit and at rest. To send a message, agencies upload a spreadsheet of
+    phone numbers and other necessary data from their existing data management system.
+  </p>
+  <p>
+    Notify.gov is not a system of record, so it does not have a System of Records Notice (SORN). Agencies are
+    responsible for managing their data outside of Notify.gov.
+  </p>
+  <h3>Data retention</h3>
+  <p>
+    Any data uploads that have recipient data are held for seven calendar days; personally identifiable information
+    (PII) is never stored in Notify’s database.
+  </p>
+  <h2>Multi-Factor Authentication</h2>
+  <p>
+    Notify.gov uses <a class="use-link usa-link--external" href="https://login.gov/what-is-login/"
+      target="_blank">Login.gov</a> for enhanced security.
+    Login.gov is an extra layer of security created by the government that uses multi-factor authentication and stronger
+    passwords to protect your account.
+  </p>
+  <p>
+    To access Notify.gov, users will use a Login.gov account associated with their agency (.gov) email with one of the
+    <a class="use-link usa-link--external" href="https://login.gov/help/get-started/authentication-methods/"
+      target="_blank">multi-factor authentication
+      methods</a> offered through Login.gov.
+  </p>
+</section>
+{% endblock %}

app/templates/views/about/why-text-messaging.html

@@ -0,0 +1,87 @@
+{% extends "base.html" %}
+{% import "components/nav_breadcrumb.html" as breadcrumbs %}
+
+{% set page_title = "Why text messaging" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+{{ breadcrumbs.breadcrumb(page_title, "About", "main.about_notify") }}
+
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <h2 id="reach-people-using-a-common-method">Reach people using a common method</h2>
+  <p>
+    Confusing or <a class="use-link usa-link--external"
+      href="https://kffhealthnews.org/news/tougher-returned-mail-policies-add-to-medicaid-enrollment-drop/"
+      target="_blank">unreceived notifications</a> are one of the largest barriers to people getting and keeping
+    benefits. The typical ways the government communicates with people often fall short. Low income households are more
+    likely to experience housing instability, which means paper mail, already slow, can easily be missed.
+  </p>
+
+  <p>
+    <a class="use-link usa-link--external"
+      href="https://www.pewresearch.org/internet/fact-sheet/mobile/?tabItem=64e32376-5a21-4b1d-8f8b-5f92406db984"
+      target="_blank">Pew Research shows that nearly all adults in the US have a cell phone.</a> Reliance on smartphones
+    for online access is especially common among Americans with lower household incomes and those with lower levels of
+    formal education. Of those earning less than $30,000 a year, 28% say their mobile phone is the sole method to
+    digitally connect.
+  </p>
+  <p>
+    This means that for many people who rely on government services, cell phones may be the most reliable place to meet
+    people where they already are.
+  </p>
+  <h2 id="improve-customer-experience">Improve customer experience</h2>
+  <p>
+    Text messages can deliver concise information and drive an audience to take action quickly. Timely reminders sent
+    via text message have been proven to decrease re-enrollment churn and save money for administering agencies.
+  </p>
+  <p>
+    Texting not only helps programs reach people using a nearly-universal communication method, it is a cost effective
+    way to do so. With Notify.gov <a href="/join-notify">you can get started for free</a>, allowing you to try out
+    texting to complement your existing communications and outreach strategies.
+  </p>
+  <h2 id="what-texting-is-best-for">What texting is best for</h2>
+  <p>
+    Agencies, like you, are already using Notify.gov to text about the following programs.
+  </p>
+  {% set card_contents = [
+  {
+  "image_src": asset_url('images/calendar.svg'),
+  "card_heading": "Reminders",
+  "p_text": "In a text bubble // Your Quality Control food phone interview is on ((date)) at ((time)). Failure to
+  attend may lead to closure of your benefits. Call 1-800-222-3333 with questions.",
+  "alt_text": "reminder text example"
+  },
+  {
+  "image_src": asset_url('images/alert.svg'),
+  "card_heading": "Alerts to take action",
+  "p_text": "In a text bubble // Your household's Medicaid coverage is expiring. To keep getting Medicaid, you must
+  complete your renewal by ((date)). You can renew online at dhs.state.gov…",
+  "alt_text": "alerts text example"
+  },
+  {
+  "image_src": asset_url('images/alarm.svg'),
+  "card_heading": "Important status updates",
+  "p_text": "In a text bubble // Your passport has been issued at the Los Angeles Passport Agency. Please come to the
+  desk between 1:30pm and 2:30pm today to pick up your passport…",
+  "alt_text": "status update text example"
+  },
+  ] %}
+  {% for item in card_contents %}
+  <div class="radius-lg border-2px maxw-tablet">
+    <div class="grid-row grid-gap-4 padding-2 padding-x-3 flex-align-center">
+      <div class="grid-col flex-3">
+        <p><b>{{item.card_heading}}</b></p>
+        <p>{{item.p_text}}</p>
+      </div>
+      {% if item.image_src %}
+      <img src="{{item.image_src}}" alt="{{ item.alt_text }}" class="height-15" />
+      {% endif %}
+    </div>
+  </div>
+  {% endfor %}
+</section>
+{% endblock %}

app/templates/views/acceptable-use-policy.html

@@ -0,0 +1,38 @@
+{% extends "base.html" %}
+
+{% set page_title = "Acceptable Use Policy" %}
+
+{% block per_page_title %}{{page_title}}{% endblock %}
+
+{% block content_column_content %}
+
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p>Use of the application indicates agreement with this acceptable use policy.</p>
+  <p>Acceptable uses of Notify.gov for this trial period include:</p>
+  <ul>
+    <li>Configuring test services and sending test SMS messages to learn and demonstrate how Notify.gov works.</li>
+    <li>Reviewing data provided by Notify.gov and configuring available settings.</li>
+  </ul>
+  <p>
+    In order to help us keep Notify.gov secure, we require that you use your account appropriately. When you use Notify.gov, you agree that you’ll respect these rules of behavior:
+  </p>
+  <ul>
+    <li>Conduct only authorized business on the system.</li>
+    <li>Maintain the confidentiality of your authentication credentials; a Notify.gov operator should never ask you to reveal them. We recommend using a password manager and strong credentials.</li>
+    <li>Log out when you no longer need session access. Never leave your computer unattended while logged into Notify.gov.</li>
+    <li>Report all security incidents or suspected incidents (such as improper or suspicious acts) related to Notify.gov systems and networks to Notify.gov support.</li>
+    <li>Safeguard system resources against waste, loss, abuse, unauthorized use or disclosure, and misappropriation.</li>
+    <li>Don’t process U.S. classified national security information on the system.</li>
+    <li>Don’t browse, search or reveal information hosted by Notify.gov except as required to perform your legitimate tasks or assigned duties.</li>
+    <li>Don’t retrieve information, or in any other way disclose information, for someone who does not have authority to access that information.</li>
+    <li>Don’t intentionally use a client that makes use of obsolete or insecure encryption algorithms.</li>
+    <li>Don’t configure your browser to ignore security warnings which may involve your connection with Notify.gov; report warnings that you can’t explain to Notify.gov support.</li>
+    <li>If you believe you’ve been granted more access than necessary to perform your legitimate tasks or assigned duties, immediately notify Notify.gov support.</li>
+    <li>Don’t share your account with another person or create anonymous or group accounts. Your account is just for you.</li>
+  </ul>
+  <p>Access to systems and networks owned by Notify.gov is governed by, and subject to, all federal laws, including, but not limited to, the Privacy Act, 5 U.S.C. 552a, if the applicable Notify.gov system maintains individual Privacy Act information. Access to Notify.gov systems constitutes consent to the retrieval and disclosure of the information within the scope of your authorized access, subject to the Privacy Act, and applicable state and federal laws.</p>
+  <p>Please contact Notify.gov support if you have questions about these rules or don’t understand them.</p>
+</section>
+
+{% endblock %}

app/templates/views/activity/all-activity.html

@@ -60,7 +60,7 @@
     <h2 class="margin-top-4 margin-bottom-1">Sent jobs</h2>
     <div class="usa-table-container--scrollable-mobile">
       <table class="usa-table usa-table--compact job-table">
-        <caption></caption>
+        <caption class="usa-sr-only">Table showing all sent jobs for this service</caption>
         <thead class="table-field-headings">
           <tr>
             <th scope="col" role="columnheader" class="table-field-heading-first" id="jobId">
@@ -90,7 +90,7 @@
           {% if all_jobs_dict %}
             {% for job in all_jobs_dict %}
               <tr class="table-row">
-                <td class="table-field jobid" scope="row" role="rowheader">
+                <td class="table-field jobid" role="rowheader">
                   <a class="usa-link" href="{{ job.view_job_link }}">
                     {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
                   </a>
@@ -103,7 +103,10 @@
                 <td class="table-field sender">{{ job.created_by.name }}</td>
                 <td class="table-field report">
                   {% if job.time_left != "Data no longer available" %}
-                    <a href="{{ job.download_link }}"><img src="{{ url_for('static', filename='img/material-icons/file_download.svg') }}" alt="File Download Icon"></a>
+                    <a href="{{ job.download_link }}">
+                      <img src="{{ url_for('static', filename='img/material-icons/file_download.svg') }}" alt="">
+                      <span class="usa-sr-only">Download report link</span>
+                    </a>
                   {% else %}
                     <span>N/A</span>
                   {% endif %}

app/templates/views/check/ok.html

@@ -2,7 +2,6 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/components/button/macro.njk" import usaButton %}
-{% from "components/components/skip-link/macro.njk" import usaSkipLink %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
 
 {% set file_contents_header_id = 'file-preview' %}

app/templates/views/check/preview.html

@@ -3,7 +3,6 @@
 {% from "components/table.html" import list_table, field, text_field, hidden_field_heading %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/components/button/macro.njk" import usaButton %}
-{% from "components/components/skip-link/macro.njk" import usaSkipLink %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
 
 {% set file_contents_header_id = 'file-preview' %}
@@ -34,7 +33,7 @@
   <div>
     <ul class="usa-icon-list">
       <li class="usa-icon-list__item">
-        <img src="{{ url_for('static', filename='img/material-icons/description.svg') }}" alt="Description Icon">
+        <img src="{{ url_for('static', filename='img/material-icons/description.svg') }}" alt="">
         <div class="usa-icon-list__content">
           <h3>{{ original_file_name }}</h3>
         </div>

app/templates/views/contact.html

@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+
+{% set page_title = "Contact" %}
+
+{% block per_page_title %}{{page_title}}{% endblock %}
+
+{% block content_column_content %}
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p>Is your organization interested in using Notify.gov? Find more information at <a href="/join-notify">Join
+      Notify</a> or contact us at <a href="mailto:tts-notify@gsa.gov"
+      aria-label="contact us at tts-notify@gsa.gov">tts-notify@gsa.gov</a>.</p>
+  <p>You can expect a response within one business day.</p>
+  <div class="usa-summary-box maxw-tablet __web-inspector-hide-shortcut__" role="region"
+    aria-label="For partnership inquiries">
+    <div class="usa-summary-box__body">
+      <div class="usa-summary-box__text">
+        <p class="margin-0">If you are a current Notify.gov partner and have technical issues or questions, we are available at <a
+            href="mailto:notify-support@gsa.gov"
+            aria-label="Email Notify for technical questions at notify-support@gsa.gov">notify-support@gsa.gov</a></p>
+      </div>
+    </div>
+  </div>
+</section>
+{% endblock %}

app/templates/views/dashboard/dashboard.html

@@ -13,7 +13,7 @@
   <script type="text/javascript" src="{{ asset_url('js/setTimezone.js') }}"></script>
 
 
-  <div class="dashboard margin-bottom-2">
+  <div class="dashboard margin-top-0 margin-bottom-2">
 
     <h1 class="usa-sr-only">Dashboard</h1>
     {% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
@@ -22,7 +22,7 @@
 
     {{ ajax_block(partials, updates_url, 'upcoming') }}
 
-    <h2 class="font-body-xl margin-top-0">{{ current_service.name }} Dashboard</h2>
+    <h2 class="font-body-2xl line-height-sans-2 margin-top-0">{{ current_service.name }} Dashboard</h2>
 
     {{ ajax_block(partials, updates_url, 'inbox') }}
 
@@ -38,7 +38,7 @@
       <form class="usa-form">
         <label class="usa-label" for="options">Account</label>
         <select class="usa-select margin-bottom-2" name="options" id="options">
-          <option value>- Select -</option>
+          <option value disabled>- Select -</option>
           <option value="service" selected>{{ current_service.name }}</option>
           <option value="individual">{{ current_user.name }}</option>
         </select>
@@ -60,6 +60,7 @@
       <div id="table1" class="table-overflow-x-auto hidden">
         <h2 class="margin-top-4 margin-bottom-1">My activity</h2>
         <table class="usa-table job-table">
+          <caption class="usa-sr-only">Table showing the sent jobs for {{current_user.name}}</caption>
           <thead class="table-field-headings">
             <tr>
               <th scope="col" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>
@@ -74,7 +75,7 @@
                 {% if job.created_by.name == current_user.name %}
                   {% set notification = job.notifications[0] %}
                   <tr id="{{ job.job_id }}">
-                    <td class="table-field jobid" scope="row" role="rowheader">
+                    <td class="table-field jobid" role="rowheader">
                       <a class="usa-link" href="{{ job.view_job_link }}">
                         {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
                       </a>
@@ -100,6 +101,7 @@
       <div id="table2" class="table-overflow-x-auto visible">
         <h2 class="margin-top-4 margin-bottom-1">Service activity</h2>
         <table class="usa-table job-table">
+          <caption class="usa-sr-only">Table showing the sent jobs for this service</caption>
           <thead class="table-field-headings">
             <tr>
               <th scope="col" role="columnheader" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>
@@ -114,7 +116,7 @@
               {% for job in jobs[:5] %}
                 {% set notification = job.notifications[0] %}
                 <tr id="{{ job.job_id }}">
-                  <td class="table-field jobid" scope="row" role="rowheader">
+                  <td class="table-field jobid" role="rowheader">
                     <a class="usa-link" href="{{ job.view_job_link }}">
                       {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
                     </a>

app/templates/views/dashboard/write-first-messages.html

@@ -1,4 +1,6 @@
-<h2 class="font-body-lg margin-top-0 margin-bottom-1">Get started</h2>
-<a class="usa-button margin-bottom-5" href="{{ url_for('.choose_template', service_id=current_service.id) }}">
-  Create your first template
-</a>
+<div class="get-started">
+  <h2 class="font-body-lg margin-top-0 margin-bottom-2">Get started</h2>
+  <a class="usa-button" href="{{ url_for('.choose_template', service_id=current_service.id) }}">
+    Create your first template
+  </a>
+</div>

app/templates/views/features.html

@@ -11,10 +11,8 @@
 
 <h1 class="font-body-2xl">Features</h1>
 <p class="usa-body">If you work for the government, you can use Notify.gov to keep your users updated.</p>
-<p class="usa-body">Notify makes it easy to create, customize, and send <a class="usa-link" href="{{ url_for('main.features_sms') }}">text messages</a>.</p>
-<!-- <ul class="list list-bullet">
-  <li><a class="usa-link" href="{{ url_for('main.features_sms') }}">text messages</a></li>
-</ul> -->
+<p class="usa-body">Notify makes it easy to create, customize, and send text messages</a>.</p>
+
 <p class="usa-body">You do not need any technical knowledge to use Notify.</p>
 {% if not current_user.is_authenticated %}
   <p class="usa-body"><a class="usa-link" href="{{ url_for('main.register') }}">Create an account</a> for free and try it yourself.</p>

app/templates/views/guidance/index.html

@@ -8,237 +8,103 @@
 {% endblock %}
 
 {% block content_column_content %}
+<h1 class="font-body-2xl margin-bottom-3">Guidance</h1>
 
-  <h1 class="font-body-2xl margin-bottom-3">Guidance</h1>
+<p>Notify allows you to easily create templates for messages for your recipients. You can customize messages to encourage
+your recipient to manage their benefits and increase follow-through.</p>
+<p>Below we explain how to:</p>
 
-  <p>Notify allows you easily to create templates for messages for your recipients. You can customize messages to encourage
-  your recipient to manage their benefits and increase follow through.</p>
-  <p>Below we explain how to:</p>
+<ul class="list list-bullet">
+  <li><a class="usa-link" href="#personalize-content">Personalize your content</a></li>
+  <li><a class="usa-link" href="#conditional-content">Add conditional content</a></li>
+</ul>
 
-  <ul class="list list-bullet">
-    <li><a class="usa-link" href="#format-content">Format your content</a></li>
-    <li><a class="usa-link" href="#add-links">Add links</a></li>
-    <li><a class="usa-link" href="#personalize-content">Personalize your content</a></li>
-    <li><a class="usa-link" href="#conditional-content">Add conditional content</a></li>
-    <li><a class="usa-link" href="#indentify-program">Identify your program</a></li>
-    <li><a class="usa-link" href="#prepare-data">Prepare your data</a></li>
-    <li><a class="usa-link" href="#prevent-fraud">Prevent fraud</a></li>
-  </ul>
-
-  {# Format content #}
-  <h2 class="padding-top-1" id="format-content">Format your content</h2>
-  <p>Effective texts will help your message recipients take the steps needed to secure and keep the benefits and services
-  they depend on. To craft an effective text:</p>
-
-  <ul class="list list-bullet">
-    <li>Choose your messages thoughtfully. Text messages are best to remind/nudge someone to take a specific action or
-    communicate information at a particular time rather than pushing out broad or overly general information.</li>
-    <li>Clearly state the issue and expected response. Tell your recipient what you expect from them.</li>
-    <li>Say only one important thing per message.</li>
-    <li>Frame the message to encourage action and explain the consequences of not completing the desired action.</li>
-  </ul>
-
-  <h3>To create and format your message</h3>
-  <ol class="list">
-    <li>All messages start from a template</li>
-    <li>Click "<a href={{ url_for('.choose_template', service_id=current_service.id) }}>Send Messages</a>". You'll see existing templates.</li>
-    <li>Add a new template or choose an existing template and select Edit.</li>
-  </ol>
-
-  {# Add links #}
-  <h2 class="padding-top-1" id="add-links">Add links</h2>
-  <p>When composing a text message, links to websites or online applications can help your recipient respond quickly.</p>
-
-  <ul class="list list-bullet">
-    <li>Write URLs in full and Notify will convert them into links for you. Note that you cannot hyperlink text in Notify
-    messages.</li>
-    <li>For link click tracking, you can consider adding campaign parameters to URLs.</li>
-    <li>All links should point to a government domain.</li>
-    <li>Link directly to where your recipient needs to take action, not to more information.</li>
-  </ul>
-
-  <h3>About link-shortening services</h3>
-  <p>We do not recommend using a third-party link-shortening service because:</p>
-  <ul class="list list-bullet">
-    <li>Your recipient cannot see where the link will take them, which could make them suspect the link is spam/scam.</li>
-    <li>Your link might stop working if there’s a service outage.</li>
-    <li>You can no longer control where the redirect goes.</li>
-  </ul>
-
-  {# Personalize content #}
-  <h2 class="padding-top-1" id="personalize-content">Personalize your content</h2>
-  <p>Personalizing your content can increase response rates and help the recipient know the text is legitimate.</p>
-  <ul class="list list-bullet">
-    <li>Including a person's first name increases response rates.</li>
-    <li>Specific details such as time and location of an appointment or where suspected fraud use occurred encourages action.</li>
-  </ul>
-
-  <h3>To personalize your content</h3>
-  <ol class="list">
-    <li>Add a placeholder to your content by placing two brackets around the personalized elements.</li>
-    <li>You can manually enter the personalized content or you can upload a spreadsheet with the details and let Notify do the
-    work for you. See <a href="#prepare-data">data preparation</a>.</li>
-  </ol>
-
-  <h4>Example</h4>
-  <p>To personalize with the recipient's first name and include a reference number:</p>
-  <p class="padding-2 bg-base-lightest">State WIC: Hello ((first name)), your reference is ((ref number)). Please provide this number when you call 555-123-1234 to make an appointment.</p>
-
-  <p>Note that variations in the length of personalized content can impact the length of specific messages, and may affect
-  the number of parts used.</p>
-
-  {# Add conditional content #}
-  <h2 class="padding-top-1" id="conditional-content">Add conditional content</h2>
-  <p>Conditional (or optional) content appears only when a recipient meets certain criteria. This feature allows you to make
-  all or part of the message contingent upon specific criteria associated with the recipient.</p>
-
-  <h3>To add conditional content</h3>
-  <ol class="list">
-    <li>Use two brackets and ?? to define the conditional content.</li>
-    <li>You can manually enter the conditional content or you can upload a spreadsheet with the personal details and let Notify
-    do the work for you. See <a href="#prepare-data">data preparation</a>.</li>
-  </ol>
-
-  <h4>Examples</h4>
-  <ol class="list">
-    <li>If you only want to show something to people who are under 18:
-      </br>
-      <p class="padding-2 bg-base-lightest">State SNAP: Renewal applications are due by March 15. ((under18??Please get your application signed by a parent or
-      guardian.))</p>
-    </li>
-    <li>
-      If you want to make people who are homebound aware of the option of virtual visits (but not other message recipients):
-      </br>
-      <p class="padding-2 bg-base-lightest">State Medicaid: Please call 555-123-1234 to schedule an appointment. ((homebound??Virtual visits are available.))</p>
-    </li>
-    <li>
-      If you want to send a messages in different languages to different recipients:
-      </br>
-      <p class="padding-2 bg-base-lightest">((English??We’ve identified unauthorized use on your EBT account. Call the phone number on the back of your card to
-      cancel or go to your local CSO for immediate replacement.))((Spanish??Hemos identificado un uso no autorizado en su
-      cuenta EBT. Llame al número de teléfono que aparece en el reverso de su tarjeta para cancelarla o diríjase a su CSO
-      local para que se la sustituyan inmediatamente.))</p>
-    </li>
-  </ol>
+{# Format content #}
+<h2 class="padding-top-1" id="format-content">Format your content</h2>
 
 
-  {# Identify your program #}
-  <h2 class="padding-top-1" id="indentify-program">Identify your program</h2>
-  <p>You can help your recipients identify your texts as legitimate by customizing your messages to clearly state who they
-  are from. Consider using the program or benefit name that is most familiar to your recipients.</p>
+<h3>To create and format your message</h3>
+<ol class="list">
+  <li>All messages start from a template</li>
+  <li>Click "<a href={{ url_for('.choose_template', service_id=current_service.id) }}>Send Messages</a>". You'll see existing templates.</li>
+  <li>Add a new template or choose an existing template and select Edit.</li>
+</ol>
 
-  <h3>To customize your program name</h3>
-  <p>To change the text message sender from the default service name:</p>
-  <ol class="list">
-    <li>Go to the <a href="{{ url_for('main.service_settings', service_id=current_service.id) }}">Settings page</a></li>
-    <li>Select “Start text messages with service name.”</li>
-    <li>Change the service name to a familiar program or benefit.</li>
-  </ol>
+{# Add links #}
+<p>When composing a text message, links to websites or online applications can help your recipient respond quickly.</p>
 
-  {# Prepare your data #}
-  <h2 class="padding-top-1" id="prepare-data">Prepare your data</h2>
-  <p>The easiest and most efficient way to personalize your content is by uploading a spreadsheet. Notify can accommodate
-  many file formats and structures.</p>
+<ul class="list list-bullet">
+  <li>Write URLs in full and Notify will convert them into links for you. Note that you cannot hyperlink text in Notify
+  messages.</li>
+  <li>For link click tracking, you can consider adding campaign parameters to URLs.</li>
+  <li>All links should point to a government domain.</li>
+  <li>Link directly to where your recipient needs to take action, not to more information.</li>
+</ul>
 
-  <h3>File format</h3>
-  <p>Notify can accept files in the following formats: CSV, TSV, ODS, and Microsoft Excel.</p>
+<h3>About link-shortening services</h3>
+<p>We do not recommend using a third-party link-shortening service because:</p>
+<ul class="list list-bullet">
+  <li>Your recipient cannot see where the link will take them, which could make them suspect the link is spam/scam.</li>
+  <li>Your link might stop working if there’s a service outage.</li>
+  <li>You can no longer control where the redirect goes.</li>
+</ul>
 
-  <h3>File structure</h3>
-  <ul class="list">
-    <li>The phone number must be in the first column (Column A) and must be labeled <strong>Phone number</strong>.</li>
-    <li>Each column must have a unique name.</li>
-    <li>If you are using Excel, you must either disable the”auto-date/time format” for time and date columns or convert the file
-    to a CSV prior to loading. (If you do not, Excel will display date/time data in a confusing format.)</li>
-  </ul>
+{# Personalize content #}
+<h2 class="padding-top-1" id="personalize-content">Personalize your content</h2>
+<p>Personalizing your content can increase response rates and help the recipient know the text is legitimate.</p>
+<ul class="list list-bullet">
+  <li>Including a person's first name increases response rates.</li>
+  <li>Specific details such as time and location of an appointment or where suspected fraud use occurred encourages action.</li>
+</ul>
 
-  <h3>Formatting personalized content</h3>
-  <p>If you are sending a message with personalized content, such as the first name of the recipient or the appointment time
-  and location, the names of the column headings have to match the indicator included in the message template.</p>
-  <p>For example, if the personalized content is the first name of the recipient, and we are using the spreadsheet below, the
-  indicator in the message needs to be ((First name)), not ((firstname)) or ((name)).</p>
+<h3>To personalize your content</h3>
+<ol class="list">
+  <li>Add a placeholder to your content by placing two brackets around the personalized elements.</li>
+  <li>You can manually enter the personalized content or you can upload a spreadsheet with the details and let Notify do the
+  work for you. See <a href="#prepare-data">data preparation</a>.</li>
+</ol>
 
-  <h3>Formatting conditional content</h3>
-  <p>If you are sending messages with conditional content, such as content based on the recipient’s preferred language or
-  location, the flag to receive the content needs to be captured in its own column with a Yes or No (Y/N) flag.</p>
+<h4>Example</h4>
+<p>To personalize with the recipient's first name and include a reference number:</p>
+<p class="padding-2 bg-base-lightest">State WIC: Hello ((first name)), your reference is ((ref number)). Please provide this number when you call 555-123-1234 to make an appointment.</p>
 
-  <h3>Example</h3>
-  <div class="table-overflow-x-auto">
-    <table class="usa-table">
-      <caption class="usa-sr-only">
-        Example
-      </caption>
-      <thead>
-        <tr>
-          <th scope="col">Phone number</th>
-          <th scope="col">First name</th>
-          <th scope="col">Last name</th>
-          <th scope="col">Spanish</th>
-          <th scope="col">English</th>
-          <th scope="col">Date</th>
-          <th scope="col">Time</th>
-          <th scope="col">Location</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>123-456-7890</td>
-          <td>Lulu</td>
-          <td>Praether</td>
-          <td>N</td>
-          <td>Y</td>
-          <td>November 2, 2023</td>
-          <td>3:25</td>
-          <td>123 Ford Rd.</td>
-        </tr>
-        <tr>
-          <td>234-567-8901</td>
-          <td>Sela</td>
-          <td>Appel</td>
-          <td>Y</td>
-          <td>N</td>
-          <td>November 2, 2023</td>
-          <td>4:00</td>
-          <td>123 Ford Rd.</td>
-        </tr>
-        <tr>
-          <td>123-456-7890</td>
-          <td>Dexter</td>
-          <td>Moseley</td>
-          <td>N</td>
-          <td>Y</td>
-          <td>November 2, 2023</td>
-          <td>2:00</td>
-          <td>123 Ford Rd.</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+<p>Note that variations in the length of personalized content can impact the length of specific messages, and may affect
+the number of parts used.</p>
 
-  {# Preventing fraud #}
-  <h2 class="padding-top-1" id="prevent-fraud">Preventing fraud</h2>
-  <p>Texting fraud is ever prevalent and while we can’t eliminate the risk, we can reduce the chances that recipients will
-  fall victim to fraud.</p>
-  <ol class="list">
-    <li>Never send unnecessary or protected private information.</li>
-    <li>Remind your recipients that text messaging is not a secure means of communication and they should not send you private
-    information via text.</li>
-    <li>Only include links to websites and online applications that are secure.</li>
-    <li>Send an introductory text letting recipients know you will be texting them and to save the number in their phone.</li>
-    <li>Include an auto-response with the name of your organization and a contact phone number.</li>
-  </ol>
+{# Add conditional content #}
+<h2 class="padding-top-1" id="conditional-content">Add conditional content</h2>
+<p>Conditional (or optional) content appears only when a recipient meets certain criteria. This feature allows you to make
+all or part of the message contingent upon specific criteria associated with the recipient.</p>
 
-  <h3>Examples</h3>
-  <ol class="list">
-    <li>Introductory text:
-      </br>
-      <p class="padding-2 bg-base-lightest">State Transit Dept: We're piloting a new way to get important reminders to our staff. Save this number to your phone,
-      you'll receive updates from us here.</p>
-    </li>
-    <li>Auto-response text:
-      </br>
-      <p class="padding-2 bg-base-lightest">State Agency: This number is unmonitored. To contact us, call us at 555-123-1234. We will never ask for personal details
-      in a text. If you have questions about how to protect your privacy, see statename.gov/privacy.</p>
-    </li>
-  </ol>
+<h3>To add conditional content</h3>
+<ol class="list">
+  <li>Use two brackets and ?? to define the conditional content.</li>
+  <li>You can manually enter the conditional content or you can upload a spreadsheet with the personal details and let Notify
+  do the work for you. See <a href="#prepare-data">data preparation</a>.</li>
+</ol>
+
+<h4>Examples</h4>
+<ol class="list">
+  <li>If you only want to show something to people who are under 18:
+    </br>
+    <p class="padding-2 bg-base-lightest">State SNAP: Renewal applications are due by March 15. ((under18??Please get your application signed by a parent or
+    guardian.))</p>
+  </li>
+  <li>
+    If you want to make people who are homebound aware of the option of virtual visits (but not other message recipients):
+    </br>
+    <p class="padding-2 bg-base-lightest">State Medicaid: Please call 555-123-1234 to schedule an appointment. ((homebound??Virtual visits are available.))</p>
+  </li>
+  <li>
+    If you want to send a messages in different languages to different recipients:
+    </br>
+    <p class="padding-2 bg-base-lightest">((English??We’ve identified unauthorized use on your EBT account. Call the phone number on the back of your card to
+    cancel or go to your local CSO for immediate replacement.))((Spanish??Hemos identificado un uso no autorizado en su
+    cuenta EBT. Llame al número de teléfono que aparece en el reverso de su tarjeta para cancelarla o diríjase a su CSO
+    local para que se la sustituyan inmediatamente.))</p>
+  </li>
+</ol>
+
+...
 
 {% endblock %}

app/templates/views/guides/benchmark-performance.html

@@ -0,0 +1,115 @@
+{% extends "base.html" %}
+{% import "components/nav_breadcrumb.html" as breadcrumbs %}
+
+{% set page_title = "Measuring performance with benchmarking" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+{{ breadcrumbs.breadcrumb(page_title, "Best Practices", "main.best_practices") }}
+
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p class="font-sans-lg text-base">Learn how effective your texting program can be.</p>
+
+  <p>
+    Several factors determine a messaging campaign’s success, but the performance of previous projects can help set
+    expectations. Get to know what other government texting initiatives have done as a way to benchmark your own
+    performance.
+  </p>
+  <h2>What other texting studies have found</h2>
+  <p>
+    When the <a class="use-link usa-link--external"
+      href="https://www.cbpp.org/research/food-assistance/targeted-text-message-outreach-can-increase-wic-enrollment-pilots-show"
+      target="_blank">Center on Budget and Policy Priorities</a> studied WIC, they found key learnings about the
+    quantity of messages delivered, how people engage with messages, and how they take action.
+  </p>
+
+  <h3>Message delivery</h3>
+  <p class="text-light">Benchmark: <span class="text-bold">80%</span> of texts are
+    successfully delivered
+  </p>
+  <ul>
+    <li>
+      <p>
+        You may discover that some numbers are temporarily or permanently unavailable due to service being
+        discontinued,
+        numbers changing, or being a landline.
+      </p>
+    </li>
+  </ul>
+
+  <h3>Engagement</h3>
+  <p class="text-light">Benchmark: Engagement rates with texts ranged from <span
+      class="text-bold">17%</span>
+    to <span class="text-bold">26%</span></p>
+  <ul>
+    <li>
+      <p>
+        The highest rate of engagement with a text comes within hours of sending. Engagement rates include any kind
+        of
+        action taken due to a text, including replying “STOP” to prevent future texts.
+      </p>
+    </li>
+  </ul>
+
+  <h3>Appointment requests</h3>
+    <p class="text-light">Benchmark: Requesting appointments after receiving texts ranged
+      from <span class="text-bold">4%</span> to <span class="text-bold">9%</span></p>
+  <ul>
+    <li>
+      <p>
+        Requesting appointments is a specific type of engagement. Provide a phone number or link to an online
+        appointment
+        request form.
+      </p>
+    </li>
+  </ul>
+  <p>
+    The <a class="use-link usa-link--external" href="https://codeforamerica.org/resources/texting-playbook/"
+      target="_blank">Code for America’s Texting
+      Playbook</a>
+    reported specific learnings around appointment reminders, completing
+    document submission, and maintenance reminders.
+  </p>
+  <h3>Appointment reminders</h3>
+  <p class="text-light">Benchmark: Clients were <span class="text-bold">79%</span> more
+    likely to keep their appointment after receiving a text reminder.</p>
+  <ul>
+    <li>
+      <p>You will likely see more completed appointments.</p>
+    </li>
+  </ul>
+  <p class="text-light">Benchmark: Clients were <span class="text-bold">55%</span> more
+    likely to complete an interview after receiving an interview reminder</p>
+  <ul>
+    <li>
+      <p>You will likely see more completed interviews.</p>
+    </li>
+  </ul>
+
+  <h3>Document submission</h3>
+    <p class="text-light">
+      Benchmark: Clients were <span class="text-bold">6%</span> more likely to complete document submission after
+      receiving a customized list of required documents via text
+    </p>
+  <ul>
+    <li>
+      <p>To encourage response, provide a custom list of the needed documents and information about how to submit
+        them.
+      </p>
+    </li>
+  </ul>
+
+  <h3 class="font-body-xl">Reminders</h3>
+  <p class="text-light">Benchmark: Text reminders improved case maintenance rates by <span
+      class="text-bold">21%</span></p>
+  <ul>
+    <li>
+      <p>You may see less turnover in your case rates.</p>
+    </li>
+  </ul>
+</section>
+{% endblock %}

app/templates/views/guides/best-practices.html

@@ -0,0 +1,65 @@
+{% extends "base.html" %}
+
+{% set page_title = "Best Practices" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+<section class="usa-prose">
+  <h1>Best Practices</h1>
+  <p class="font-sans-lg text-base">For texting the public</p>
+  <p>Effectively reaching your audience and supporting your program’s goals starts with strategically planning out what
+    text messages can help you achieve and how to approach a thoughtful rollout.
+  </p>
+
+  <p>This set of best practices will help you get an effective texting initiative up and running.</p>
+  <h2 class="padding-bottom-4">
+    Key elements of a texting campaign
+  </h2>
+
+  {% set card_contents = [
+  {
+  "svg_src": "goal",
+  "card_heading": "Establish clear goals",
+  "p_text": "Start with a singular purpose. Make explicit what you want to achieve.",
+  "link": "/using-notify/best-practices/clear-goals"
+  },
+  {
+  "svg_src": "compliant",
+  "card_heading": "Follow rules & regulations",
+  "p_text": "Understand what is required when texting the public.",
+  "link": "/using-notify/best-practices/rules-and-regulations"
+  },
+  {
+  "svg_src": "trust",
+  "card_heading": "Establish trust",
+  "p_text": "Help your audience anticipate and welcome your texts.",
+  "link": "/using-notify/best-practices/establish-trust"
+  },
+  {
+  "svg_src": "runner",
+  "card_heading": "Write texts that provoke action",
+  "p_text": "Help your audience know what to do with the information you send.",
+  "link": "/using-notify/best-practices/write-for-action"
+  },
+  {
+  "svg_src": "language",
+  "card_heading": "Send texts in multiple languages",
+  "p_text": "What to know as you plan translated texts.",
+  "link": "/using-notify/best-practices/multiple-languages"
+  },
+  {
+  "svg_src": "chart",
+  "card_heading": "Measure performance with benchmarking",
+  "p_text": "Learn how effective your texting program can be.",
+  "link": "/using-notify/best-practices/benchmark-performance"
+  }
+  ] %}
+
+  {% with card_contents=card_contents %}{% include "components/guides/cards.html" %}{%
+  endwith %}
+
+</section>
+{% endblock %}

app/templates/views/guides/clear-goals.html

@@ -0,0 +1,203 @@
+{% extends "base.html" %}
+{% import "components/nav_breadcrumb.html" as breadcrumbs %}
+
+{% set page_title = "Establish clear goals" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+{{ breadcrumbs.breadcrumb(page_title, "Best Practices", "main.best_practices") }}
+
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p class="font-sans-lg text-base">Start with a singular purpose. Make explicit what you want to achieve.</p>
+  <div class="grid-row grid-gap-3">
+    <div class="tablet:grid-col">
+      <p>Text messaging should be one part of how you communicate with the people you serve, and it is best used to
+        provoke
+        action or influence behavior. Therefore, when starting to plan your texting campaign, it’s important to start
+        with
+        the end in mind.
+      </p>
+      <div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
+        <div class="usa-summary-box__body">
+          <p class="usa-summary-box__heading" id="summary-box-establish-clear-goals">
+            To establish clear goals, start by answering the following questions:
+          </p>
+          <div class="usa-summary-box__text">
+            <ul class="usa-list">
+              <li><i>Who</i> do you want to text?</li>
+              <li><i>At what moments</i> do you want to text them?</li>
+              <li><i>Why</i> do you want to text them?</li>
+              <li>What do you want them to <i>do</i>?</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tablet:grid-col width-full padding-top-3">
+      <div class="grid-container">
+        <div class="usa-card__container border-0 width-full overflow-hidden maxh-mobile-lg">
+          <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
+          <div class="position-absolute flex text-center padding-5 padding-top-15">
+            <p class="sms-message-wrapper text-left">Dept. of Human Services: We believe your EBT card may have been
+              used by
+              someone else. Please call the number on the back of your card (888-123-5555) to cancel and get a new
+              one.
+              If
+              you
+              need a new card immediately, please visit your local office.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <hr>
+  <h2>When should you send a text?</h2>
+  <div class="grid-row grid-gap-3">
+    <div class="tablet:grid-col">
+      <div class="do-dont">
+        <div class="do-dont__do">
+          <h3 class="do-dont__heading"><a id="what-to-do" class="usa-anchor"></a>
+            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+              <use xlink:href="{{ url_for('static', filename='img/sprite.svg') }}#check_circle"></use>
+            </svg>
+            What to do
+          </h3>
+          <div class="do-dont__content">
+            <p><b>Use texting to</b> share timely
+              information, provide critical status updates, or remind someone to do something.</p>
+            <p class="margin-bottom-2">Examples:</p>
+
+            {% set list_item_dos = [
+            {
+            "list_content": "Your application is due on…",
+            },
+            {
+            "list_content": "We need more information from you to process your application for…",
+            },
+            {
+            "list_content": "We will be calling you about…at…",
+            },
+            {
+            "list_content": "We will be calling you about…at…",
+            },
+            ] %}
+            <ul>
+              {% for item in list_item_dos %}
+              <li>
+                {{item.list_content}}
+              </li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tablet:grid-col">
+      <div class="do-dont">
+        <div class="do-dont__dont">
+          <h3 class="do-dont__heading"><a id="what-not-to-do" class="usa-anchor"></a>
+            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+              <use xlink:href="{{ url_for('static', filename='img/sprite.svg') }}#cancel"></use>
+            </svg> What not to do
+          </h3>
+          <div class="do-dont__content">
+            <p>Texting is <b>not great for</b> long,
+              detailed instructions or frequent reminders that may be ignored.
+            </p>
+            <p class="margin-bottom-2">Examples:</p>
+            {% set list_item_donts = [
+            {
+            "list_content": "Your rights and responsibilities",
+            },
+            {
+            "list_content": "How to complete your application",
+            },
+            {
+            "list_content": "Weekly reminder not to share your account information",
+            },
+            ] %}
+            <ul>
+              {% for item in list_item_donts %}
+              <li>
+                {{item.list_content}}
+              </li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <p>Your program may already be communicating with your audience through methods like mailed notices and phone calls.
+    Think of text messages as complementary to your existing communications. Review how well you are currently reaching
+    your audience. Are there methods or gaps that could be supplemented with a text message?
+  </p>
+  <p>
+    The Department of Veterans Affairs provides a <a class="use-link usa-link--external"
+      href="https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/va-notify/notification-guide.md#vanotify-notification-guide"
+      target="_blank">helpful flow-chart</a> that can help you decide if a text message is needed
+    for the communication problem you are trying to solve.
+  </p>
+  <h2>Use a hypothesis framework to plan your campaign</h2>
+  <p>
+    Think of your texting campaign as a scientific experiment, and try to articulate what you hope to improve as a
+    result of implementing text messaging at your agency. For example:
+  </p>
+  <div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
+    <div class="usa-summary-box__body">
+      <div class="usa-summary-box__text">
+        <p class="margin-top-0 font-body-lg">
+          We believe that texting <i>[specific group of people]</i> when <i>[this happens or on this
+            cadence]</i> to inform/alert them about <i>[subject]</i> will result in <i>[desired action]</i>.
+        </p>
+      </div>
+    </div>
+  </div>
+  <p>
+    Review your drafted hypothesis with your team to make sure everyone is aligned on your desired goals. A clear and
+    concise hypothesis can help you decide how to <a href="../best-practices/write-for-action">write text message
+      content
+      that provokes action</a>.
+  </p>
+  <h2>Begin with a small test</h2>
+  <p>
+    To help you decide how much to invest in text messaging over time, we highly recommend starting small and testing
+    your message campaigns to refine based on feedback and evidence.
+  </p>
+  <p>
+    Starting small has less risk and more flexibility. It can help you gather data and decide <i>if and how</i> to send
+    more text messages. For example, start by sending one message to a smaller sample of your audience and track their
+    resulting behavior.
+  </p>
+  <p>
+    At a minimum, make sure to get feedback on your message content from staff, community-based organizations, and,
+    ideally, from people who receive the texts themselves to ensure your messages are clear and actionable.
+  </p>
+  <h2>Measure performance</h2>
+  <p>Building and operationalizing a texting initiative requires time and effort, and you want to be able to demonstrate
+    the results of that effort.</p>
+  <div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
+    <div class="usa-summary-box__body">
+      <div class="usa-summary-box__text">
+        <p class="margin-top-0">
+          To understand if your texting program is successful, ask:
+        </p>
+        <ul class="usa-list">
+          <li>What do you want to be different for your program or your desired audience after a text message is sent,
+            as compared to your current state?</li>
+          <li>How will you know if text recipients take the desired action?</li>
+          <li>Do you have access to existing data in your system that you could use to determine whether texting is
+            giving you the results you want?</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+{% endblock %}

app/templates/views/guides/establish-trust.html

@@ -0,0 +1,196 @@
+{% extends "base.html" %}
+{% import "components/nav_breadcrumb.html" as breadcrumbs %}
+
+{% from "components/guides/circle_number.html" import circle_number %}
+
+{% set page_title = "Establish trust" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+{{ breadcrumbs.breadcrumb(page_title, "Best Practices", "main.best_practices") }}
+
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p class="font-sans-lg text-base">Help your audience anticipate and welcome your texts.</p>
+  <p>
+    People are wary of texts they’re not expecting to receive. Before you send your first text, consider how you will
+    gain trust with your audience and address any concerns of spam. Seize specific moments to reinforce what your
+    audience should expect from your messages.
+  </p>
+  <h2 id="get-the-word-out">Get the word out</h2>
+  <p>Before you launch, let your audience know you are adding texting as a communication method. People are more likely
+    to trust your text once they get it if they know that your program is sending texts.</p>
+
+  <p>How you currently communicate with your audience will determine the best approaches to announce your new
+    initiative. Harness channels you’re already using like social media, public websites, mailing inserts, or fliers at
+    key service locations as well as partnering with community organizations to get the word out about your new texting
+    program.</p>
+  <h3>An example of key messages in direct mail</h3>
+  <figure>
+    <img src="{{asset_url('images/snap-renewal.jpg')}}" alt="snap-renewal" width="100%">
+    <figcaption>A paper mailer sent out by the State of Connecticut, in partnership with Code for America, to get the
+      word out about their new SNAP texting initiative. Flier displays an image of an introduction text and includes key
+      messages to reinforce legitimacy.</figcaption>
+  </figure>
+
+  <h3>Prime your audiences to trust you</h3>
+  <ul class="usa-card-group flex-1 flex-wrap padding-top-2">
+    <li class="flex-1 width-full height-full padding-bottom-2">
+      <div class="usa-card__container border-0">
+        <p>To reinforce legitimacy, include these key messages in your outreach:</p>
+        <ol class="guides-list">
+          <li><b>Introduce yourself</b> – Give people time to get to know your texting communications before you need
+            direct action from them</li>
+          <li><b>Phone number</b> – Note the sending phone number your texts will come from</li>
+          <li><b>Text types</b> – Be clear on the types of texts you intend to send, how often, and why they matter</li>
+          <li><b>Privacy policy</b>– For example, state that you will not collect personal information, including the
+            types of information you will never ask for</li>
+          <li><b>Places to verify</b> – Include a phone number, website, or human where people can verify that the texts
+            are coming from you</li>
+          <li><b>Opt out</b> – Provide opt-out instructions and a disclaimer for the potential cost of receiving the
+            text
+          </li>
+        </ol>
+      </div>
+    </li>
+    <li class="usa-card flex-1 usa-card--media-right width-full padding-top-3">
+      <div class="usa-card__container border-0 width-full overflow-hidden height-phone-lg">
+        <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
+        <div class="position-absolute flex text-center padding-5 padding-top-15">
+          <p class="sms-message-wrapper text-left">Dept. of Social Services: Welcome to text updates from the
+            {{circle_number(1)}}<b>Department of Social Services.</b> {{ circle_number(2) }}<b>We’ll always text
+              you from
+              this number,</b> save us to your contact list. Our goal is to {{ circle_number(3) }} <b>keep you up to
+              date on
+              your account status.</b> {{ circle_number(4) }} <b>We will never ask for personal details in a text.</b>
+            {{ circle_number(5) }} If you have questions about how we protect your privacy, see
+            state.gov/privacy.{{circle_number(6) }}<b>Reply STOP to stop.</b>
+          </p>
+        </div>
+      </div>
+    </li>
+  </ul>
+  <hr>
+  <h2 id="as-people-receive-texts">As people receive texts</h2>
+  <p>When a person has questions or needs assistance, reaching out for support may be natural for them. Give direction
+    in your texts so your audience understands what to do with the information you provide. Remember, it’s important to
+    repeat consistent and standardized language across texts and programs.</p>
+  <h3>Be trustworthy</h3>
+  <ul class="usa-card-group flex-1 flex-wrap padding-top-2">
+    <li class="flex-1 width-full height-full padding-bottom-2">
+      <div class="usa-card__container border-0">
+        <ol start="7" class="guides-list set-two">
+          <li>Identify yourself in the text message. Use a consistent and familiar <b>program name</b> to precede each
+            text you send.</li>
+          <li>Personalize with <b>first name</b>. Through A/B testing, Code for America saw an increase in
+            follow-through by 25% if someone’s first name was included.</li>
+          <li>Use <b>full and direct .gov website URLs</b>. Avoid link shorteners, as they obscure your links and
+            potentially make it easier for a malicious actor to spoof your text.</li>
+          <li>If providing a phone number, use a familiar phone number and <b>provide information on how to verify</b>
+            its legitimacy.</li>
+        </ol>
+      </div>
+    </li>
+    <li class="usa-card flex-1 usa-card--media-right width-full padding-top-1">
+      <div class="usa-card__container border-0 width-full height-mobile overflow-hidden">
+        <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
+        <div class="position-absolute flex text-center padding-5 padding-top-10">
+          <p class="sms-message-wrapper text-left">
+            {{circle_number(7) }}<b>Dept. of Social Services:</b> Hi {{circle_number(8) }}<b>Julie,</b> Your Medicaid
+            renewal is closing December 31, 2023. You can renew online at {{circle_number(9) }}<a
+              class="use-link usa-link--external" href="https://www.application.yourstate.gov" target="_blank"
+              rel="application.yourstate.gov">https://www.application.yourstate.gov</a> or {{circle_number(10) }}
+            <b>call the number on the back</b> of your Medicaid card.
+          </p>
+        </div>
+      </div>
+    </li>
+  </ul>
+
+  <h3>Provide helpful auto-responses</h3>
+  <ul class="usa-card-group flex-1 flex-wrap padding-top-2">
+    <li class="flex-1 width-full height-full padding-bottom-2">
+      <div class="usa-card__container border-0">
+        <p>If you're sending one-way notifications, phone carriers allow a single auto-response message that will be
+          generated if a recipient tries to text a response to your message. Use the auto-response to reaffirm your key
+          messages around legitimacy and communicate to recipients that texts are coming from an automated system.</p>
+        <ol class="guides-list set-three">
+          <li>Provide <b>a way to contact a human</b> in any auto-response text</li>
+          <li>Provide <b>information on how to opt out</b> and opt back in</li>
+        </ol>
+      </div>
+    </li>
+    <li class="usa-card flex-1 usa-card--media-right width-full padding-top-3">
+      <div class="usa-card__container border-0 width-full overflow-hidden guides">
+        <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
+        <div class="position-absolute flex text-center padding-5 padding-top-15">
+          <p class="sms-message-wrapper text-left">
+            Dept. of Social Services: This number is unmonitored. To {{circle_number(11) }} <b>contact us, call
+              888-123-4567</b>. We will never ask for personal details in a text. If you have questions about how to
+            protect your privacy, see state.gov/privacy {{circle_number(12) }} <b>Reply “STOP”</b> to this phone number
+            to opt out of receiving texts, and “START” to opt back in.
+          </p>
+        </div>
+      </div>
+    </li>
+  </ul>
+
+  <h2>Be prepared for questions</h2>
+  <p>
+    Your texting program will only be perceived as legitimate if you get the word out in many different ways. It's also
+    important that agency employees who support text recipients (for example, the call center) are familiar with the
+    texting program. They can accurately respond to recipient questions about them, so make sure you’re priming your
+    delivery staff, especially those who interact directly with your intended audience.
+  </p>
+
+  <h3 class="padding-bottom-2">Harness trusted communication channels</h3>
+  {% set card_contents = [
+  {
+  "image_src": asset_url('images/website.svg'),
+  "card_heading": "Websites",
+  "alt_text": "Graphic representing a website browser",
+  "p_text": "Post banner alerts about texting on your agency website and link to a press release for more information.
+  Publish a public texting privacy policy.",
+  },
+  {
+  "image_src": asset_url('images/community-org.svg'),
+  "card_heading": "Community organizations",
+  "alt_text": "Illustration of community organizations spreading awareness",
+  "p_text": "Alert trusted community-based organizations that texts are coming and what they look like. Equip them with
+  fliers, posters, and talking points to spread the word.",
+  },
+  {
+  "image_src": asset_url('images/call-center.svg'),
+  "card_heading": "IVR / Call Centers",
+  "alt_text": "Illustration of a call center promoting texting initiative",
+  "p_text": "Consider adding hold message announcements about your texting initiative to further get the word out.",
+  },
+  ] %}
+
+  {% with card_contents=card_contents %}{% include "components/guides/cards.html" %}{%
+  endwith %}
+  <h3 class="padding-bottom-2">Prepare your team</h3>
+  {% set card_contents = [
+  {
+  "image_src": asset_url('images/grouping.svg'),
+  "card_heading": "Staff",
+  "alt_text": "Illustration of staff group briefing",
+  "p_text": "Give all staff a heads-up about texts before and when they are sent. Share talking points on what texts
+  you’re sending, when you’ll start to send them, the phone number they are coming from, and where staff can escalate
+  any issues.",
+  },
+  {
+  "image_src": asset_url('images/project-management.svg'),
+  "card_heading": "Case management systems",
+  "alt_text": "Graphic representing project management",
+  "p_text": "When it makes sense, include information about texts being sent to specific clients on individual splash
+  pages or within case management notes.",
+  },
+  ] %}
+  {% with card_contents=card_contents %}{% include "components/guides/cards.html" %}{%
+  endwith %}
+</section>
+{% endblock %}

app/templates/views/guides/multiple-languages.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+{% import "components/nav_breadcrumb.html" as breadcrumbs %}
+
+{% set page_title = "Text in multiple languages" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+{{ breadcrumbs.breadcrumb(page_title, "Best Practices", "main.best_practices") }}
+
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p class="font-sans-lg text-base"> What to know as you plan translated texts.</p>
+
+  <p>
+    Sending messages in recipients’ preferred language demonstrates respect, makes it more likely that recipients will
+    understand and take action on the message, and may be required by your agency or program.
+  </p>
+
+  <p>
+    To send translated messages using Notify.gov you will need two things: a record of your recipients’ preferred
+    language and translation/s of the message template. Notify.gov does not provide translation services.
+  </p>
+
+  <p>
+    As with messages in English, we strongly recommend user testing the translations with people who speak the language
+    to ensure the messages are understandable.
+  </p>
+</section>
+{% endblock %}

app/templates/views/guides/rules-and-regulations.html

@@ -0,0 +1,128 @@
+{% extends "base.html" %}
+{% import "components/nav_breadcrumb.html" as breadcrumbs %}
+
+{% set page_title = "Rules and regulations" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+{{ breadcrumbs.breadcrumb(page_title, "Best Practices", "main.best_practices") }}
+
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p class="font-sans-lg text-base">Understand what is required when texting the public.</p>
+  <h2>What to know about consent and opting out</h2>
+  <p>
+    Providing consent and opting out are key ways for text recipients to express their text communication preferences.
+    Discuss your obligation to obtain consent with your legal counsel.
+  </p>
+  <p>
+    If you do need expressed consent, consider including a pre-checked plain language opt-in (i.e. “It’s OK to text
+    me.”) on
+    digital forms. Be sure to ask for an up-to-date phone number and include a question about the recipient’s preferred
+    language for text messages if you expect to <a href="../best-practices/multiple-languages">translate your text
+      messages</a> in
+    languages other than English.
+  </p>
+  {% set links = [
+  {
+  "p_text": 'The <a class="use-link usa-link--external" href="https://www.fcc.gov/sites/default/files/tcpa-rules.pdf"
+    target="_blank">Telephone Consumer
+    Protection Act (TCPA)</a> (47 USC § 227) is the federal law that impacts how organizations are allowed to
+  communicate
+  in bulk with the public via telephone (including text message or SMS).'
+  },
+  {
+  "p_text": 'The <a class="use-link usa-link--external"
+    href="https://www.fcc.gov/document/fcc-provides-best-practices-enable-critical-health-care-coverage-calls"
+    target="_blank">FCC has ruled</a> that <b>Federal</b> and <b>State</b> programs are exempt from the TCPA and can
+  send
+  text messages to the public without consent if conducting official business. Without explicit mention in the ruling,
+  local governments, phone carriers, or any texting intermediaries might require it.'
+  },
+  {
+  "url_link":
+  "pdf/tcpa_overview.pdf",
+  "url_text":"Download and share our overview of the TCPA with your legal counsel",
+  "is_downloadable": true,
+  "p_text": 'It provides a baseline
+  interpretation to aid your legal counsel in getting up to speed with what might be needed for your program or use
+  case.
+  For additional questions about the enforcement of the TCPA, you can watch <a class="use-link usa-link--external"
+    href="https://www.performance.gov/cx/life-experiences/facing-a-financial-shock/outputs/fcc-training/"
+    target="_blank">a recorded training on public
+    benefits texting</a> provided by the FCC.'
+  },
+  ] %}
+  <h3>Complying with the Telephone Consumer Protection Act (TCPA)</h3>
+  <ul class="usa-collection">
+    {% for item in links %}
+    <li class="usa-collection__item">
+      <div class="usa-collection__body">
+        {% if item.url_text %}
+        <h4 class="usa-collection__heading">
+          <a class="usa-link {% if item.is_downloadable %}usa-link--downloadable{% else %}usa-link--external{% endif %}"
+            href="{% if item.is_downloadable %}{{ asset_url(item.url_link) }}{% else %}{{ item.url_link }}{% endif %}"
+            target="_blank">
+            {{ item.url_text }}
+          </a>
+        </h4>
+        {% endif %}
+        <p class="usa-collection__description">
+          {{item.p_text |safe}}
+        </p>
+      </div>
+    </li>
+    {% endfor %}
+
+  </ul>
+  <h3>Opting out</h3>
+  <p>
+    There is no policy requirement for senders to communicate opt-out options, but <a
+      href="../best-practices/establish-trust#as-people-receive-texts"> including instructions in introductory and/or
+      auto-response texts </a> on how to opt out and opt back in are effective ways to establish trust with your
+    audience.
+  </p>
+
+  <p>
+    In the US, no matter where texts are coming from, a recipient has the right to revoke consent at any time through
+    any
+    reasonable means. For example, a text recipient can always opt out of receiving text messages from a phone number by
+    responding “STOP”, “QUIT”, or <a class="usa-link usa-link--external"
+      href="https://docs.aws.amazon.com/pinpoint/latest/userguide/channels-sms-limitations-opt-out.html#settings-sms-self-opt-out-terms"
+      target="_blank">one of several other keywords</a>.
+  </p>
+
+  <p>
+    Any subsequent messages sent to that number will be blocked by the phone carrier and not delivered. We recommend
+    establishing an internal process to obtain and remove numbers that fail multiple times to avoid continuing to send
+    messages to them.
+  </p>
+  <h2>Honoring privacy</h2>
+  <h3>Phone numbers are personally identifiable information (PII)</h3>
+  <p>
+    When putting together the data spreadsheet (or CSV) file containing text message data, follow relevant security
+    processes for storing and transmitting the file that contains PII.
+  </p>
+  <h3>Don’t text sensitive information</h3>
+  <p>
+    Sensitive information should be protected and secure. Social Security Numbers, driver’s license numbers, personal
+    health information, and passwords are all sensitive PII that should not be shared via text message. Consult with
+    your privacy office to understand what information you can and cannot include in a text message. Different programs
+    and jurisdictions may have different rules and interpretations.
+  </p>
+  <h3>Assess risk</h3>
+  <p>
+    Consider the risks if someone who is not the intended recipient receives the text message. Establish an internal
+    process
+    to keep your phone number list up-to-date. The FCC offers a <a class="use-link usa-link--external"
+      href="https://www.fcc.gov/reassigned-numbers-database" target="_blank"
+      rel="Reassigned Numbers Database">Reassigned
+      Numbers Database</a> to identify phone numbers that may have been reassigned since your agency obtained them.
+  </p>
+</section>
+
+
+{% endblock %}

app/templates/views/guides/write-for-action.html

@@ -0,0 +1,109 @@
+{% extends "base.html" %}
+{% import "components/nav_breadcrumb.html" as breadcrumbs %}
+{% from "components/guides/circle_number.html" import circle_number %}
+
+{% set page_title = "Write texts that provoke action" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+{{ breadcrumbs.breadcrumb(page_title, "Best Practices", "main.best_practices") }}
+
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p class="font-sans-lg text-base"> Help your audience know what to do with the information you send.</p>
+  <p>
+    When writing a text, focus on the person who is going to receive the message and write it for them. Use plain
+    language and provide easy to understand next steps.
+  </p>
+  <div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
+    <div class="usa-summary-box__body">
+      <p class="usa-summary-box__heading" id="summary-box-establish-clear-goals">
+        When deciding what types of messages to draft for your campaign, think through the following questions:
+      </p>
+      <div class="usa-summary-box__text">
+        <ul class="usa-list">
+          <li>What do you want recipients to do when they receive the text?</li>
+          <li>What will happen if a recipient doesn't take the action you want them to take?</li>
+          <li>Will you send any follow-up texts depending on if the action was taken or not?</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <h2>Be clear and concise</h2>
+  <ul>
+    <li>Use simple, everyday language. Keep the text short and clear. Stay under 300 characters.</li>
+    <li>
+      Say only one important thing per message. Focus on the most essential instructions and information. If there are
+      multiple actions you want someone to take, consider sending a series of well-timed messages.
+    </li>
+    <li>Use a neutral, direct, and professional tone. This works better than a friendly or overly casual tone.</li>
+  </ul>
+  <h2>Build conditions for action</h2>
+  <ul class="usa-card-group flex-1 flex-wrap padding-top-2 guides-flex-container">
+    <li class="flex-1 width-full height-full padding-bottom-2">
+      <div class="usa-card__container border-0">
+        <p>For example, getting a person to update their mailing address:</p>
+        <ol class="guides-list">
+          <li>Clearly state the information and the response you want the recipient to take.</li>
+          <li>Point directly to where the action can be completed, not to more information.</li>
+          <li>Make sure the action can be completed via mobile phone, like calling a person or going to a
+            mobile-friendly URL.
+          </li>
+          <li>
+            Include at least two options for a recipient to take action. Some recipients may be more comfortable talking
+            directly
+            to a person, while others may prefer a web-based experience.
+          </li>
+          <li>Consider clearly explaining any consequences if the desired action is not completed.</li>
+        </ol>
+      </div>
+    </li>
+    <li class="flex-1 usa-card--media-right width-full padding-top-3">
+      <div class="usa-card__container border-0 width-full">
+        <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
+        <div class="position-absolute flex text-center padding-5 padding-top-15">
+          <p class="sms-message-wrapper text-left">{{circle_number(1) }}State Medicare Agency: Hello, MEDICARE has
+            attempted to
+            send you an update about your claim, but the mail was returned. <br>{{circle_number(2) }}Please go to
+            https://www.medicare.gov/account/login?utm_source=TEXT, {{circle_number(3) }}log in to your account, and
+            click “My
+            Account Information” to verify that your address is correct. If you are having difficulty logging in,
+            {{circle_number(4) }}call 1-800-MEDICARE for assistance. {{circle_number(5) }}We will attempt to send the
+            mail again
+            in 14 days.
+          </p>
+        </div>
+      </div>
+    </li>
+  </ul>
+  <h2>What provoking action looks like</h2>
+  <p class="padding-bottom-2"><a class="use-link usa-link--external"
+      href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC10002044/" target="_blank">Evidence
+      shows</a> that employing
+    behavioral science is an effective way to increase the
+    likelihood of a recipient
+    taking action upon receiving your text. Keep in mind these three foundational principles while drafting your text
+    message:</p>
+  {% set card_contents = [
+  {
+  "card_heading": "Feeling a sense of ownership can influence behavior.",
+  "p_text": "Example – <b>Don't miss this chance to get free internet</b> or $30 per month off your internet bill.",
+  },
+  {
+  "card_heading": "Individuals are strongly influenced by others’ behaviors.",
+  "p_text": "Example – <b>Thousands of residents</b> already get an
+  average of $113/month in money for food.",
+  },
+  {
+  "card_heading": "Individuals perceive losses more powerfully than gains.",
+  "p_text": "Example – Contact us for potentially unclaimed free
+  internet services <b>that belong to you</b>.",
+  },
+  ] %}
+  {% with card_contents=card_contents, text_align='left' %}{% include "components/guides/cards.html" %}{%
+  endwith %}
+</section>
+{% endblock %}

app/templates/views/join-notify.html

@@ -0,0 +1,212 @@
+{% extends "base.html" %}
+
+{% set page_title = "Join Notify" %}
+
+{% block per_page_title %}{{page_title}}{% endblock %}
+
+{% block content_column_content %}
+
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <h2>Who is Notify.gov for?</h2>
+  <p>
+    Government agencies at any level of government who deliver <b>federal programs</b> are able to use Notify.gov. Those
+    who sign up to new Notify.gov become our partners.
+  </p>
+  <p>
+    All <b>federal agencies</b> are invited to use Notify.gov to send text messages to their employees, other federal
+    agencies, or to the public.
+  </p>
+  <p>
+    <b>
+      Non-federal agencies (state, local, territorial, or tribal governments) who administer or deliver federally-funded
+      services
+    </b> may qualify to use Notify.gov. These programs must specify which federal program the messages they want to
+    send are related to. The Notify.gov team confirms our authority to work with these programs as part of our
+    agreements process.
+  </p>
+  <h3>What partners receive</h3>
+  <p>
+    To use Notify.gov to send messages (outside of our Trial Mode), partners sign a one-year Memorandum of Understanding
+    with us. This is a basic agreement outlining our relationship and responsibilities.
+  </p>
+  <p class="padding-bottom-3"><b>Our core, no-cost, service offering includes:</b></p>
+  {% set product_highlights = [
+  {
+  "svg_src": "#chat",
+  "card_heading": "Up to 250,000 messages to use over your first year*",
+  },
+  {
+  "svg_src": "#phone",
+  "card_heading": "One toll-free sending phone number",
+  },
+  {
+  "svg_src": "#forum",
+  "card_heading": "An easy-to-use web-based interface for sending bulk or individual messages",
+  },
+  {
+  "svg_src": "#assessment",
+  "card_heading": "Dashboards and downloadable reports for tracking message delivery",
+  },
+  ] %}
+  <ul class="usa-icon-list">
+    {% for item in product_highlights %}
+    <li class="usa-icon-list__item">
+      <div class="usa-icon-list__content padding-left-0">
+        <div class="usa-icon-list__icon display-flex flex-align-start">
+          <svg aria-hidden="true" focusable="false" role="img" class="icon-list">
+            <use xlink:href="{{ asset_url('img/sprite.svg') }}{{ item.svg_src }}"></use>
+          </svg>
+          <b>{{item.card_heading}}</b>
+        </div>
+        <p class="indented-paragraph">{{item.p_text}}</p>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+  <p class="font-body-xs">*We plan to offer plans with additional messages soon; please contact us if you need more
+    messages so that we can understand your use case!</p>
+
+  <h2 class="padding-bottom-2" id="summary-box-how-to-get-started">How to get started</h2>
+  <div class="usa-summary-box maxw-tablet __web-inspector-hide-shortcut__" role="region"
+    aria-labelledby="summary-box-how-to-get-started">
+    <div class="usa-summary-box__body">
+      <div class="usa-summary-box__text">
+        <p class="margin-0">Interested in trying Notify.gov before signing an agreement? We can provide qualifying partners with access
+          to Trial Mode to review Notify.gov features before deciding. In Trial Mode, you can test sending messages,
+          explore the personalization and customization features, and review sample delivery reports.</p>
+      </div>
+    </div>
+  </div>
+
+  <h3 class="font-body-md">Tell us about your program</h3>
+  <p class="padding-bottom-3">
+    Let’s determine if Notify.gov is a good fit for your organization. To <b>get started</b>, we’ll ask you for
+    information such as:
+  </p>
+  {% set bullet_items = [
+  "Organization name and type",
+  "Point of contact’s name and email address",
+  "Your associated federal funding, program, or authority",
+  "The program(s) you want to text about",
+  "Who you are planning to text",
+  "What you’d like to achieve by texting these people",
+  "The estimate number of texts you’d like to send in the first year",
+  "Who would you like to include on the Trial Mode account?",
+  "Provide the official government email address to invite your team members",
+  "When would you like to send your first text(s)?"
+  ] %}
+  <ul class="usa-icon-list padding-bottom-2">
+    {% for item in bullet_items %}
+    <li class="usa-icon-list__item">
+      <div class="usa-icon-list__icon display-flex flex-align-start">
+        <svg class="usa-icon checkmark-icon icon-list" aria-hidden="true" focusable="false" role="img">
+          <use xlink:href="{{ asset_url('img/sprite.svg') }}#check"></use>
+        </svg>
+        <b>{{ item }}</b>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+  <a href="https://docs.google.com/forms/d/e/1FAIpQLSdZvsPndZaLeFBTtIxvDCx0Rdjyhln_dWXSLSwfgKw4ftEslw/viewform"
+    class="usa-button margin-bottom-3">Get started</a>
+  <hr class="maxw-tablet margin-left-0">
+  <h2>Next Steps</h2>
+  <p>
+    Our team will review the information you provide, and follow up with any questions. We’ll contact you no matter your
+    qualification status.
+  </p>
+  <p>
+    We provide you a one-year, Memorandum of Understanding (MOU). To text the public fully in Live Mode, your
+    organization will need to sign our MOU.
+  </p>
+
+  <h3 class="padding-bottom-3">Getting Started FAQs</h3>
+  {% set accordion_content = [
+  {
+  "heading": "What if I need more than 250,000 messages?",
+  "p_text": "Plans that include additional messages for a fee will be available soon. We want to design these plans
+  based on our partners’ needs, so please <a class='use-link usa-link--external' href='mailto:tts-notify@gsa.gov'>contact us</a> if you hope to be able to
+  send more messages. We’d like to talk with you.",
+  "position": "b-a1"
+  },
+  {
+  "heading": "What phone numbers can my agency send to?",
+  "p_text": "Right now, Notify.gov supports sending messages to North American numbers (+1). If you’d like to send to
+  international numbers, we want to <a href='/contact'>hear from you</a>.",
+  "position": "b-a2",
+  },
+  {
+  "heading": "Can we send from a shortcode or an existing customer service number?",
+  "p_text": "At this time, Notify.gov provides toll-free service numbers. We will be exploring offering shortcodes in
+  the near future. If you wish to send from an existing phone number owned or operated by your agency, this is something
+  that might be possible in the future, but is not currently on our roadmap.",
+  "position": "b-a3",
+  },
+  {
+  "heading": "Can we use API integrations with Notify?",
+  "p_text": "While public API integrations are not yet available, we are working on enabling these. If you're looking
+  for this feature <a href='/contact'>we want to hear from you</a>.",
+  "position": "b-a4",
+  },
+  {
+  "heading": "My IT team has questions about how Notify.gov is built, where can I direct them to more information?",
+  "p_text": "To understand how Notify.gov works, see our <a href='/about/security'>Security page </a> for the
+  basics. If your IT team needs more
+  information we’re happy to share a larger security package upon request.",
+  "position": "b-a5",
+  },
+  {
+  "heading": "How does Notify.gov support our records retention policy?",
+  "p_text": "We are not a System of Record. For more see our <a href='/about/security'>Security page</a>.",
+  "position": "b-a6",
+  },
+  {
+  "heading": "My OGC is asking about consent, where can I get more information for them?",
+  "p_text": "Text message notifications are governed by the Telephone Consumer Protection Act. Different levels of
+  government have different consent requirements. Download and share our <a class='use-link usa-link--external'
+    href='https://github.com/GSA/notifications-admin/files/15100120/TCPA.Overview_Notify.gov.pdf'>overview of the
+    TCPA</a> with your legal counsel as
+  a starting point.",
+  "position": "b-a7",
+  },
+  {
+  "heading": "What information does Notify provide about message delivery?",
+  "p_text": "Notify.gov shares back information about message delivery that we receive from individual mobile phone
+  carriers. Carriers can only provide information about whether a message was successfully delivered to a specific phone
+  number (not a person).
+
+  If you happen to send a message to a landline or out-of-service phone number, these messages will show up as ‘failed’
+  in delivery reports.",
+  "position": "b-a8",
+  },
+  {
+  "heading": "Can I track engagement with the messages I send?",
+  "p_text": "Unlike email, you cannot see if someone reads a message or clicks on a link you included in a message. This
+  is a limitation of SMS in general, not Notify.gov. We do highly recommend setting goals for your texting campaigns and
+  tracking performance. By combining the delivery reports provided by Notify.gov with other information from your
+  program, you may be able to assess engagement and impact.",
+  "position": "b-a9",
+  },
+  {
+  "heading": "Is there technical product support offered?",
+  "p_text": "We’re on call to answer any questions as you get started using Notify.gov",
+  "position": "b-a10",
+  },
+  ] %}
+  <div class="usa-accordion usa-accordion--bordered maxw-tablet">
+    {% for item in accordion_content %}
+    <h4 class="usa-accordion__heading">
+      <button type="button" class="usa-accordion__button" aria-controls="{{item.position}}">
+        {{item.heading}}
+      </button>
+    </h4>
+    <div id="{{item.position}}" class="usa-accordion__content usa-prose">
+      <p>
+        {{ item.p_text | safe }}
+      </p>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+{% endblock %}

app/templates/views/message-status.html

@@ -77,7 +77,7 @@
   <p>Sometimes Notify receives more detailed information from the carriers on the status of messages, and these can be found
   in the downloadable reports. Not all carriers provide the same level of detail regarding delivery and some delivery
   statutes have a slight variation in word choice. Notify includes this information in the reports to provide you as much
-  detail as possible. Remember, for <a class="usa-link" href="/features/security">security</a> purposes, detailed information is only available for seven days after a
+  detail as possible. Remember, for security purposes, detailed information is only available for seven days after a
   message has been sent.</p>
 
   <h2 class="heading-medium">Opting out</h2>

app/templates/views/notifications/preview.html

@@ -10,7 +10,7 @@
   {% elif help %}
     {{ "Example text message" }}
   {% else %}
-    {{ "Preview" }}
+    {{ "Preview for sending" }}
   {% endif %}
 {% endblock %}
 
@@ -50,7 +50,7 @@
       {% endcall %}
     </div>
   {% else %}
-    {{ page_header("Example text message" if help else "Preview") }}
+    {{ page_header("Example text message" if help else "Preview for sending") }}
   {% endif %}
 
   {% if not help %}

app/templates/views/roadmap.html

@@ -1,87 +0,0 @@
-{% extends "base.html" %}
-{% from "components/table.html" import mapping_table, row, text_field, edit_field, field with context %}
-{% from "components/content-metadata.html" import content_metadata %}
-
-{% block per_page_title %}
-  Roadmap
-{% endblock %}
-
-{% block content_column_content %}
-
-  <h1 class="font-body-2xl margin-bottom-3">Roadmap</h1>
-
-  <!-- {{ content_metadata(
-    data={
-      "Last updated": "1 November 2022",
-      "Next review due on": "15 December 2022"
-    }
-  ) }} -->
-
-
-  <p>The Notify roadmap shows what we’re working on and what we're planning to do next.</p>
-  <p>This roadmap is only a guide. It does not cover everything we do, and some things may change.</p>
-  <p>You can <a class="usa-link" href="{{url_for('.support')}}">contact us</a> if you have any questions about the roadmap or suggestions for new features.</p>
-
-  <h2 id="things-we-are-working-on">What we’re working on</h2>
-
-  <h3 id="now">Now</h3>
-
-  <p>We are investigating the Notify concept, building on the notifications tool pioneered by the UK.</p>
-  <p>To do this, we are convening a pilot with a small set of partners.</p>
-  <p>Goals during this stage:</p>
-
-  <ul class="list list-bullet">
-    <li>Achieve compliance to begin piloting, such as ATO and privacy standards.
-      <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
-        use xlink:href="/assets/img/sprite.svg#check"></use>
-      </svg>
-    </li>
-    <li>Demonstrate that a government-run notifications tool provides a unique value.</li>
-    <li>Gather data from the pilot to improve the product.</li>
-  </ul>
-
-  <p>Features prioritized during this stage:</p>
-
-  <ul class="list list-bullet">
-    <li>Bulk, individually customizable one-way SMS sending via web UI</li>
-    <li>Organization permissions settings for various team members to edit/send</li>
-    <li>Reusable message templates</li>
-    <li>Seven-day records deletion</li>
-    <li>Message send/failure analytics</li>
-  </ul>
-
-  <h3 id="next">Next</h3>
-
-  <p>If the pilot is successful, we hope to recruit additional partners to improve outcomes for low-income individuals and families.</p>
-
-  <p>Goals during this stage:</p>
-
-  <ul class="list list-bullet">
-    <li>Complement Notify with practical guidance and support services.</li>
-    <li>Iterate on existing features and implement new features based on what we've learned so far.</li>
-    <li>Hone our measurement approaches to better quantify impact.</li>
-  </ul>
-
-  <p>Features prioritized during this stage:</p>
-
-  <ul class="list">
-    <li>SMS sending via API integration</li>
-    <li>Self-service account creation</li>
-    <li>Application status page</li>
-    <li>Improved scheduled send option</li>
-  </ul>
-
-  <h3 id="later">Later</h3>
-
-  <p>In the future, we may decide to expand beyond SMS, or to offer the service government-wide.</p>
-
-  <p>Features to be considered during this stage:</p>
-
-  <ul class="list">
-
-    <li>Two-way messaging</li>
-    <li>Multilingual interface and content library options</li>
-    <li>Recurring scheduled send (such as “Send each Monday for 3 weeks”)</li>
-  </ul>
-
-{% endblock %}

app/templates/views/send-test.html

@@ -12,6 +12,19 @@
   {{ usaBackLink({ "href": back_link }) }}
 {% endblock %}
 
+
+{% block skipLink %}
+  {% set skipLink = usaSkipLink({
+    "href": '#main-content',
+    "text": 'Skip to main content'
+  }) %}
+  {% if errors %}
+    <div>{{ skipLink }}</div>
+  {% else %}
+    {{ skipLink }}
+  {% endif %}
+{% endblock %}
+
 {% block maincolumn_content %}
 
   {{ page_header(page_title) }}
@@ -24,7 +37,7 @@
     data_kwargs={'force-focus': True}
   ) %}
     <div class="grid-row">
-      <div class="grid-col-12 {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
+      <div class="grid-col-12 {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}" aria-live="polite" role="alert">
         {{ form.placeholder_value(param_extensions={"classes": ""}) }}
       </div>
       {% if skip_link or link_to_upload %}

app/templates/views/send.html

@@ -12,7 +12,7 @@
 
 
 {% block backLink %}
-  {{ usaBackLink({ "href": url_for('main.send_one_off', service_id=current_service.id, template_id=template.id) }) }}
+  {{ usaBackLink(params) }}
 {% endblock %}
 
 {% block maincolumn_content %}
@@ -31,10 +31,10 @@
   <h2 class="font-body-lg">Your file needs to look like this example</h2>
   <p class="hint">
     Save your file as a
-    <acronym title="Comma Separated Values">CSV</acronym>,
-    <acronym title="Tab Separated Values">TSV</acronym>,
-    <acronym title="Open Document Spreadsheet">ODS</acronym>,
-    or Microsoft Excel spreadsheet
+    <abbr title="Comma Separated Values">CSV</abbr><span aria-hidden="true">, </span>
+    <abbr title="Tab Separated Values">TSV</abbr><span aria-hidden="true">, </span>
+    <abbr title="Open Document Spreadsheet">ODS</abbr>
+    or Microsoft Excel spreadsheet.
   </p>
 
   <div class="spreadsheet" data-module="fullscreen-table">

app/templates/views/signedout.html

@@ -1,323 +1,220 @@
-{% extends "base.html" %}
-{% from "components/components/button/macro.njk" import usaButton %}
+{% extends "base.html" %} {% from "components/components/button/macro.njk"
+import usaButton %} {% block meta %}
+<meta
+  name="description"
+  content="Notify.gov lets you send text messages to your users. Try it now if you work in federal, state, or local government."
+/>
+{% endblock %} {% block pageTitle %} Notify.gov {% endblock %} {% block main %}
+{% block beforeContent %}{% endblock %}
 
-{% block meta %}
-<meta name="description"
-  content="Notify.gov lets you send text messages to your users. Try it now if you work in federal, state, or local government.">
-{% endblock %}
-
-{% block pageTitle %}
-Notify.gov
-{% endblock %}
-
-{% block main %}
-  {% block beforeContent %}{% endblock %}
-  <main id="main-content" role="main">
-    {% block content %}
-      <section class="usa-section--dark usa-hero" 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-7 tablet:grid-col-12">
-              <h1 class="font-serif-2xl usa-hero__heading">Reach people where they are with government-powered text messages</h1>
-              <p class="font-sans-lg">Notify.gov is a text message 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 pilot partner
-              </div>
-              <p class="font-sans-md">Currently we are only working with select pilot partners. If you are interested in using Notify.gov 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="desktop:grid-col-4 grid-offset-1 desktop:display-block display-none margin-x-5">
-              <img src="{{ asset_url('images/product/phone-text.png') }}"
-                alt="An illustration of notifications to a phone.">
-            </div>
-          </div>
-        </div>
-      </section>
-      <section class="grid-container usa-section usa-section__home">
-        <div class="grid-row grid-gap">
-          <div class="tablet:grid-col-5 margin-bottom-3 usa-prose">
-            <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
-              Control your content
-            </h2>
-            <p>You do not need any technical knowledge to create message templates.</p>
-          </div>
-          <div class="tablet:grid-col-6 tablet:grid-offset-1">
-            <img src="{{ asset_url('images/product/01-templates-no-chrome.svg') }}"
-              alt="Example screenshot of adding a new text message template">
-          </div>
-        </div>
-      </section>
-      <section class="grid-container usa-section usa-section__home">
-        <div class="grid-row grid-gap">
-          <div class="tablet:grid-col-5 margin-bottom-3 usa-prose">
-            <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
-              See how your messages perform
-            </h2>
-            <p>Track how many messages you’ve sent and find out which ones are not being delivered.</p>
-          </div>
-          <div class="tablet:grid-col-6 tablet:grid-offset-1">
-            <img src="{{ asset_url('images/product/02-reporting-no-chrome.svg') }}"
-              alt="A screenshot of Notify.gov showing counts of emails and text messages sent">
-          </div>
-        </div>
-      </section>
-      <section class="grid-container usa-section usa-section__home">
-        <div class="grid-row grid-gap">
-          <div class="tablet:grid-col-5 margin-bottom-3 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 Notify.gov sends batches of messages for you.</p>
-          </div>
-          <div class="tablet:grid-col-6 tablet: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
-          </h2>
-        </div>
-        <div class="grid-row grid-gap">
-          <div class="tablet:grid-col-6 usa-prose">
-            <p>Upload a spreadsheet of phone numbers and Notify sends the messages.</p>
-            <img src="{{ asset_url('images/product/03-spreadsheet-no-chrome.svg') }}"
-              alt="A screenshot of a spreadsheet with columns for email address, name and color">
-          </div>
-          <div class="tablet:grid-col-6 usa-prose">
-            <p>
-              Integrate the Notify.gov API with your web&nbsp;application or
-              back office system.
-            </p>
-            <img src="{{ asset_url('images/product/04-api-no-chrome.svg') }}"
-              alt="A screenshot of some computer code with a notify.send_email function">
-          </div>
-        </div>
-      </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 Notify.gov
-          </h2>
-          <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>.
+<main id="main-content" role="main">
+  {% block content %}
+  <section class="usa-section--dark usa-hero" 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">
+            Reach people where they are with government-powered text messages
+          </h1>
+          <p class="font-sans-lg">
+            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>
-        <div class="grid-row">
-          <div class="tablet:grid-col-6 display-flex flex-justify-center flex-align-center flex-column">
-            <span class="usa-sr-only">There are</span>
-            <div class="large-number">{{ counts.organizations|format_thousands }}</div>
-            <p class="font-body-lg margin-bottom-0">Organizations</p>
-          </div>
-          <div class="tablet:grid-col-6 display-flex flex-justify-center flex-align-center flex-column">
-            <span class="usa-sr-only">and</span>
-            <div class="large-number">{{ counts.services|format_thousands }}</div>
-            <p class="font-body-lg margin-bottom-0">Services</p>
-            <span class="usa-sr-only">using Notify.</span>
+          <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>
-      </section> -->
-      <section class="grid-container usa-section usa-section__home border-top border-base-lighter usa-prose">
-        <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
-          About the product
-        </h2>
-        <p class="usa-body">
-          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">
-          Notify.gov 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, Notify.gov 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">
-          Notify.gov is a new shared service currently being piloted by the Public Benefits Studio, within Technology
-          Transformation Services at the General Services Administration.
-        </p>
-        <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
-          Who's Eligible?
-        </h2>
-        <p class="usa-body">
-          Eligible partners include federal agencies as well as state, local, territorial, tribal agencies
-          administering federally funded programs. As part of the onboarding process, non-federal
-          programs must specify the federal program that the messages they want to send are related
-          to. TTS will also seek concurrence from the federal funder.
-        </p>
-        <p class="usa-body">
-          We prioritize partnerships focused on use cases related to increasing transparency and
-          reducing the burden of navigating government programs for low income individuals and
-          families.
-        </p>
-      </section>
+        <div
+          class="desktop:grid-col-3 grid-offset-1 desktop:display-block display-none margin-x-5"
+        >
+          <img
+            src="{{ asset_url('images/product/phone-text.png') }}"
+            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."
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+  <section
+    class="grid-container usa-section usa-section__home border-top border-base-lighter usa-prose padding-bottom-1"
+  >
+    <h2 class="font-body-xl margin-top-0 margin-bottom-3">
+      Government texting made easy
+    </h2>
+    <p class="usa-body">
+      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>
+  </section>
 
-      <!-- <div class="product-page-intro"></div> -->
+  <section
+    class="grid-container usa-section usa-section__home usa-prose padding-bottom-1"
+  >
+    <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>
+            <img
+              src="{{ asset_url('images/internet.svg') }}"
+              alt="Globe on top of a web browser"
+            />
+            <div class="usa-card__header">
+              <h3 class="font-heading-md">Web-based</h3>
+            </div>
+            <div class="usa-card__body">
+              <p>Nothing to download or install</p>
+            </div>
+          </div>
+        </li>
+        <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
+          <div class="usa-card__container">
+            <div class="blue-bar"></div>
+            <img
+              src="{{ asset_url('images/fast.svg') }}"
+              alt="Stopwatch with a notification speech bubble with a star inside"
+            />
+            <div class="usa-card__header">
+              <h3 class="font-heading-md">Fast and easy</h3>
+            </div>
+            <div class="usa-card__body">
+              <p>No technical expertise required</p>
+            </div>
+          </div>
+        </li>
+        <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
+          <div class="usa-card__container">
+            <div class="blue-bar"></div>
+            <img
+              src="{{ asset_url('images/status.svg') }}"
+              alt="3 status messages, 2 successes and one failure"
+            />
+            <div class="usa-card__header">
+              <h3 class="font-heading-md">Track message delivery</h3>
+            </div>
+            <div class="usa-card__body">
+              <p>See which messages were received</p>
+            </div>
+          </div>
+        </li>
+      </ul>
+      <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>
+            <img
+              src="{{ asset_url('images/translation.svg') }}"
+              alt="Speech bubbles with the letter A and the Chinese character for language"
+            />
+            <div class="usa-card__header">
+              <h3 class="font-heading-md">
+                Send in recipients' preferred language
+              </h3>
+            </div>
+            <div class="usa-card__body">
+              <p>Notify.gov has support for more than 30 character sets</p>
+            </div>
+          </div>
+        </li>
+        <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
+          <div class="usa-card__container">
+            <div class="blue-bar"></div>
+            <img
+              src="{{ asset_url('images/security.svg') }}"
+              alt="Lock with code icon inside on top of a web browser"
+            />
+            <div class="usa-card__header">
+              <h3 class="font-heading-md">Security and privacy</h3>
+            </div>
+            <div class="usa-card__body">
+              <p>
+                Limited data retention, encryption, and multi-factor
+                authentication protect user data and manage risk with <br><a href="/about/security">our security efforts</a>
+              </p>
+            </div>
+          </div>
+        </li>
+        <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
+          <div class="usa-card__container">
+            <div class="blue-bar"></div>
+            <img
+              src="{{ asset_url('images/send.svg') }}"
+              alt="Paper airplane and a notification icon with the number 1 inside"
+            />
+            <div class="usa-card__header">
+              <h3 class="font-heading-md">
+                Send bulk, customized, one-way messages
+              </h3>
+            </div>
+            <div class="usa-card__body">
+              <p>
+                Send hundreds or thousands of individually customized messages
+                with just a few clicks
+              </p>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </section>
 
-      <!-- <div class="product-page-intro-wrapper" data-module="homepage">
-            <nav class="breadcrumbs breadcrumbs--inverse" aria-label="Breadcrumbs">
-
-            </nav>
-            <div class="grid-row">
-              <div class="grid-col-8">
-                <h1>
-                  Send text messages to your users
-                </h1>
-                <p>
-                  Try Notify.gov now if you work in federal, state, or local government.
-                </p>
-                <div class="button-container">
-                  {{ usaButton({
-                    "element": "a",
-                    "text": "Create an account",
-                    "classes": "product-page-button button-container__button",
-                    "href": url_for('main.register' )
-                  }) }}
-                  or <a class="usa-link" href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
-                  it before
-                </div>
-              </div>
-              <div class="grid-col-4">
+  <section
+    class="grid-container usa-section usa-section__home usa-prose grid-container padding-bottom-10"
+  >
+    <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
+      Who can use Notify.gov?
+    </h2>
+    <p class="usa-body">
+      All <span class="text-bold">federal</span> agencies and programs are
+      eligible to use Notify.gov.
+    </p>
+    <p class="usa-body">
+      US
+      <span class="text-bold">state, local, territorial, or tribal</span>
+      governments that administer or deliver federally-funded programs or
+      services may qualify to use Notify.gov to communicate with applicants and
+      participants in these programs.
+    </p>
+    <div class="grid-container margin-top-4 padding-left-0 padding-right-0">
+      <div class="grid-row grid-gap-3">
+        <a
+          class="text-no-underline tablet:grid-col-4 mobile-lg:grid-col-12"
+          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/product/proposition-illustration.png') }}"
-                  alt="An illustration of notifications to a phone, a laptop, and a letter.">
+                  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>
-        </div>
+        </a>
+      </div>
+    </div>
+  </section>
 
-        <div class="product-page-section">
-          <div class="grid-row">
-            <div class="grid-col-6">
-              <h2>
-                Control your content
-              </h2>
-              <p>
-                You do not need any technical knowledge to create message templates.
-              </p>
-            </div>
-            <div class="grid-col-6">
-              <img
-                src="{{ asset_url('images/product/01-templates.svg') }}"
-                alt="Example screenshot of adding a new text message template">
-            </div>
-          </div>
-        </div>
-        <div class="product-page-section">
-          <div class="grid-row">
-            <div class="grid-col-6">
-              <h2>
-                See how your messages perform
-              </h2>
-              <p>
-                Track how many messages you’ve sent and
-                find out which ones are not being delivered.
-              </p>
-            </div>
-            <div class="grid-col-6">
-              <img
-                src="{{ asset_url('images/product/02-reporting.svg') }}"
-                alt="A screenshot of Notify.gov showing counts of emails and text messages sent"
-              >
-            </div>
-          </div>
-        </div>
-        <div class="product-page-section">
-          <h2 class="with-keyline">
-            Send messages manually or automatically
-          </h2>
-          <div class="grid-row">
-            <div class="grid-col-6">
-              <p>
-                Upload a spreadsheet of phone&nbsp;numbers and Notify sends the messages.
-              </p>
-              <img
-                src="{{ asset_url('images/product/03-spreadsheet.svg') }}"
-                alt="A screenshot of a spreadsheet with columns for email address, name and color"
-              >
-            </div>
-            <div class="grid-col-6">
-              <p>
-                Integrate the Notify.gov API with your web&nbsp;application or
-                back office system.
-              </p>
-              <img
-                src="{{ asset_url('images/product/04-api.svg') }}"
-                alt="A screenshot of some computer code with a notify.send_email function"
-              >
-            </div>
-          </div>
-        </div>
-        <div class="product-page-section">
-          <div class="with-keyline bottom-gutter-2" id="whos-using-notify">
-            <h2>Who’s using Notify.gov</h2>
-            <div class="grid-row bottom-gutter">
-              <div class="grid-col-6">
-                <span class="usa-sr-only">There are</span>
-                <div class="product-page-big-number">{{ counts.organizations|format_thousands }}</div>
-                <span>organizations</span>
-              </div>
-              <div class="grid-col-6">
-                <span class="usa-sr-only">and</span>
-                <div class="product-page-big-number">{{ counts.services|format_thousands }}</div>
-                <span>services</span>
-                <span class="usa-sr-only">using Notify.</span>
-              </div>
-            </div>
-            <p>
-              See the
-              <a class="usa-link" href="{{ url_for('main.performance') }}">list of services and organizations</a>.
-            </p>
-          </div>
-        </div>
-        <div class="product-page-section">
-          <div class="with-keyline bottom-gutter-2">
-            <h2>Pricing</h2>
-            <div class="grid-row bottom-gutter">
-              <div class="grid-col-6">
-                <h3 class="usa-sr-only">Emails</h3>
-                <div class="product-page-big-number">Unlimited</div>
-                <span>free emails</span>
-              </div>
-              <div class="grid-col-6">
-                <h3 class="usa-sr-only">Text messages</h3>
-                <div class="product-page-big-number">Up to 40,000</div>
-                <span>free text messages a year,<br>
-                then {{ sms_rate }} pence per message</span>
-              </div>
-              <div class="grid-col-6">
-                <p class="align-with-big-number-hint">
-                  There’s no monthly charge, no setup fee and no&nbsp;procurement process.
-                </p>
-                <p>Find out more about <a class="usa-link" href="https://www.notifications.service.gov.uk/pricing">pricing</a>.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="product-page-section">
-          <div class="grid-row margin-bottom-">
-            <div class="grid-col-12">
-              <h2 class="with-keyline">
-                The team
-              </h2>
-              <p>
-                Notify.gov is built and maintained by the Public Benefits Studio, within the General Services Administration's Technology Transformation Services.
-              </p>
-              <p>
-                <a class="usa-link" href="{{ url_for('main.support') }}">Contact us</a> if you have a question or want
-                to give feedback.
-              </p>
-            </div>
-          </div>
-        </div>-->
-    {% endblock %}
-  </main>
+  {% endblock %}
+</main>
 {% endblock %}

app/templates/views/studio.html

@@ -0,0 +1,42 @@
+{% extends "base.html" %}
+
+{% set page_title = "About the Public Benefits Studio" %}
+
+{% block per_page_title %}{{page_title}}{% endblock %}
+
+{% block content_column_content %}
+
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p>The Benefits Studio is a product accelerator inside the federal government.
+    We collaborate with benefits programs and the people they serve to build and
+    scale shared tools that reduce burden within the social safety net.
+  </p>
+  <p>
+    As a part of GSA’s <a href="https://tts.gsa.gov/">Technology Transformation Services (TTS)</a>, the Studio is uniquely
+    positioned to work between and across agencies and programs, to make it easier and
+    cheaper for programs with the same challenges to use the same tools.
+  </p>
+  <p>
+    We focus on benefits programs first, because we believe solving problems for people
+    who face the highest challenges when interacting with the government will result in
+    solutions that serve everyone else well, too.
+  </p>
+  <p class="margin-bottom-4">
+    <strong>The Studio’s first product offering is <a href="/">Notify.gov</a></strong>, a text message service that helps government agencies at all levels more effectively communicate with the people they serve.
+  </p>
+  <p class="font-body-lg">We’re currently exploring two new product spaces:</p>
+  <ul>
+    <li><strong>Better Document Submission:</strong> How might we enable simple digital submission and document processing for benefits agencies?</li>
+    <li><strong>Automated Enrollment Checks:</strong> How might we improve how enrollment information is shared across benefit programs, especially where enrollment in one program provides partial or full eligibility for another program?</li>
+  </ul>
+  <p class="margin-bottom-4">If you’re interested in providing feedback on where we should go next, reach us at <a href="mailto:public-benefits-studio@gsa.gov">public-benefits-studio@gsa.gov.</a></p>
+  <p class="font-body-lg">Read more about the Studio:</p>
+  <ul>
+    <li><a href="https://digital.gov/2023/02/07/collaborate-with-the-tts-public-benefits-studio/">Collaborate with the Public Benefits Studio</a> — Digital.gov, Feb 2023</li>
+    <li><a href="https://federalnewsnetwork.com/it-modernization/2023/10/gsa-considers-text-messages-as-new-frontier-for-better-customer-experience/">GSA considers text messages as new frontier for better customer experience</a> — Federal News Network, Oct 2023</li>
+    <li><a href="https://www.gsa.gov/blog/2024/03/18/notifygov-is-helping-government-meet-families-where-they-are">Notify.gov is helping government meet families where they are</a> — GSA.gov blog, Mar 2024</li>
+  </ul>
+</section>
+
+{% endblock %}

app/templates/views/templates/_template.html

@@ -24,11 +24,10 @@
         {% endif %}
         {% if current_user.has_permissions('manage_templates') %}
             <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="usa-button usa-button--outline usa-pill-separate-item">
-              Edit
+              Edit this template
             </a>
         {% endif %}
       </div>
     </div>
   {% endif %}
 </div>
-

app/templates/views/templates/_template_list.html

@@ -38,22 +38,28 @@
     {% for item in template_list %}
 
     {% set item_link_content %}
-    {% if item.is_folder %}
-    <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}"
-      class="usa-link template-list-folder">
-      <span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
-    </a>
-    {% elif not item.ancestors %}
-    <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}"
-      class="usa-link template-list-template">
-      <span class="live-search-relevant">
-        {%- if current_service.api_keys -%}
-        <span class="display-none">{{ item.id }} </span>
-        {%- endif -%}
-        {{- format_item_name(item.name) -}}
-      </span>
-    </a>
-    {% endif %}
+      {% if item.is_folder %}
+      <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}"
+        class="usa-link template-list-folder"
+        tabindex="0"
+        role="link"
+        aria-label="{{ item.name }}">
+        <span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
+      </a>
+      {% elif not item.ancestors %}
+      <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}"
+        class="usa-link template-list-template"
+        tabindex="0"
+        role="link"
+        aria-label="{{ item.name }}">
+        <span class="live-search-relevant">
+          {%- if current_service.api_keys -%}
+          <span class="display-none">{{ item.id }} </span>
+          {%- endif -%}
+          {{- format_item_name(item.name) -}}
+        </span>
+      </a>
+      {% endif %}
     {% endset %}
 
     {% set label_content %}
@@ -82,6 +88,8 @@
     "id": "templates-or-folder-" ~ item.id,
     "classes": "template-list-item template-list-item-with-checkbox {}".format(
     "template-list-item-hidden-by-default" if item.ancestors else "template-list-item-without-ancestors"),
+    "attributes": { "role": "checkbox", "aria-describedby": item.id ~ "-item-hint" },
+
     "after": item_link_content ~ item_meta
     } %}
     {% set _ = checkboxes_data.append(checkbox_config) %}

app/templates/views/templates/choose.html

@@ -1,4 +1,4 @@
-{% from "components/folder-path.html" import folder_path, page_title_folder_path %}
+{% from "components/folder-path.html" import folder_path %}
 {% from "components/pill.html" import pill %}
 {% from "components/live-search.html" import live_search %}
 {% from "components/form.html" import form_wrapper %}
@@ -8,11 +8,9 @@
 
 {% extends "withnav_template.html" %}
 
-{% set page_title = 'Templates' %}
+{% set page_title = 'Select or create a template' %}
 
-{% block service_page_title %}
-  {{ page_title_folder_path(template_folder_path) }}
-{% endblock %}
+{% block service_page_title %}{{page_title}}{% endblock %}
 
 {% block maincolumn_content %}
 
@@ -33,15 +31,12 @@
 
   {% else %}
 
-    <div class="grid-row">
+    <div class="grid-row flex-column">
+      <h1 class="font-body-2xl line-height-sans-2 margin-bottom-1 margin-top-0">{{page_title}}</h1>
       <div class="{% if current_user.has_permissions('manage_templates') %} grid-col-10 {% else %} grid-col-12 {% endif %}">
-        <div class="usa-alert usa-alert--slim usa-alert--info">
-          <div class="usa-alert__body">
-            <p class="usa-alert__text">
-              Every message starts with a template. To send, choose or create a template.
-            </p>
-          </div>
-        </div>
+        <p class="margin-top-0 margin-bottom-4">
+          Every message starts with a template. To send, choose or create a template.
+        </p>
         {{ folder_path(
           folders=template_folder_path,
           service_id=current_service.id,
@@ -51,7 +46,7 @@
       </div>
       {% if current_user.has_permissions('manage_templates') and current_template_folder_id and user_has_template_folder_permission %}
         <div class="grid-col-2">
-          <a href="{{ url_for('.manage_template_folder', service_id=current_service.id, template_folder_id=current_template_folder_id) }}" class="usa-link folder-heading-manage-link">Manage<span class="usa-sr-only"> this folder</span></a>
+          <a href="{{ url_for('.manage_template_folder', service_id=current_service.id, template_folder_id=current_template_folder_id) }}" class="usa-link folder-heading-manage-link">Manage this folder<span class="usa-sr-only">Manage this folder</span></a>
         </div>
       {% endif %}
     </div>

app/templates/views/templates/manage-template-folder.html

@@ -3,9 +3,9 @@
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
-{% block service_page_title %}
-  {{ page_title_folder_path(template_folder_path) }}
-{% endblock %}
+{% set page_title = 'Select or create a template' %}
+
+{% block service_page_title %}{{page_title}}{% endblock %}
 
 {% block maincolumn_content %}
 

app/templates/views/templates/template.html

@@ -1,13 +1,13 @@
 {% extends "withnav_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
-{% from "components/folder-path.html" import folder_path, page_title_folder_path %}
+{% from "components/folder-path.html" import folder_path %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
 {% from "components/components/button/macro.njk" import usaButton %}
 
-{% block service_page_title %}
-  {{ page_title_folder_path(current_service.get_template_path(template._template)) }}
-{% endblock %}
+{% set page_title = 'Confirm your template' %}
+
+{% block service_page_title %}{{page_title}}{% endblock %}
 
 {% block maincolumn_content %}
 
@@ -32,8 +32,8 @@
   {% else %}
     <div class="grid-row">
       <div class="grid-col-12">
-        <h1 class="font-body-xl folder-heading margin-top-0">
-          Review your message
+        <h1 class="font-body-2xl line-height-sans-2 folder-heading margin-top-0">
+          {{page_title}}
         </h1>
         {{ folder_path(
           folders=current_service.get_template_path(template._template),
@@ -50,42 +50,44 @@
   </div>
   <div class="template-footer">
     {% if template._template.updated_at %}
-      <h2 class="font-body-lg">
+      <span class="font-body-lg text-bold">
         Last edited
-        <time class="timeago" datetime="{{ template._template.updated_at }}">
+        <time datetime="{{ template._template.updated_at }}">
           {{ template._template.updated_at|format_delta }}
         </time>
-      </h2>
-      <h3 class="margin-bottom-0">More actions</h3>
+      </span>
+      <h2 class="margin-bottom-1 font-body-lg">More actions</h2>
       <ul class="usa-list usa-list--unstyled">
         <li>
           <a class="usa-link margin-right-3"
-          href="{{ url_for('.view_template_versions', service_id=current_service.id, template_id=template.id) }}">See previous
-          versions</a>
+          href="{{ url_for('.view_template_versions', service_id=current_service.id, template_id=template.id) }}">
+            See previous versions
+          </a>
         </li>
-      </ul>
-        {% endif %}
         {% if current_user.has_permissions('manage_templates') and user_has_template_permission %}
-        {% if not template._template.archived %}
-        <ul class="usa-list usa-list--unstyled">
-        <li>
-          <a class="usa-link margin-right-3"
-          href="{{ url_for('.delete_service_template', service_id=current_service.id, template_id=template.id) }}">Delete this
-          template</a>
-        </li>
-        </ul>
+          {% if not template._template.archived %}
+            <li>
+              <a class="usa-link margin-right-3"
+              href="{{ url_for('.delete_service_template', service_id=current_service.id, template_id=template.id) }}">
+                Delete this template
+              </a>
+            </li>
+          {% endif %}
+          {% if not template._template.redact_personalisation %}
+            <li>
+              <a class="usa-link"
+              href="{{ url_for('.confirm_redact_template', service_id=current_service.id, template_id=template.id) }}">
+                Hide all personalized and conditional content after sending
+              </a> for increased privacy protection
+            </li>
+          {% else %}
+            <li>
+              <p class="hint">Personalization is hidden after sending</p>
+            </li>
+          {% endif %}
         {% endif %}
-        {% if not template._template.redact_personalisation %}
-        <ul class="usa-list usa-list--unstyled">
-        <li>
-          <a class="usa-link" href="{{ url_for('.confirm_redact_template', service_id=current_service.id, template_id=template.id) }}">Hide all personalized and conditional content after sending</a> for increased privacy protection
-        </li>
-        </ul>
-        {% else %}
-        <p class="hint">Personalization is hidden after sending</p>
-      {% endif %}
+      </ul>
     {% endif %}
-
   </div>
 
   <!--<div class="">

app/templates/views/user-has-no-permissions.html

@@ -0,0 +1,22 @@
+{% extends "withnav_template.html" %}
+{% from "components/page-header.html" import page_header %}
+{% from "components/components/back-link/macro.njk" import usaBackLink %}
+
+{% block service_page_title %}
+  You must specify at least one permission for the user.
+{% endblock %}
+
+{% block backLink %}
+  {{ usaBackLink({ "href": url_for('main.manage_users', service_id=current_service.id) }) }}
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  {{ page_header('This person has no permissions') }}
+
+  <p class="usa-body">
+    Your invited user currently has no permissions for
+    ‘{{ current_service.name }}’. Please specify grant some permissions to the user.
+  </p>
+
+{% endblock %}

app/templates/views/using-notify.html

@@ -21,7 +21,6 @@
     <ul class="list list-bullet">
       <li><a class="usa-link" href="{{ url_for('main.trial_mode_new') }}">trial mode</a></li>
       <li><a class="usa-link" href="{{ url_for('main.message_status') }}">message status types</a></li>
-      <li><a class="usa-link" href="{{ url_for('main.features_sms') }}">text message replies</a></li>
     </ul>
 
   </div>

app/templates/withnav_template.html

@@ -1,12 +1,7 @@
 {% extends "base.html" %}
 
-{% block per_page_title %}
-  {% if current_org.name %}
-    {% block org_page_title %}{% endblock %} – {{ current_org.name }}
-  {% else %}
-    {% block service_page_title %}{% endblock %} – {{ current_service.name }}
-  {% endif %}
-{% endblock %}
+{% block per_page_title %}{% if current_org.name %}{% block org_page_title %}{% endblock %} – {{ current_org.name }}{%
+  else %}{% block service_page_title %}{% endblock %} – {{ current_service.name }}{% endif %}{% endblock %}
 
 {% block main %}
   <div class="grid-container">

app/utils/csv.py

@@ -103,6 +103,7 @@ def generate_notifications_csv(**kwargs):
             "Carrier Response",
             "Status",
             "Time",
+            "Carrier",
         ]
         for header in original_column_headers:
             if header.lower() != "phone number":
@@ -118,6 +119,7 @@ def generate_notifications_csv(**kwargs):
             "Carrier Response",
             "Status",
             "Time",
+            "Carrier",
         ]
 
     yield ",".join(fieldnames) + "\n"
@@ -140,6 +142,7 @@ def generate_notifications_csv(**kwargs):
                     notification["provider_response"],
                     notification["status"],
                     preferred_tz_created_at,
+                    notification["carrier"],
                 ]
                 for header in original_column_headers:
                     if header.lower() != "phone number":
@@ -158,6 +161,7 @@ def generate_notifications_csv(**kwargs):
                     notification["provider_response"],
                     notification["status"],
                     preferred_tz_created_at,
+                    notification["carrier"],
                 ]
             yield Spreadsheet.from_rows([map(str, values)]).as_csv_data
 

app/utils/login.py

@@ -1,6 +1,10 @@
+import json
+import os
 from functools import wraps
 
-from flask import redirect, request, session, url_for
+import jwt
+import requests
+from flask import current_app, redirect, request, session, url_for
 
 from app.models.user import User
 from app.utils.time import is_less_than_days_ago
@@ -57,3 +61,32 @@ def is_safe_redirect_url(target):
         redirect_url.scheme in ("http", "https")
         and host_url.netloc == redirect_url.netloc
     )
+
+
+def get_id_token(json_data):
+    """Decode and return the id_token."""
+    client_id = os.getenv("LOGIN_DOT_GOV_CLIENT_ID")
+    certs_url = os.getenv("LOGIN_DOT_GOV_CERTS_URL")
+
+    try:
+        encoded_id_token = json_data["id_token"]
+    except KeyError as e:
+        current_app.logger.exception(f"Error when getting id token {json_data}")
+        raise KeyError(f"'access_token' {request.json()}") from e
+
+    # Getting Login.gov signing keys for unpacking the id_token correctly.
+    jwks = requests.get(certs_url, timeout=5).json()
+    public_keys = {
+        jwk["kid"]: {
+            "key": jwt.algorithms.RSAAlgorithm.from_jwk(json.dumps(jwk)),
+            "algo": jwk["alg"],
+        }
+        for jwk in jwks["keys"]
+    }
+    kid = jwt.get_unverified_header(encoded_id_token)["kid"]
+    pub_key = public_keys[kid]["key"]
+    algo = public_keys[kid]["algo"]
+    id_token = jwt.decode(
+        encoded_id_token, pub_key, audience=client_id, algorithms=[algo]
+    )
+    return id_token

app/utils/user_permissions.py

@@ -17,7 +17,6 @@ permission_options = (
     ("send_messages", "Send messages"),
     ("manage_templates", "Add and edit templates"),
     ("manage_service", "Manage settings, team and usage"),
-    ("manage_api_keys", "Manage API integration"),
 )
 
 

backstop.config.js

@@ -1,6 +1,6 @@
 const { urls, baseUrl } = require('./urls');
 
-const MISMATCH_THRESHOLD = 0.2;
+const MISMATCH_THRESHOLD = 0.3;
 const SCREENSHOT_DELAY = 2000;
 
 const createScenariosFromUrls = (urls, delay = SCREENSHOT_DELAY) => {