Merge pull request #21 from GSA-TTS/update-homepage-and-top-menu

Made updates to the homepage and main top menu
GSA-TTS · Jun 21, 2024 · df4b78b · df4b78b
2 parents 92b1b48 + 0f39068
commit df4b78b
Show file tree

Hide file tree

Showing 19 changed files with 437 additions and 219 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -22,6 +22,7 @@ module.exports = function (config) {
   config.addPassthroughCopy({ './theme/img': 'assets/img' });
   config.addPassthroughCopy({ './favicon': '/favicon' });
   config.addPassthroughCopy({ './favicon/favicon.ico': '/myfavicon.ico' });
+  config.addPassthroughCopy({ './pdf': 'assets/pdf' });
 
   // Add plugins
   config.addPlugin(pluginRss);

diff --git a/_data/Mutual_Aid_Supply_Side_Contacts.numbers b/_data/Mutual_Aid_Supply_Side_Contacts.numbers
diff --git a/_data/Stantec_MABD_Export.csv b/_data/Stantec_MABD_Export.csv
diff --git a/_data/assetPaths.json b/_data/assetPaths.json
@@ -54,6 +54,6 @@
   "admin.map": "/assets/js/admin-GBLI77MO.js.map",
   "app.js": "/assets/js/app-34WFVF7Q.js",
   "app.map": "/assets/js/app-34WFVF7Q.js.map",
-  "index.css": "/assets/styles/index-PDJNSGFN.css",
-  "index.map": "/assets/styles/index-PDJNSGFN.css.map"
+  "index.css": "/assets/styles/index-HEPSO67B.css",
+  "index.map": "/assets/styles/index-HEPSO67B.css.map"
 }
diff --git a/_data/site.yaml b/_data/site.yaml
@@ -50,14 +50,12 @@ ga:
 
 # Site Navigation
 primary_navigation:
-  - name: Find assistance
-    url: /posts/find-assistance/
   - name: Training & resources
     url: /posts/training/
   - name: FAQs
     url: /posts/faq/
-  - name: Contacts
-    url: /posts/contacts/
+  - name: Contact
+    url: /posts/contact/
 
     # Add  choldren if adding a sub menu
     # children:

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -5,41 +5,41 @@
         <div class="tablet:grid-col">
           <h4>Mutual aid SRC</h4>
           <ul class="add-list-reset">
-            <li><a href="/accessibility" class="survey-processed">Accessibility</a></li>
-            <li><a href="/about/reports-and-data/annual-reports" class="survey-processed">Accountability</a></li>
-            <li><a href="/careers" class="survey-processed">Careers</a></li>
-            <li><a href="/about/contact" class="survey-processed">Contact Us</a></li>
+            <li><a href="https://www.fema.gov/accessibility" class="usa-link usa-link--external survey-processed" target="_blank">Accessibility</a></li>
+            <li><a href="https://www.fema.gov/about/reports-and-data/annual-reports" class="usa-link usa-link--external survey-processed" target="_blank">Accountability</a></li>
+            <li><a href="https://www.fema.gov/careers" class="usa-link usa-link--external survey-processed" target="_blank">Careers</a></li>
+            <li><a href="https://www.fema.gov/about/contact" class="usa-link usa-link--external survey-processed" target="_blank">Contact Us</a></li>
           </ul>
         </div>
         <div class="tablet:grid-col">
           <h4>FEMA resources</h4>
           <ul class="add-list-reset">
-            <li><a href="/about/organization/equal-rights/no-fear-act" class="survey-processed">No FEAR Act</a></li>
-            <li><a href="/foia" class="survey-processed">FOIA</a></li>
-            <li><a href="/about/privacy-policy" class="survey-processed">Privacy</a></li>
+            <li><a href="https://www.fema.gov/about/organization/equal-rights/no-fear-act" class="usa-link usa-link--external survey-processed" target="_blank">No FEAR Act</a></li>
+            <li><a href="https://www.fema.gov/foia" class="usa-link usa-link--external survey-processed" target="_blank">FOIA</a></li>
+            <li><a href="https://www.fema.gov/about/privacy-policy" class="usa-link usa-link--external survey-processed" target="_blank">Privacy</a></li>
           </ul>
         </div>
