Apply latest updates to the site

README.md

@@ -1,4 +1,4 @@
-# 10x mutual aid
+# 10x Bringing Mutual Aid
 
 A prototype website for the 10x project bringing mutual aid to underserved communities for post disaster rebuilding. [View the latest deployment of the website.](https://federalist-fc42b3e8-1d7d-4650-b068-c0c57c55dcfd.sites.pages.cloud.gov/site/gsa-tts/10x-mutual-aid/).
 
@@ -9,7 +9,7 @@ This prototype uses a Static Site Generator (SSG) called Eleventy (11ty). It was
 Requires Node.js and npm to run. Node v20.11.0 is confirmed to work, and probably other versions work as well.
 
 1. Install dependencies: `npm install`
-2. Runn a local server: `npm run dev`
+2. Run a local server: `npm run dev`
 3. Visit [http://localhost:8080/](http://localhost:8080/)
 
 ## Deploying the prototype

_data/assetPaths.json

@@ -15,6 +15,7 @@
   "close.svg": "/assets/assets/close-D6X4FKTZ.svg",
   "correct8.svg": "/assets/assets/correct8-BW6WT7U2.svg",
   "correct8-alt.svg": "/assets/assets/correct8-alt-M4H3GT6Q.svg",
+  "disaster-response-plan-icon.svg": "/assets/assets/disaster-response-plan-icon-QXEK5JU4.svg",
   "error--white.svg": "/assets/assets/error--white-XMM7ATFA.svg",
   "error.svg": "/assets/assets/error-3VQTC4AF.svg",
   "expand_less.svg": "/assets/assets/expand_less-RBECZ4GA.svg",
@@ -24,8 +25,12 @@
   "file-pdf.svg": "/assets/assets/file-pdf-JIOM4YQ2.svg",
   "file-video.svg": "/assets/assets/file-video-EG2XXN3X.svg",
   "file-word.svg": "/assets/assets/file-word-LAS3SDGR.svg",
-  "help-icon.svg": "/assets/assets/help-icon-URMBOHXY.svg",
-  "hero.webp": "/assets/assets/hero-CASA3JPW.webp",
+  "funding-reimbursement-icon.svg": "/assets/assets/funding-reimbursement-icon-NKAVMEDK.svg",
+  "hero-2.webp": "/assets/assets/hero-2-OXVBFOOX.webp",
+  "home-experts.jpg": "/assets/assets/home-experts-YOFFTBTA.jpg",
+  "home-nearby-mutual-aid.jpg": "/assets/assets/home-nearby-mutual-aid-GQOLXG7O.jpg",
+  "home-state-assistance.jpg": "/assets/assets/home-state-assistance-ZVYE5QPY.jpg",
+  "immediate-response-icon.svg": "/assets/assets/immediate-response-icon-KHSCQ66J.svg",
   "info.svg": "/assets/assets/info-TBKQSD4V.svg",
   "launch--white.svg": "/assets/assets/launch--white-RFNMNFON.svg",
   "launch.svg": "/assets/assets/launch-ITYHD56Q.svg",
@@ -34,6 +39,7 @@
   "navigate_far_before.svg": "/assets/assets/navigate_far_before-GSWMTOHQ.svg",
   "navigate_far_next.svg": "/assets/assets/navigate_far_next-EC44VNMY.svg",
   "navigate_next.svg": "/assets/assets/navigate_next-EH2RHTK7.svg",
+  "professional-org-icon.svg": "/assets/assets/professional-org-icon-NA22X2RW.svg",
   "remove.svg": "/assets/assets/remove-6IAU2W4S.svg",
   "roboto-mono-v5-latin-300.woff2": "/assets/assets/roboto-mono-v5-latin-300-UE3MSWKN.woff2",
   "roboto-mono-v5-latin-300italic.woff2": "/assets/assets/roboto-mono-v5-latin-300italic-L54VLD6K.woff2",
@@ -54,10 +60,53 @@
   "sourcesanspro-semibolditalic-webfont.woff2": "/assets/assets/sourcesanspro-semibolditalic-webfont-3K2RXW7D.woff2",
   "unfold_more.svg": "/assets/assets/unfold_more-WL443JWS.svg",
   "warning.svg": "/assets/assets/warning-5OR6W6GJ.svg",
+  "merriweathe": "/assets/fonts/merriweather",
+  "public": "/assets/fonts/public-sans",
+  "roboto": "/assets/fonts/roboto-mono",
+  "source-sans": "/assets/fonts/source-sans-pro",
+  "bm.svg": "/assets/images/bm-logo.svg",
+  "bm-small.svg": "/assets/images/bm-small-logo.svg",
+  "build.webp": "/assets/images/build-icon.webp",
+  "code.png": "/assets/images/codes.png",
+  "code.svg": "/assets/images/codes.svg",
+  "consistency.webp": "/assets/images/consistency-icon.webp",
+  "cost-effective.webp": "/assets/images/cost-effective-icon.webp",
+  "disaster.png": "/assets/images/disaster-info.png",
+  "disaster-response-plan.svg": "/assets/images/disaster-response-plan-icon.svg",
+  "experts.webp": "/assets/images/experts-lg.webp",
+  "expert.png": "/assets/images/experts.png",
+  "expert.svg": "/assets/images/experts.svg",
+  "funding-reimbursement.svg": "/assets/images/funding-reimbursement-icon.svg",
+  "help.svg": "/assets/images/help-icon.svg",
+  "help.webp": "/assets/images/help-icon.webp",
+  "hero.jpg": "/assets/images/hero-2.jpg",
+  "hero.webp": "/assets/images/hero-2.webp",
+  "her.jpg": "/assets/images/hero.jpg",
+  "her.png": "/assets/images/hero.png",
+  "her.webp": "/assets/images/hero.webp",
+  "hire.jpg": "/assets/images/hire-us.jpg",
+  "home.jpg": "/assets/images/home-experts.jpg",
+  "home-nearby-mutual.jpg": "/assets/images/home-nearby-mutual-aid.jpg",
+  "home-state.jpg": "/assets/images/home-state-assistance.jpg",
+  "immediate-response.svg": "/assets/images/immediate-response-icon.svg",
+  "inspection.png": "/assets/images/inspections.png",
+  "inspection.svg": "/assets/images/inspections.svg",
+  "locatio.png": "/assets/images/location.png",
+  "logo.png": "/assets/images/logo-img.png",
+  "professional-org.svg": "/assets/images/professional-org-icon.svg",
+  "rapid-response.webp": "/assets/images/rapid-response-icon.webp",
+  "recover.png": "/assets/images/recovery.png",
+  "recover.svg": "/assets/images/recovery.svg",
+  "reduce-strain.webp": "/assets/images/reduce-strain-icon.webp",
+  "state": "/assets/images/states",
+  "upload": "/assets/images/uploads",
   "admin.js": "/assets/js/admin-TRAB3TNM.js",
   "admin.map": "/assets/js/admin-TRAB3TNM.js.map",
   "app.js": "/assets/js/app-PHNK6WN2.js",
   "app.map": "/assets/js/app-PHNK6WN2.js.map",
-  "index.css": "/assets/styles/index-JXBJFNUE.css",
-  "index.map": "/assets/styles/index-JXBJFNUE.css.map"
+  "uswds.js": "/assets/js/uswds-init.js",
+  "fema_mabd-region-8-fact.pdf": "/assets/pdf/fema_mabd-region-8-fact-sheet_2023.pdf",
+  "index.css": "/assets/styles/index-VCR647JD.css",
+  "index.map": "/assets/styles/index-VCR647JD.css.map",
+  "im": "/assets/uswds/img"
 }

_includes/disclaimer.html

@@ -2,11 +2,11 @@
   <div class="usa-alert__body">
     <h2 class="usa-alert__heading">Disclaimer</h2>
     <div class="usa-alert__text grid-row grid-gap">
-      <div class="mobile:grid-col-12 tablet:grid-col-10 margin-bottom-2">
+      <div class="mobile:grid-col-12 desktop:grid-col-10 margin-bottom-2">
         This website contains references to non-federal resources and organizations. The references are solely for informational purposes and are not an endorsement of any non-federal entity by FEMA, Department of Homeland Security, or the U.S. government.
       </div>
-      <div class="mobile:grid-col-12 desktop:grid-col-2">
-        <a href="#disclaimer-modal-1" class="usa-button disclaimer-button padding-y-2 bg-primary-darker"
+      <div class="mobile:grid-col-12 desktop:grid-col-2 text-right">
+        <a href="#disclaimer-modal-1" class="usa-button disclaimer-button width-auto padding-y-2 bg-primary-darker"
           aria-controls="disclaimer-modal-1" data-open-modal>View full disclaimer</a>
       </div>
     </div>

_includes/hero.html

@@ -1,43 +1,47 @@
 <section class="usa-hero" id="mutual-aid-search" aria-label="Introduction">
-  <picture>
-    <source media="(min-width: 40em)" srcset="{{ assetPaths['hero.webp'] }}"/>
-    <img src="{{ assetPaths['hero.webp'] }}" alt="" width="0" height="0"
-      style="display: none !important;" fetchpriority="high"/>
-  </picture>
   <div class="grid-container">
-    <div class="usa-hero__callout">
-      <h1 class="usa-hero__heading margin-bottom-4">
-        Find mutual aid resources to help your local building department
-      </h1>
-      <div class="grid-container">
-        <form class="usa-form" id="stateForm">
-          <fieldset class="usa-fieldset">
-            <legend class="usa-legend margin-bottom-1">
-              Enter your location to discover mutual aid resources available in your area to assist post-disaster
-              rebuilding.
-            </legend>
-
-            <label class="usa-label" for="state">
-              State or Territory
-            </label>
-            <div class="grid-row grid-gap-2">
-              <span class="tablet:grid-col-8 mobile:grid-col-12 margin-bottom-2">
-                <select class="usa-select" id="state" name="state" required>
+    <div class="grid-row">
+      <div class="grid-col-5 hero-text-form">
+        <div class="usa-hero__callout">
+          <h1 class="usa-hero__heading margin-bottom-4">
+            Does your community need help rebuilding?
+          </h1>
+          <p>Mutual aid resources are available to assist with post-disaster recovery needs like:</p>
+          <ul class="usa-list">
+            <li>Performing detailed building inspections and damage assessments.</li>
+            <li>Issuing emergency permits for temporary repairs and shelters.</li>
+            <li>Enforcing updated building codes and hazard mitigation measures.</li>
+          </ul>
+          <form class="usa-form" id="stateForm">
+            <fieldset class="usa-fieldset">
+              <legend class="usa-legend margin-bottom-1">
+                Find mutual aid resources
+              </legend>
+              <label class="usa-label" for="state">
+                State or Territory
+              </label>
+              <div class="grid-row grid-gap-2">
+                <select class="usa-select grid-col-12 margin-bottom-2" 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="tablet:grid-col-4 mobile:grid-col-12 desktop:text-right">
-                <input class="usa-button" type="submit" value="View aid options" />
-              </span>
-            </div>
-
-          </fieldset>
-        </form>
+                <input class="usa-button grid-col-12" type="submit" value="View resources" />
+              </div>
+            </fieldset>
+          </form>   
+        </div>   
+      </div>
+      <div class="grid-col-7 hero-image">
+        <picture>
+          <source media="(min-width: 40em)" srcset="{{ '/assets/images/hero-2.webp' | url }}"/>
+          <img src="{{ '/assets/images/hero-2.webp' | url }}" alt="" width="0" height="0"
+            style="display: none !important;" fetchpriority="high"/>
+        </picture>     
       </div>
     </div>
+
   </div>
 </section>
 

_includes/highlights.html

@@ -1,6 +1,6 @@
-<section class="usa-graphic-list home-highlights usa-section usa-section--dark">
+<section class="usa-graphic-list home-highlights usa-section">
   <div class="grid-container">
-    <h2 class="text-center">Why use mutual aid ?</h2>
+    <h2 class="text-center font-family-serif">Benefits of mutual aid for rebuilding</h2>
     <ul class="usa-card-group grid-row grid-gap-2">
       <li class="usa-card tablet:grid-col-6 mobile:grid-col-12">
         <div class="usa-card__container">
@@ -14,26 +14,7 @@ <h3 class="usa-card__heading">Rapid Response</h3>
           </div>
           <div class="usa-card__body">
             <p>
-              Mutual aid allows communities to quickly mobilize additional qualified personnel to handle the surge in
-              inspections and permit requests that typically occur after a disaster.
-            </p>
-          </div>
-        </div>
-      </li>
-      <li class="usa-card tablet:grid-col-6 mobile:grid-col-12">
-        <div class="usa-card__container">
-          <div class="usa-card__header">
-            <h3 class="usa-card__heading">Expertise and Resources</h3>
-          </div>
-          <div class="usa-card__media usa-card__media--inset">
-            <div class="usa-card__img">
-              <img src="{{ '/assets/images/experts-lg.webp' | url }}" alt="" width="100" height="100" />
-            </div>
-          </div>
-          <div class="usa-card__body">
-            <p>
-              Through mutual aid agreements, communities can access specialized expertise and resources they may not
-              have internally.
+              Mutual aid allows communities to quickly mobilize additional qualified personnel to handle the surge in inspections and permit requests that typically occur after a disaster.
             </p>
           </div>
         </div>
@@ -50,34 +31,15 @@ <h3 class="usa-card__heading">Cost-Effective Solution</h3>
           </div>
           <div class="usa-card__body">
             <p>
-              Utilizing mutual aid is often more cost-effective than hiring temporary staff or contractors, as
-              partnering jurisdictions typically only seek reimbursement for direct costs.
-            </p>
-          </div>
-        </div>
-      </li>
-      <li class="usa-card tablet:grid-col-6 mobile:grid-col-12">
-        <div class="usa-card__container">
-          <div class="usa-card__header">
-            <h3 class="usa-card__heading">Consistency in Enforcement</h3>
-          </div>
-          <div class="usa-card__media usa-card__media--inset">
-            <div class="usa-card__img">
-              <img src="{{ '/assets/images/consistency-icon.webp' | url }}" alt="" width="100" height="100" />
-            </div>
-          </div>
-          <div class="usa-card__body">
-            <p>
-              Mutual aid personnel are usually familiar with building codes and standards, helping ensure consistent and
-              proper enforcement of regulations during rebuilding.
+              Utilizing mutual aid is often more cost-effective than hiring temporary staff or contractors, as partnering jurisdictions typically only seek reimbursement for direct costs.
             </p>
           </div>
         </div>
       </li>
       <li class="usa-card tablet:grid-col-6 mobile:grid-col-12">
         <div class="usa-card__container">
           <div class="usa-card__header">
-            <h3 class="usa-card__heading">Reduced Strain on Local Staff</h3>
+            <h3 class="usa-card__heading">Reduced Strain on Staff</h3>
           </div>
           <div class="usa-card__media usa-card__media--inset">
             <div class="usa-card__img">
@@ -86,30 +48,76 @@ <h3 class="usa-card__heading">Reduced Strain on Local Staff</h3>
           </div>
           <div class="usa-card__body">
             <p>
-              By bringing in outside assistance, mutual aid prevents burnout of local building department staff who may
-              be overwhelmed by increased workloads following a disaster.
+              By bringing in outside assistance, mutual aid prevents burnout of local staff who may be overwhelmed by increased workloads following a disaster.
             </p>
           </div>
         </div>
       </li>
       <li class="usa-card tablet:grid-col-6 mobile:grid-col-12">
         <div class="usa-card__container">
           <div class="usa-card__header">
-            <h3 class="usa-card__heading">Improved Community Resilience</h3>
+            <h3 class="usa-card__heading">Consistency in Enforcement</h3>
           </div>
           <div class="usa-card__media usa-card__media--inset">
             <div class="usa-card__img">
-              <img src="{{ '/assets/images/build-icon.webp' | url }}" alt="" width="100" height="100" />
+              <img src="{{ '/assets/images/consistency-icon.webp' | url }}" alt="" width="100" height="100" />
             </div>
           </div>
           <div class="usa-card__body">
             <p>
-              Mutual aid can help rebuild in ways that make structures more resilient and better prepare communities to
-              handle future disasters.
+              Mutual aid personnel are usually familiar with building codes and standards, helping ensure consistent and proper enforcement of regulations during rebuilding.
             </p>
           </div>
         </div>
       </li>
     </ul>
   </div>
+</section>
+<section class="usa-graphic-list home-examples usa-section">
+  <div class="grid-container">
+    <h2 class="font-family-serif">Examples of how communities can use mutual aid for post-disaster rebuilding</h2>
+    <div class="grid-row row1">
+      <div class="mobile:grid-col-12 tablet-lg:grid-col-5 home-example-image-container">
+        <picture>
+          <source media="(min-width: 40em)" srcset="{{ '/assets/images/home-nearby-mutual-aid.jpg' | url }}"/>
+          <img class="home-example-image" src="{{ '/assets/images/home-nearby-mutual-aid.jpg' | url }}" alt="" width="0" height="0" fetchpriority="high"/>
+        </picture>    
+      </div>
+      <div class="mobile:grid-col-12 tablet-lg:grid-col-7 home-example-content">
+        <h3>Mutual aid from nearby counties helps residents assess hurricane damage quickly</h3>
+        <p>After a severe hurricane, a mid-sized city finds its building department overwhelmed with inspection requests for damaged structures.</p>
+        <p>The city activates its mutual aid agreement with neighboring counties, bringing in additional certified inspectors to help clear the backlog.</p>
+        <p>This allows residents to quickly determine if their homes are safe to occupy and expedites the start of repair work, significantly reducing the time people spend in temporary housing.</p>
+      </div>
+    </div>
+    <div class="grid-row row2">
+      <div class="mobile:grid-col-12 tablet-lg:grid-col-5 home-example-image-container">
+        <picture>
+          <source media="(min-width: 40em)" srcset="{{ '/assets/images/home-state-assistance.jpg' | url }}"/>
+          <img class="home-example-image" src="{{ '/assets/images/home-state-assistance.jpg' | url }}" alt="" width="0" height="0" fetchpriority="high"/>
+        </picture> 
+      </div>
+      <div class="mobile:grid-col-12 tablet-lg:grid-col-7 home-example-content">
+        <h3>State assistance helps small town recover after tornado damage</h3>
+        <p>A small, rural town with limited resources is hit by a tornado, damaging numerous buildings.</p>
+        <p>The town's single part-time building inspector is unable to handle the volume of work needed for rebuilding.</p>
+        <p>Through a state-wide mutual aid program, the town receives assistance from building officials from larger cities, who help process permits and conduct inspections.</p>
+        <p>This support ensures that rebuilding efforts comply with current safety standards and progress swiftly.</p>
+      </div>
+    </div>
+    <div class="grid-row row3">
+      <div class="mobile:grid-col-12 tablet-lg:grid-col-5 home-example-image-container">
+        <picture>
+          <source media="(min-width: 40em)" srcset="{{ '/assets/images/home-experts.jpg' | url }}"/>
+          <img class="home-example-image" src="{{ '/assets/images/home-experts.jpg' | url }}" alt="" width="0" height="0"  fetchpriority="high"/>
+        </picture>
+      </div>
+      <div class="mobile:grid-col-12 tablet-lg:grid-col-7 home-example-content">
+        <h3>Experts from other states assist urban neighborhood after flood</h3>
+        <p>In an underserved urban neighborhood, a flash flood damages many older homes and small businesses, overwhelming the already understaffed local building department that lacks expertise in flood-related repairs.</p>
+        <p>Through a mutual aid agreement, the city brings in floodplain management experts and additional permit processors from other states to address the community's needs.</p>
+        <p>This targeted assistance speeds up the recovery process and helps implement flood-resistant building practices, improving the neighborhood's long-term resilience.</p>
+      </div>
+    </div>
+  </div>
 </section>