For vendors: Header section

[machikoyasuda]

closes #495

What this PR does

• Adds new content section (consisting of an SVG with an Alt tag, a title, paragraphs and a button)
• This change uses ALL the same HTML/CSS as what the home page top section has.
• Does this PR change any CSS? No.

[netlify[bot]]

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

Name	Link
🔨 Latest commit	7ee9a99b72fcc3d44c90091e9f1f9989eecf263a
🔍 Latest deploy log	https://app.netlify.com/sites/cal-itp-mobility-marketplace/deploys/656e3f0e795fd00009e53e4a
😎 Deploy Preview	https://deploy-preview-504--cal-itp-mobility-marketplace.netlify.app/for-vendors
📱 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.

[machikoyasuda]

There are some spacing issues here (like between paragraphs, buttons, and container alignment details), but would like to leave it to this #490 issue for a full update.

Example: I COULD rewrite ALL paragraphs to have the same margin/padding-bottom, but I'd need confirmation from @segacy1 that this change is okay for ALL paragraphs across ALL the pages. Or I could write really hacky CSS that does this: The current style says that there should be .7rem under each paragraph, which totals 11.2px. Then I have to subtract: 24px-11.2px to come up with what remainder padding I should add in addition to the .7, to make this page look like what is on Figma. Messy. cc @thekaveman @angela-tran

[thekaveman]

but would like to leave it to this https://github.com/cal-itp/mobility-marketplace/issues/490 issue for a full update.

Agree! Let's worry about all that at once.

[machikoyasuda]

@thekaveman @angela-tran The code is ready to review. Otherwise, just awaiting a better alt image tag line.

Sidenote, more on the comment above - re: #490 - I tried briefly re-writing that HTML as regular Bootstrap container/row/column code, but the mobile implementation is more complex than that because of the way the mobile switches to a Header/Illustration/Text ordering. The styles on this project in general is really tricky to refactor, in part b/c the styles were so narrowly written to fit exactly what the first design had.

[segacy1]

@machikoyasuda the png is a bit blurry, could we try it as an SVG?

[segacy1]

@machikoyasuda for alt tag, how's this: A saleswoman behind a stand for "Better Products," framed by refresh and checkmark icon illustrations.

102 characters

[machikoyasuda]

With the inclusion of the alt tag for the illustration, this PR is now ready for review @thekaveman @angela-tran

[angela-tran]

@machikoyasuda What do you think about using the SVG that Segacy uploaded in https://github.com/cal-itp/mobility-marketplace/pull/504#issuecomment-1841131072? The PNG is blurry for me too

[machikoyasuda]

@angela-tran @segacy1

The SVG is much less blurry - way better than the PNG: