Skip to content

Commit

Permalink
Updated images and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonathanbobel
jonathanbobel committed Feb 7, 2025
1 parent 7713739 commit 234569b
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 31 deletions.
Binary file added app/assets/images/product/couple-looking-at-phone.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/product/person-with-phone.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 18 additions & 1 deletion app/assets/sass/uswds/_home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,37 @@
}

.usa-hero > .grid-container {
@media (max-width: units('desktop')) {
@media (max-width: units('tablet')) {
padding-top: 1rem;
padding-bottom: 1rem;
}
}

.usa-section {
&.key-features {
background-color: color('gray-cool-2');
}
&.security-and-privacy {
img {
filter: brightness(0) saturate(100%) invert(22%) sepia(98%) saturate(1829%) hue-rotate(187deg) brightness(88%) contrast(101%);
}
}
&__home {
h2 {
font-size: units(6);
line-height: 1.2;
@media (max-width: units('desktop')) {
font-size: units(4);
}
}
p {
font-size: 20px;
}
img {
@media (max-width: units('tablet')) {
max-width: 60%;
}
}
}
}

Expand All @@ -39,6 +55,7 @@
text-align: center;
overflow: hidden;
border: 0;
background-color: transparent;
.img-container {
width: units('card');
height: units('card');
Expand Down
66 changes: 36 additions & 30 deletions app/templates/views/signedout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,12 @@ <h1 class="usa-hero__heading">
</section>
<section class="grid-container usa-section usa-section__home border-top border-base-lighter usa-prose padding-bottom-4">
<div class="grid-row flex-align-center flex-justify-center">
<div class="tablet:grid-col-4 mobile-lg:grid-col-12">
<img src="{{ asset_url('images/product/people-with-phone.png') }}" alt="A couple smiling and looking at a cell phone together"/>
<div class="tablet:grid-col-4 mobile-lg:grid-col-12 display-flex flex-justify-center margin-bottom-6">
<img
src="{{ asset_url('images/product/couple-looking-at-phone.png') }}"
alt="A couple smiling and looking at a cell phone together"/>
</div>
<div class="tablet:grid-col-6 tablet:margin-left-6 mobile-lg:grid-col-12">
<div class="tablet:grid-col-6 tablet:margin-left-8 mobile-lg:grid-col-12">
<h2 class="font-body-xl margin-top-0 margin-bottom-3">
Government texting made easy
</h2>
Expand All @@ -52,9 +54,9 @@ <h2 class="font-body-xl margin-top-0 margin-bottom-3">
</div>
</section>

<section class="grid-container usa-section usa-section__home usa-prose padding-bottom-4">
<section class="usa-section usa-section__home usa-prose key-features padding-bottom-4">
<h2 class="text-center margin-top-0">Key features</h2>
<div class="home-cards margin-top-5">
<div class="grid-container 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">
Expand Down Expand Up @@ -106,7 +108,7 @@ <h3>Track message delivery</h3>
</li>
</ul>
<ul class="usa-card-group">
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
<li class="usa-card tablet:grid-offset-2 tablet:grid-col-4 mobile-lg:grid-col-12">
<div class="usa-card__container">
<div class="img-container">
<img
Expand All @@ -122,25 +124,6 @@ <h3>Send in recipients' preferred language</h3>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
<div class="usa-card__container">
<div class="img-container">
<img
src="{{ asset_url('images/security.svg') }}"
alt=""
/>
</div>
<div class="usa-card__header">
<h3 class="padding-bottom-0">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 with <br><a href="/about/security">our security efforts</a>
</p>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
<div class="usa-card__container">
<div class="img-container">
Expand All @@ -166,9 +149,35 @@ <h3 class="padding-bottom-0">
</div>
</section>

<section class="grid-container usa-section usa-section__home usa-prose grid-container margin-bottom-15">
<section class="usa-section usa-section__home usa-prose security-and-privacy padding-y-6 bg-base-lighter">
<div class="grid-container">
<div class="grid-row flex-align-center flex-justify-center">
<div class="tablet:grid-col-7 mobile-lg:grid-col-12 margin-bottom-4">
<h2 class="font-heading-xl margin-top-0 margin-bottom-3">
Security and privacy
</h2>
<p class="usa-body margin-bottom-5">
Limited data retention, encryption, and multi-factor authentication protect user data and manage risk.
</p>
<a class="usa-button usa-button--big" href="/join-notify">Our security efforts</a>
</div>
<div class="tablet:grid-col-3 mobile-lg:grid-col-12 display-flex flex-justify-center">
<img
class="width-card-lg"
src="{{ asset_url('images/security.svg') }}"
alt=""
/>
</div>
</div>
</div>
</section>

<section class="grid-container usa-section usa-section__home usa-prose margin-bottom-15">
<div class="grid-row flex-align-center flex-justify-center">
<div class="tablet:grid-col-6 mobile-lg:grid-col-12 margin-right-6 margin-bottom-6">
<div class="tablet:grid-col-4 mobile-lg:grid-col-12 display-flex flex-justify-center margin-right-8 margin-bottom-5">
<img src="{{ asset_url('images/product/who-can-use-notify.png') }}" alt="Woman smiling behind two computer screens"/>
</div>
<div class="tablet:grid-col-6 mobile-lg:grid-col-12">
<h2 class="font-heading-xl margin-top-0 margin-bottom-3">
Who can use Notify.gov?
</h2>
Expand All @@ -185,9 +194,6 @@ <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
</p>
<a class="usa-button usa-button--big" href="/join-notify">Become a Notify.gov partner</a>
</div>
<div class="tablet:grid-col-4 mobile-lg:grid-col-12 display-flex flex-justify-center"">
<img src="{{ asset_url('images/product/who-can-use-notify.png') }}" alt="Woman smiling behind two computer screens"/>
</div>
</section>
{% endblock %}
</main>
Expand Down

0 comments on commit 234569b

Please sign in to comment.