Homepage Sponsors Component

[Quashnock]

Overview

Create a component for the Sponsors section on the Homepage.

Here are a few short video tutorials for working with some of the technologies in our stack if you are unfamiliar:

• React Components
• React JSX
• React Props
• SCSS basics (We mainly use nesting and variables)

If you have any questions of need any help, contact Aaron or schedule a meeting!

Requirements

• The component should be a React functional component with a setup similar to those inside the src/components directory. You can use the JS and SCSS inside the ExampleComponent folder as boilerplate code for the component. You just need to replace "example" with the name of the component.
• We have decided that the horizontal padding for all components across the site should be 3rem, so that we can keep the margins the same. Please implement this for this component.
• For mobile devices, the layout of the components should remain largely the same for this component. However, if you need to change the scaling of the text or some other style change specific to mobile devices, we have set the mobile breakpoint for components at 768px. When you have to make changes that should only effect the mobile version of the component, set it so that they only apply when the screen width is less than 768px.
• For ultrawide devices, the background of the component should extend to the edges of the screen. However, the content of the component should have a maximum width of 1440px and be centered. This is done so that content is not stretched to fit the full width. The component MaxWidthContainer that you can find and import from inside the components folder has already had these rules implemented, and you can use it to help you accomplish this requirement.
• The Sponsor Us button should use the Button component also found inside the components folder to route to the Get Involved page. This is a resuable component that Abby and Charlotte made to simplify the implementation of buttons across the site. To use it, you should first import it from its folder in components. Then pass it a value of true for the isSubpageLink attribute, a value of '/get-involved' to the link attribute, and a value of 'Sponsor Us' to the text attribute. This should render a button with the 'Sponsor Us' text that uses a subpage link to route to the Get Involved page. You can reference the Button component itself, its uses in other pages, or message Abby and Charlotte if you need help with this.

Design Reference

Figma(Message Aaron if you need access)

Desktop

Mobile