638 update the guides index page

[dluetger]

Pull request summary

Updates the design and content of the guides index page.

Reminder - please do the following before assigning reviewer

• Update readme
• For frontend changes, ensure design review
• For content changes beyond typos, add Ron Bronson as a reviewer

And make sure that automated checks are ok

• fix houndci feedback
• ensure tests pass
• federalist builds
• no new SNYK vulnerabilities are introdcued

[dluetger]

I added a few comments in the code throughout but here are a few notes and follow-up items for this ticket.

Overall

• Could use engineering eyes on this to make sure I did things mostly correctly from a best practices and "how we do it at 18F" perspective. It's my first time making front-end changes at this scale.

Implementation details

• This change creates a new partial and a new class, card-with-image-guides. I spun it off from the card-with-image partial to accommodate the unique needs of the guides index page. For now it was too much to change the existing class and make it all work, but if someone is feeling ambitious with their if/thens and for loops this could probably be elegantly combined back down into a single partial/class.
• Per the design, the whole card is no longer a clickable link.
• I did end up including only one link per card. The heading of each card is just a heading, not a link. That way we don't have two links going to the same place with different labels, which creates an accessibility issue. We should revisit this and maybe even make the whole card clickable again maybe
• There is an a11y alert where we skip from an h1 to h3s for the guide titles. This is how it was in the design, though in future we'll probably want to bump those back up to h2s and resize them to match the design visuals while remaining semantically correct

Follow-ups and things I didn't get to (I'll file another ticket for this)

• The icons in the design don't match what's in the current implementation, but for time's sake it didn't seem like a critical issue. The design contains one or two new glyphs, and the icons are blue instead of dark grey as they are in the previous design and this update
• Figure out the "should the entire card area be clickable?" and "can we have two links per card going to the same place?" questions mentioned above
• Make the h3 card titles be h2s so they are semantically correct
• I mentioned this in the main ticket for this issue, but the design has a big blue section at the bottom where more call to action content could live, but I didn't include it for now since there was no content for it. If we ever write that it should be fairly simple to add it in.

[neilmb]

Preview looks great. Some tiny comments on comments.

[juliaklindpaintner]

@dluetger Once you've had a chance to review the suggestions here, I think this can be merged!