Feat: "What We've Done" - cards with images (#224)

src/_data/featured_work.yml

@@ -14,3 +14,21 @@
     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/our-work.html

@@ -93,7 +93,7 @@ <h2 class="mb-4">Featured work</h2>
       <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">
+          <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 %}
@@ -118,6 +118,32 @@ <h4 class="pill fs-8 text-dark fw-boldest ps-0">Outcome</h4>
         </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>