Sprint process page update

_includes/hero.html

@@ -78,20 +78,6 @@ <h1 class="hero--heading margin-top-10 line-height-sans-3 text-semi-bold ls-2 fo
         </div>
       </div>
     </div>
-{% elsif page.class == "our-process" %}
-<section class="page-process interior-hero bg-base-darkest usa-dark-background desktop:padding-bottom-9 padding-bottom-5">
-  <div class="grid-container">
-    <div class="maxw-mobile-lg grid-offset-1 margin-top-9">
-      <h1
-        class="hero--heading margin-top-10 line-height-sans-3 text-semi-bold font-lang-13 text-white"
-      >
-        {{ page.title }}
-      </h1>
-      {% for p in page.lead %}
-        <p class="font-sans-md text-white">{{ p }}</p>
-      {% endfor %}
-    </div>
-  </div>
 {% elsif page.class == "case-study" %}
   <section class="interior-hero bg-base-darkest usa-dark-background">
     <div class="grid-container usa-hero__bg display-flex flex-column flex-align-center padding-bottom-3">

_includes/how-it-works-details.html

@@ -0,0 +1,73 @@
+{% assign data = include.data %}
+<section class="bg-base grid-container padding-y-7 padding-x-4 how-it-works-details">
+  <ol class="bg-white padding-y-4">
+    <li>
+      Identify Challenges
+      <p>Government agencies or non-governmental organizations (NGOs) identify high-priority problems they seek to solve through the sprint. Challenges can be any priority facing the public.</p>
+    </li>
+    <li>
+      Team Up
+      <p>Technologists from industry, NGOs, and universities sign on to create data-driven, digital products in collaboration
+      with end users, community advocates, and data experts.</p>
+    </li>
+    <li>
+      <div class="text-wrapper padding-x-4 padding-top-4 padding-bottom-5 margin-y-4 bg-white">
+
+
+        <h3 class="margin-0">Build</h3>
+
+
+        <p class="margin-bottom-0 overflow-hidden">
+          Tech teams build products during a 12-14 week technology development sprint that includes user research, data
+          exploration, and product development. Past products include mapping tools, apps, websites, games, AI algorithms, network
+          visualizations, and more.
+        </p>
+          <div class="grid-col">
+            <div class="usa-accordion usa-accordion--multiselectable padding-top-2 padding-bottom-5" data-allow-multiple>
+              <h4 class="usa-accordion__heading">
+                <button type="button" class="usa-accordion__button light bg-blue text-white" aria-expanded="true"
+                  aria-controls="m-a1">
+                  Sprint Milestones
+                </button>
+              </h4>
+
+              <div id="m-a1" class="usa-accordion__content usa-prose">
+                <ol>
+                  <li class="text-bold margin-bottom-2">User Research:
+                    <p class="text-normal display-inline">Teams conduct user research and connect with user advocates who can offer insights into their communities.</p>
+                </li>
+                  <li class="text-bold margin-bottom-2">Data Discovery:
+                    <p class="text-normal display-inline"> Teams begin identifying and exploring relevant datasets and connect with data stewards via email and phone to learn more about available datasets.</p>
+                </li>
+                  <li class="text-bold margin-bottom-2">Concept Pitch:
+                    <p class="text-normal display-inline">Teams present their initial progress and product concept for feedback.</p>
+                  </li>
+                  <li class="text-bold margin-bottom-2">Product Advising:
+                    <p class="text-normal display-inline">Teams are paired with 1:1 product advisors that meet with the teams outside of milestones to discuss launch and product maintenance strategy</p>
+
+                </li>
+                  <li class="text-bold margin-bottom-2">Beta Demo:
+                    <p class="text-normal display-inline">Teams present a prototype of their product for feedback.</p>
+                  </li>
+                  <li class="text-bold margin-bottom-2">MVP Demo:
+                    <p class="text-normal display-inline">Teams present a minimum viable product as the final outcome of the sprint and receive feedback on sustainability and longevity of their work.</p>
+                  </li>
+                </ol>
+
+              </div>
+
+            </div>
+
+          </div>
+      </div>
+    </li>
+    <li>
+      Launch
+      <p>Products are launched and federal agencies can decide how they want to showcase the results of their sprint.</p>
+    </li>
+    <li>
+      Reach End Users
+      <p>After the sprint, participants have the option to stay in touch and continue product development and deployment.</p>
+    </li>
+  </ol>
+</section>

_includes/single-column-header-text-hot-dog-cta.html

@@ -0,0 +1,54 @@
+{% assign data = include.data %}
+
+<section class="grid-container padding-y-7 padding-x-4 {% if data.text.title %}{{ data.text.title | slugify }}{% endif %} bg-blue header-text-hot-dog">
+  {% for data in data %}
+
+{% if data.text.title %}
+<h2 class="margin-top-0 {% if data.text.title %}{{data.text.title | slugify}}{% endif %} text-white">{{data.text.title}}
+</h2>
+{% endif %}
+
+<div class="text-wrapper padding-x-4 padding-top-4 padding-bottom-5 margin-y-4 bg-white">
+  {% if data.text.subtitle %}
+
+  <h3 class="margin-0">{{data.text.subtitle}}</h3>
+
+  {% endif %}
+
+  {% if data.role.title %}
+
+  <h3 class="margin-0">{{data.role.title}}</h3>
+
+  {% endif %}
+
+
+  <p class="margin-bottom-0 overflow-hidden">
+    {{ data.text.blurb | markdownify | remove: "<p>" | remove: "</p>" }}
+  </p>
+
+  <p class="margin-bottom-0 overflow-hidden">
+    {{ data.role.blurb | markdownify | remove: "<p>" | remove: "</p>" }}
+  </p>
+
+{% if data.download.href %}
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" aria-hidden="true"
+  class="width-205 margin-right-05">
+  <path d="M0 0h24v24H0z" fill="none" />
+  <path
+    d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" />
+</svg>
+<a href="{{site.baseurl}}/{{ data.download.href}}">{{ data.download.text}}</a>
+{% endif %}
+
+</div>
+
+
+
+
+
+{% if data.cta %}
+<h3>{{data.blurb.title}}</h3>
+{% endif %}
+
+{% endfor %}
+</section>

css/_uswds-theme-custom-styles.scss

@@ -1388,6 +1388,23 @@ main {
   }
 
 
+// Sprint process page ----------------- //
+.page-sprint-process {
+  h2 {
+    font-size: 14px;
+  }
+
+  h3 {
+    font-size: 12px;
+  }
+
+  p {
+    font-size: 12px;
+    line-height: 17px;
+  }
+}
+
+
 // FAQ page ----------------- //
 .page-faqs {
   background: #E6E6E6;
@@ -2087,6 +2104,17 @@ div.toolkit-todo__resources {
   }
 }
 
+.semi-cta {
+  border: 1px black solid;
+  // border-radius: 130px 0 0 130px;
+  padding: 50px 25px;
+  min-height: 172px;
+
+  &.radius-left-pill {
+    border-right-style: none;
+  }
+}
+
 .footer-contact-links {
   @include grid-gap(2);