mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-02 17:48:50 -04:00
Updating new home page styles to use more from the USWDS, and make sure it's responsive and accessible
This commit is contained in:
Jonathan Bobel
@@ -11,8 +11,8 @@ import usaButton %} {% block meta %}
|
||||
<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">
|
||||
<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">
|
||||
@@ -34,20 +34,20 @@ import usaButton %} {% block meta %}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="desktop:grid-col-4 grid-offset-1 desktop:display-block display-none margin-x-5"
|
||||
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="An illustration of notifications to a phone."
|
||||
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"
|
||||
class="grid-container usa-section usa-section__home border-top border-base-lighter usa-prose padding-bottom-1"
|
||||
>
|
||||
<h2 class="font-heading-xl margin-top-0 margin-bottom-3">
|
||||
<h2 class="font-body-xl margin-top-0 margin-bottom-3">
|
||||
Government texting made easy
|
||||
</h2>
|
||||
<p class="usa-body">
|
||||
@@ -57,62 +57,92 @@ import usaButton %} {% block meta %}
|
||||
</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>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
|
||||
<div class="usa-card__container">
|
||||
<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>
|
||||
|
||||
<section
|
||||
class="grid-container usa-section usa-section__home usa-prose grid-container"
|
||||
>
|
||||
<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>
|
||||
@@ -127,28 +157,28 @@ import usaButton %} {% block meta %}
|
||||
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 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/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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user