From 0d8b7633d5789d926b07bd8f9693eb675e32072a Mon Sep 17 00:00:00 2001
From: Kaleigh Scruggs <kaleigh.scruggs@northhighland.com>
Date: Fri, 15 May 2020 16:49:23 -0400
Subject: [PATCH 1/3] updates

---
 src/components/Footer.js    |  16 +-
 src/components/styles.css   |   1 +
 src/pages/index.md          |   5 +-
 src/templates/index-page.js | 624 ++++++++++++++++++------------------
 static/admin/config.yml     |   2 +-
 5 files changed, 320 insertions(+), 328 deletions(-)

diff --git a/src/components/Footer.js b/src/components/Footer.js
index 992f5b8..7a7457c 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -4,15 +4,15 @@ import linkedin from '../img/social/linkedin.svg'
 const Footer = class extends React.Component {
   render() {
     return (
-      <footer class="footer py-4">
-        <div class="container">
-          <div class="row align-items-center">
-            <div class="col-lg-4 text-lg-left">
+      <footer className="footer py-4">
+        <div className="container">
+          <div className="row align-items-center">
+            <div className="col-lg-4 text-lg-left">
               Copyright © North Highland 2020
             </div>
-            <div class="col-lg-4 my-3 my-lg-0">
+            <div className="col-lg-4 my-3 my-lg-0">
               <a
-                class="btn btn-dark btn-social mx-2"
+                className="btn btn-dark btn-social mx-2"
                 href="https://www.linkedin.com/company/northhighland/"
                 target="new"
               >
@@ -23,9 +23,9 @@ const Footer = class extends React.Component {
                 />
               </a>
             </div>
-            <div class="col-lg-4 text-lg-right">
+            <div className="col-lg-4 text-lg-right">
               <a
-                class="mr-3"
+                className="mr-3"
                 href="https://www.northhighland.com/privacy-policy"
               >
                 Privacy Policy
diff --git a/src/components/styles.css b/src/components/styles.css
index 1713fb5..28fbfa6 100755
--- a/src/components/styles.css
+++ b/src/components/styles.css
@@ -10836,6 +10836,7 @@ header.masthead .masthead-heading {
   }
   .timeline > li .timeline-image h4 {
     margin-top: 40px;
+    white-space: pre-line;
   }
   .timeline > li.timeline-inverted > .timeline-panel {
     padding: 0 100px 20px 20px;
diff --git a/src/pages/index.md b/src/pages/index.md
index 805a133..34b2ffa 100644
--- a/src/pages/index.md
+++ b/src/pages/index.md
@@ -139,7 +139,10 @@ teamtable:
         functionality, performance, reliability, stability and compatibility
         with other systems.
 about:
-  start: Let's Get Started!
+  start: |-
+    Let's 
+    Get 
+    Started!
   heading: About Us
   timelinebody1: North Highland's customized, blended team approach applies the
     right combination of skills and experience to achieve your goals. Our
diff --git a/src/templates/index-page.js b/src/templates/index-page.js
index 8c370d0..76f7b38 100644
--- a/src/templates/index-page.js
+++ b/src/templates/index-page.js
@@ -25,379 +25,367 @@ export const IndexPageTemplate = ({
   about,
   contact,
 }) => (
-    <div>
-      <header
-        className="masthead"
-        style={{
-          backgroundImage: `url(${
-            !!image.childImageSharp ? image.childImageSharp.fluid.src : image
-            })`,
-          backgroundPosition: `top left`,
-          backgroundAttachment: `fixed`,
-        }}
-      >
-        <div className="container">
-          <div className="masthead-subheading">{title}</div>
-          <div className="masthead-heading text-uppercase">{subheading}</div>
-          <a
-            className="btn btn-primary btn-xl text-uppercase js-scroll-trigger"
-            href="#MVP"
-          >
-            find out more&nbsp;
+  <div>
+    <header
+      className="masthead"
+      style={{
+        backgroundImage: `url(${
+          !!image.childImageSharp ? image.childImageSharp.fluid.src : image
+        })`,
+        backgroundPosition: `top left`,
+        backgroundAttachment: `fixed`,
+      }}
+    >
+      <div className="container">
+        <div className="masthead-subheading">{title}</div>
+        <div className="masthead-heading text-uppercase">{subheading}</div>
+        <a
+          className="btn btn-primary btn-xl text-uppercase js-scroll-trigger"
+          href="#MVP"
+        >
+          find out more&nbsp;
         </a>
+      </div>
+    </header>
+    <section className="page-section" id="MVP">
+      <div className="container">
+        <div className="text-center">
+          <h2 className="section-heading text-uppercase">{mainpitch.title}</h2>
+          <h3 className="section-subheading text-muted">
+            {mainpitch.description}
+          </h3>
+          <b>{mainpitch.mvptext}</b>
         </div>
-      </header>
-      <section className="page-section" id="MVP">
-        <div className="container">
-          <div className="text-center">
-            <h2 className="section-heading text-uppercase">{mainpitch.title}</h2>
-            <h3 className="section-subheading text-muted">
-              {mainpitch.description}
-            </h3>
-            <b>{mainpitch.mvptext}</b>
-          </div>
-          <Features gridItems={intro.pods} />
+        <Features gridItems={intro.pods} />
+      </div>
+    </section>
+    <section className="page-section bg-light" id="How">
+      <div className="container">
+        <div className="text-center">
+          <h2 className="section-heading text-uppercase">{how.heading}</h2>
+          <h3 className="section-subheading text-muted">{how.description}</h3>
         </div>
-      </section>
-      <section className="page-section bg-light" id="How">
-        <div className="container">
-          <div className="text-center">
-            <h2 className="section-heading text-uppercase">{how.heading}</h2>
-            <h3 className="section-subheading text-muted">{how.description}</h3>
-          </div>
-          <div className="row">
-            <div className="col-lg-4">
-              <div className="team-member">
-                <img
-                  src={how1}
-                  alt="how1"
-                  className="mx-auto rounded-circle"
-                />
-                <h4>{how.teamMemberHeading1}</h4>
-                <p className="text-muted">{how.teamMemberText1}</p>
-              </div>
-            </div>
-            <div className="col-lg-4">
-              <div className="team-member">
-                <img
-                  src={how2}
-                  alt="how2"
-                  className="mx-auto rounded-circle"
-                />
-                <h4>{how.teamMemberHeading2}</h4>
-                <p className="text-muted">{how.teamMemberText2}</p>
-              </div>
-            </div>
-            <div className="col-lg-4">
-              <div className="team-member">
-                <img
-                  src={how3}
-                  alt="how3"
-                  className="mx-auto rounded-circle"
-                />
-                <h4>{how.teamMemberHeading3}</h4>
-                <p className="text-muted">{how.teamMemberText3}</p>
-              </div>
+        <div className="row">
+          <div className="col-lg-4">
+            <div className="team-member">
+              <img src={how1} alt="how1" className="mx-auto rounded-circle" />
+              <h4>{how.teamMemberHeading1}</h4>
+              <p className="text-muted">{how.teamMemberText1}</p>
             </div>
           </div>
-          <div className="row" align="center">
-            <img
-              src={scrum}
-              alt="scrum"
-              width="1100"
-              height="412"
-              className="img-fluid scrum-img"
-            />
+          <div className="col-lg-4">
+            <div className="team-member">
+              <img src={how2} alt="how2" className="mx-auto rounded-circle" />
+              <h4>{how.teamMemberHeading2}</h4>
+              <p className="text-muted">{how.teamMemberText2}</p>
+            </div>
           </div>
-          <div className="row">
-            <div className="col-lg-8 mx-auto text-center">
-              <p className="large text-muted">Scalable Scrum Framework</p>
+          <div className="col-lg-4">
+            <div className="team-member">
+              <img src={how3} alt="how3" className="mx-auto rounded-circle" />
+              <h4>{how.teamMemberHeading3}</h4>
+              <p className="text-muted">{how.teamMemberText3}</p>
             </div>
           </div>
         </div>
-      </section>
-      <section className="page-section" id="Solutions">
-        <div className="container">
-          <div className="text-center">
-            <h2 className="section-heading text-uppercase">
-              {solutions.heading}
-            </h2>
-            <h3 className="section-subheading text-muted">
-              {solutions.description}
-            </h3>
-          </div>
-          <div className="row text-center">
-            <div className="col-md-4">
-              <h4 className="my-3" align="left">
-                {solutions.text1}
-              </h4>
-            </div>
-            <div className="col-md-4">
-              <h4 className="my-3" align="left">
-                {solutions.text2}
-              </h4>
-            </div>
-            <div className="col-md-4">
-              <h4 className="my-3" align="left">
-                {solutions.text3}
-              </h4>
-            </div>
+        <div className="row" align="center">
+          <img
+            src={scrum}
+            alt="scrum"
+            width="1100"
+            height="412"
+            className="img-fluid scrum-img"
+          />
+        </div>
+        <div className="row">
+          <div className="col-lg-8 mx-auto text-center">
+            <p className="large text-muted">Scalable Scrum Framework</p>
           </div>
         </div>
-      </section>
-      <section className="page-section bg-light" id="portfolio">
-        <div className="container">
-          <div className="text-center">
-            <h2 className="section-heading text-uppercase">Portfolio</h2>
-            <h3 className="section-subheading text-muted">
-              Where we've done it before
+      </div>
+    </section>
+    <section className="page-section" id="Solutions">
+      <div className="container">
+        <div className="text-center">
+          <h2 className="section-heading text-uppercase">
+            {solutions.heading}
+          </h2>
+          <h3 className="section-subheading text-muted">
+            {solutions.description}
           </h3>
+        </div>
+        <div className="row text-center">
+          <div className="col-md-4">
+            <h4 className="my-3" align="left">
+              {solutions.text1}
+            </h4>
+          </div>
+          <div className="col-md-4">
+            <h4 className="my-3" align="left">
+              {solutions.text2}
+            </h4>
           </div>
-          <div className="row">
-            <div className="col-lg-4 col-sm-6 mb-4">
-              <div className="portfolio-item">
-                <a
-                  className="portfolio-link"
-                  data-toggle="modal"
-                  href="#portfolioModal1"
-                >
-                  <div className="portfolio-hover">
-                    <div className="portfolio-hover-content">
-                      <i className="fas fa-plus fa-3x"></i>
-                    </div>
+          <div className="col-md-4">
+            <h4 className="my-3" align="left">
+              {solutions.text3}
+            </h4>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section className="page-section bg-light" id="portfolio">
+      <div className="container">
+        <div className="text-center">
+          <h2 className="section-heading text-uppercase">Portfolio</h2>
+          <h3 className="section-subheading text-muted">
+            Where we've done it before
+          </h3>
+        </div>
+        <div className="row">
+          <div className="col-lg-4 col-sm-6 mb-4">
+            <div className="portfolio-item">
+              <a
+                className="portfolio-link"
+                data-toggle="modal"
+                href="#portfolioModal1"
+              >
+                <div className="portfolio-hover">
+                  <div className="portfolio-hover-content">
+                    <i className="fas fa-plus fa-3x"></i>
                   </div>
-                  <img
-                    className="img-fluid"
-                    src="assets/img/portfolio/01-thumbnail.jpg"
-                    alt=""
-                  />
-                </a>
-                <div className="portfolio-caption">
-                  <div className="portfolio-caption-heading">Delta Airlines</div>
-                  <div className="portfolio-caption-subheading text-muted">
-                    Design + Build
                 </div>
+                <img
+                  className="img-fluid"
+                  src="assets/img/portfolio/01-thumbnail.jpg"
+                  alt=""
+                />
+              </a>
+              <div className="portfolio-caption">
+                <div className="portfolio-caption-heading">Delta Airlines</div>
+                <div className="portfolio-caption-subheading text-muted">
+                  Design + Build
                 </div>
               </div>
             </div>
-            <div className="col-lg-4 col-sm-6 mb-4">
-              <div className="portfolio-item">
-                <a
-                  className="portfolio-link"
-                  data-toggle="modal"
-                  href="#portfolioModal2"
-                >
-                  <div className="portfolio-hover">
-                    <div className="portfolio-hover-content">
-                      <i className="fas fa-plus fa-3x"></i>
-                    </div>
+          </div>
+          <div className="col-lg-4 col-sm-6 mb-4">
+            <div className="portfolio-item">
+              <a
+                className="portfolio-link"
+                data-toggle="modal"
+                href="#portfolioModal2"
+              >
+                <div className="portfolio-hover">
+                  <div className="portfolio-hover-content">
+                    <i className="fas fa-plus fa-3x"></i>
                   </div>
-                  <img
-                    className="img-fluid"
-                    src="assets/img/portfolio/02-thumbnail.jpg"
-                    alt=""
-                  />
-                </a>
-                <div className="portfolio-caption">
-                  <div className="portfolio-caption-heading">
-                    Global Oil and Gas
                 </div>
-                  <div className="portfolio-caption-subheading text-muted">
-                    Design + Build
+                <img
+                  className="img-fluid"
+                  src="assets/img/portfolio/02-thumbnail.jpg"
+                  alt=""
+                />
+              </a>
+              <div className="portfolio-caption">
+                <div className="portfolio-caption-heading">
+                  Global Oil and Gas
                 </div>
+                <div className="portfolio-caption-subheading text-muted">
+                  Design + Build
                 </div>
               </div>
             </div>
-            <div className="col-lg-4 col-sm-6 mb-4">
-              <div className="portfolio-item">
-                <a
-                  className="portfolio-link"
-                  data-toggle="modal"
-                  href="#portfolioModal3"
-                >
-                  <div className="portfolio-hover">
-                    <div className="portfolio-hover-content">
-                      <i className="fas fa-plus fa-3x"></i>
-                    </div>
+          </div>
+          <div className="col-lg-4 col-sm-6 mb-4">
+            <div className="portfolio-item">
+              <a
+                className="portfolio-link"
+                data-toggle="modal"
+                href="#portfolioModal3"
+              >
+                <div className="portfolio-hover">
+                  <div className="portfolio-hover-content">
+                    <i className="fas fa-plus fa-3x"></i>
                   </div>
-                  <img
-                    className="img-fluid"
-                    src="assets/img/portfolio/03-thumbnail.jpg"
-                    alt=""
-                  />
-                </a>
-                <div className="portfolio-caption">
-                  <div className="portfolio-caption-heading">Aramark</div>
-                  <div className="portfolio-caption-subheading text-muted">
-                    Architecture + Implementation
                 </div>
+                <img
+                  className="img-fluid"
+                  src="assets/img/portfolio/03-thumbnail.jpg"
+                  alt=""
+                />
+              </a>
+              <div className="portfolio-caption">
+                <div className="portfolio-caption-heading">Aramark</div>
+                <div className="portfolio-caption-subheading text-muted">
+                  Architecture + Implementation
                 </div>
               </div>
             </div>
-            <div className="col-lg-4 col-sm-6 mb-4 mb-lg-0">
-              <div className="portfolio-item">
-                <a
-                  className="portfolio-link"
-                  data-toggle="modal"
-                  href="#portfolioModal4"
-                >
-                  <div className="portfolio-hover">
-                    <div className="portfolio-hover-content">
-                      <i className="fas fa-plus fa-3x"></i>
-                    </div>
+          </div>
+          <div className="col-lg-4 col-sm-6 mb-4 mb-lg-0">
+            <div className="portfolio-item">
+              <a
+                className="portfolio-link"
+                data-toggle="modal"
+                href="#portfolioModal4"
+              >
+                <div className="portfolio-hover">
+                  <div className="portfolio-hover-content">
+                    <i className="fas fa-plus fa-3x"></i>
                   </div>
-                  <img
-                    className="img-fluid"
-                    src="assets/img/portfolio/04-thumbnail.jpg"
-                    alt=""
-                  />
-                </a>
-                <div className="portfolio-caption">
-                  <div className="portfolio-caption-heading">Bank of America</div>
-                  <div className="portfolio-caption-subheading text-muted">
-                    Transactional Service Model
                 </div>
+                <img
+                  className="img-fluid"
+                  src="assets/img/portfolio/04-thumbnail.jpg"
+                  alt=""
+                />
+              </a>
+              <div className="portfolio-caption">
+                <div className="portfolio-caption-heading">Bank of America</div>
+                <div className="portfolio-caption-subheading text-muted">
+                  Transactional Service Model
                 </div>
               </div>
             </div>
-            <div className="col-lg-4 col-sm-6 mb-4 mb-sm-0">
-              <div className="portfolio-item">
-                <a
-                  className="portfolio-link"
-                  data-toggle="modal"
-                  href="#portfolioModal5"
-                >
-                  <div className="portfolio-hover">
-                    <div className="portfolio-hover-content">
-                      <i className="fas fa-plus fa-3x"></i>
-                    </div>
+          </div>
+          <div className="col-lg-4 col-sm-6 mb-4 mb-sm-0">
+            <div className="portfolio-item">
+              <a
+                className="portfolio-link"
+                data-toggle="modal"
+                href="#portfolioModal5"
+              >
+                <div className="portfolio-hover">
+                  <div className="portfolio-hover-content">
+                    <i className="fas fa-plus fa-3x"></i>
                   </div>
-                  <img
-                    className="img-fluid"
-                    src="assets/img/portfolio/05-thumbnail.jpg"
-                    alt=""
-                  />
-                </a>
-                <div className="portfolio-caption">
-                  <div className="portfolio-caption-heading">
-                    Global CPG&nbsp;
                 </div>
-                  <div className="portfolio-caption-subheading text-muted">
-                    e-Commerce Strategy + Design&nbsp;
+                <img
+                  className="img-fluid"
+                  src="assets/img/portfolio/05-thumbnail.jpg"
+                  alt=""
+                />
+              </a>
+              <div className="portfolio-caption">
+                <div className="portfolio-caption-heading">
+                  Global CPG&nbsp;
                 </div>
+                <div className="portfolio-caption-subheading text-muted">
+                  e-Commerce Strategy + Design&nbsp;
                 </div>
               </div>
             </div>
-            <div className="col-lg-4 col-sm-6">
-              <div className="portfolio-item">
-                <a
-                  className="portfolio-link"
-                  data-toggle="modal"
-                  href="#portfolioModal6"
-                >
-                  <div className="portfolio-hover">
-                    <div className="portfolio-hover-content">
-                      <i className="fas fa-plus fa-3x"></i>
-                    </div>
+          </div>
+          <div className="col-lg-4 col-sm-6">
+            <div className="portfolio-item">
+              <a
+                className="portfolio-link"
+                data-toggle="modal"
+                href="#portfolioModal6"
+              >
+                <div className="portfolio-hover">
+                  <div className="portfolio-hover-content">
+                    <i className="fas fa-plus fa-3x"></i>
                   </div>
-                  <img
-                    className="img-fluid"
-                    src="assets/img/portfolio/06-thumbnail.jpg"
-                    alt=""
-                  />
-                </a>
-                <div className="portfolio-caption">
-                  <div className="portfolio-caption-heading">Stratasys</div>
-                  <div className="portfolio-caption-subheading text-muted">
-                    Digital Strategy + Design
                 </div>
+                <img
+                  className="img-fluid"
+                  src="assets/img/portfolio/06-thumbnail.jpg"
+                  alt=""
+                />
+              </a>
+              <div className="portfolio-caption">
+                <div className="portfolio-caption-heading">Stratasys</div>
+                <div className="portfolio-caption-subheading text-muted">
+                  Digital Strategy + Design
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </section>
-      <section className="page-section" id="team">
-        <div className="container">
-          <div className="text-center">
-            <h2 className="section-heading text-uppercase">{teamcost.heading}</h2>
-            <h3 className="section-subheading text-muted">
-              {teamcost.description}
-            </h3>
-          </div>
-          <div align="center">
-            <h4>{teamcost.tableName}</h4>
-            <Table gridItems={teamtable.tablerows} />
-          </div>
-          <div className="text-center">
-            <p className="text-muted">{teamcost.details}</p>
-          </div>
+      </div>
+    </section>
+    <section className="page-section" id="team">
+      <div className="container">
+        <div className="text-center">
+          <h2 className="section-heading text-uppercase">{teamcost.heading}</h2>
+          <h3 className="section-subheading text-muted">
+            {teamcost.description}
+          </h3>
         </div>
-      </section>
-      <section className="page-section bg-light" id="about">
-        <div className="container">
-          <div className="text-center">
-            <h2 className="section-heading text-uppercase">{about.heading}</h2>
-            <h3 className="section-subheading text-muted">{about.description}</h3>
-          </div>
-          <ul className="timeline">
-            <li>
-              <div className="timeline-image">
-                <img src={img1} alt="img1" className="rounded-circle img-fluid" />
-              </div>
-              <div className="timeline-panel">
-                <div className="timeline-heading">
-                  <h4>{about.timelinehead1}</h4>
-                </div>
-                <div className="timeline-body">
-                  <p className="text-muted">{about.timelinebody1}</p>
-                </div>
+        <div align="center">
+          <h4>{teamcost.tableName}</h4>
+          <Table gridItems={teamtable.tablerows} />
+        </div>
+        <div className="text-center">
+          <p className="text-muted">{teamcost.details}</p>
+        </div>
+      </div>
+    </section>
+    <section className="page-section bg-light" id="about">
+      <div className="container">
+        <div className="text-center">
+          <h2 className="section-heading text-uppercase">{about.heading}</h2>
+          <h3 className="section-subheading text-muted">{about.description}</h3>
+        </div>
+        <ul className="timeline">
+          <li>
+            <div className="timeline-image">
+              <img src={img1} alt="img1" className="rounded-circle img-fluid" />
+            </div>
+            <div className="timeline-panel">
+              <div className="timeline-heading">
+                <h4>{about.timelinehead1}</h4>
               </div>
-            </li>
-            <li classN="timeline-inverted">
-              <div className="timeline-image">
-                <img src={img2} alt="img2" className="rounded-circle img-fluid" />
+              <div className="timeline-body">
+                <p className="text-muted">{about.timelinebody1}</p>
               </div>
-              <div className="timeline-panel">
-                <div className="timeline-heading">
-                  <h4>{about.timelinehead2}</h4>
-                </div>
-                <div className="timeline-body">
-                  <p className="text-muted">{about.timelinebody2}</p>
-                </div>
+            </div>
+          </li>
+          <li className="timeline-inverted">
+            <div className="timeline-image">
+              <img src={img2} alt="img2" className="rounded-circle img-fluid" />
+            </div>
+            <div className="timeline-panel">
+              <div className="timeline-heading">
+                <h4>{about.timelinehead2}</h4>
               </div>
-            </li>
-            <li>
-              <div className="timeline-image">
-                <img src={img3} alt="img3" className="rounded-circle img-fluid" />
+              <div className="timeline-body">
+                <p className="text-muted">{about.timelinebody2}</p>
               </div>
-              <div className="timeline-panel">
-                <div className="timeline-heading">
-                  <h4>{about.timelinehead3}</h4>
-                </div>
-                <div className="timeline-body">
-                  <p className="text-muted">{about.timelinebody3}</p>
-                </div>
+            </div>
+          </li>
+          <li>
+            <div className="timeline-image">
+              <img src={img3} alt="img3" className="rounded-circle img-fluid" />
+            </div>
+            <div className="timeline-panel">
+              <div className="timeline-heading">
+                <h4>{about.timelinehead3}</h4>
               </div>
-            </li>
-            <li className="timeline-inverted">
-              <div className="timeline-image">
-                <h4>{about.start}</h4>
+              <div className="timeline-body">
+                <p className="text-muted">{about.timelinebody3}</p>
               </div>
-            </li>
-          </ul>
-        </div>
-      </section>
-      <section className="page-section" id="contact">
-        <div className="container">
-          <div className="text-center">
-            <h2 className="section-heading text-uppercase">{contact.heading}</h2>
-            <h3 className="section-subheading text-muted">{contact.body}</h3>
-          </div>
+            </div>
+          </li>
+          <li className="timeline-inverted">
+            <div className="timeline-image">
+              <h4>{about.start}</h4>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </section>
+    <section className="page-section" id="contact">
+      <div className="container">
+        <div className="text-center">
+          <h2 className="section-heading text-uppercase">{contact.heading}</h2>
+          <h3 className="section-subheading text-muted">{contact.body}</h3>
         </div>
-      </section>
-    </div>
-  )
+      </div>
+    </section>
+  </div>
+)
 
 IndexPageTemplate.propTypes = {
   image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
diff --git a/static/admin/config.yml b/static/admin/config.yml
index 62a0c42..bcd98ca 100644
--- a/static/admin/config.yml
+++ b/static/admin/config.yml
@@ -170,7 +170,7 @@ collections:
                     widget: string,
                   },
                   { label: timeline body 3, name: timelinebody3, widget: text },
-                  { label: start, name: start, widget: string },
+                  { label: start, name: start, widget: text },
                 ],
             }
           - {

From 8ec3aa79610ec9f7af6f8cb7aaf14d740eee57f1 Mon Sep 17 00:00:00 2001
From: Kaleigh Scruggs <kaleigh.scruggs@northhighland.com>
Date: Sun, 17 May 2020 14:29:56 -0400
Subject: [PATCH 2/3] portfolio modals

---
 package.json                                  |   8 +-
 .../{03-full.jpg => aramarkFull.jpg}          | Bin
 .../{03-thumbnail.jpg => aramarkThumb.jpg}    | Bin
 .../portfolio/{04-full.jpg => boaFull.jpg}    | Bin
 .../{04-thumbnail.jpg => boaThumb.jpg}        | Bin
 .../portfolio/{01-full.jpg => deltaFull.jpg}  | Bin
 .../{01-thumbnail.jpg => deltaThumb.jpg}      | Bin
 .../portfolio/{02-full.jpg => globalFull.jpg} | Bin
 .../{02-thumbnail.jpg => globalThumb.jpg}     | Bin
 .../{05-full.jpg => globalcpgFull.jpg}        | Bin
 .../{05-thumbnail.jpg => globalcpgThumb.jpg}  | Bin
 .../{06-full.jpg => stratasysFull.jpg}        | Bin
 .../{06-thumbnail.jpg => stratasysThumb.jpg}  | Bin
 src/components/Layout.js                      |   4 +-
 src/components/Modal.js                       | 486 ++++++++++++++++++
 src/templates/index-page.js                   | 162 +-----
 yarn.lock                                     |  70 ++-
 17 files changed, 561 insertions(+), 169 deletions(-)
 rename src/assets/img/portfolio/{03-full.jpg => aramarkFull.jpg} (100%)
 rename src/assets/img/portfolio/{03-thumbnail.jpg => aramarkThumb.jpg} (100%)
 rename src/assets/img/portfolio/{04-full.jpg => boaFull.jpg} (100%)
 rename src/assets/img/portfolio/{04-thumbnail.jpg => boaThumb.jpg} (100%)
 rename src/assets/img/portfolio/{01-full.jpg => deltaFull.jpg} (100%)
 rename src/assets/img/portfolio/{01-thumbnail.jpg => deltaThumb.jpg} (100%)
 rename src/assets/img/portfolio/{02-full.jpg => globalFull.jpg} (100%)
 rename src/assets/img/portfolio/{02-thumbnail.jpg => globalThumb.jpg} (100%)
 rename src/assets/img/portfolio/{05-full.jpg => globalcpgFull.jpg} (100%)
 rename src/assets/img/portfolio/{05-thumbnail.jpg => globalcpgThumb.jpg} (100%)
 rename src/assets/img/portfolio/{06-full.jpg => stratasysFull.jpg} (100%)
 rename src/assets/img/portfolio/{06-thumbnail.jpg => stratasysThumb.jpg} (100%)
 create mode 100755 src/components/Modal.js

diff --git a/package.json b/package.json
index eaf65ae..9276a52 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,8 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
+    "@popperjs/core": "^2.4.0",
+    "bootstrap": "^4.5.0",
     "bulma": "^0.8.0",
     "gatsby": "^2.20.35",
     "gatsby-image": "^2.3.5",
@@ -27,9 +29,11 @@
     "netlify-cms-app": "^2.9.6",
     "node-sass": "^4.14.0",
     "prop-types": "^15.6.0",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
+    "react-popper": "^2.2.3",
+    "reactstrap": "^8.4.1",
     "uuid": "^7.0.0"
   },
   "keywords": [
diff --git a/src/assets/img/portfolio/03-full.jpg b/src/assets/img/portfolio/aramarkFull.jpg
similarity index 100%
rename from src/assets/img/portfolio/03-full.jpg
rename to src/assets/img/portfolio/aramarkFull.jpg
diff --git a/src/assets/img/portfolio/03-thumbnail.jpg b/src/assets/img/portfolio/aramarkThumb.jpg
similarity index 100%
rename from src/assets/img/portfolio/03-thumbnail.jpg
rename to src/assets/img/portfolio/aramarkThumb.jpg
diff --git a/src/assets/img/portfolio/04-full.jpg b/src/assets/img/portfolio/boaFull.jpg
similarity index 100%
rename from src/assets/img/portfolio/04-full.jpg
rename to src/assets/img/portfolio/boaFull.jpg
diff --git a/src/assets/img/portfolio/04-thumbnail.jpg b/src/assets/img/portfolio/boaThumb.jpg
similarity index 100%
rename from src/assets/img/portfolio/04-thumbnail.jpg
rename to src/assets/img/portfolio/boaThumb.jpg
diff --git a/src/assets/img/portfolio/01-full.jpg b/src/assets/img/portfolio/deltaFull.jpg
similarity index 100%
rename from src/assets/img/portfolio/01-full.jpg
rename to src/assets/img/portfolio/deltaFull.jpg
diff --git a/src/assets/img/portfolio/01-thumbnail.jpg b/src/assets/img/portfolio/deltaThumb.jpg
similarity index 100%
rename from src/assets/img/portfolio/01-thumbnail.jpg
rename to src/assets/img/portfolio/deltaThumb.jpg
diff --git a/src/assets/img/portfolio/02-full.jpg b/src/assets/img/portfolio/globalFull.jpg
similarity index 100%
rename from src/assets/img/portfolio/02-full.jpg
rename to src/assets/img/portfolio/globalFull.jpg
diff --git a/src/assets/img/portfolio/02-thumbnail.jpg b/src/assets/img/portfolio/globalThumb.jpg
similarity index 100%
rename from src/assets/img/portfolio/02-thumbnail.jpg
rename to src/assets/img/portfolio/globalThumb.jpg
diff --git a/src/assets/img/portfolio/05-full.jpg b/src/assets/img/portfolio/globalcpgFull.jpg
similarity index 100%
rename from src/assets/img/portfolio/05-full.jpg
rename to src/assets/img/portfolio/globalcpgFull.jpg
diff --git a/src/assets/img/portfolio/05-thumbnail.jpg b/src/assets/img/portfolio/globalcpgThumb.jpg
similarity index 100%
rename from src/assets/img/portfolio/05-thumbnail.jpg
rename to src/assets/img/portfolio/globalcpgThumb.jpg
diff --git a/src/assets/img/portfolio/06-full.jpg b/src/assets/img/portfolio/stratasysFull.jpg
similarity index 100%
rename from src/assets/img/portfolio/06-full.jpg
rename to src/assets/img/portfolio/stratasysFull.jpg
diff --git a/src/assets/img/portfolio/06-thumbnail.jpg b/src/assets/img/portfolio/stratasysThumb.jpg
similarity index 100%
rename from src/assets/img/portfolio/06-thumbnail.jpg
rename to src/assets/img/portfolio/stratasysThumb.jpg
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 1ddad13..e29edd5 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -1,8 +1,9 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './styles.css'
 import Footer from '../components/Footer'
 import Navbar from '../components/Navbar'
-import './styles.css'
 import useSiteMetadata from './SiteMetadata'
 import { withPrefix } from 'gatsby'
 //import '../js/scripts.js'
@@ -28,6 +29,7 @@ const TemplateWrapper = ({ children }) => {
       </Helmet>
       <Navbar />
       <div>{children}</div>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js"></script>
       <Footer />
     </div>
   )
diff --git a/src/components/Modal.js b/src/components/Modal.js
new file mode 100755
index 0000000..862aebb
--- /dev/null
+++ b/src/components/Modal.js
@@ -0,0 +1,486 @@
+import React, { Fragment, useState } from 'react'
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
+
+import deltaFull from '../assets/img/portfolio/deltaFull.jpg'
+import deltaThumb from '../assets/img/portfolio/deltaThumb.jpg'
+import globalFull from '../assets/img/portfolio/globalFull.jpg'
+import globalThumb from '../assets/img/portfolio/globalThumb.jpg'
+import aramarkFull from '../assets/img/portfolio/aramarkFull.jpg'
+import aramarkThumb from '../assets/img/portfolio/aramarkThumb.jpg'
+import boaFull from '../assets/img/portfolio/boaFull.jpg'
+import boaThumb from '../assets/img/portfolio/boaThumb.jpg'
+import globalcpgFull from '../assets/img/portfolio/globalcpgFull.jpg'
+import globalcpgThumb from '../assets/img/portfolio/globalcpgThumb.jpg'
+import stratasysFull from '../assets/img/portfolio/stratasysFull.jpg'
+import stratasysThumb from '../assets/img/portfolio/stratasysThumb.jpg'
+
+const LivePreviewExample = () => {
+  const [modal1, setModal1] = useState(false)
+  const [modal2, setModal2] = useState(false)
+  const [modal3, setModal3] = useState(false)
+  const [modal4, setModal4] = useState(false)
+  const [modal5, setModal5] = useState(false)
+  const [modal6, setModal6] = useState(false)
+
+  const toggle1 = () => setModal1(!modal1)
+  const toggle2 = () => setModal2(!modal2)
+  const toggle3 = () => setModal3(!modal3)
+  const toggle4 = () => setModal4(!modal4)
+  const toggle5 = () => setModal5(!modal5)
+  const toggle6 = () => setModal6(!modal6)
+
+  return (
+    <Fragment>
+      <div className="col-lg-4 col-sm-6 mb-4">
+        <div className="portfolio-item">
+          <div className="portfolio-link" data-toggle="modal" onClick={toggle1}>
+            <div className="portfolio-hover"></div>
+            <img className="img-fluid" src={deltaThumb} alt="" />
+          </div>
+          <div className="portfolio-caption">
+            <div className="portfolio-caption-heading">Delta Airlines</div>
+            <div className="portfolio-caption-subheading text-muted">
+              Design + Build
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Modal zIndex={2000} centered size="lg" isOpen={modal1} toggle={toggle1}>
+        <ModalHeader toggle={toggle1}>
+          <div className="container">
+            <div className="row justify-content-center">
+              <div className="col-lg-8">
+                <div className="modal-body">
+                  <h2 className="text-uppercase">Delta News Hub</h2>
+                  <p className="item-intro text-muted">
+                    Delta Airlines Design + Build
+                  </p>
+                  <img
+                    className="img-fluid d-block mx-auto"
+                    src={deltaFull}
+                    alt="deltaFull"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalHeader>
+        <ModalBody>
+          <h5>Challenge</h5>
+          <p>
+            Delta wanted to develop a web experience that showcased its fresh
+            approach to storytelling, enabling key audiences to a quicker, more
+            intuitive way to find, publish, and share news about Delta and the
+            airline industry.
+          </p>
+          <h5>Approach</h5>
+          <p>
+            In collaboration with the Delta team, North Highland created the
+            vision for the “News Hub,” a digital news site with multi-platform
+            and social capabilities that uses videos, images, and graphics to
+            tell compelling stories on behalf of the brand. We brought together
+            multiple capabilities, approaches, and skillsets to accomplish this:
+            <ul>
+              <li>Tech Development</li>
+              <li>Behavioral UX</li>
+              <li>Visual Design</li>
+              <li>Content Strategy</li>
+              <li>Agile Development</li>
+            </ul>
+          </p>
+          <h5>Result</h5>
+          <p>
+            North Highland used Agile development to produce first prototype
+            within 15 weeks—with a full site launch in market soon after. The
+            launch of the News Hub drove a 108% increase in site visits. View
+            the site:{' '}
+            <a
+              href="https://news.delta.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              news.delta.com
+            </a>
+            .
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="link" className="btn-link-dark" onClick={toggle1}>
+            Close
+          </Button>{' '}
+        </ModalFooter>
+      </Modal>
+
+      <div className="col-lg-4 col-sm-6 mb-4">
+        <div className="portfolio-item">
+          <div className="portfolio-link" data-toggle="modal" onClick={toggle2}>
+            <div className="portfolio-hover"></div>
+            <img className="img-fluid" src={globalThumb} alt="" />
+          </div>
+          <div className="portfolio-caption">
+            <div className="portfolio-caption-heading">Global Oil and Gas</div>
+            <div className="portfolio-caption-subheading text-muted">
+              Design + Build
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Modal zIndex={2000} centered size="lg" isOpen={modal2} toggle={toggle2}>
+        <ModalHeader toggle={toggle2}>
+          <div className="container">
+            <div className="row justify-content-center">
+              <div className="col-lg-8">
+                <div className="modal-body">
+                  <h2 className="text-uppercase">B2B e-Commerce Platform</h2>
+                  <p className="item-intro text-muted">Design + Build</p>
+                  <img
+                    className="img-fluid d-block mx-auto"
+                    src={globalFull}
+                    alt="globalFull"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalHeader>
+        <ModalBody>
+          <h5>Challenge</h5>
+          <p>
+            A global oilfield equipment provider needed a faster, automated
+            process for inside salespeople to submit quotes and wanted to
+            introduce a customer facing, self-service portal as well. The client
+            needed to collect all their product related data in one place to
+            ensure consistent quoting.
+          </p>
+          <h5>Approach</h5>
+          <p>
+            North Highland started the engagement with a series of Futures
+            workshops to establish a digital vision. The immediate need
+            identified was an e-Commerce platform to speed up the sales cycle
+            and enable self-service for their customers.
+          </p>
+          <p>
+            It was clear that this would have monumental impact on the business:
+            this was not just about establishing a digital sales channel, this
+            was about transforming an entire organization to become digitally
+            enabled.
+          </p>
+          <p>
+            Leveraging our service design framework, we developed a current and
+            future state service architecture in co-creation with stakeholders
+            to visualize the changes needed. It helped all stakeholders to
+            connect the dots and highlight high-value areas of focus.
+          </p>
+          <p>
+            To get buy-in from across the organization, we ran a parallel track
+            addressing the service architecture (logistics, fullfillment,
+            Salesforce integration) needed and creating a proof of concept for
+            the customer-facing e-Commerce platform in form of a prototype. The
+            prototype made the vision come to life and gave stakeholders the
+            opportunity to react and provide feedback. It shifted the client's
+            mindset from the anxiety of not knowing to anticipating the changes
+            with excitement. As the service architecture matured the prototype
+            evolved.
+          </p>
+          <h5>Result</h5>
+          <p>
+            North Highland used its software development lifecycle to deliver a
+            self-service portal, providing a unique experience for both
+            employees and customer to submit quotes to Salesforce. Portal users
+            can now create over 5,000 different product configurations,
+            visualize final product assembly, and customize shipments.
+            Salespeople can also apply discounts and view commissions per quote.
+            A CMS populated with product data for over 3,000 unique products
+            serves as single source of truth for all product related activities.
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="link" className="btn-link-dark" onClick={toggle2}>
+            Close
+          </Button>{' '}
+        </ModalFooter>
+      </Modal>
+
+      <div className="col-lg-4 col-sm-6 mb-4">
+        <div className="portfolio-item">
+          <div className="portfolio-link" data-toggle="modal" onClick={toggle3}>
+            <div className="portfolio-hover"></div>
+            <img className="img-fluid" src={aramarkThumb} alt="" />
+          </div>
+          <div className="portfolio-caption">
+            <div className="portfolio-caption-heading">Aramark</div>
+            <div className="portfolio-caption-subheading text-muted">
+              Architecture + Implementation
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Modal zIndex={2000} centered size="lg" isOpen={modal3} toggle={toggle3}>
+        <ModalHeader toggle={toggle3}>
+          <div className="container">
+            <div className="row justify-content-center">
+              <div className="col-lg-8">
+                <div className="modal-body">
+                  <h2 className="text-uppercase">
+                    "Future-ready" System Integrations
+                  </h2>
+                  <p className="item-intro text-muted">
+                    Architecture + Implementation
+                  </p>
+                  <img
+                    className="img-fluid d-block mx-auto"
+                    src={aramarkFull}
+                    alt="aramarkFull"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalHeader>
+        <ModalBody>
+          <h5>Challenge</h5>
+          <p>
+            Aramark Refreshments Services had a need to integrate their new
+            route management system with their backend services all while
+            maintaining business continuity. Further, Aramark wanted to ensure
+            the systems put in the place where ready for future enhancements and
+            optimizations.
+          </p>
+          <h5>Approach</h5>
+          <p>
+            North Highland used its software development lifecycle to plan out
+            the integration in 5 simple phases – Discover, Define, Design,
+            Develop, and Deploy – and iterated over these phases to continuously
+            deliver business value by integrating pieces of the business until
+            the entire line was fully instrumented.
+          </p>
+          <h5>Result</h5>
+          <p>
+            North Highland developed a fully integrated system where
+            applications can pass information from one to the other through
+            interfaces that can be easily modified or replaced without having
+            the need of a full system replacement
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="link" className="btn-link-dark" onClick={toggle3}>
+            Close
+          </Button>{' '}
+        </ModalFooter>
+      </Modal>
+
+      <div className="col-lg-4 col-sm-6 mb-4">
+        <div className="portfolio-item">
+          <div className="portfolio-link" data-toggle="modal" onClick={toggle4}>
+            <div className="portfolio-hover"></div>
+            <img className="img-fluid" src={boaThumb} alt="" />
+          </div>
+          <div className="portfolio-caption">
+            <div className="portfolio-caption-heading">Bank of America</div>
+            <div className="portfolio-caption-subheading text-muted">
+              Transactional Service Model
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Modal zIndex={2000} centered size="lg" isOpen={modal4} toggle={toggle4}>
+        <ModalHeader toggle={toggle4}>
+          <div className="container">
+            <div className="row justify-content-center">
+              <div className="col-lg-8">
+                <div className="modal-body">
+                  <h2 className="text-uppercase">Marketing Operations</h2>
+                  <p className="item-intro text-muted">
+                    Transactional Service Model
+                  </p>
+                  <img
+                    className="img-fluid d-block mx-auto"
+                    src={boaFull}
+                    alt="boaFull"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalHeader>
+        <ModalBody>
+          <h5>Challenge</h5>
+          <p>
+            Bank of America needed to upscale its internal capacity creating
+            enhanced web sites and custom print materials, while maximizing cost
+            efficiencies.
+          </p>
+          <h5>Approach</h5>
+          <p>
+            North Highland assembled a multi-disciplinary Pod of UI and UX
+            designers, full-stack developers as well as a scrum master to manage
+            various digital and print initiatives in support of Bank of
+            America's team. The North Highland team integrated seamlessly with
+            the client's Marketing function, quickly getting up to speed and
+            delivering high-quality output. The team also proactively seeked
+            opportunities to improve current workflows and share best practices
+            with the client to improve overall delivery performance.
+          </p>
+          <h5>Result</h5>
+          <p>
+            North Highland established an order intake process to provide
+            accountability of the end product, while aligning skillsets to
+            efficiently serve the Financial Advisors. We implemented governance
+            and controls to manage scope of work and provide consistent value
+            and the new KPIs provided visibility into creative development. The
+            new service model enhanced the structure of the field marketing
+            department and eliminated onboarding and discovery efforts,
+            resulting in over $100k in savings.
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="link" className="btn-link-dark" onClick={toggle4}>
+            Close
+          </Button>{' '}
+        </ModalFooter>
+      </Modal>
+
+      <div className="col-lg-4 col-sm-6 mb-4">
+        <div className="portfolio-item">
+          <div className="portfolio-link" data-toggle="modal" onClick={toggle5}>
+            <div className="portfolio-hover"></div>
+            <img className="img-fluid" src={globalcpgThumb} alt="" />
+          </div>
+          <div className="portfolio-caption">
+            <div className="portfolio-caption-heading">Global CPG</div>
+            <div className="portfolio-caption-subheading text-muted">
+              e-Commerce Strategy + Design
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Modal zIndex={2000} centered size="lg" isOpen={modal5} toggle={toggle5}>
+        <ModalHeader toggle={toggle5}>
+          <div className="container">
+            <div className="row justify-content-center">
+              <div className="col-lg-8">
+                <div className="modal-body">
+                  <h2 className="text-uppercase">Marketing Operations</h2>
+                  <p className="item-intro text-muted">
+                    Transactional Service Model
+                  </p>
+                  <img
+                    className="img-fluid d-block mx-auto"
+                    src={globalcpgFull}
+                    alt="globalcpgFull"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalHeader>
+        <ModalBody>
+          <h5>Challenge</h5>
+          <p>
+            Our client was seeking to reimagine its B2B Digital Product Catalog
+            that allows franchises to order products and equipment. The current
+            experience was outdated and cumbersome, causing customers to
+            circumvent the system and place orders manually.
+          </p>
+          <h5>Approach</h5>
+          <p>
+            North Highland conducted a survey which garnered more than 800
+            responses. Based on these insights we re-imagined the actual
+            architecture and user flows. After testing these initial concepts,
+            we brought the new concepts to life through fresh clean designs.
+          </p>
+          <h5>Result</h5>
+          <p>
+            North Highland was able to eliminate an average of 5 clicks per
+            order, streamlining how customers browse and shop for items, as well
+            as simplifying the checkout process.
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="link" className="btn-link-dark" onClick={toggle5}>
+            Close
+          </Button>{' '}
+        </ModalFooter>
+      </Modal>
+
+      <div className="col-lg-4 col-sm-6 mb-4">
+        <div className="portfolio-item">
+          <div className="portfolio-link" data-toggle="modal" onClick={toggle6}>
+            <div className="portfolio-hover"></div>
+            <img className="img-fluid" src={stratasysThumb} alt="" />
+          </div>
+          <div className="portfolio-caption">
+            <div className="portfolio-caption-heading">Stratasys</div>
+            <div className="portfolio-caption-subheading text-muted">
+              Digital Strategy + Design
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Modal zIndex={2000} centered size="lg" isOpen={modal6} toggle={toggle6}>
+        <ModalHeader toggle={toggle6}>
+          <div className="container">
+            <div className="row justify-content-center">
+              <div className="col-lg-8">
+                <div className="modal-body">
+                  <h2 className="text-uppercase">Digital Product Catalog</h2>
+                  <p className="item-intro text-muted">
+                    Digital Strategy + Design
+                  </p>
+                  <img
+                    className="img-fluid d-block mx-auto"
+                    src={stratasysFull}
+                    alt="stratasysFull"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalHeader>
+        <ModalBody>
+          <h5>Challenge</h5>
+          <p>
+            The client is a global leader in 3D printing technology that is
+            radically changing the future of manufacturing, medicine, design and
+            education. Yet their website was that of an industrial printer maker
+            from ten years ago. They wanted to take a great leap, transforming
+            their digital experience to that of a brand leader, while creating a
+            significantly better tool for selling what their customers want – 3D
+            solutions, not a lineup of printers.
+          </p>
+          <h5>Approach</h5>
+          <p>
+            North Highland partnered with the client’s Digital team to
+            re-platform, reinvent, redesign and relaunch their website in only
+            three months. Our multidisciplinary team conducted a competitive
+            analysis, customer interviews, content audits, and SEO analysis to
+            inform user experience, design and content recommendations. Agile
+            processes and principles were used throughout. The new site
+            reinforces the client’s market authority, differentiates them from
+            existing and emerging competitors, and enhances the platform as a
+            lead generation tool.
+          </p>
+          <h5>Result</h5>
+          <p>
+            Through the streamlined user flows and up- and cross-sell
+            opportunities along the sales funnel, Stratasys was able to increase
+            lead generation by 24%.
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="link" className="btn-link-dark" onClick={toggle6}>
+            Close
+          </Button>{' '}
+        </ModalFooter>
+      </Modal>
+    </Fragment>
+  )
+}
+
+export default LivePreviewExample
diff --git a/src/templates/index-page.js b/src/templates/index-page.js
index 76f7b38..c0584d5 100644
--- a/src/templates/index-page.js
+++ b/src/templates/index-page.js
@@ -11,6 +11,7 @@ import img3 from '../img/about/img3.jpg'
 import how1 from '../img/how/how1.jpg'
 import how2 from '../img/how/how2.jpg'
 import how3 from '../img/how/how3.jpg'
+import Modal from '../components/Modal'
 
 export const IndexPageTemplate = ({
   image,
@@ -142,166 +143,7 @@ export const IndexPageTemplate = ({
           </h3>
         </div>
         <div className="row">
-          <div className="col-lg-4 col-sm-6 mb-4">
-            <div className="portfolio-item">
-              <a
-                className="portfolio-link"
-                data-toggle="modal"
-                href="#portfolioModal1"
-              >
-                <div className="portfolio-hover">
-                  <div className="portfolio-hover-content">
-                    <i className="fas fa-plus fa-3x"></i>
-                  </div>
-                </div>
-                <img
-                  className="img-fluid"
-                  src="assets/img/portfolio/01-thumbnail.jpg"
-                  alt=""
-                />
-              </a>
-              <div className="portfolio-caption">
-                <div className="portfolio-caption-heading">Delta Airlines</div>
-                <div className="portfolio-caption-subheading text-muted">
-                  Design + Build
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="col-lg-4 col-sm-6 mb-4">
-            <div className="portfolio-item">
-              <a
-                className="portfolio-link"
-                data-toggle="modal"
-                href="#portfolioModal2"
-              >
-                <div className="portfolio-hover">
-                  <div className="portfolio-hover-content">
-                    <i className="fas fa-plus fa-3x"></i>
-                  </div>
-                </div>
-                <img
-                  className="img-fluid"
-                  src="assets/img/portfolio/02-thumbnail.jpg"
-                  alt=""
-                />
-              </a>
-              <div className="portfolio-caption">
-                <div className="portfolio-caption-heading">
-                  Global Oil and Gas
-                </div>
-                <div className="portfolio-caption-subheading text-muted">
-                  Design + Build
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="col-lg-4 col-sm-6 mb-4">
-            <div className="portfolio-item">
-              <a
-                className="portfolio-link"
-                data-toggle="modal"
-                href="#portfolioModal3"
-              >
-                <div className="portfolio-hover">
-                  <div className="portfolio-hover-content">
-                    <i className="fas fa-plus fa-3x"></i>
-                  </div>
-                </div>
-                <img
-                  className="img-fluid"
-                  src="assets/img/portfolio/03-thumbnail.jpg"
-                  alt=""
-                />
-              </a>
-              <div className="portfolio-caption">
-                <div className="portfolio-caption-heading">Aramark</div>
-                <div className="portfolio-caption-subheading text-muted">
-                  Architecture + Implementation
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="col-lg-4 col-sm-6 mb-4 mb-lg-0">
-            <div className="portfolio-item">
-              <a
-                className="portfolio-link"
-                data-toggle="modal"
-                href="#portfolioModal4"
-              >
-                <div className="portfolio-hover">
-                  <div className="portfolio-hover-content">
-                    <i className="fas fa-plus fa-3x"></i>
-                  </div>
-                </div>
-                <img
-                  className="img-fluid"
-                  src="assets/img/portfolio/04-thumbnail.jpg"
-                  alt=""
-                />
-              </a>
-              <div className="portfolio-caption">
-                <div className="portfolio-caption-heading">Bank of America</div>
-                <div className="portfolio-caption-subheading text-muted">
-                  Transactional Service Model
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="col-lg-4 col-sm-6 mb-4 mb-sm-0">
-            <div className="portfolio-item">
-              <a
-                className="portfolio-link"
-                data-toggle="modal"
-                href="#portfolioModal5"
-              >
-                <div className="portfolio-hover">
-                  <div className="portfolio-hover-content">
-                    <i className="fas fa-plus fa-3x"></i>
-                  </div>
-                </div>
-                <img
-                  className="img-fluid"
-                  src="assets/img/portfolio/05-thumbnail.jpg"
-                  alt=""
-                />
-              </a>
-              <div className="portfolio-caption">
-                <div className="portfolio-caption-heading">
-                  Global CPG&nbsp;
-                </div>
-                <div className="portfolio-caption-subheading text-muted">
-                  e-Commerce Strategy + Design&nbsp;
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="col-lg-4 col-sm-6">
-            <div className="portfolio-item">
-              <a
-                className="portfolio-link"
-                data-toggle="modal"
-                href="#portfolioModal6"
-              >
-                <div className="portfolio-hover">
-                  <div className="portfolio-hover-content">
-                    <i className="fas fa-plus fa-3x"></i>
-                  </div>
-                </div>
-                <img
-                  className="img-fluid"
-                  src="assets/img/portfolio/06-thumbnail.jpg"
-                  alt=""
-                />
-              </a>
-              <div className="portfolio-caption">
-                <div className="portfolio-caption-heading">Stratasys</div>
-                <div className="portfolio-caption-subheading text-muted">
-                  Digital Strategy + Design
-                </div>
-              </div>
-            </div>
-          </div>
+          <Modal />
         </div>
       </div>
     </section>
diff --git a/yarn.lock b/yarn.lock
index cccd5e2..2047bfa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1556,6 +1556,11 @@
     lodash.debounce "^4.0.8"
     react-dev-utils "^9.1.0"
 
+"@popperjs/core@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.0.tgz#0e1bdf8d021e7ea58affade33d9d607e11365915"
+  integrity sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==
+
 "@reach/router@^1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db"
@@ -2955,6 +2960,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.0.tgz#97d9dbcb5a8972f8722c9962483543b907d9b9ec"
+  integrity sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==
+
 boxen@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-3.2.0.tgz#fbdff0de93636ab4450886b6ff45b92d098f45eb"
@@ -3532,7 +3542,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.3, classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -4536,7 +4546,7 @@ decompress@^4.0.0, decompress@^4.2.0:
     pify "^2.3.0"
     strip-dirs "^2.0.0"
 
-deep-equal@^1.0.1, deep-equal@^1.1.0:
+deep-equal@^1.0.1, deep-equal@^1.1.0, deep-equal@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
   integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
@@ -11652,6 +11662,11 @@ pnp-webpack-plugin@^1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@^1.14.4:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 portfinder@^1.0.25:
   version "1.0.26"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70"
@@ -12514,7 +12529,7 @@ react-dnd@^7.3.2:
     invariant "^2.1.0"
     shallowequal "^1.1.0"
 
-react-dom@^16.8.4:
+react-dom@^16.13.1, react-dom@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
   integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
@@ -12539,6 +12554,11 @@ react-fast-compare@^2.0.4:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-fast-compare@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.1.1.tgz#0becf31e3812fa70dc231e259f40d892d4767900"
+  integrity sha512-SCsAORWK59BvauR2L1BTdjQbJcSGJJz03U0awektk2hshLKrITDDFTlgGCqIZpTDlPC/NFlZee6xTMzXPVLiHw==
+
 react-frame-component@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-4.1.1.tgz#ea8f7c518ef6b5ad72146dd1f648752369826894"
@@ -12629,6 +12649,27 @@ react-polyglot@^0.6.0:
     hoist-non-react-statics "^2.5.0"
     prop-types "^15.5.8"
 
+react-popper@^1.3.6:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
+  integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    create-react-context "^0.3.0"
+    deep-equal "^1.1.1"
+    popper.js "^1.14.4"
+    prop-types "^15.6.1"
+    typed-styles "^0.0.7"
+    warning "^4.0.2"
+
+react-popper@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.3.tgz#33d425fa6975d4bd54d9acd64897a89d904b9d97"
+  integrity sha512-mOEiMNT1249js0jJvkrOjyHsGvqcJd3aGW/agkiMoZk3bZ1fXN1wQszIQSjHIai48fE67+zwF8Cs+C4fWqlfjw==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-reconciler@^0.24.0:
   version "0.24.0"
   resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.24.0.tgz#5a396b2c2f5efe8554134a5935f49f546723f2dd"
@@ -12782,7 +12823,7 @@ react-transition-group@^1.1.3:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
-react-transition-group@^2.2.1, react-transition-group@^2.6.0:
+react-transition-group@^2.2.1, react-transition-group@^2.3.1, react-transition-group@^2.6.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
   integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
@@ -12814,7 +12855,7 @@ react-window@^1.8.5:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^16.8.0, react@^16.8.4:
+react@^16.13.1, react@^16.8.0, react@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
   integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
@@ -12823,6 +12864,18 @@ react@^16.8.0, react@^16.8.4:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+reactstrap@^8.4.1:
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.4.1.tgz#c7f63b9057f58b52833061711ebe235b9ec4e3e5"
+  integrity sha512-oAjp9PYYUGKl7SLXwrQ1oRIrYw0MqfO2mUqYgGapFKHG2uwjEtLip5rYxtMujkGx3COjH5FX1WtcfNU4oqpH0Q==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    classnames "^2.2.3"
+    prop-types "^15.5.8"
+    react-lifecycles-compat "^3.0.4"
+    react-popper "^1.3.6"
+    react-transition-group "^2.3.1"
+
 read-chunk@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-3.2.0.tgz#2984afe78ca9bfbbdb74b19387bf9e86289c16ca"
@@ -15228,6 +15281,11 @@ type@^2.0.0:
   resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
   integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
 
+typed-styles@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
+  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@@ -15822,7 +15880,7 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
-warning@^4.0.1, warning@^4.0.3:
+warning@^4.0.1, warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==

From 2972f9776ec29a0a78aebb0f10eb86d1d79e3e96 Mon Sep 17 00:00:00 2001
From: Kaleigh Scruggs <kaleigh.scruggs@northhighland.com>
Date: Sun, 17 May 2020 15:53:14 -0400
Subject: [PATCH 3/3] navbar

---
 src/components/Modal.js     |   1 +
 src/components/Navbar.js    | 133 +++++++++++++-----------------------
 src/components/styles.css   |  10 +--
 src/templates/index-page.js |   2 +-
 4 files changed, 53 insertions(+), 93 deletions(-)

diff --git a/src/components/Modal.js b/src/components/Modal.js
index 862aebb..ac4ea3b 100755
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -13,6 +13,7 @@ import globalcpgFull from '../assets/img/portfolio/globalcpgFull.jpg'
 import globalcpgThumb from '../assets/img/portfolio/globalcpgThumb.jpg'
 import stratasysFull from '../assets/img/portfolio/stratasysFull.jpg'
 import stratasysThumb from '../assets/img/portfolio/stratasysThumb.jpg'
+/* eslint-disable */
 
 const LivePreviewExample = () => {
   const [modal1, setModal1] = useState(false)
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 219dd16..c9d985a 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,96 +1,55 @@
-import React from 'react'
-//import { Link } from 'gatsby'
+import React, { useState } from 'react'
+import {
+  Collapse,
+  Navbar,
+  NavbarToggler,
+  NavbarBrand,
+  Nav,
+  NavItem,
+  NavLink,
+} from 'reactstrap'
 import logo from '../img/nh-logo.png'
 /* eslint-disable */
 
-const Navbar = class extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      active: false,
-      navBarActiveClass: '',
-    }
-  }
+const Example = (props) => {
+  const [isOpen, setIsOpen] = useState(false)
 
-  toggleHamburger = () => {
-    // toggle the active boolean in the state
-    this.setState(
-      {
-        active: !this.state.active,
-      },
-      // after state has been updated,
-      () => {
-        // set the class in state for the navbar accordingly
-        this.state.active
-          ? this.setState({
-              navBarActiveClass: 'is-active',
-            })
-          : this.setState({
-              navBarActiveClass: '',
-            })
-      }
-    )
-  }
+  const toggle = () => setIsOpen(!isOpen)
 
-  render() {
-    return (
-      <nav
-        className="navbar navbar-expand-lg navbar-dark fixed-top"
-        id="mainNav"
-      >
+  return (
+    <div>
+      <Navbar color="dark" dark expand="lg" className="fixed-top" id="mainNav">
         <div className="container">
-          <a className="navbar-brand js-scroll-trigger" href="#page-top">
-            <img src={logo} alt="logo" />
-          </a>
-          <button
-            className="navbar-toggler navbar-toggler-right"
-            type="button"
-            data-toggle="collapse"
-            data-target="#navbarResponsive"
-            aria-controls="navbarResponsive"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-          >
-            Menu<i className="fas fa-bars ml-1"></i>
-          </button>
-          <div className="collapse navbar-collapse" id="navbarResponsive">
-            <ul className="navbar-nav text-uppercase ml-auto">
-              <li className="nav-item">
-                <a className="nav-link js-scroll-trigger" href="#MVP">
-                  MVP
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link js-scroll-trigger" href="#How">
-                  How
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link js-scroll-trigger" href="#Solutions">
-                  Solutions
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link js-scroll-trigger" href="#portfolio">
-                  Portfolio
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link js-scroll-trigger" href="#team">
-                  Team and Cost
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link js-scroll-trigger" href="#about">
-                  About Us
-                </a>
-              </li>
-            </ul>
-          </div>
+          <NavbarBrand href="/" className="js-scroll-trigger">
+            <img src={logo} alt="logo" className="nh-logo" />
+          </NavbarBrand>
+          <NavbarToggler onClick={toggle} />
+          <Collapse isOpen={isOpen} navbar id="navbarResponsive">
+            <Nav className="navbar-nav text-uppercase ml-auto" navbar>
+              <NavItem className="nav-link js-scroll-trigger">
+                <NavLink href="#MVP">MVP</NavLink>
+              </NavItem>
+              <NavItem className="nav-link js-scroll-trigger">
+                <NavLink href="#how">How</NavLink>
+              </NavItem>
+              <NavItem className="nav-link js-scroll-trigger">
+                <NavLink href="#how">Solutions</NavLink>
+              </NavItem>
+              <NavItem className="nav-link js-scroll-trigger">
+                <NavLink href="#portfolio">Portfolio</NavLink>
+              </NavItem>
+              <NavItem className="nav-link js-scroll-trigger">
+                <NavLink href="#team">Team and Cost</NavLink>
+              </NavItem>
+              <NavItem className="nav-link js-scroll-trigger">
+                <NavLink href="#about">About Us</NavLink>
+              </NavItem>
+            </Nav>
+          </Collapse>
         </div>
-      </nav>
-    )
-  }
+      </Navbar>
+    </div>
+  )
 }
 
-export default Navbar
+export default Example
diff --git a/src/components/styles.css b/src/components/styles.css
index 28fbfa6..d5cff2c 100755
--- a/src/components/styles.css
+++ b/src/components/styles.css
@@ -184,7 +184,7 @@ sup {
 }
 
 a {
-  color: #fed136;
+  color: white !important;
   text-decoration: none;
   background-color: transparent;
 }
@@ -10456,8 +10456,6 @@ img::-moz-selection {
 }
 
 #mainNav {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
   background-color: #212529;
 }
 #mainNav .navbar-toggler {
@@ -10498,8 +10496,6 @@ img::-moz-selection {
 
 @media (min-width: 992px) {
   #mainNav {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
     border: none;
     background-color: transparent;
     transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
@@ -10942,3 +10938,7 @@ section#contact form#contactForm :-ms-input-placeholder {
 h4.my-3 {
   white-space: pre-line;
 }
+
+.nh-logo {
+  width: 165px;
+}
diff --git a/src/templates/index-page.js b/src/templates/index-page.js
index c0584d5..a3d4bb0 100644
--- a/src/templates/index-page.js
+++ b/src/templates/index-page.js
@@ -60,7 +60,7 @@ export const IndexPageTemplate = ({
         <Features gridItems={intro.pods} />
       </div>
     </section>
-    <section className="page-section bg-light" id="How">
+    <section className="page-section bg-light" id="how">
       <div className="container">
         <div className="text-center">
           <h2 className="section-heading text-uppercase">{how.heading}</h2>