Give user Personalized Live Calculation Walkthrough

[thadk]

Take the Benefit Formula page and/or Figma.

Replace images in the React slideshow slides with the values something like a live bar chart from the user's state instead of boilerplate values, according to the user's situation. The pin's in the Slack have some whiteboards which explain the calculations in a different way, if the values get confusing.

There is already a slide-show functionality implemented using react-slick as of #171. Focus on:

• formatting tables
• formatting text (there are currently png files),
• adding the bars,
• and other user variables into it on that page.
• Please remember to maintain the mobile responsive view (just resize your window to a small width to see it).

@stvnwn had begun work on this at:
https://github.com/stvnwn/windfall-elimination/tree/revamp-benefit-formula-page. #64 (comment) has a demo of it working to the extent that it is in that old branch. He used the framer-motion library but you don't necessarily need to.

It might be helpful to reference the original Benefit Formula Google Slides deck as well.

There are some minor edits to the Benefit Formula page in #80. Some may or may not be already done.

• There are also some potential good UX ideas there too like allowing people to correct their birthdate or retirement slider as part of the slides.

[thadk]

Animation of the barcharts using a library called framer-motion: https://github.com/codeforboston/windfall-elimination/pull/64/files
Partial implementation: https://deploy-preview-64--windfall-awareness.netlify.com/screen-3/

It isn't finished, feel free to do it another way as well.

[thadk]

A paginated carousel has been added: #171
Now adding adding tables, real values, and animation are the main needed pieces.

[thadk]

Closed by #223