Implement Hero Header Section

[orama254]

Depends on

• Logo Component Implement the Logo Component #84
• Button Component Implement the Button Component #85

What feature are you adding?

Hero Header Section

Describe your issue

Requirements

• Create a component named HeroHeader in the components folder that implements the screenshots below.
• It should make use of the existing Navbar component - feel free to adjust the Navbar component to match the requirements in this ticket.
• The menu items are anchor links which should smoothly scroll to the relevant section when clicked.
• The sections do not need to exist for this ticket, only ensure that the links are correct.
• Reuse the Logo and Button components.
• Obtain the hero image from the Figma design. Use THIS VIDEO as a guide
• Include the component in index.page.tsx.
• 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.

SCREENSHOT

Desktop

Mobile

Figma Design

Acceptance Criteria

• When the "About Us" menu is clicked, the URL changes to /#about-us.
• When the "Events" menu is clicked, the URL changes to /#events.
• When the "Contact" menu is clicked, the URL changes to /#contact-us.
• When the "Join Community" button is clicked, the page opens https://bit.ly/joinreactdevske in a new tab.
• When the "Join ReactDevsKE" button is clicked, the page opens https://bit.ly/joinreactdevske in a new tab.
• The implementation should match the design - text content, typography, capitalization and spacing.
• The UI should be responsive and work well on both desktop and mobile viewports.
• The hero-header.spec.ts test should pass on both Chrome, Firefox and Safari.

[devKiratu]

Hi @orama254 , please assign me this issue

[orama254]

Hey @devKiratu

Go ahead, remember to go through our contribution guidelines and also evaluate the acceptance criteria before submitting a pull request.

Happy hacking!!!