Feature: make hero section prototype

[teoh4770]

Issue: #104
Branch: feature/104/make-hero-section-prototype

What is this pr do?

Setup hero section with the amazing background ✨

Concerns?

1. I have turn background svg into react component for animation purposes, but I'm not sure if this is normally done like this (we could apply animation class on svg component directly in this way).
2. Spacing issue, need a consistent spacing (padding around the section) across the page, not just individual one.

Things to implement in the future

1. Animation on the little things 🚀 Any animation library suggestion?

[juancwu]

Can you resolves the conflicts?

[teoh4770]

let me try

[teoh4770]

@juancwu merge conflict is gone

[GabeDiniz]

It looks like the Navbar is cutting off the top of the SVG

Not sure about this one but: in mobile view, the title/date looks odd. Might be easier to keep the date on the SVG (although it could appear too small there).

[teoh4770]

We can discuss it at tomorrow meeting @GabeDiniz

[juancwu]

@teoh4770 Here are the updates for the hero section. Can you add the new things in this PR as well?

Basically, is a subtitle and everything has been moved up a little closer to the Navbar.

Feel free to take a look in Figma.

[teoh4770]

I think it is ok now, can you check?

[teoh4770]

Besides the font size is bad imo, the layout is ok for now.

[juancwu]

Minor thing we need to fix later is to keep the font sizes as close as possible to the figma design. The HawkHacks title and the subtitle now don't have big enough of a difference that makes it look weird.