-        <div class="tablet:grid-col">
+        <div class="tablet:grid-col last-column">
           <h4>Partner sites</h4>
           <ul class="add-list-reset">
-            <li><a href="https://www.ready.gov/" target="_blank" class="survey-processed">Ready.gov</a></li>
-            <li><a href="https://www.whitehouse.gov/" target="_blank" class="survey-processed">Whitehouse.gov</a></li>
-            <li><a href="https://dhs.gov" target="_blank" class="survey-processed">DHS.gov</a></li>
-            <li><a href="https://www.fema.gov/" target="_blank" class="survey-processed">FEMA.gov</a>
-            <li><a href="https://usa.gov" target="_blank" class="survey-processed">USA.gov</a>
+            <li><a href="https://www.ready.gov/" target="_blank" class="usa-link usa-link--external survey-processed" target="_blank">Ready.gov</a></li>
+            <li><a href="https://www.whitehouse.gov/" target="_blank" class="usa-link usa-link--external survey-processed" target="_blank">Whitehouse.gov</a></li>
+            <li><a href="https://dhs.gov" target="_blank" class="usa-link usa-link--external survey-processed" target="_blank">DHS.gov</a></li>
+            <li><a href="https://www.fema.gov/" target="_blank" class="usa-link usa-link--external survey-processed" target="_blank">FEMA.gov</a>
+            <li><a href="https://usa.gov" target="_blank" class="usa-link usa-link--external survey-processed" target="_blank">USA.gov</a>
           </ul>
         </div>
-        <div class="tablet:grid-col">
+        <div class="tablet:grid-col mobile:margin-top-2">
           <div class="logo-links">
             <a class="footer-logo media_link" href="{{ '/' | url }}">
               <div class="usa-logo">
                 <img alt="10x Bring Mutual Aid logo" src="{{ '/assets/img/bm-logo.svg' | url }}" width="300" height="67">
               </div>
             </a>
           </div>
-          <div style="font-size: smaller;">
+          <div class="font-body-3xs">
             DEMO website of the<br>
-            <a style="color: white;" href="https://www.dhs.gov/">Department of Homeland Security</a>
+            <a class="usa-link usa-link--external" href="https://www.dhs.gov/" target="_blank">Department of Homeland Security</a>
           </div>
         </div>
       </div>

diff --git a/_includes/hero.html b/_includes/hero.html
@@ -1,4 +1,4 @@
-<section class="usa-hero" aria-label="Introduction">
+<section class="usa-hero" id="mutual-aid-search" aria-label="Introduction">
   <img fetchpriority="high" src="{{ '/assets/img/hero.webp' | url }}" alt="" width="0" height="0"
     style="display: none !important;" />
   <div class="grid-container">
@@ -18,15 +18,15 @@ <h1 class="usa-hero__heading margin-bottom-4">
               State or Territory
             </label>
             <div class="grid-row grid-gap-2">
-              <span class="desktop:grid-col-7 mobile:grid-col-12 margin-bottom-2">
-                <select class="usa-select" id="state" name="state">
+              <span class="tablet:grid-col-8 mobile:grid-col-12 margin-bottom-2">
+                <select class="usa-select" id="state" name="state" required>
                   <option value>- Select -</option>
                   {% for item in csvData.stantecMABD %}
                   <option value="{{ item.Abbr | slug }}">{{ item.Abbr }} - {{ item.State }}</option>
                   {% endfor %}
                 </select>
               </span>
-              <span class="desktop:grid-col-5 mobile:grid-col-12">
+              <span class="tablet:grid-col-4 mobile:grid-col-12 desktop:text-right">
                 <input class="usa-button" type="submit" value="View aid options" />
               </span>
             </div>

diff --git a/_includes/highlights.html b/_includes/highlights.html
@@ -1,86 +1,43 @@
 <section class="usa-graphic-list home-highlights usa-section usa-section--dark">
   <div class="grid-container">
-    <h2 class="font-family-serif">How can mutual aid help?</h2>
     <ul class="usa-card-group grid-row grid-gap">
