Skip to content

Commit

Permalink
Styled homepage per latest mockup
Browse files Browse the repository at this point in the history
  • Loading branch information
@natashapl
natashapl committed Dec 1, 2024
1 parent de3e024 commit f07ceec
Show file tree
Hide file tree
Showing 11 changed files with 387 additions and 188 deletions.
10 changes: 6 additions & 4 deletions _data/assetPaths.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,10 @@
"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",
"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",
"info.svg": "/assets/assets/info-TBKQSD4V.svg",
"launch--white.svg": "/assets/assets/launch--white-RFNMNFON.svg",
"launch.svg": "/assets/assets/launch-ITYHD56Q.svg",
Expand Down Expand Up @@ -58,6 +60,6 @@
"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"
"index.css": "/assets/styles/index-NRV72O55.css",
"index.map": "/assets/styles/index-NRV72O55.css.map"
}
66 changes: 35 additions & 31 deletions _includes/hero.html
View file
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
106 changes: 57 additions & 49 deletions _includes/highlights.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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>
Binary file added _includes/theme/images/hero-2.jpg
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 _includes/theme/images/hero-2.webp
View file
Binary file not shown.
Binary file added _includes/theme/images/home-experts.jpg
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 _includes/theme/images/home-nearby-mutual-aid.jpg
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 _includes/theme/images/home-state-assistance.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit f07ceec

Please sign in to comment.