{% extends "fullwidth_template.html" %}
{% from "components/uk_components/button/macro.njk" import govukButton %}

{% block meta %}
<meta name="description"
  content="U.S. Notify lets you send text messages to your users. Try it now if you work in federal, state, or local government.">
{% endblock %}

{% block pageTitle %}
U.S. Notify
{% endblock %}

{% block content %}

<section aria-label="Introduction">
  <div class="grid-container usa-section usa-section--dark padding-y-4">
    <div class="grid-row grid-gap display-flex flex-align-center">
      <div class="tablet:grid-col-8">
        <h1 class="font-serif-2xl usa-hero__heading">Send text messages to your users</h1>
        <p class="font-sans-lg margin-bottom-5">Try U.S. Notify now if you work in federal, state, or local government.
        </p>
        <div class="usa-button-group">
          <a class="usa-button usa-button--big" href="{{ url_for('main.register' )}}">Create an account</a>
          or <a class="usa__link margin-x-1" href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
          it before
        </div>
      </div>
      <div class="tablet:grid-col-3 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">
  <div class="grid-row grid-gap">
    <div class="tablet:grid-col-5 usa-prose">
      <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
        Control your content
      </h2>
      <p>You do not need any technical knowledge to create message templates.</p>
    </div>
    <div class="tablet:grid-col-6 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">
  <div class="grid-row grid-gap">
    <div class="tablet:grid-col-5 usa-prose">
      <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
        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 grid-offset-1">
      <img src="{{ asset_url('images/product/02-reporting-no-chrome.svg') }}"
        alt="A screenshot of U.S. Notify showing counts of emails and text messages sent">
    </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 U.S. Notify 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 U.S. Notify
    </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>.
    </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.organisations|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>
  </div>
</section>
<section class="grid-container usa-section border-top border-base-lighter usa-prose">
  <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
    The team
  </h2>
  <p class="usa-body">
    U.S. Notify is built and maintained by the Public Benefits Studio, within the General Services Administration's
    Technology Transformation Services.
  </p>
  <p class="usa-body">
    <a class="usa-link" href="{{ url_for('main.support') }}">Contact us</a> if you have a
    question or want
    to give feedback.
  </p>
</section>

<!-- <div class="product-page-intro"></div> -->

<!-- <div class="product-page-intro-wrapper" data-module="homepage">
      <nav class="breadcrumbs breadcrumbs--inverse" aria-label="Breadcrumbs">

      </nav>
      <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
          <h1>
            Send text messages to your users
          </h1>
          <p>
            Try U.S. Notify now if you work in federal, state, or local government.
          </p>
          <div class="button-container">
            {{ govukButton({
              "element": "a",
              "text": "Create an account",
              "classes": "product-page-button button-container__button govuk-!-margin-right-3",
              "href": url_for('main.register' )
            }) }}
            or <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
            it before
          </div>
        </div>
        <div class="govuk-grid-column-one-third">
          <img
            src="{{ asset_url('images/product/proposition-illustration.png') }}"
            alt="An illustration of notifications to a phone, a laptop, and a letter.">
        </div>
      </div>
    </div>
  </div>

  <div class="product-page-section">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-half">
        <h2>
          Control your content
        </h2>
        <p>
          You do not need any technical knowledge to create message templates.
        </p>
      </div>
      <div class="govuk-grid-column-one-half">
        <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="govuk-grid-row">
      <div class="govuk-grid-column-one-half">
        <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="govuk-grid-column-one-half">
        <img
          src="{{ asset_url('images/product/02-reporting.svg') }}"
          alt="A screenshot of U.S. Notify 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="govuk-grid-row">
      <div class="govuk-grid-column-one-half">
        <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="govuk-grid-column-one-half">
        <p>
          Integrate the U.S. Notify 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 U.S. Notify</h2>
      <div class="govuk-grid-row bottom-gutter">
        <div class="govuk-grid-column-one-half">
          <span class="usa-sr-only">There are</span>
          <div class="product-page-big-number">{{ counts.organisations|format_thousands }}</div>
          <span>organizations</span>
        </div>
        <div class="govuk-grid-column-one-half">
          <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="govuk-link govuk-link--no-visited-state" 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="govuk-grid-row bottom-gutter">
        <div class="govuk-grid-column-one-half">
          <h3 class="usa-sr-only">Emails</h3>
          <div class="product-page-big-number">Unlimited</div>
          <span>free emails</span>
        </div>
        <div class="govuk-grid-column-one-half">
          <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="govuk-grid-column-one-half">
          <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="govuk-link govuk-link--no-visited-state" href="https://www.notifications.service.gov.uk/pricing">pricing</a>.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="product-page-section">
    <div class="govuk-grid-row margin-bottom-">
      <div class="govuk-grid-column-full">
        <h2 class="with-keyline">
          The team
        </h2>
        <p>
          U.S. Notify is built and maintained by the Public Benefits Studio, within the General Services Administration's Technology Transformation Services.
        </p>
        <p>
          <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.support') }}">Contact us</a> if you have a question or want
          to give feedback.
        </p>
      </div>
    </div>
  </div>-->


{% endblock %}