Homepage Hero Component

[Quashnock]

Overview

Create a component for the hero section that is used on the homepage.

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

Objectives

• The component should be a React functional component with a setup similar to the other components in the /src/components folder. There is an ExampleComponent folder with an example layout for the JS and SCSS files for your reference; Just 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 all of the margins the same. Implement this for the Hero component too.
• For mobile devices, you may want to slightly change the stylings of the component to have the TRICKFIRE ROBOTICS title be two lines and have the watermelon dragon appear behing the TRICKFIRE instead, similar to the Figma design reference below. The breakpoint threshold for mobile devices we have decided is 768px.
• For ultrawide screens, you should limit the width of the content, but NOT the background, to 1440px and have it centered. This is done to avoid stretching the content. The component MaxWidthContainer also found in the /src/components is a wrapper component that already has stylings that center and limit the width of the content inside, and so you can use it to help accomplish this objective.
• (Optional) Abby and Charlotte are currently making a reusable button component in their branch for the TextImage component. Depending on when I can get it merged (I'll edit this issue if I do!), then you can use it for the Get Involved button.

Design Reference

Figma (Message Aaron if you need access)

Desktop

Mobile