Feat: add /our-work page

src/_data/featured_work.yml

@@ -0,0 +1,34 @@
+- title: Customer Success Strategy
+  description: |
+    Implemented a new Customer Success program, including setting up a Customer Relationship Management (CRM) platform and assigning Account Managers to work with California Transit Agencies.
+  outcome: |
+    Launched a tiered system to provide 189 California transit agencies with a Customer Success Account Manager after successfully demoing a cohort program. CRM activity increased by 62% in 2023.
+  tags:
+    - Project management
+    - Program development
+
+- title: Operational Data Standard (ODS)
+  description: |
+    Convened the Operational Data Standards (ODS) working group to draft ODS v1, an open standard for describing scheduled transit operations by building on GTFS to include personnel and non-revenue service data.
+  outcome: |
+    Five vendors are capable of reading or writing ODS feeds in their software offerings. This standard is available to transit agencies to improve their scheduled transit operations. ODS v2 is in development.
+  tags:
+    - Data standards development
+
+- title: Data + Donuts
+  image: /assets/our_work/datadonuts.png
+  image_alt_text: An image of a logo containing a donut, where the top half displays a pie chart, and the words “Data plus sign Donuts.”
+  description: In collaboration with government partners, Compiler produced and managed monthly community events, Data + Donuts since 2017—past speakers; LA Metro, California Department of Technology (CDT), SCAG and Caltrans.
+  outcome: Successfully relaunched Data + Donuts in person after the pandemic in June 2023. We have been hosting events ever since and livestreaming them for a larger audience for those who don’t want to attend in person.
+  tags:
+    - Project Management
+
+- title: Benefits
+  image: /assets/our_work/benefits.png
+  image_alt_text: An image showing the home screen of a website called Cal-ITP Benefits, where a hand is holding a credit card using a contactless payment reader.
+  description: Developed Cal-ITP Benefits, a digital tool letting transit riders verify eligibility for a reduced fare and link the discount to their bank card so they automatically get their discount when tapping-to-pay.
+  outcome: Benefits launched at MST (Monterey Salinas Transit, CA) and two additional agencies in 2023. Currently supports Senior and Veteran discounts. Future discounts include ADA and low-income.
+  tags:
+    - Project Management
+    - Human-centered Design
+    - Software Development

src/_data/services.yml

@@ -0,0 +1,19 @@
+- name: Software development
+  id: software-development
+  description: Agile web application development and support with data publishing needs and tools for data analysts.
+
+- name: Human-centered design
+  id: human-centered-design
+  description: User-centered design that incorporates accessibility requirements and multiple language support.
+
+- name: Data Standards development
+  id: data-standards-development
+  description: Collaborate with agencies and stakeholders to create equity and transparency through developing standards.
+
+- name: Project management
+  id: project-management
+  description: Ensure timely and efficient delivery of project goals and objectives.
+
+- name: Program development
+  id: program-development
+  description: Build teams and services from the ground up within the government.

src/_includes/nav.html

@@ -1,40 +1,57 @@
 <nav class="navbar navbar-dark">
-    <a class="d-inline-block" href="/"><img width="88" height="46" src="/assets/compiler_logo_stacked.svg" alt="Compiler logo"></a>
-    <button class="navbar-toggler p-0 border-0 rounded-0" type="button" data-bs-toggle="modal" data-bs-target="#navbarToggler"
-        aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="modal fade" tabindex="-1" id="navbarToggler" aria-label="menu">
-        <div class="modal-dialog modal-fullscreen">
-            <div class="modal-content">
-                <div class="modal-header border-0 d-flex justify-content-end">
-                    <button type="button" class="btn-close p-0 m-0 rounded-0 border-0 opacity-100" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <div class="d-flex align-items-center h-100 offset-lg-2 col-lg-10">
-                        <ul class="list-unstyled">
-                            <li>
-                                <a class="h2 text-white d-inline-block mb-4 pb-2 pb-lg-0" href="/">Home</a>
-                            </li>
-                            <li>
-                                <a class="h2 text-white d-inline-block mb-4 pb-2 pb-lg-0" href="/about">About</a>
-                            </li>
-                            <li>
-                                <a class="h2 text-white d-inline-block mb-4 pb-2 pb-lg-0" href="/jobs">Jobs</a>
-                            </li>
-                            <li>
-                                <a class="h2 text-white d-inline-block mb-4 pb-2 pb-lg-0" href="/blog">Blog</a>
-                            </li>
-                            <li>
-                                <a class="h2 text-white d-inline-block" target="_blank" href="/capabilities">Capabilities Statement</a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="modal-footer border-0 p-0">
-                    <div class="nav-footer-pattern"></div>
-                </div>
-            </div>
+  <a class="d-inline-block" href="/"
+    ><img width="88" height="46" src="/assets/compiler_logo_stacked.svg" alt="Compiler logo"
+  /></a>
+  <button
+    class="navbar-toggler p-0 border-0 rounded-0"
+    type="button"
+    data-bs-toggle="modal"
+    data-bs-target="#navbarToggler"
+    aria-controls="navbarToggler"
+    aria-expanded="false"
+    aria-label="Toggle navigation"
+  >
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="modal fade" tabindex="-1" id="navbarToggler" aria-label="menu">
+    <div class="modal-dialog modal-fullscreen">
+      <div class="modal-content">
+        <div class="modal-header border-0 d-flex justify-content-end">
+          <button
+            type="button"
+            class="btn-close p-0 m-0 rounded-0 border-0 opacity-100"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
         </div>
