[Feat]: Navbar and Icon Animation Enhancements

[biswajit-sarkar-007]

Description

Summary of the Problem:

The website currently lacks hover effects and animations on the logo and nav items, making it less engaging for users. Additionally, the cart icon, login icon, favorite icon, and search icon do not have any animations. The search bar styling also needs improvement to enhance user experience and visual appeal.

Expected Behavior:

• Logo Animation: The logo should have a hover effect (e.g., color change, scaling) to make it more interactive.
• Nav Item Animation: Implement responsive underline animations for nav items to enhance engagement when users hover over them.
• Icon Animations: Add appealing animations to the cart icon, login icon, favorite icon, and search icon to grab user attention.
• Improved Search Bar Styling: Enhance the styling of the search bar for better visibility and usability (e.g., border, background color, placeholder text).

Current Behavior:

• The logo and nav items do not respond to user interactions, resulting in a static experience.
• Icons lack any form of animation, reducing their visibility and engagement.
• The search bar is styled poorly, making it less noticeable and harder to use.

Benefits:

• Enhanced User Engagement: Adding hover effects and animations increases interactivity, encouraging users to explore the website.
• Improved Aesthetics: Dynamic animations and improved styling contribute to a modern and polished appearance, enhancing the overall design.
• Better User Experience: Providing visual feedback through animations and better search bar design helps users feel more connected to the website and its features.

Labels:

• Type: Enhancement
• Priority: Medium
• Status: Open
• Area: UI/UX

Screenshots

Checklist

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I'm a GSSoC'24-Extd contributor
• [X] I'm a Hacktoberfest'24 contributor
• [X] I am willing to work on this issue (optional)

[github-actions[bot]]

Hello biswajit-sarkar-007! Thanks for opening an issue in Ezyshop! 🚀

• We'll get back to you as soon as possible.

• Hope you star our Repo.

• Join our Discord Server to collaborate and discuss further.

[mdazfar2]

Hey @biswajit-sarkar-007, I don't know how that feature got removed from the navbar. Can you resolve it as soon as possible? If you can please let me know and create PR as soon as possible.

When we switch from the home page to the about page or any other page using the navbar, the mark does not show, as you can see in the screen recording below for better understanding.

https://github.com/user-attachments/assets/6931d09a-0953-407b-9e6e-6e0bc48157ce

• And also share demo video of your changes while creating pull request.

Hope you understand

[biswajit-sarkar-007]

Okay, I will try to do it as soon as possible and also consider marking the navigation items when switching from one page to another.

[mdazfar2]

Okay, I will try to do it as soon as possible and also consider marking the navigation items when switching from one page to another.

Yes.