chore: convert header/nav section to react

Objectives

Convert the existing vanilla HTML/CSS header and navigation section into React components.
Ensure the converted React components maintain the same visual appearance and functionality as the original HTML/CSS version.
Implement proper React practices, including component structure and state management if necessary.

[ ] #3
[ ] Implement the mobile navigation toggle functionality using React state.
[ ] Ensure the header is responsive and matches the original design across all screen sizes.

[ ] Create a Navigation component that includes all navigation menu items.
[ ] Implement active state for the current menu item.
[ ] Ensure navigation items are clickable and lead to the correct sections of the page.
[ ] Maintain the icon and text structure for each navigation item.

[ ] Use functional components and hooks where appropriate.
[ ] Ensure all existing classes and IDs are properly transferred to maintain styling.
[ ] Optimize the components for performance, avoiding unnecessary re-renders.
[ ] Ensure accessibility features are maintained or improved in the React version.
[ ] Write clean, well-commented code following React best practices.
[ ] Test the components across different browsers and devices to ensure consistency.

[ ] Implement smooth scrolling for navigation items using React libraries or custom logic.
[ ] Add unit tests for the new React components.
[ ] Add intergration + continuous testing through jenkins

All acceptance criteria are met.
The converted React components render identically to the original HTML/CSS version.
The application passes all existing tests and any new tests added for these components.
Documentation has been updated to reflect any changes in project structure or setup.