Add patcher use cases page

[infraredgirl]

Closes #546.

Link to preview: https://deploy-preview-583--keen-clarke-470db9.netlify.app/patcher/use-cases/

Open quesitons / still TODO:

• Is this ok as a completely separate page, or do we want to somehow incorporate it inside the patcher page?
• Need to make screenshots bigger/more visible
• How to format text as code, lists, etc, inside the body blocks?
• Write out the remaining 3 use cases

[netlify]

✔️ Deploy Preview for keen-clarke-470db9 ready!

🔨 Explore the source changes: dd41140

🔍 Inspect the deploy log: https://app.netlify.com/sites/keen-clarke-470db9/deploys/611a44f054c03b00073596ed

😎 Browse the preview: https://deploy-preview-583--keen-clarke-470db9.netlify.app

[brikis98]

Thanks for getting started on this Ana!

Some thoughts:

1. Having this on a separate page makes total sense. We should have something like "Use Cases" in the nav.
2. Only the initial landing page should use the big blue hero section at the top and the list of customers towards the bottom. All other pages use a simpler, dark hero text at the top. E.g., See https://www.gruntwork.io/hipaa-compliance-on-aws/why-gruntwork.

[brikis98]

NIT: instead of an image, for code, it's more legible to include an actual code snippet in <pre> and <code> tags. See here for an example.

[infraredgirl]

I'm struggling getting this to work, as currently the tabbed divs support either images only or code tabs only, but not a mix of the two. Since it's a 'NIT' I'll leave this as is for now.

[infraredgirl]

1. Having this on a separate page makes total sense. We should have something like "Use Cases" in the nav.
2. Only the initial landing page should use the big blue hero section at the top and the list of customers towards the bottom. All other pages use a simpler, dark hero text at the top. E.g., See https://www.gruntwork.io/hipaa-compliance-on-aws/why-gruntwork.

Done in e25424f.

[infraredgirl]

OK, I addressed everything but this NIT - this is ready for another round of reviews!

[robmorgan]

hey @infraredgirl, I reviewed your new standalone page. Overall I think the page reads very well from top to bottom, so good job! My minor feedback:

• That animated GIF for Use case 1 feels a bit slow and also not very fluid. I think because it scrolls at different speeds, I'm not sure how you can animate this better? Maybe using a tool where you paste an oversized image and it somehow pans it around using the same speed.
• Also I think using actual text for the tf-14-to-15.patch is a 'nice-to-have' and not a 'must-have'. The image seems good enough to ship for me.
• The boxes in the screenshot below probably need some margin/padding top and bottom so the text doesn't feel too cluttered. This is also a nice to have.

[brikis98]

Overall, page is shaping up very nicely!

[infraredgirl]

• That animated GIF for Use case 1 feels a bit slow and also not very fluid. I think because it scrolls at different speeds, I'm not sure how you can animate this better? Maybe using a tool where you paste an oversized image and it somehow pans it around using the same speed.

I re-recorded the gif. Not sure if it's any better now. If it's still not acceptable, then I'd ask for someone to help me out with this one.

• Also I think using actual text for the tf-14-to-15.patch is a 'nice-to-have' and not a 'must-have'. The image seems good enough to ship for me.

Got it, thanks!

• The boxes in the screenshot below probably need some margin/padding top and bottom so the text doesn't feel too cluttered. This is also a nice to have.

I think I'll leave this one for a follow up.

[infraredgirl]

This is ready for another round of reviews!

[brikis98]

This looks like a good enough point to merge and release. I think we can file bugs and fix the other issues (e.g., blurry image) after. Thanks Ana!

[infraredgirl]

Awesome, thanks all! I'll merge, release, and file bugs.