✨ Navigation & Hover States - Improve website hover effects, spacing, and icon consistency

[tiagov8]

Requested by: @tiagov8 via YakShaver.ai 🦬
cc: @tiagov8, @isaaclombardssw, @babakamyljanovssw @joshbermanssw @designbyalex

Hi Team!

  🟥  Watch the video (3 min 23 sec)

  Url from screen share: https://ssw.com.au

Pain

Update the ⭐ SSW Website (Dev - Next.js) UI interactions and styling to improve consistency, readability, and usability across the main navigation, featured sections, product links, playlists, and rules pages. This includes refining hover states, adding transitions, improving spacing, standardizing link behavior, and reviewing inconsistent or unclear icon usage.

Acceptance Criteria

1. Main navigation menu arrows change to red on hover together with the menu text.
2. Main navigation hover states include a smooth transition effect from white to red.
3. Dropdown menu items and icons have increased padding and spacing from surrounding content.
4. Featured section hover states use a more subtle darker gray hover effect with improved text readability.
5. "Book Now" cards/buttons include a hover state consistent with other interactive elements.
6. "View All" links are styled as secondary buttons with a visible border in the default state.
7. Hover states for product links and latest videos links are standardized to use the SSW red hover color.
8. Inconsistent gray hover styling on latest videos links is removed.
9. Rules and playlists pages are reviewed for inappropriate or confusing icons (e.g. search icon for latest rules, user group icon for playlists) and updated where necessary.
10. Playlists with only a single item are reviewed and styled appropriately.
11. All updated hover states and buttons remain accessible with sufficient contrast and clear affordance.
12. Changes are implemented consistently across desktop navigation and related content sections.

Reproduce Steps

1. Open the SSW website homepage.
2. Hover over items in the main navigation menu and observe that arrows do not change color and transitions are abrupt.
3. Open dropdown sections such as Products and observe tight spacing between icons, text, and content.
4. Hover over cards in the featured section and observe harsh hover contrast and reduced readability.
5. Locate the "Book Now" card/button and observe the missing hover state.
6. Locate the "View All" link and observe that it appears as plain text until hovered.
7. Navigate to Latest Videos and observe inconsistent hover colors compared to other links.
8. Navigate to Rules and Playlists pages and review icon usage and single-item playlist presentation.

Screenshot

Figure: Main menu hover arrow color inconsistency