Feature/2024 intro section

[noahk004]

IMPORTANT
A change was made to the way the background image covers the screen. Previously, the background image was set to cover just the landing component, making it difficult to position other elements on the page. Now, the background image is set as a background cover for the entire page component.

If other features were branched from main without these changes, the positioning of the elements may be off. To fix, remove existing transformations on the element and add position: absolute;. Use top and/or left to position the element. This way, zooming in and out will not affect the position of the element with respect to the background.

Changes/additions:

• Created title, apply button, character icons, and introduction sections.
• Responsive design at breakpoints 1200 (lg), 768 (md), 480 (sm).
• Reconfigured background to cover parent element rather than just the landing section.

Future considerations:

• It would be helpful for the palm tree to be a part of the background rather than it being a standalone element.
• Combined SVG of anteater character in the water is needed.
• Animations to characters may be nice to add.

Screenshots of feature: