feat(ui): Add hover to header section

[justin212407]

Title of the Pull Request

• Have you renamed the PR Title in a meaningful way?

Related Issue

Closes: #226

Description

The header section of the website did now has hover effects on it when the mouse pointer is brought to point a certain component in the header section.

Type of change

The header section of the website did not have any hover effects on it before i have added that by making changes in the styles.css file.

What sort of changes have you made:

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Code style update (formatting, local variables)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist

• My code follows the code style of this project.
• I have followed the contribution guidelines
• I have performed a self-review of my own code.
• I have ensured my changes don't generate any new warnings or errors.
• I have updated the documentation (if necessary).
• I have resolved all merge conflicts.

Screenshots:

Before:

After:

@PriyaGhosal please review this.

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 59 minutes (more than 100, code: "api-deployments-free-per-day").

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 55 minutes (more than 100, code: "api-deployments-free-per-day").

[justin212407]

@PriyaGhosal i have already put two pull requests but it shows up the same each time please check and kindly let me know
about what the issue is

[PriyaGhosal]

@justin212407 Please see the conflicts highlighted in the image above. Resolve the conflicts in the mentioned files. Ensure you pull all the latest changes before pushing your feature/bug fixes to the main branch. After resolving the conflicts, please open a new PR for review.
Thank you!