Refactor: update existing sections

[angela-tran]

Closes #467

Top section

• Update "Explore this site to find support..." copy
• Remove copy "Contracts update!"
• Remove copy "U.S. public transit providers, we have news for you..."
• Add View Contracts button in new style

Lower sections

• Remove map section
• Remove "Modernize your fare collection system" section
• Implement design for "What is Cal-ITP" section
• Implement design for "Get in touch" section

[netlify]

✅ Deploy Preview for cal-itp-mobility-marketplace ready!

Name	Link
🔨 Latest commit	aca607c
🔍 Latest deploy log	https://app.netlify.com/sites/cal-itp-mobility-marketplace/deploys/655b9c43e2575e0008435212
😎 Deploy Preview	https://deploy-preview-489--cal-itp-mobility-marketplace.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 configuration.

[angela-tran]

I finished implementing the items that are in scope for #467.

Something that needs clarification @segacy1 @thekaveman: the spacing on the current site and the spacing shown in Figma do not match. Is this an intentional design update that we should be implementing as a part of this homepage effort?

The current spacing is using some odd values, and I don't know where these came from; they must've been based on something though, right? They were added just a few months ago.

The spacing in Figma looks to me like it's based off the 8-pt system, so it seems more aligned with how we've said we want to do spacing.

This change should be its own ticket if it's confirmed that we're supposed to be implementing this.

[segacy1]

Hi @angela-tran! Yes, this does follow the 8-pt grid. Whenever I create new designs for mobimart or calitp.org, I automatically update with that design framework. I know we never discussed that explicitly for the homepage dev work though—I'll do a better job noting that when we're scoping in the future. If we can create a new ticket for updating the spacing in backlog that would be great

Also, I think you might be looking at my design sandbox. The design for implementation is here.

[angela-tran]

Thank you @segacy1 — that is all very very helpful context

Re:

If we can create a new ticket for updating the spacing in backlog that would be great

This sounds good to me

Also, I think you might be looking at my design sandbox. The design for implementation is here.

Oh yes, you're right that I was looking at a page under "DESIGN_____". I was looking there because it's linked from the description for #463 (comment). Thanks for pointing this out. I can reference the one you linked

[angela-tran]

In Figma, I see that the content for the lower sections ("What is Cal-ITP?" and "Get in touch") are more or less vertically
centered.

The current CSS that we use to lay out these sections are imaged-sections and don't result in vertical centered-ness.

I have ideas on how to do it with Bootstrap's grid, which is really using CSS Flexbox, but the imaged-section--X classes are using CSS grid, so I'm not sure how to tweak this. @machikoyasuda or @vlad do you have ideas?

[angela-tran]

Or another thought: is the current spacing good enough for now until we take #490?

[thekaveman]

Or another thought: is the current spacing good enough for now until we take #490?

Yeah I'm OK to wait to handle spacing all at once.

Though I wonder how hard it would be in this PR to align the hero image with the two section images (or make the hero image slightly smaller to match)? They are just a bit off:

[angela-tran]

Though I wonder how hard it would be in this PR to align the hero image with the two section images (or make the hero image slightly smaller to match)? They are just a bit off:

This was a good catch, and the change for it was pretty straightforward: b6f1677

That style rule was from a much older version of the design (#275), so I think it's fine to just remove it

[thekaveman]

Hmm @angela-tran I think we may have gone slightly the other way now? The two section images are larger (square) than the hero one now (same width, smaller height):

[machikoyasuda]

@angela-tran Haven't had a chance to really dig into this but:

• On Figma, all 3 images are the same height/width of 424 x 366

• BUT(!) the images are cropped WITH white-space, so that the image width matches the grid columns of 4 columns.

So one way to approach the image width/column horizontal spacing issue is to re-export the images with the white space, make sure the images are the same dimensions and stick it in the somewhat overeengineered CSS Grid situation that Mobi Mart already has.

[angela-tran]

@machikoyasuda I came to the same conclusion and re-exported the images from Figma. Glad we were thinking the same

[machikoyasuda]

Small thing, could be done in a future ticket - but it is just a one-line deletion:

These as now have an underline created by a border-bottom, making them extra thick and also further down lower.

But Figma has nice normal regular underlines now.

Which can be done by removing that border-bottom declaration:

It's extra-jarring because the super-thick border is touching the text from the line below, and getting really tight/messy to read.

[thekaveman]

@mrose914 can you please verify copy changes on the homepage (does not include the new sections, just edits to existing copy): https://deploy-preview-489--cal-itp-mobility-marketplace.netlify.app/

[thekaveman]

Code and visuals LGTM

[angela-tran]

Sorry, I just noticed there are some things in the mobile view that need to be fixed. - Fixed in 1645fc0

• Sizing of hero title
• Centering titles for lower sections

Current preview site	Figma

[angela-tran]

Small thing, could be done in a future ticket - but it is just a one-line deletion:
...
These as now have an underline created by a border-bottom, making them extra thick and also further down lower.

But Figma has nice normal regular underlines now.

Which can be done by removing that border-bottom declaration:
...
It's extra-jarring because the super-thick border is touching the text from the line below, and getting really tight/messy to read.

@machikoyasuda I went ahead and made this change in a1441ca

[thekaveman]

Nice catch on the mobile titles. Looks like we need one more small change on mobile for centering the images:

In the browser devtools I changed the following and it worked:

.imaged-section__image {
  justify-content: space-around;
}

This also looks OK on the normal view so maybe we just add this style in?

[angela-tran]

This also looks OK on the normal view so maybe we just add this style in?

@thekaveman Sounds good to me, thanks!

[thekaveman]

Nice work!