Description
Currently, the navbar links (Product, Templates, Resources, Contact, Team) only change their text color when a user hovers over them. While functional, this interaction feels minimal and static.
To improve the user experience and give the landing page a more modern, premium, and dynamic feel, I propose adding a smooth sliding or fading underline animation beneath each active navbar list item upon hovering.
Proposed Solution
Implement a CSS-based underline hover effect on the navbar links.
Behavior: When a user hovers over a link, an underline will smoothly animate into view . When the cursor leaves, the line will smoothly transition out.
Implementation Details: This can be cleanly achieved using standard CSS/Tailwind CSS pseudo-elements (::after) combined with transitions, ensuring zero impact on performance or accessibility.
content: ''
position: absolute
transform: scaleX(0) changing to scaleX(1) on hover.
transition: transform 0.3s ease-in-out
Expected Behavior:
Text changes color + a sleek animated line appears directly underneath the hovered item, matching the brand's primary/accent color palette.
Desktop / Mobile View Impact
Desktop: Enhances micro-interactions significantly.
Mobile: Will be safely contained or disabled on mobile dropdowns where hover states don't apply to touch events, ensuring no layout breakage.
Contribution Checklist
@mayo-byte07 Please assign it to me! under GSsoC
Description
Currently, the navbar links (Product, Templates, Resources, Contact, Team) only change their text color when a user hovers over them. While functional, this interaction feels minimal and static.
To improve the user experience and give the landing page a more modern, premium, and dynamic feel, I propose adding a smooth sliding or fading underline animation beneath each active navbar list item upon hovering.
Proposed Solution
Implement a CSS-based underline hover effect on the navbar links.
Behavior: When a user hovers over a link, an underline will smoothly animate into view . When the cursor leaves, the line will smoothly transition out.
Implementation Details: This can be cleanly achieved using standard CSS/Tailwind CSS pseudo-elements (::after) combined with transitions, ensuring zero impact on performance or accessibility.
content: ''position: absolutetransform: scaleX(0) changing to scaleX(1) on hover.transition: transform 0.3s ease-in-outExpected Behavior:
Text changes color + a sleek animated line appears directly underneath the hovered item, matching the brand's primary/accent color palette.
Desktop / Mobile View Impact
Desktop: Enhances micro-interactions significantly.
Mobile: Will be safely contained or disabled on mobile dropdowns where hover states don't apply to touch events, ensuring no layout breakage.
Contribution Checklist
I have searched existing issues to ensure this hasn't been reported or proposed already.
This issue is completely modern, non-breaking, and purely handles UI/UX enhancement.
I would like to work on this issue.
@mayo-byte07 Please assign it to me! under GSsoC