+        <div class="modal-body">
+          <div class="d-flex align-items-center h-100 offset-lg-2 col-lg-10">
+            <ul class="list-unstyled">
+              <li>
+                <a class="h2 text-white d-inline-block mb-4 pb-2 pb-lg-0" href="/">Home</a>
+              </li>
+              <li>
+                <a class="h2 text-white d-inline-block mb-4 pb-2 pb-lg-0" href="/about">About</a>
+              </li>
+              <li>
+                <a class="h2 text-white d-inline-block mb-4 pb-2 pb-lg-0" href="/our-work">Our Work</a>
+              </li>
+              <li>
+                <a class="h2 text-white d-inline-block mb-4 pb-2 pb-lg-0" href="/jobs">Jobs</a>
+              </li>
+              <li>
+                <a class="h2 text-white d-inline-block mb-4 pb-2 pb-lg-0" href="/blog">Blog</a>
+              </li>
+              <li>
+                <a class="h2 text-white d-inline-block" target="_blank" href="/capabilities">Capabilities Statement</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="modal-footer border-0 p-0">
+          <div class="nav-footer-pattern"></div>
+        </div>
+      </div>
     </div>
+  </div>
 </nav>

src/_includes/ready-to-work.html

@@ -0,0 +1,10 @@
+<div class="container my-5 py-5">
+  <div class="offset-lg-2 col-lg-8 text-center">
+    {% assign h3-text = "Ready to work together?" %} {% if include.h3-class %}
+    <h3 class="{{include.h3-class}}">{{h3-text}}</h3>
+    {% else %}
+    <h3>{{h3-text}}</h3>
+    {% endif %}
+    <a class="btn btn-primary text-center d-inline-block mt-2" target="_blank" href="mailto:[email protected]">Contact us</a>
+  </div>
+</div>

src/about.html

@@ -142,11 +142,6 @@ <h3 class="h4 pt-3 mb-1 d-inline-block text-white">{{ member.name }}</h3>
 
 <section class="bg-w-100 bg-white">
     <div class="row">
-        <div class="container my-5 py-5">
-            <div class="offset-lg-2 col-lg-8 text-center">
-                <h3 class="text-dark">Ready to work together?</h3>
-                <a class="btn btn-primary text-center d-inline-block mt-2" target="_blank" href="mailto:[email protected]">Contact us</a>
-            </div>
-        </div>
+        {% include ready-to-work.html h3-class="text-dark" %}
     </div>
 </section>

src/our-work.html

