ER: Donation components are not small enough to be reused across the site

[ExperimentsInHonesty]

Emergent Requirement - Problem

We have a couple of issues that deal with donation elements across the site and we need a coordinated set of issues for all the changes

Issue you discovered this emergent requirement in

• Create Donation Circle Component and Integrate with Donate Page  #4263
• Implement Redesigned Donate Page (mobile and desktop) #3983

Date discovered

2023-03-26

Did you have to do something temporarily

• YES I had to make a slide deck to sort it all out
• NO

Who was involved

@ExperimentsInHonesty @Thinking-Panda @roslynwythe

What happens if this is not addressed

No one knows what to do and the whole thing is stalled.

Resources

Donation 2023-03-26 slides

Recommended Action Items

• Make a new issue
• Discuss with team
• Let a Team Lead know

Potential solutions [draft]

• Make issues

Issue 1

Title:

Make donation elements into components that are resuable

### Overview
We need to make donation elements into components that are reusable so that we can replace the ones that are in use across the site

### Action Items
- [ ] Create or revise issues to make the following includes that could be used in either header or a page card on any page
  - [ ] Circles (issue needs revision https://github.com/hackforla/website/issues/4263)
     - The current image is https://github.com/hackforla/website/blob/gh-pages/assets/images/donate/donation-chart.svg
     - will be replaced with CSS/html that gets put into an include
     - Go to any page that currently uses it, and wherever the image is specified, change it out for the include.  Page should look exactly the same when done.
  - [ ] Donation GIF and Text (not title) (issue needs to be made)
     - is part of an include now.  Take the part minus the header and put it in its own include
       <details>
       <summary>see the part to put in the include</summary>

       ![image](https://user-images.githubusercontent.com/37763229/229888253-5662b326-d705-44bb-8a84-76d6a98ee2c5.png)
      </details>

     - Go to any page or code that currently uses it, and wherever the text and image are specified, change it out for the include.  Pages should look exactly the same when done.
  - [ ] How to Help us Do Impactful work
     - The current html should be moved to an include without the title
        <details>
        <summary>see the part to put in the include</summary>
  
        ![image](https://user-images.githubusercontent.com/37763229/229927209-26ca506f-ee9e-4924-bd9b-229ef1c83e14.png)
        </details>

     - Go to any page or code that currently uses it, and wherever the text is specified, change it out for the include.  Pages should look exactly the same when done.
</details>

- [ ] Review the slide deck, Bonnie made, that shows the changes needed to all the pages where donation elements exist
  - [ ] identify what other issues need to get made and list them.  Get signoff by dev lead and product
     - [ ] Create remaining issues from list

### Resources/Instructions
[Donation 2023-03-26 slides](https://docs.google.com/presentation/d/1sD5TAtCe7lQkxFMMbNAHU99Z9DZMhwR_vGV5xFC5-q4/edit) 

See preview of the issue in the comment below