Implement "Scroll Progress Bar" for Improved User Experience

[MastanSayyad]

Hey @sanjay-kv | Issue Closes #273

This pull request introduces a new scroll progress bar feature to the Girlscript Summer of Code (GSSOC) website, enhancing navigation and user experience on long pages such as "About GSSOC," "Teams," "Services," "Sponsors," "Projects," "Blogs," and "Leaderboard" etc

Changes I Made

• Created a new ScrollProgressBar component in components/ScrollProgressBar.js.
• The component calculates the user's scroll position and updates the progress bar width accordingly.
• Added styles for the scroll progress bar into styles/global.css for consistent application across the site.

The issue I face was that whenever I scroll down and the bar updates, it remains same when I navigate to the other pages to overcome that issue:

• I Added logic to reset the progress bar state when navigating between pages using Next.js's useRouter hook.

Feature Ensures

• The scroll progress bar provides a visual indicator of the user's position on lengthy pages, making it easier to navigate through large amounts of content.
• Enhances user satisfaction by providing a clear and intuitive navigation aid.
• Ensures the progress bar resets on page navigation, providing a consistent and expected user experience.
• Ensured that the progress bar styles are part of the global CSS, following Next.js guidelines and avoiding module import issues.

Screen record

https://github.com/girlscript/gssoc-website-new/assets/101971980/694535a5-c29d-45e3-bee9-57a3700b1a28

Please take a look and review it, Thank You!!