Enhanced "Scroll-to-Top Button" UI/UX Matching to "Website's Design" Theme

[MastanSayyad]

Hey @sanjay-kv | Issue Closes #271

This PR enhances the user interface and user experience of the scroll-to-top button on the GirlScript Summer of Code (GSSoC) website.

Previous button

The previous implementation of the button was functional but

• Lacked visual appeal,
• Does not match the website design theme and responsiveness.

This update aims to improve both the aesthetics and usability of the button.

• I have used React.js with styled-components for dynamic styling and animations.
• Utilized keyframes in styled-components to create smooth and responsive animations for the button.

Changes I Made

• Updated the button styling to use a round shape with increased size 42px diameter.
• Changed the button color scheme to Match website's design theme. #FF6024 base color | #FF733F on hover
• Hover effects to provide visual feedback to users.
• Added a slight upward bounce animation (transform: translateY(-3px)) to the arrow inside the button on hover.

https://github.com/girlscript/gssoc-website-new/assets/101971980/a0c45b3d-dabe-4f3e-890a-aa2d7e8d5870

Additional Changes

In the footer, the button's color was blending due to same design theme

https://github.com/girlscript/gssoc-website-new/assets/101971980/7fe5a6de-53e8-4398-92af-215c3cd6b838

To to overcome that issue I have:

• Conditionally changed the button's appearance when the user scrolls near the bottom of the page.
• When near the bottom, the button transitions to a black color with 80% opacity background: black; opacity: 0.8 to blend better with the page context.
• On hover while near the bottom, the button becomes fully opaque opacity: 1, ensuring clarity and visibility.

https://github.com/girlscript/gssoc-website-new/assets/101971980/79c46bd2-7548-472c-b960-66c0765b62b1

Overall Screen Record

https://github.com/girlscript/gssoc-website-new/assets/101971980/22d6115b-cb26-4255-b44a-d44b6116eb97

I hope I was able to explain all the changes I made and the functionalities I have enhanced

Please take a look and review it, Thank You For The Opportunity!!

[sanjay-kv]

Your documentation of the issue and explanation is awesome. As a developer, this is very important in the organization, Thanks for contributing.

I have reviewed and merged this PR, as of now this wont appear in leaderboard as I'm making it private and by end of july this will be available on leaderboard. else people come and spam on issues. Let me know if you find anything else which we can improve on the website.

Kindly give your email ID as well, I will send you the XYZ domain as an token of appreciation.

[MastanSayyad]

@sanjay-kv The feedback is what drives us to continuously improve and contribute more effectively. I'm glad to hear that the documentation and explanation were helpful. Also Thank you for your kind words and for merging my PR.

My email ID is: sayyadmastan78@gmail.com

Thanks again for the opportunity and the token of appreciation.