Refactor: hero section

[angela-tran]

Closes #100

[netlify]

✅ Deploy Preview for cal-itp-website ready!

Name	Link
🔨 Latest commit	e24ae67
🔍 Latest deploy log	https://app.netlify.com/sites/cal-itp-website/deploys/64650ba458023600070eaad4
😎 Deploy Preview	https://deploy-preview-121--cal-itp-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[machikoyasuda]

This is really nitpicky of me, but, just wanted to note here so we all know - these circles - or rather, oblong ovals, are not all the same sizes across the homepage.

The image in the app looked off to me, but actually, that's just the way the design is.

[thekaveman]

✅ Desktop looks good

I see a few changes needed for mobile:

• Spacing between the heading and paragraph should be 16px (currently 19px from the margin-bottom on h1)
• Spacing between the paragraph and hero image should be 24px (currently 16px from the margin-bottom on the paragraph)
• The bottom image changes for mobile to only be 3 dots with dashed line - maybe SVG is the way to go to handle screens of varying sizes?

[thekaveman]

Note: I realize the hero image "triforce" in Figma has zero whitespace at the top, but our image in the app has some padding around (in the actual image file). Maybe this is causing the difference in spacing. If it's easy to export a clean version from Figma that doesn't have whitespace around, try that? Otherwise maybe don't worry about that one.

[machikoyasuda]

Oops - I didn't test mobile 😰

Another approach to the "transit stop line image thing goes from long to short on mobile" would be to show/hide the images based on a certain window width. It would be much easier to do this with the Bootstrap utility classes https://getbootstrap.com/docs/5.2/utilities/display/

[machikoyasuda]

See above comment re: mobile/desktop image change

[machikoyasuda]

@segacy1 Please re-export the triforce image with a tight crop, so that there's no extra white space on the edges (aside from the shadows), and send us the file (on Slack or GitHub).

[segacy1]

Cropped up to the shadow:

[angela-tran]

@thekaveman @machikoyasuda I used Bootstrap's display utility classes to switch out the border image. I also used the new cropped "triforce" image that @segacy1 exported for us.

Based on what we talked about earlier, I am leaving spacing / margin / padding issues to be handled after we get our base grid fixed.

[thekaveman]

🚀