Feat: "What We Do" section (#217)

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/our-work.html

@@ -16,7 +16,47 @@
   <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" />
 
-  <!-- What We Do -->
+  <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" />

src/styles/base.css

@@ -7,6 +7,7 @@
     --brand-primary-green: #88B440;
     --brand-primary-black: #1C1C1C;
     --brand-primary-cyan: #51B1C7;
+    --brand-scale-gray-2: #BBBBBB;
     --brand-scale-gray-3: #878787;
     --brand-scale-gray-4: #545454;
     --brand-scale-green-1: #E7F0D9;
@@ -219,6 +220,26 @@ blockquote p {
 
 /*#endregion */
 
+/* Accordions */
+
+.accordion {
+    --bs-accordion-active-bg: var(--brand-scale-green-1);
+    --bs-accordion-border-color: var(--brand-scale-gray-2);
+    --bs-accordion-active-color: var(--text-black);
+
+    /* override the fill color */
+    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231c1c1c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
+}
+
+.accordion-button {
+    --bs-accordion-btn-focus-border-color: var(--brand-primary-green);
+    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(136, 180, 64, 1);
+}
+
+.accordion-item, .accordion-button {
+    border-radius: 0 !important;
+}
+
 /* Buttons */
 
 :root {
@@ -666,3 +687,11 @@ header {
     padding: 0.75rem;
     display: table-cell;
 }
+
+/* Our Work */
+
+.sign {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}