feat: Improve navbar UI with hover and background effects

[Iqra-hussain235]

✨ Navbar Enhancement – Visual & UX Improvements
🔧 Changes Made:
Improved the navbar styling for a more visually appealing UI.

Added hover effects and transition animations for smoother user interaction.

Highlighted the active route/tab to improve navigation feedback (e.g., Home, About, Contact).

Applied multi-color theme accents to enhance aesthetics.

🎯 Purpose:
These updates aim to:

Improve the user experience.

Add interactivity to the static header.

Make navigation more intuitive and accessible.

[greptile-apps]

Greptile Summary

This PR enhances the navbar UI by replacing the existing Bootstrap-style navbar with a custom implementation featuring modern interactive elements. The changes transform static navigation links into dynamic components with hover effects, scaling animations, and underline transitions. The new styling removes the previous .navbar, .navbar-brand, and related Bootstrap classes, implementing a custom approach with position: relative navigation items that include color transitions, background effects, and box shadows on hover.

The active state styling provides visual feedback for the current route with distinct background colors and modified hover behavior. An animated underline effect using CSS ::after pseudo-elements creates a sliding animation that appears on hover. These changes align with the codebase's focus on providing an engaging user experience for developers practicing coding challenges, making the navigation more intuitive and visually appealing.

However, there's an unrelated change where the officialCode file has been completely emptied, which appears disconnected from the navbar enhancement goals stated in the PR description.

Confidence score: 2/5

• This PR has significant concerns that need attention before merging, particularly an unexplained file deletion and potential responsive design issues.
• The confidence score is low due to the complete removal of the officialCode file without explanation and fixed positioning values in CSS that may not work across different screen sizes.
• Files needing attention: officialCode (unexplained deletion), styles/main.css (responsive design concerns with fixed positioning)

_{2 files reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

style: The transform: scale(1.05) may cause layout shift on hover. Consider using transform-origin or padding adjustments instead.