Nonprofit landing - header

[Deleted user]

Test on localhost:3000/projects/details

Action items

• Create a header component inside of /projects/details. Pass the name, briefDescription, and mockupThumbnail as props (check projectDummyData.js for the format of these!)
• Make sure image wraps below content at whatever breakpoint looks best. Say, 700px
• Make sure the content of the header (text and image combined) never exceed a width of 1600px. This makes sure the image and text aren't too far apart on wide monitors. This requires having a div inside of a div, where the inner div has max-width: 1400px; margin: auto, and the outer div has width: 100%.

Note: We already do this logic everywhere on the site, where every section has max-width: var(--content-max-width). However, this header should be a little bit wider than the content below for max aesthetic. See /about/roles for another example of this!

Design notes

Desktop font sizes: 64px for header, 20px for description
Mobile font sizes: 48px for header, 16px for description (the default font size)

Desktop

Mobile