[feature] create hero header section

[devKiratu]

Fixes Issue

Closes #77

Changes proposed

This PR fulfills the following requirements:

• [x] Create a component named HeroHeader in the components folder that implements the screenshots/design given.
• [x] It should make use of the existing Navbar component - feel free to adjust the Navbar component to match the requirements in this ticket.
• [x] The menu items are anchor links which should smoothly scroll to the relevant section when clicked.
• [x] Reuse the Logo and Button components.
• [x] Include the component in index.page.tsx.
• [x] Create a new test file in the e2e folder named hero-header.spec.ts and add a test that verifies that clicking each of the 5 links in the component navigates to the correct URLs.
• [x] When the "About Us" menu is clicked, the URL changes to /#about-us.
• [x] When the "Events" menu is clicked, the URL changes to /#events.
• [x] When the "Contact" menu is clicked, the URL changes to /#contact-us.
• [x] When the "Join Community" button is clicked, the page opens https://bit.ly/joinreactdevske in a new tab.
• [x] When the "Join ReactDevsKE" button is clicked, the page opens https://bit.ly/joinreactdevske in a new tab.
• [x] The implementation should match the design - text content, typography, capitalization and spacing.
• [x] The UI should be responsive and work well on both desktop and mobile viewports.
• [x] The hero-header.spec.ts test should pass on both Chrome, Firefox and Safari.

Check List (Check all the applicable boxes)

• [x] My code follows the code style of this project.
• [ ] My change requires changes to the documentation.
• [ ] I have updated the documentation accordingly.
• [x] All new and existing tests passed.
• [x] This PR does not contain plagiarized content.
• [x] The title of my pull request is a short description of the requested changes.

Screenshots

Hero Header on Large Screen

Hero Header on Mobile Screens

Passing Tests

Note to reviewers

• In the design the mobile version has a link to github while the desktop version doesn't. Is this the design or is it an omission?
• I made an adjustment on the DropdownMenu. The design places the close icon/button in almost the same line as the About us link. This, in my view, would precipitate a situation whereby a user accidentally clicks on the About us link with the intention of clicking the close button and vice-versa. Similarly, since the design does not explicitly show the interaction between the HeroHeader and the DropdownMenu I opted to move the close button to display where the menu icon shows and toggle them accordingly. I welcome your thoughts on this approach.
• I added a box shadow on the DropdownMenu to differentiate it from the rest of the page as they have the same background color.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
reactdevske-website	✅ Ready (Inspect)	Visit Preview	Oct 31, 2022 at 8:44AM (UTC)

[antosan]

• In the design the mobile version has a link to github while the desktop version doesn't. Is this the design or is it an omission?

I would say it is an inconsistency in the design. We should address it in another round of contributions. Thanks for pointing it out.

• I made an adjustment on the DropdownMenu. The design places the close icon/button in almost the same line as the About us link. This, in my view, would precipitate a situation whereby a user accidentally clicks on the About us link with the intention of clicking the close button and vice-versa. Similarly, since the design does not explicitly show the interaction between the HeroHeader and the DropdownMenu I opted to move the close button to display where the menu icon shows and toggle them accordingly. I welcome your thoughts on this approach.

Looking good. Thanks 👍

• I added a box shadow on the DropdownMenu to differentiate it from the rest of the page as they have the same background color.

👍