Creating "What We Do"

[wwwwwlwwwww]

Description

Notes:

• This is contingent on Load Activity Data Model into Gatsby  #616 being done first.
• This uses the generic card template that was created with Create Generalized Card Template #547.

We would like to build out a section of the website that will explain what we do and will be titled "What We Do". This will have four separate pages each devoted to one of four categories of DA's work: Powering Aid Supply Chains, Connecting Communities, Empowering Humanitarians, and Responding to Crises. This issue concerns the creation of the Powering Aid Supply Chains page; we have content ready for this one, and coding this one up should make the other ones extremely easy to create once the content is written.

The activities (i.e. things we do) are found in content/blocks/activities. Activities have a field called "category". For this page, we want to include only the activities for which the category field = "Powering Aid Supply Chains". There are three of them:

• content/blocks/activities/in-kind-donations.md
• content/blocks/activities/hubs-regular-routes.md
• content/blocks/activities/ad-hoc-shipping.md

Right now, all four of the What We Do pages will have three activities on them. Eventually, the numbers might not work out so cleanly.

For now, we want to present each activity as a card. The parameters of the generalized card template match up with the fields from each activity as such:

• Title = title
• Photo = headerPhoto.headerPhotoFields.asset
  • headerPhoto.headerPhotoFields.altText has alt text for the image for the purposes of accessibility; I'm not sure about best practices for how to include this, but it should be included to make sure our site is accessible.
• Subtitle = desc
• Body Text = a few consecutive fields
  • "The Problem It Solves" (header) + challenge
  • "How It Works" (header) + explanation
  • "The Benefits" (header) + benefits

I'm not sure if, given the data, it'll make more sense for the cards to appear three across on the screen (with each one's width being 1/3 of the page) or three down (with each one's width covering the whole page). @jtfairbank Not sure if you have thoughts on this.

Front end feature screenshots

This is the data in our CMS for one of the activities:

Code of Conduct

• I agree to follow this project's Code of Conduct