update Hero image file paths

[flacoman91]

Since DSR references DS documentation and directly points to the images used, we want to update the image at the source

See cfpb/design-system-react#597 (comment)

Additions

• Updated image from https://files.consumerfinance.gov/f/images/ConsumerMarketTrends-hero.original.png

Notes:

I noticed that for the flag background image in the Hero, it directly links to http://files.consumerfinance.gov/f/images/PC_hero.original.jpg

For consistency, we should do one of the following:

1. direct link the knockout hero image to the consumer market trends (files.consumerfinance.gov) to match the flag image
2. bring in that flag image into this repo and update the example images to point to the file on cfpb.github.io

I went ahead and brought the flag image into the repo, and also updated all of the paths for the example documentation to point to the relative paths instead of hardcoding it to cfpb.github.io. This matches the Jumbo and 50/50 hero examples in how they serve up the images

Renamed the images used to match the hero variant that uses it:

• design_system_knockout_hero_example.png
• design_system_photo_hero_example.png
• design_system_illustration_hero_example.png
• design_system_jumbo_hero_example.png
• design_system_50-50_hero_example.png

Screenshots

[natalia-fitzgerald]

@flacoman91
If possible it would probably be more stable to store the images within the CFPB Design System instead of linking to an image on cf.gov. That way if the hero image changes on cf.gov it doesn't affect the DS.

[flacoman91]

Renaming file paths may break any other sites that are pointing to the existing images.

[natalia-fitzgerald]

@flacoman91
Looks good!