Updates about page

_includes/hero.html

@@ -31,21 +31,6 @@
       <p class="usa-hero__subtitle desktop:grid-col-5">{{ page.hero.subtext }}</p>
       </div>
     </div>
-{% elsif page.class == "about"%}
-<section class="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 line-height-sans-3 text-semi-bold ls-2 font-lang-13 text-white margin-top-10"
-      >
-        {{ page.title }}
-      </h1>
-      {% for p in page.lead %}
-        <p class="font-sans-md text-white">{{ p }}</p>
-      {% endfor %}
-    </div>
-  </div>
 {% elsif page.class == "datakit" %}
 <section class="interior-hero bg-base-darkest usa-dark-background desktop:padding-bottom-9 padding-bottom-5">
   <div class="grid-container">
@@ -78,20 +63,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">
@@ -134,6 +105,14 @@ <h1 class="usa-hero__title">{{ page.hero.text}}</h1>
       {{ page.hero.subtext | markdownify }}
     </div>
   </div>
+{% elsif page.class == "sprint-process" or page.class == "about" %}
+<section class="interior-hero bg-base-darkest usa-dark-background {{page.background}}">
+  <div class="grid-container usa-hero__bg display-flex flex-column flex-align-center">
+    <h1 class="usa-hero__title text-center">{{ page.hero.text}}</h1>
+    <div class="usa-hero__subtitle text-center">
+      {{ page.hero.subtext | markdownify }}
+    </div>
+  </div>
 {% else %}
 <section class="interior-hero bg-base-darkest usa-dark-background {{page.background}}">
   <div class="grid-container usa-hero__bg display-flex flex-column flex-align-center">

_includes/how-it-works-details.html

@@ -0,0 +1,85 @@
+{% assign data = include.data %}
+<section class="bg-base-lighter how-it-works-details-bg">
+  <div class=" how-it-works-details ">
+    <div class="grid-container padding-x-0">
+    <ol class="padding-y-2 margin-0 padding-x-0">
+      <li class="bg-white padding-2 tablet:padding-3
+      desktop:padding-y-4 desktop:padding-x-5 margin-bottom-3 desktop:margin-bottom-7 text-bold">
+        Identify Challenges
+        <p class="text-normal">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 class="bg-white padding-2 tablet:padding-3
+      desktop:padding-y-4 desktop:padding-x-5 margin-bottom-3 desktop:margin-bottom-7 text-bold">
+        Team Up
+        <p class="text-normal">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 class="bg-white padding-2 tablet:padding-3
+      desktop:padding-y-4 desktop:padding-x-5 margin-bottom-3 desktop:margin-bottom-7 text-bold">
+        Build
+        <div>
+          <p class="margin-bottom-0 overflow-hidden text-normal">
+            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" data-allow-multiple>
+                <h4 class="usa-accordion__heading">
+                  <button type="button" class="usa-accordion__button light bg-base-darkest text-white" aria-expanded="true"
+                    aria-controls="m-a1">
+                    Sprint Milestones
+                  </button>
+                </h4>
+
+                <div id="m-a1" class="usa-accordion__content usa-prose padding-x-0">
+                  <ol class="padding-x-0">
+                    <li class="text-bold margin-bottom-2 maxw-full">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 maxw-full">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 maxw-full">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 maxw-full">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 maxw-full">Beta Demo:
+                      <p class="text-normal display-inline">Teams present a prototype of their product for feedback.</p>
+                    </li>
+                    <li class="text-bold  maxw-full">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 class="bg-white padding-2 tablet:padding-3
+      desktop:padding-y-4 desktop:padding-x-5 margin-bottom-3 desktop:margin-bottom-7 text-bold">
+        Launch
+        <p class="text-normal">Products are launched and federal agencies can decide how they want to showcase the results of their sprint.</p>
+      </li>
+      <li class="bg-white padding-2 tablet:padding-3
+      desktop:padding-y-4 desktop:padding-x-5 margin-bottom-3 text-bold">
+        Reach End Users
+        <p class="text-normal">After the sprint, participants have the option to stay in touch and continue product development and deployment.</p>
+      </li>
+    </ol>
+
+    <div class="display-flex flex-justify-center">
+      <a href="https://opportunity.census.gov/topx-toolkit/" target="_blank"
+        class="usa-button text-ink margin-top-2 tablet:padding-y-2 padding-x-3 usa-button--outline  .outline-1px.outline-black  tablet:margin-top-4 site-button bg-white">
+        Facilitate a TOP sprint at your agency on your timeline with the TOPx Toolkit.
+      </a>
+    </div>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,75 @@
+{% assign data = include.data %}
+
+
+
+{% for data in data %}
+<div class="grid-container  padding-0 {% if data.custom.class %}{{ data.custom.class | slugify }}{% endif %}">
+  {% if data.text.title %}
+  <h2 class="margin-y-0 {% if data.text.title %}{{ data.text.title | slugify }}{% endif %} text-white">{{ data.text.title }}
+  </h2>
+  {% endif %}
+
+  <div class="text-wrapper padding-205 tablet:padding-3 {%if data.role %} margin-bottom-3 desktop:margin-bottom-7 {% endif %} tablet:margin-top-205 desktop:padding-y-5 desktop:padding-x-5 bg-white">
+    {% if data.text.subtitle %}
+
+    <h3 class="margin-0 margin-bottom-2">{{data.text.subtitle}}</h3>
+
+    {% endif %}
+
+    {% if data.role.title %}
+
+    <h3 class="margin-0">{{data.role.title}}</h3>
+
+    {% endif %}
+
+    {% if data.text.blurb %}
+    <p class="margin-y-0 overflow-hidden">
+      {{ data.text.blurb | markdownify | remove: "<p>" | remove: "</p>" }}
+    </p>
+
+    {% endif %}
+
+    {% if data.role.blurb %}
+    <p class="margin-bottom-0 overflow-hidden">
+      {{ data.role.blurb | markdownify | remove: "<p>" | remove: "</p>" }}
+    </p>
+  {% endif%}
+
+  {% if data.download.href %}
+  <div class=" display-flex flex-align-center margin-top-105 desktop:margin-top-3 roles-downloads">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" aria-hidden="true"
+      class="width-2 desktop:width-3 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}} " class="">{{ data.download.text}}
+    </a>
+  </div>
+  {% endif %}
+
+  </div>
+
+
+
+
+
+  {% if data.cta %}
+  <h3>{{data.blurb.title}}</h3>
+  {% endif %}
+
+  {% if data.role-details %}
+  <div class="bg-white header-text-hot-dog padding-y-3 display-flex flex-justify-end">
+    <div class="radius-left-pill semi-cta bg-blue margin-left-4 padding-y-205">
+      <div class="grid-container padding-x-4">
+        <p>Interested in participating in a sprint?</p>
+        <a href="{{ site.baseurl }}/{{ site.annual_reports.2019 }}" target="_blank"
+          class="text-ink padding-y-1 margin-top-4">
+          Email the TOP team.
+        </a>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+</div>
+{% endfor %}