-      <li class="usa-card usa-card--flag desktop:grid-col-6 mobile:grid-col-12">
+      <li class="usa-card usa-card--flag grid-col-12">
         <div class="usa-card__container card-1">
           <div class="usa-card__header">
             <h3 class="usa-card__heading">
-              Credentialed experts
+              How can mutual aid resources help your building department?
             </h3>
           </div>
           <div class="usa-card__media">
             <div class="usa-card__img">
-              <img class="usa-media-block__img" src="{{ '/assets/img/experts.svg' | url }}" alt="" width="71" height="71" />
+              <img class="usa-media-block__img" src="{{ '/assets/img/help-icon.webp' | url }}" alt="" width="180" height="180" />
             </div>
           </div>
           <div class="usa-card__body">
-            <p>Access organizations and individuals with needed certifications, licenses, and decades of post-disaster rebuilding experience. </p>
-          </div>
-          <div class="usa-card__footer">
-            <a href="{{ '/posts/experts' | url }}" class="usa-button">Learn More <span class="usa-sr-only"> about how access organizations and individuals with needed credentials.</span> </a>
+            <ul>
+              <li>Following a disaster, many local building departments struggle to handle the increased demand for post-disaster inspections, permitting, and building code enforcement tasks.</li>
+              <li>Mutual aid agreements allow building departments to request public or private sector personnel for short-term deployments to their community to assist rebuilding efforts.</li>
+            </ul>
           </div>
         </div>
       </li>
-      <li class="usa-card usa-card--flag desktop:grid-col-6 mobile:grid-col-12">
+      <li class="usa-card usa-card--flag grid-col-12">
         <div class="usa-card__container card-2">
           <div class="usa-card__header">
             <h3 class="usa-card__heading">
-              Inspections & permits
-            </h3>
-          </div>
-          <div class="usa-card__media">
-            <div class="usa-card__img">
-              <img class="usa-media-block__img" src="{{ '/assets/img/inspections.svg' | url }}" alt="" width="92" height="92" />
-            </div>
-          </div>
-          <div class="usa-card__body">
-            <p> Find certified personnel that can rapidly deploy to help your community inspect structures and issue building permits. </p>
-          </div>
-          <div class="usa-card__footer">
-            <a href="{{ '/posts/inspections' | url }}" class="usa-button">
-              Learn More <span class="usa-sr-only"> about how to find certified personnel that can be rapidly deployed to help your community.</span> 
-            </a>
-          </div>
-        </div>
-      </li>
-      <li class="usa-card usa-card--flag desktop:grid-col-6 mobile:grid-col-12">
-        <div class="usa-card__container card-3">
-          <div class="usa-card__header">
-            <h3 class="usa-card__heading">
-              Building code knowledge
+              Who can use mutual aid assistance for rebuilding?
             </h3>
           </div>
           <div class="usa-card__media">
             <div class="usa-card__img">
-              <img class="usa-media-block__img" src="{{ '/assets/img/codes.svg' | url }}" alt="" width="87" height="87" />
+              <img class="usa-media-block__img" src="{{ '/assets/img/build-icon.webp' | url }}" alt="" width="180" height="180" />
             </div>
           </div>
           <div class="usa-card__body">
-            <p>Get connected with experts that understand the most up-to-date building codes to ensure community safety and resiliency.</p>
-          </div>
-          <div class="usa-card__footer">
-            <a href="{{ '/posts/codes' | url }}" class="usa-button">Learn More <span class="usa-sr-only"> about how to get connected with experts that understand the most up-to-date building codes.</span></a>
-          </div>
-        </div>
-      </li>
-      <li class="usa-card usa-card--flag desktop:grid-col-6 mobile:grid-col-12">
-        <div class="usa-card__container card-4">
-          <div class="usa-card__header">
-            <h3 class="usa-card__heading">
-              Navigating disaster recovery
-            </h3>
-          </div>
-          <div class="usa-card__media">
-            <div class="usa-card__img">
-              <img class="usa-media-block__img" src="{{ '/assets/img/recovery.svg' | url }}" alt="" width="84" height="84" />
-            </div>
-          </div>
-          <div class="usa-card__body">
-            <p>Learn the process of applying for grants, loans, and other forms of assistance available to communities recovering from disasters.</p>
-          </div>
-          <div class="usa-card__footer">
-            <a href="{{ '/posts/recovery' | url }}" class="usa-button">Learn More <span class="usa-sr-only"> about the process of applying for grants, loans, and other forms of assistance.</span></a>
+            <ul>
+              <li>States and territories have a variety of agreements with differing rules and regulations on how building departments may request assistance and expense reimbursement.</li>
+              <li>Use our <a class="usa-link" href="#mutual-aid-search">mutual aid resource search</a> to start identifying what assistance options are available in your location and to connect with organizations that can provide help to your community.</li>
+            </ul>
           </div>
         </div>
       </li>

