feat: add hero component

[selina-kim]

No description provided.

[netlify]

✅ Deploy Preview for deltahacks11 ready!

Name	Link
🔨 Latest commit	a22630d
🔍 Latest deploy log	https://app.netlify.com/sites/deltahacks11/deploys/66ff6d4175dc4a000803e471
😎 Deploy Preview	https://deploy-preview-13--deltahacks11.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Krish120003]

The fire animation gif is highly resource intensive and causes lag.

[Krish120003]

The MLH Logo is too bold.

[Krish120003]

The header font does not match Figma

[Krish120003]

There's a lot of performance work that we could do, and we should avoid using px values as definitions and stick to em's for sizing. However, this is a functional hero and looks good for the initial release due to short deadlines.

[demanr]

Seems legit, small cleaning to do but functionality complete

[kabirsg]

sometimes on medium sized (ipads - pic is from iPad mini) screens the white text gets in front of the light purple mountains making it a little hard to read. If we are ok with this then can ignore but just wanted to bring it up.

[Krish120003]

sometimes on medium sized (ipads - pic is from iPad mini) screens the white text gets in front of the light purple mountains making it a little hard to read. If we are ok with this then can ignore but just wanted to bring it up.

@Shivermist is this ok? How should this be handeled?

[Shivermist]

sometimes on medium sized (ipads - pic is from iPad mini) screens the white text gets in front of the light purple mountains making it a little hard to read. If we are ok with this then can ignore but just wanted to bring it up.

@Shivermist is this ok? How should this be handeled?

Could the text be resized to be as much over the mountains as possible (excluding the apply button cause the contrast is high enough)? Worst case I could extend the sky for medium screens so we don't have to worry about text resizing.

[Krish120003]

sometimes on medium sized (ipads - pic is from iPad mini) screens the white text gets in front of the light purple mountains making it a little hard to read. If we are ok with this then can ignore but just wanted to bring it up.

@Shivermist is this ok? How should this be handeled?

Could the text be resized to be as much over the mountains as possible (excluding the apply button cause the contrast is high enough)? Worst case I could extend the sky for medium screens so we don't have to worry about text resizing.

Do you think this should be a seperate issue or it must be fixed in this PR

[kabirsg]

Also just double checking @Shivermist is it ok for on xs screens the 'XI' to be on a separate line. I would think so but would just like to double check

[Shivermist]

sometimes on medium sized (ipads - pic is from iPad mini) screens the white text gets in front of the light purple mountains making it a little hard to read. If we are ok with this then can ignore but just wanted to bring it up.

@Shivermist is this ok? How should this be handeled?

Could the text be resized to be as much over the mountains as possible (excluding the apply button cause the contrast is high enough)? Worst case I could extend the sky for medium screens so we don't have to worry about text resizing.

Do you think this should be a seperate issue or it must be fixed in this PR

For readability sake I think it should be fixed in this PR.
@selina-kim would you be able to adjust/resize the text to stay above the mountains as much as possible? If it's giving you too many issues, ping me and I'll send an extended version of the sky so overlapping is completely avoided (if that's a better solution).

[Shivermist]

Also just double checking @Shivermist is it ok for on xs screens the 'XI' to be on a separate line. I would think so but would just like to double check

Yeah it should be ok!

[kabirsg]

Also just double checking @Shivermist is it ok for on xs screens the 'XI' to be on a separate line. I would think so but would just like to double check

Yeah it should be ok!

cool ty

[kabirsg]

Also kinda nitpicky but can this star get moved? This was just on my laptop btw. It doesn't seem to occur on other devices when I look at it though so not sure how fixable it is going to be.

[selina-kim]

Also kinda nitpicky but can this star get moved? This was just on my laptop btw. It doesn't seem to occur on other devices when I look at it though so not sure how fixable it is going to be.

addressed it by adding more y-padding for 1280 > screens. is this okay?
there still might be instances of the star overlapping with text on other bigger screen sizes but for now there should be no issue for laptop screen size

[kabirsg]

Also kinda nitpicky but can this star get moved? This was just on my laptop btw. It doesn't seem to occur on other devices when I look at it though so not sure how fixable it is going to be.

addressed it by adding more y-padding for 1280 > screens. is this okay? there still might be instances of the star overlapping with text on other bigger screen sizes but for now there should be no issue for laptop screen size

looks great! Thanks Selina!

[kabirsg]

Looks great! Thanks for all the work guys!

There are a couple of changes that still need to be made

[kabirsg]

Idk how we missed this but the date is last year's right now.

[kabirsg]

Everything looks good to me!