Small class rearrangement on landing page (#646)

This commit is contained in:
Jonathan Bobel
2023-07-28 11:10:02 -04:00
committed by GitHub
parent 27a193160f
commit 817ebbe923

View File

@@ -12,10 +12,10 @@ U.S. Notify
{% block content %}
<section aria-label="Introduction">
<div class="grid-container usa-section usa-section--dark padding-y-4">
<section class="usa-section--dark" aria-label="Introduction">
<div class="grid-container padding-y-4">
<div class="grid-row grid-gap display-flex flex-align-center">
<div class="tablet:grid-col-7">
<div class="desktop:grid-col-7 tablet:grid-col-12">
<h1 class="font-serif-2xl usa-hero__heading">Send text messages to your participants</h1>
<p class="font-sans-lg">U.S. Notify is a text messaging service that helps federal, state, local, tribal, and territorial governments more
effectively communicate with their program participants.</p>
@@ -26,7 +26,7 @@ U.S. Notify
</div>
<p class="font-sans-md">If you are interested in using U.S. Notify 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="tablet:grid-col-4 margin-x-5">
<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>
@@ -35,13 +35,13 @@ U.S. Notify
</section>
<section class="grid-container usa-section">
<div class="grid-row grid-gap">
<div class="tablet:grid-col-5 usa-prose">
<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 grid-offset-1">
<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>
@@ -49,13 +49,13 @@ U.S. Notify
</section>
<section class="grid-container usa-section">
<div class="grid-row grid-gap">
<div class="tablet:grid-col-5 usa-prose">
<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 youve sent and find out which ones are not being delivered.</p>
</div>
<div class="tablet:grid-col-6 grid-offset-1">
<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 U.S. Notify showing counts of emails and text messages sent">
</div>
@@ -63,13 +63,13 @@ U.S. Notify
</section>
<section class="grid-container usa-section">
<div class="grid-row grid-gap">
<div class="tablet:grid-col-5 usa-prose">
<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 U.S. Notify sends batches of messages for you.</p>
</div>
<div class="tablet:grid-col-6 grid-offset-1">
<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>