diff --git a/_includes/layouts/contact.html b/_includes/layouts/contact.html
@@ -0,0 +1,41 @@
+---
+layout: layouts/default
+---
+
+<div class="usa-section {{ className }}">
+  <div class="grid-container">
+    <div class="grid-row grid-gap">
+      <main class="grid-col-12 usa-prose" id="main-content">
+        <h1 class="title">Contact</h1>
+        <div class="usa-alert usa-alert--error" role="alert">
+          <div class="usa-alert__body">
+            <h2 class="usa-alert__heading">Emergency help</h2>
+            <p>If you need emergency help with an active disaster event, please dial 9-1-1.</p>
+            <p>Visit FEMA's <a class="usa-link usa-link--external" href="https://www.fema.gov/disaster/current" target="_blank">Current Disasters page</a> for information about recent disasters.</p>
+          </div>
+        </div>
+        <div class="contentRow">
+          <h class="margin-top-3">Please contact us regarding:</h3>
+          <ul class="usa-list">
+            <li>Feedback or comments based on your experience using this website</li>
+            <li>Questions about having an organization added to the site’s mutual aid resource results</li>
+            <li>Issues, problems, or concerns you have using this website</li>
+          </ul>
+          <p>Contact the web support team for the Mutual Aid Second Responder Community portal by emailing us at <a href="mailto:[email protected]">[email protected]</a>.</p> 
+        </div> 
+        <div class="contentRow">
+          <h4>Other disaster recovery needs</h4>
+          <p>If you are interested in other disaster recovery resources outside of mutual aid for building departments,  FEMA offers a variety of tools and programs to assist in the recovery process. </p>
+          <p>Whether you need financial assistance, legal aid, or guidance on managing long-term recovery, FEMA provides comprehensive support to help you rebuild and recover. Below are some key resources and contact points to get you started:</p>
+          <ul class="usa-list">
+            <li><a class="usa-link usa-link--external" href="https://www.disasterassistance.gov/" target="_blank">DisasterAssistance.gov:</a>  Apply for individual disaster assistance and track your application status.</li>
+            <li><a class="usa-link" href="tel:%208006213362">FEMA Helpline:</a> Call <a href="tel:%208006213362">1-800-621-3362</a> for general questions about disaster assistance.</li>
+            <li><a class="usa-link usa-link--external" href="https://www.fema.gov/emergency-managers/practitioners/recovery-resources/community-toolkit" target="_blank">Community Recovery Management Toolkit:</a> Access resources to help manage long-term recovery.</li>
+            <li><a class="usa-link usa-link--external" href="https://www.fema.gov/emergency-managers/practitioners/recovery-resilience-resource-library" target="_blank">Recovery and Resilience Resource Library:</a> Find and research federal disaster recovery resources.</li>
+          </ul>
+        </div>
+
+      </main>
+    </div>
+  </div>
+</div>
diff --git a/_includes/layouts/post.html b/_includes/layouts/post.html
@@ -2,13 +2,13 @@
 layout: layouts/default
 ---
 
-<div class="usa-layout-docs usa-section">
+<div class="usa-section {{ className }}">
   <div class="grid-container">
     <div class="grid-row grid-gap">
-      <div class="usa-layout-docs__main desktop:grid-col-9 usa-prose">
+      <main class="grid-col-12 usa-prose" id="main-content">
         <h1 class="title">{{title}}</h1>
         {{ content }}
-      </div>
+      </main>
     </div>
   </div>
 </div>