notifications-admin/app/templates/views/signedout.html

{% 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 %}
<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 partner
          </div>
        </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 border-top border-base-lighter usa-prose"
  >
    <h2 class="font-heading-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>

  <section class="grid-container usa-section usa-section__home usa-prose">
    <h2 class="font-heading-xl margin-top-0 margin-bottom-3">Key features</h2>
    <div class="display-flex flex-wrap fixed-row">
      <div class="usa-alert usa-alert--info fixed-box">
        <img src="{{ asset_url('images/internet.svg') }}" alt="Internet icon" />
        <h3 class="font-heading-md">Web-based</h3>
        <p>Nothing to download or install</p>
      </div>

      <div class="usa-alert usa-alert--info fixed-box">
        <img src="{{ asset_url('images/fast.svg') }}" alt="Fast icon" />
        <h3 class="font-heading-md">Fast and easy</h3>
        <p class="usa-body">No technical expertise required</p>
      </div>
      <div class="usa-alert usa-alert--info fixed-box">
        <img src="{{ asset_url('images/status.svg') }}" alt="Status icon" />
        <h3 class="font-heading-md">Track message delivery</h3>
        <p class="usa-body">See which messages were received</p>
      </div>
    </div>

    <div class="display-flex flex-wrap justify-content fixed-row">
      <div class="usa-alert usa-alert--info fixed-box">
        <img
          src="{{ asset_url('images/translation.svg') }}"
          alt="Translation icon"
        />
        <h3 class="font-heading-md">Send in recipients' preferred language</h3>
        <p class="usa-body">
          Notify.gov has support for more than 30 character sets
        </p>
      </div>

      <div class="usa-alert usa-alert--info fixed-box">
        <img src="{{ asset_url('images/security.svg') }}" alt="Security icon" />
        <h3 class="font-heading-md">Security and privacy</h3>
        <p class="usa-body">
          Limited data retention, encryption, and multi-factor authentication
          protect user data and manage risk
        </p>
      </div>

      <div class="usa-alert usa-alert--info fixed-box">
        <img src="{{ asset_url('images/send.svg') }}" alt="Send icon" />
        <h3 class="font-heading-md">Send bulk, customized, one-way messages</h3>
        <p class="usa-body">
          Send hundreds or thousands of individually customized messages with
          just a few clicks
        </p>
      </div>
    </div>
  </section>

  <section
    class="grid-container usa-section usa-section__home usa-prose grid-container"
  >
    <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="card-hover-link grid-col-3">
      <a href="mailto:tts-notify@gsa.gov">
        <div
          class="gsa-usa-alert-signed-out usa-alert usa-alert--info padding-3 border-2px bg-white margin-top-3 tablet:grid-col-3"
        >
          <div class="grid-row flex-align-center grid-gap-2">
            <div class="grid-col-auto">
              <img
                src="{{ asset_url('images/contact.svg') }}"
                alt="Icon for contact us"
                class="height-6 width-6"
              />
            </div>
            <div class="grid-col">
              <p class="margin-0">
                <strong>Contact us</strong><br />
                To learn more about becoming a partner!
              </p>
            </div>
          </div>
        </div>
      </a>
    </div>
  </section>

  {% endblock %}
</main>
{% endblock %}