41 mobile frontend mainpage

[vkohli244]

Developers: Vinayak Kohli, Tyler Min Hset

Closes : 41

Pull Request Summary

Added Responsive styling for landing page, updated mobile view to have header image. Font sizing changed to be dynamic to avoid wrapping on smaller screens. Removed hero image container on mobile view. Changed the way input fields are displayed on mobile view.

Modifications

Header.module.css

• added media query breakpoint to check for mobile screens, added responsive styling based on that breakpoint

Header.tsx

• Changed logo in header.tsx file to be the transparent one. Slight issue is doesn't have shadow like in figma design, may have to redesign image for that

page.module.css

• Prizes and Why should I refer section styling
• hero image container removed for mobile view to prevent large empty space on smaller screens
• Dynamic font resizing for landing page text

ReferralForm.module.css

• changed input box layout

Testing Considerations

• Dynamic font resizing on different screens

Pull Request Checklist

• Code is neat, readable, and works
• Comments are appropriate
• The commit messages follows our guidelines
• The developer name is specified
• The summary is completed
• Assign reviewers

[IvanA673]

Great work!