@@ -0,0 +1,177 @@
+---
+layout: default
+title: Our Work
+---
+
+<section class="row position-relative">
+  <div class="container">
+    <div class="offset-lg-1 col-lg-7 py-5 my-5 py-md-0 my-md-0">
+      <span class="pill">Our Work</span>
+      <h1 class="mt-4 mb-3">Building solutions that empower government services</h1>
+      <p class="mb-4 text-white">
+        We are committed to building open-source, accessible solutions to elevate government workers through teaching and training
+        to ensure their success.
+      </p>
+      <a class="btn btn-primary me-lg-3 mb-3 mb-lg-0" href="mailto:[email protected]">Contact us</a>
+      <a class="btn btn-outline-primary" target="_blank" href="/capabilities">Capabilities statement</a>
+    </div>
+  </div>
+</section>
+
+<section class="bg-w-100 position-relative bg-white">
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+
+  <div class="container my-5 py-md-5 py-4">
+    <div class="offset-lg-1 col-lg-10 mb-md-4">
+      <span class="text-dark pill border-0 ps-0 pb-md-5 mb-md-3 pb-4 mb-3 d-inline-block">What we do</span>
+      <h2 class="text-dark mb-4">Our services</h2>
+
+      <div class="row pb-5 mb-5">
+        <div class="accordion" id="our-services-accordion">
+          {% for service in site.data.services %}
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="our-services-{{ service.id }}">
+              <button
+                class="accordion-button fw-boldest collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#collapse-{{ service.id  }}"
+                aria-expanded="false"
+                aria-controls="collapse-{{ service.id }}"
+              >
+                {{ service.name }}
+              </button>
+            </h2>
+            <div
+              id="collapse-{{ service.id }}"
+              class="accordion-collapse collapse"
+              aria-labelledby="our-services-{{ service.id }}"
+              data-bs-parent="#our-services-accordion"
+            >
+              <div class="accordion-body">{{ service.description }}</div>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="position-relative">
+    <span class="sign">
+      <img alt="" src="/assets/illustrations/sign.svg" />
+    </span>
+  </div>
+
+  <hr class="border border-100 border-black border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-black border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-black border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-black border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-black border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-black border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-black border-half opacity-100 mb-1" />
+</section>
+
+<section class="bg-w-100">
+  <div class="container my-5 py-md-5 py-4">
+    <div class="offset-lg-1 col-lg-7">
+      <span class="pill border-0 ps-0 pb-md-5 mb-md-3 pb-4 mb-3 d-inline-block">What we've done</span>
+      <h2 class="mb-4">Featured work</h2>
+      <p class="pb-5 mb-0 pb-lg-2 mb-lg-5">
+        Explore our list of projects ranging from local, regional, and state governments. We curate a variety of technology and
+        delivery solutions for our clients and have lasting successful outcomes.
+      </p>
+    </div>
+
+    <div class="offset-lg-1 col-lg-10 mb-md-4">
+      <div class="row row-cols-1 row-cols-lg-2 g-4">
+        {% for featured_work in site.data.featured_work limit: 2 %}
+        <div class="col">
+          <div class="card h-100 text-dark border-0">
+            <div class="card-body px-lg-5 mx-lg-3 py-lg-5 my-lg-5 pt-3 mt-3 pb-5 pb-3 px-4 px-2">
+              <div class="min-h-70">
+                {% if featured_work.tags %}
+                <div class="row row-cols-1 row-cols-lg-auto g-2 g-lg-1">
+                  {% for tag in featured_work.tags %}
+                  <div class="col">
+                    <span class="pill pill-tag" aria-hidden="true">{{ tag }}</span>
+                  </div>
+                  {% endfor %}
+                </div>
+                {% endif %}
+                <h3 class="card-title fw-boldest pb-4 mb-0 pb-lg-2 mb-lg-5 pt-2 pt-lg-0 mt-4">{{ featured_work.title }}</h3>
+                <p class="card-text pb-2 mb-5">{{ featured_work.description }}</p>
+              </div>
+
+              <div>
+                <h4 class="pill fs-8 text-dark fw-boldest ps-0">Outcome</h4>
+                <p class="card-text">{{ featured_work.outcome }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+
+      <div class="row row-cols-1 g-4 mt-0">
+        {% for featured_work in site.data.featured_work limit: 2 offset: 2 %}
+        <div class="col">
+          <div class="card h-100 text-dark border-0">
+            <img src="{{ featured_work.image }}" class="card-img-top" alt="{{ featured_work.image_alt_text }}" />
+            <div class="card-body px-4 mx-2 p-lg-5 m-lg-2 mb-5 mb-lg-4">
+              {% if featured_work.tags %}
+              <div class="row row-cols-1 row-cols-lg-auto g-2 g-lg-1">
+                {% for tag in featured_work.tags %}
+                <div class="col">
+                  <span class="pill pill-tag" aria-hidden="true">{{ tag }}</span>
+                </div>
+                {% endfor %}
+              </div>
+              {% endif %}
+              <h3 class="card-title fw-boldest pt-5 mt-3 mb-4 mt-lg-2">{{ featured_work.title }}</h3>
+              <p class="card-text pb-2 mb-4 pb-lg-0">{{ featured_work.description }}</p>
+
+              <h4 class="pill fs-8 p-0 mb-3 text-dark fw-boldest">Outcome</h4>
+              <p class="card-text">{{ featured_work.outcome }}</p>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="bg-w-100 bg-brand-scale-green-1">
+  <div class="row">
+    <div class="container my-5 py-5">
+      <div class="offset-lg-2 col-lg-8 mt-md-4 text-center">
+        <span class="text-dark pill border-0 d-inline-block px-0 pb-4 mb-3">Testimonials</span>
+      </div>
+      <div class="offset-lg-2 col-lg-8 mb-md-4 text-center">
+        <h2 class="text-dark">
+          Compiler is collaborative and adaptable. Their proficiency in their field was critical to establishing an efficient
+          workflow for analysts. Throughout their work, they care about the end-user experience.
+        </h2>
+        <h3 class="fs-6 fw-normal sans-serif text-dark d-block mt-3">
+          —JungA Uhm, Principal Modeler, Southern California Association of Governments
+        </h3>
+      </div>
+    </div>
+  </div>
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+  <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
+</section>
+
+<section class="row">{% include ready-to-work.html %}</section>