Feat: "What We've Done" section - first two cards

src/_data/featured_work.yml

@@ -0,0 +1,16 @@
+- 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

src/our-work.html

@@ -79,7 +79,43 @@ <h2 class="accordion-header" id="our-services-{{ service.id }}">
 </section>
 
 <section class="bg-w-100">
-  <!-- What We've Done -->
+  <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-md-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">
+            <div class="card-body p-4 m-2 pb-5 mb-3 px-lg-5 mx-lg-3 pt-lg-5 mt-lg-5 pb-lg-4 mb-lg-6">
+              {% 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>
+
+              <h4 class="pill fs-8 p-0 mb-3 mb-lg-2 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">

src/styles/base.css

@@ -343,6 +343,12 @@ blockquote p {
     padding: 0.25rem 0.5rem;
 }
 
+.pill-tag {
+    font-weight: 800;
+    color: var(--brand-primary-black);
+    background-color: var(--button-primary-default);
+}
+
 /* Header */
 
 header {
@@ -454,10 +460,15 @@ header {
     margin: 0;
 }
 
+
 @media screen and (min-width: 992px) {
     .w-md-50 {
         width: 50% !important;
     }
+
+    .mb-lg-6 {
+        margin-bottom: calc(96rem / 16) !important;
+    }
 }
 
 /* About */