grabtern-frontend icon indicating copy to clipboard operation
grabtern-frontend copied to clipboard

šŸš€ [Feature Request] Enhance Navbar Interactivity and Styling

Open biswajit-sarkar-007 opened this issue 1 year ago • 4 comments

Is your feature request related to a problem ? Please describe. āœļø

have noticed the following in the website's navbar:

  1. Logo: There is no hover effect or animation on the logo, making it less interactive.
  2. Nav Items: The nav items could be more engaging with additional hover effects and animations.
  3. Sign-up Button: The sign-up button's styling lacks visual appeal and does not grab the user's attention effectively.

Describe briefly how you would implement this enhancement.

Step 1: Add hover effects and animations to the logo for better engagement.
Step 2: Implement smooth hover animations (e.g., underline effect, color transition) to the nav items.
Step 3: Redesign the sign-up button with improved styling and animations to make it visually appealing and attention-grabbing.

Additional context or screenshots

Adding these enhancements will improve the overall user experience by making the website more interactive and visually appealing. The hover effects and animations on the logo, nav items, and buttons will help engage users and direct their attention to important sections of the website. This improvement is aimed at making the website more dynamic, responsive, and attention-grabbing for visitors.

Screenshot:

navbar_improvment

Are you contributing for a program?

GSSoC2023

Code of Conduct

  • [X] I have read and agree to the Contributing Guidelines of this project.

biswajit-sarkar-007 avatar Oct 17 '24 20:10 biswajit-sarkar-007

Hello @biswajit-sarkar-007! Thank you for raising this issue. Please make sure to follow our Contributing Guidelines. Don't forget to ⭐ our Grabtern-Frontend.

Our review team will carefully assess the issue and reach out to you soon! We appreciate your patience!

github-actions[bot] avatar Oct 17 '24 20:10 github-actions[bot]

Hello! I’m Sudipta Paul, with 1.5 years of experience in blockchain and web development. I’m interested in working on this feature to improve the navbar's interactivity and visual appeal, making it more engaging for users.

My approach to tackle this issue:

I will add a subtle hover animation to the logo to create visual engagement. This could include a gentle scale effect or color transition to make it stand out when hovered.

I'll implement smooth hover effects, such as an underline animation or color transitions on the nav items This will enhance user interaction and provide a dynamic feel as users navigate. will redesign the sign-up button by updating its styling and adding animations. To grab attention, I'll focus on elements like shadow effects, gradients, and a scale animation on hover. This will make it more appealing and visually prominent.

And at last testing of all the new changes

SudiptaPaul-31 avatar Oct 26 '24 14:10 SudiptaPaul-31

Can I jump on this task?

jaygupta18 avatar Feb 27 '25 19:02 jaygupta18

May I take care of this?

Promise278 avatar Mar 21 '25 20:03 Promise278