{% extends "fullwidth_template.html" %}

{% block meta %}
  <meta name="description" content="GOV.UK Notify lets you send emails, text messages and letters to your users. Try it now if you work in central government, a local authority, or the NHS.">
{% endblock %}

{% block page_title %}
  GOV.UK Notify
{% endblock %}

{% block maincolumn_content %}

  <div class="product-page-intro">
    <div class="product-page-intro-wrapper override-elements-content" id="content">
      <nav class="breadcrumbs breadcrumbs--inverse" aria-label="Breadcrumbs">
       <ol itemscope itemtype="http://schema.org/BreadcrumbList">
         <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
           <a href="https://www.gov.uk/service-toolkit#gov-uk-services" itemprop="item"><span itemprop="name">GOV.UK services</span></a>
         </li>
         <li class="breadcrumbs__item breadcrumbs__item--active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
           <a href="#main" itemprop="item"><span itemprop="name">GOV.UK Notify</span></a>
         </li>
       </ol>
      </nav>
      <div class="grid-row">
        <div class="column-two-thirds">
          <h1>
            Send emails, text messages and letters to your users
          </h1>
          <p>
            Try GOV.UK Notify now if you work in central government, a&nbsp;local authority, or the NHS.
          </p>
          <div class="button-container">
            <a class="button button-start" href='{{ url_for('.register' )}}'>
              Create an account
            </a>
            or <a href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
            it before
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="product-page-section">
    <div class="grid-row">
      <div class="column-half">
        <h2>
          Control your content
        </h2>
        <p>
          You don’t need any technical knowledge to create email,
          text&nbsp;message or letter templates.
        </p>
      </div>
      <div class="column-half">
        <img src="{{ asset_url('images/product/01-templates.svg') }}" alt="">
      </div>
    </div>
  </div>
  <div class="product-page-section">
    <div class="grid-row">
      <div class="column-half">
        <h2>
          See how your messages perform
        </h2>
        <p>
          Track how many messages you’ve sent and
          find out which ones aren’t getting delivered.
        </p>
      </div>
      <div class="column-half">
        <img
          src="{{ asset_url('images/product/02-reporting.svg') }}"
          alt="A screenshot of GOV.UK 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="grid-row">
      <div class="column-half">
        <p>
          Upload a spreadsheet of email&nbsp;addresses or
          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 colour"
        >
      </div>
      <div class="column-half">
        <p>
          Integrate the GOV.UK 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">
    <h2 class="with-keyline">
      Introducing GOV.UK Notify
    </h2>
    <div class="responsive-embed responsive-embed--16by9 responsive-embed--bordered bottom-gutter-2">
      <div class="responsive-embed__wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/_90cv1YgQo4" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
  <div class="product-page-section">
    <div class="with-keyline bottom-gutter-2">
      <h2>Who’s using GOV.UK Notify</h2>
      <div class="grid-row bottom-gutter">
        <div class="column-half">
          <h3 class="visually-hidden">Services</h3>
          <div class="product-page-big-number">614</div>
          services
        </div>
        <div class="column-half">
          <h3 class="visually-hidden">Organisations</h3>
          <div class="product-page-big-number">194</div>
          organisations
        </div>
      </div>
      <p>
        See the
        <a href="https://www.gov.uk/performance/govuk-notify/government-services">list of services and organisations</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="column-half">
          <h3 class="visually-hidden">Emails</h3>
          <div class="product-page-big-number">Unlimited</div>
          free emails
        </div>
        <div class="column-half">
          <h3 class="visually-hidden">Text messages</h3>
          <div class="product-page-big-number">250,000</div>
          free text messages a year,<br>
          then 1.58 pence per message
        </div>
        <div class="column-half">
          <h3 class="visually-hidden">Letters</h3>
          <div class="product-page-big-number">30 pence</div>
          to print and post a one page letter
        </div>
        <div class="column-half">
          <p class="align-with-big-number-hint">
            There’s no monthly charge, no setup fee and no&nbsp;procurement process.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="product-page-section">
    <div class="grid-row">
      <div class="column-half">
        <h2 class="with-keyline">
          The team
        </h2>
        <p>
          GOV.UK Notify is built by the Government Digital Service
          and is supported 24 hours a day, 7 days a week.
        </p>
        <p>
          <a href="{{ url_for('main.support') }}">Contact the team</a> if you have a question or want
          to give feedback.
        </p>
      </div>
      <div class="column-half">
        <img
          src="{{ asset_url('images/product/team.jpg') }}"
          alt="A photo of the GOV.UK Notify team gathered around a big screen. One team member is pointing at a graph on the screen."
        >
      </div>
    </div>
  </div>


{% endblock %}