Merge branch 'main' into 2240-add-join-notify-to-the-main-nav

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -957,6 +957,9 @@ li.linked-card:hover svg,
   .usa-card__container {
     align-items: center;
     text-align: center;
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     img {
       margin: units(4) auto 0;
       width: units(15);
@@ -965,9 +968,17 @@ li.linked-card:hover svg,
     .usa-card__body {
       margin-bottom: units(2);
     }
+    .blue-bar {
+      background-color: #005eb8;
+      height: 1.3em;
+      width: 100%;
+      margin: 0;
+      border-radius: 0;
+    }
   }
 }
 
+
 .contact-us-card {
   border: 2px solid color("ink");
   padding: units(2);

app/templates/views/about/why-text-messaging.html

@@ -40,7 +40,7 @@
   </p>
   <p>
     Texting not only helps programs reach people using a nearly-universal communication method, it is a cost effective
-    way to do so. With Notify.gov <a href="#">you can get started for free</a>, allowing you to try out
+    way to do so. With Notify.gov <a href="/join-notify">you can get started for free</a>, allowing you to try out
     texting to complement your existing communications and outreach strategies.
   </p>
   <h2 id="what-texting-is-best-for">What texting is best for</h2>

app/templates/views/join-notify.html

@@ -126,14 +126,14 @@
   {
   "heading": "What if I need more than 250,000 messages?",
   "p_text": "Plans that include additional messages for a fee will be available soon. We want to design these plans
-  based on our partners’ needs, so please <a href='mailto:tts-notify@gsa.gov'>contact us</a> if you hope to be able to
+  based on our partners’ needs, so please <a class='use-link usa-link--external' href='mailto:tts-notify@gsa.gov'>contact us</a> if you hope to be able to
   send more messages. We’d like to talk with you.",
   "position": "b-a1"
   },
   {
   "heading": "What phone numbers can my agency send to?",
   "p_text": "Right now, Notify.gov supports sending messages to North American numbers (+1). If you’d like to send to
-  international numbers, we want to <u>hear from you</u>.",
+  international numbers, we want to <a href='/contact'>hear from you</a>.",
   "position": "b-a2",
   },
   {
@@ -146,7 +146,7 @@
   {
   "heading": "Can we use API integrations with Notify?",
   "p_text": "While public API integrations are not yet available, we are working on enabling these. If you're looking
-  for this feature <a href='/about/contact'>we want to hear from you</a>.",
+  for this feature <a href='/contact'>we want to hear from you</a>.",
   "position": "b-a4",
   },
   {
@@ -164,7 +164,7 @@
   {
   "heading": "My OGC is asking about consent, where can I get more information for them?",
   "p_text": "Text message notifications are governed by the Telephone Consumer Protection Act. Different levels of
-  government have different consent requirements. Download and share our <a
+  government have different consent requirements. Download and share our <a class='use-link usa-link--external'
     href='https://github.com/GSA/notifications-admin/files/15100120/TCPA.Overview_Notify.gov.pdf'>overview of the
     TCPA</a> with your legal counsel as
   a starting point.",

app/templates/views/signedout.html

@@ -66,6 +66,7 @@ import usaButton %} {% block meta %}
       <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">
+            <div class="blue-bar"></div>
             <img
               src="{{ asset_url('images/internet.svg') }}"
               alt="Globe on top of a web browser"
@@ -80,6 +81,7 @@ import usaButton %} {% block meta %}
         </li>
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
+            <div class="blue-bar"></div>
             <img
               src="{{ asset_url('images/fast.svg') }}"
               alt="Stopwatch with a notification speech bubble with a star inside"
@@ -94,6 +96,7 @@ import usaButton %} {% block meta %}
         </li>
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
+            <div class="blue-bar"></div>
             <img
               src="{{ asset_url('images/status.svg') }}"
               alt="3 status messages, 2 successes and one failure"
@@ -110,6 +113,7 @@ import usaButton %} {% block meta %}
       <ul class="usa-card-group">
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
+            <div class="blue-bar"></div>
             <img
               src="{{ asset_url('images/translation.svg') }}"
               alt="Speech bubbles with the letter A and the Chinese character for language"
@@ -126,6 +130,7 @@ import usaButton %} {% block meta %}
         </li>
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
+            <div class="blue-bar"></div>
             <img
               src="{{ asset_url('images/security.svg') }}"
               alt="Lock with code icon inside on top of a web browser"
@@ -136,13 +141,14 @@ import usaButton %} {% block meta %}
             <div class="usa-card__body">
               <p>
                 Limited data retention, encryption, and multi-factor
-                authentication protect user data and manage risk
+                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="blue-bar"></div>
             <img
               src="{{ asset_url('images/send.svg') }}"
               alt="Paper airplane and a notification icon with the number 1 inside"